ホームページのデザインに限らず、様々なデザインワークを行う際にイメージの擦り合わせは意外と大変な作業です。配色一つをとっも、ビビットな感じが良いのか淡い色がいいのか。プロジェクトメンバーの間だけでなくクライアント様との間でも認識の差異が生まれやすいので、しっかりと認識を合わせてプロジェクトを進めたいと考えています。ビジュアルの方向性に差異が発生しそうな場合はムードボードを用いてスムーズにイメージの擦り合わせを行いましょう。
デザインの方向性を決めるムードボードとは
ムードボードとはデザインや写真、カラーパレットからアイディアやコンセプトをひと纏めにし、コラージュっぽく仕上げるイメージの事を指します。具体的にデザインしなくてもトーン＆マナーがひと目で分かったり、具体的なイメージが湧いたりプロジェクトをスムーズに進める上で大変便利なツールです。
チーム内のイメージを共有するために作成する
コンセプトや要件など文字情報や抽象的な指示だけでは、どの様な方向性なのか具体的に見えてきません。ムードボードを用いることで全体のイメージや方向性を可視化し具体的なイメージの共有が出来ます。またクライアント様にもコンセプトや方向性を示すことが可能となり、初稿のデザイン案のクオリティーを上げることが出来ます。
プロジェクトの全体像が事前に把握できる
デザインが仕上がる前に具体的な全体像が見えてくるので、オリエンテーション時にでたアイディアをデザインが出来上がる前に事前に把握することができます。ただムードボードで示したことが全てではないので、ムードボードは一つの意識確認のツールということと認識していただきたいです。
ムードボードのサンプル
こちらは若手の弁護士がウェブを中心とした集客手法で新たに事務所を立ち上げるといったプロジェクトを想定したムードボードです。具体的にイメージを置くことでデザインの方向性が見えてくると思います。使用するフォントだったり、キーカラーからポートレートをどの様な雰囲気にするかなど、1枚のイメージで様々な印象を見せることができます。
ムードボード作成には制約や決まりはありません。ビジュアルやデザインの方向性の共有ができれば良いので、補足の文章をいれたり、参考デザインをペタペタ貼ったり、自由に作りましょう。
ムードボード作成時に役立つサイトやツール
ムードボードはイラストレーターやフォトショップを使用しなくてもパワポやエクセルで作成しても問題ありません！ただ制作にあたって様々なイメージを集める必要があります。イメージもできればクオリティの高いものを使用したいですね。下記はイメージ素材を集める際に役立つツールやサイトです。
Pinterestは画像共有ができるホームページで、様々なデザインが投稿されています。ムードボードの作成以外にもベンチマークサイトを探す際にも使えます！
BURST
最近、TVCMも放映されているSpotifyが運営する写真ストックサイトです。様々なシーンを集めたサイトでクオリティの高い写真を集めることができます。
Coolors
Coolorsは様々な配色サンプルを集めたサイトです。濃淡も調整することができるので、配色のバリエーションは無限大です。お気に入りの配色を見つけたらキャプチャを取っておきましょう！