ブログデザインをリニューアルしました!

デザイナーのNです。

普段はUIデザイナーとして日々業務に携わっているのですが、

今回当開発者ブログ改めBOOK☆WALKER Tech Blogのリニューアルを担当することになり、先日無事公開いたしました!

早速ですがリニューアルにあたっての諸々の経緯やこだわりポイントなどを紹介していきます。

 

そもそも改修のきっかけ

元々社内でも「改修しないとな」という意識があり、近年の積みタスクとなっていました。

(というのも、改修前はあまりデザインも入っておらずページそれぞれのデザインも統一されていなかったのです。)

そんな折、ちょうどBOOK☆WALKERのコーポレートサイトをリニューアルしようという動きもあり、

ならばブログも!といった流れで一緒にリニューアルすることとなったのです。

(コーポレートサイトもリニューアルしたのでぜひ見てみてくださいね。)

 

意外に大変だった道のり

そんなこんなでこの「チーム・コーポレート」のブログ担当として

急遽アサインされたデザイナーのNですが、

アサイン当初はプロジェクトの規模も把握しておらず「なんだか良い感じのデザインにできたら」ぐらいに考えていました。

がしかし蓋を開けてみれば調査するべきことや、

コーポレート周りだということでしっかり考えなくてはいけないことも多くチーム一同手探りで進めることとなります。

 

1.方向性決め

まずはプロジェクトの基盤である「方向性」や「目的」をしっかり決めなければなりません。

それはこのブログの存在意義についての方向性や目的でもあるし、

当ブログ並びにコーポレートそのものもデザインの方向性を考える必要がありました。

情報量が少ない中で言葉を拾い集めては議論し、正解を見つけていく━

そんな工程を繰り返し、結果一つの方向性として定めることができたのです。

 

BOOK☆WALKERでは「(作家と読者の)好きと好きを繋げる」というテーマを掲げています。

そのワードからアイデアを広げていき、

結果「親しみやすくフレンドリー」、そして「誰もが手に取りやすいシンプル」という指針へと辿り着きました。

またブログの具体的な目的としてBOOK☆WALKERに興味のある人に見て欲しいという意見から発展して「採用を考える指標にしてもらう」という方針に決定しました。

 

2.デザインの作成

そうしてここからが第二のスタートです。

まずは言語化したものを具体的なデザインに落とし込む前に、当プロジェクトにおけるムードボードを作成します。

ムードボード

ムードボード

ムードボードの方向性にズレや齟齬がないか確認した後さらに詳しくカラートーンやテキストルールを制定して足並みを揃えていきます。

別のものではあるけれどあくまでコーポレートとブログは同一線上にあるように。

お互い認識の齟齬がないよう密にすり合わせつつ進行していきました。

そうして、全ての認識が揃った上でブログのデザインを作成しました。

カラーコード

カラートーン

 

こだわりポイント

なんといってもオリジナルのメインビジュアルです。

外注のイラストレーターさんにラフを提出し、一から拘って作ったビジュアルはブログ・コーポレートともにBOOK☆WALKERを象徴する素敵なビジュアルになりました。

f:id:bookwalker_developers:20211104155643p:plain

提出したイラストラフ

メインビジュアル

仕上がりメインビジュアル

そして色合いは温かくも元気のあるパステルカラーを使用し

あしらいも全体的に丸くすることで当初の方向性でもある親しみやすさを意識しています。

またコーポレートとほぼ同じ使用感やデザインにすることで

全体のまとまり、プロジェクト通してのシンプルさを目指しました。

 

今後のブログの未来

さて、ここまで色々語ってきましたが、いくらデザインをリニューアルしたところで

今後の運用次第でこのブログの生き方は変わってくるでしょう。

生まれ変わったブログをより良いものにしていくべく、メンバーみんなで今後もたくさんの記事を更新予定です!

ぜひ今後も当ブログの成長を見守っていてくださいね。