Webサイトや広告、販促物など、それぞれ一貫性をもってデザインすることで、サービスの世界観やその企業のブランドイメージを伝えられます。
デザインに一貫性を持たせるためのルール、いわゆるトンマナを決めている企業もありますが、使用する色やフォント、素材などをあまりにもきっちり決めすぎると「もっと目立たせたいけどアクセントカラーはこの色って決まってるんだよな～……」「イラストって絶対使っちゃダメなんだっけ？」と表現の幅が狭まってしまうこともあります。
そこで、トンマナよりもっと抽象的な概念でデザインの認識をすり合わせるのに役立つのが「ムードボード」です。
ムードボードとは、さまざまな画像やフォント、配色などを1枚にまとめてコラージュすることで、目指していきたいデザインを視覚的に表現する手法です。
たとえばバナーを制作する上でも、こういったスライドが1枚あるだけでデザインの方向性をすり合わせるのがスムーズになりますよね。
そこで今回は、ムードボードを作成するメリットや具体的な作成方法についてご紹介します。
目次
ムードボードを作成するメリット
「制作のたびに参考画像を探してすり合わせるのではダメなの？」と思う方もいらっしゃると思うので、まずはムードボードを作成するメリットを見ていきましょう。
ブランドイメージをすり合わせる取っ掛かりになる
そもそも「可愛い」「おしゃれ」「カッコいい」などのテイストは、個人が今まで触れてきたコンテンツや経験も影響するため、人によって何をイメージするかは異なります。
たとえば「可愛いイラスト」と言っても、左のようなシンプルなイラストを思い浮かべる人もいれば、右のように書き込みが多い少女漫画タッチのイラストを思い浮かべる人もいますよね。
ブランドイメージも同じく、「そのブランドらしさ」と聞いて思い浮かべるデザインは人によってさまざまです。ムードボードは、そんなブランドイメージをプロジェクトメンバー間ですり合わせる取っ掛かりとして使うことができます。
ブランドの雰囲気に合う画像やフォントを集めたら、誰か1人が判断するのではなく、最終的にプロジェクトメンバーで議論をしながらムードボードを完成させるのが理想的です。「この色がブランドイメージに合っている」「この写真の明るさがうちのブランドっぽいよね」と話し合うことで、より解像度高くブランドイメージをすり合わせることができるでしょう。
このとき、あえて「目指さないデザイン」も一緒に集めると、より細かいニュアンスで話し合うことができるのでおすすめです。
ブランドイメージからズレていないか見直す判断基準になる
1回や2回の制作であればその都度参考画像を集める形でも構いませんが、今後何度もその企業やサービスのデザインをする場合、ムードボードがあるとブランドイメージからズレていないかいつでも見直すことができます。
参考画像ですり合わせるにしても、その参考画像がブランドイメージに合っているかどうかを判断する人が変わってしまえば、結果的に一貫性のないデザインになりかねません。
ムードボードを用意しておくことで、デザイナーやディレクターなど新しいプロジェクトメンバーが加わっても世界観をすぐに掴むことができ、デザインの一貫性を保ちやすくなります。
制作やフィードバックにかかる時間を短縮できる
制作が必要になるたびに参考画像を探すと、その分制作に取り掛かる時間が遅れてしまいます。フィードバックする際も「なんかうちのブランドっぽくないんだよね」という抽象的な指示では、意図を汲み取るのに時間がかかってしまいますよね。
ムードボードを作成するのは大変かもしれませんが、一度作成すればあらゆる制作物に活かせるため、長期的に見ると時間短縮につながります。
また、制作を外注している場合も、ムードボードを作成しておけば世界観の共有がスムーズになり、事前のすり合わせや修正にかかる時間を短くすることができるでしょう。
新たなプロジェクトメンバーが増えるたびに毎回すり合わせる負担も減りますし、制作時間が短くなった分別の施策を考える時間に充てられるようになります。
ムードボードの作成手順
それでは、実際にムードボードを作成する手順をご紹介します。
と言っても、ムードボードに決まったお作法はありません。自由帳のように画像やメモを貼り付けて作成するので、ツールはPhotoshopやFigmaのような画像編集ツールでも、PowerPointのようなプレゼンテーションツールでも大丈夫です。
参考画像を探す作業は1人でも問題ありませんが、それ以外の部分はプロジェクトメンバー間ですり合わせながら進めていきましょう。
STEP1：ブランドから思い浮かぶキーワードを書き出す
まずはこれまでの歴史やコンセプト、顧客アンケートを振り返りながら、ブランドから思い浮かぶキーワードを書き出してみます。
キーワードは以下のようなものです。
「ユーザーにどんな印象を与えたいのか」「ユーザーは何を期待して選んでくれたのか」という2つの視点から考えてみましょう。
「これはイメージと違うよね」というキーワードも、プロジェクトメンバー間で議論しながら認識をすり合わせておきます。
STEP2：キーワードに合う画像・フォント・配色を探す
キーワードが決まったら、PinterestやWebデザインのアーカイブサイト、素材サイトなどを活用しながら、そのキーワードに合う画像やフォントを探しましょう。
この時点では深く考えずに、気になったデザインはとりあえず集めておきます。1つのWebサイトだけではなく複数のWebサイトから参考画像を探すと、同じキーワードでも違った角度のデザインが見つかることもあるため、おすすめです。
フォントや配色は、トンマナでルールがすでに決まっている場合はそのまま踏襲し、決まっていない場合はキーワードに合うものをピックアップします。
ただ、デザインに慣れていないとフォントや色が持つイメージを言語化するのは難しいですよね。こちらの記事でフォントや色が持つイメージについて解説しているので、参考にしてみてください。
STEP3：ムードボードに入れる画像・フォント・配色を選定する
STEP2で集めたデザインを見ながら、どこが良いと思ったか、または違うと思ったかをプロジェクトメンバーと話し合い、ムードボードに入れるものを選定します。
たとえば「安心感」がキーワードの場合、このデザインはなぜ安心感があると感じたのか、配色、フォント、余白、図形の使い方などをチェックして、言語化します。
1枚のバナーでも「色味はイメージに合うけど余白の使い方は違うよね」ということがあるので、どこが参考になると思ったのかわかるようにメモしておきましょう。
また、写真やイラストも印象を左右する重要な要素です。写真に関しては被写体や構図、明るさ、コントラストといった項目をチェックし、イラストは色味やタッチなども見ておきます。
STEP4：画像・フォント・配色を1枚にコラージュする
STEP3で選定した要素を1枚にコラージュします。
ムードボードの目的は「見た人がブランドの世界観を把握できるようにすること」なので、その目的を果たせるのであれば使用するツールも配置方法も自由です。
デザイン経験が少ない方は、「Canva」というツールを使うと比較的簡単にムードボードを作成できます。写真、イラスト、フォント、バナーやアイキャッチのテンプレートまで豊富に揃っており、共同編集が可能なので話し合いながらリアルタイムで修正することもできて便利です。
ただ要素を配置するだけではなく、どこが良いと思ったかメモを入れておくことで、ディスカッションに参加できなかったメンバーも「この画像のここを参考にすればいいんだな」と認識しやすくなります。
また、「これはブランドイメージに合わない」と思った画像やフォント、色についても別の1枚にまとめておくことで、デザインやフィードバックの判断がさらにしやすくなるでしょう。
プロジェクトメンバーで認識のすり合わせが完了したら、ムードボードはいったん完成です！
作って終わりではなくブラッシュアップしながら制作に活用しよう
ムードボードは一度作って終わりではなく、実際にバナーやLP、販促物を作りながら「この視点があるともっと制作がスムーズになる」という発見があればどんどんブラッシュアップしていきましょう。
参考画像を共有するより手間がかかると思うかもしれませんが、ムードボードという判断基準を作ることでデザイン作業もフィードバックもよりスムーズになると考えます。
「バナーを作るとき毎回参考画像を探しているなぁ……」という方は、ぜひムードボードの作成を検討してみてくださいね。
Hikaru Funamizu
新卒で広告代理店にデザイナーとして入社。Web広告に関わる制作とSNS広告運用を経験し、自分のデザインで購入に貢献できることにやりがいを感じる。運用スキルを生かしてデザインが出来る環境に惹かれ2022年11月よりアナグラムに入社。 目的を持ち、依頼者の期待に1ミリでも超えられる仕事をすることを意識しています。
