Webデザインのムードボードの作り方

ムードボードとはデザインのアイデアやヒントとなる素材を集め、紙面や画面上で一覧できるようにしたもの。

このムードボードは、デザイナーのみならず、Web制作に関わる人たちにとって「新しいWebデザイン」を考えるのに非常に効果的なツールとして活用されています。

ムードボードを作るメリット

Webサイト全体のイメージを決めるとき、経験の少ない人が「何もないところ」から生み出そうとしても上手くいきません。
既にある、よいWebデザインから学べることはたくさんあります。

このページでは、以下の案件を想定して参考となるWebサイトを活用してムードボードを作る方法をお伝えします。

それでは、ムードボードを作っていきましょう。

1：参考となるWebサイトを集める

まずは、制作するWebサイトと同業種のWebサイトを見て回り、参考になりそうなWebサイトをピックアップしていきます。

ピックアップはGoogle検索や参考サイトをまとめているギャラリーサイト、ピンタレストなどを利用します。

おすすめはピンタレストです。
ギャラリーサイトでもよいのですが、ファーストビューだけが並んでいたり、エフェクトやアニメーションが採用された高度な技術が必要なWebサイトが紹介されているので、参考にしにくいです。

ピンタレストでは、Webサイトの全体が見える画像が一覧できたり、実案件だけでなく提案レベルのWebデザインもあり、初心者でも実装できそうなデザイン・レイアウトが豊富にあります。

ここでは、ピンタレストを利用して「フランス料理店のWebサイト」を制作する想定で、コンセプトシートも頭に入れながら参考となるサイトを集めてみました。

以下はピンタレストで集めた参考サイトです。
⇒ ボードはこちらから見れます。ピンタレストボード【ビストロ案件】

ピンタレストでの新規ボードの作り方とピン（保存）の方法

ピンタレストはGoogleアカウントやFacebook、LINEを連携して利用できます。
⇒ Pinterest（ピンタレスト）のサイトはこちら

「検索する⇒参考になる画像にマウスオーバー⇒プルダウンメニューから新規ボード作成」の流れで一つボードを作り、そこに参考デザインをピン（保存）していきます。

ここで検索したキーワードは「webサイト フランス料理」「飲食店 webデザイン」などです。
Webサイトに限らず、チラシやパンフレット、ポスターなど参考になりそうなデザインがあれば、それもピックアップしていきます。

1：集めたデザインをイメージ別に分類する

集めたWebサイトをイメージ別に分類します。
ここでイメージ別に分類することが難しいという方はシンプルなキーワードで分類していきましょう。

「明るい・暗い」「鮮やか・くすんだ」「白が多い・黒が多い」といったキーワードで大丈夫です。
これは・・・トンマナのところで出てきた明度や彩度に似ていますね。

Webデザインのトンマナに関してはこちらにまとめています。

以下は、ピンタレストから画像をコピーしてPhotoshopに張り付けて作成した資料です。
ここでの作業は、エクセルやパワーポイントなど、あなたがいつも利用しているツールでOKです。

例えば、iPadでスクリーンショットを取り、Goodnotesなどのアプリで開いて作成していくのも手早くできそうです。（この辺りは別の機会に！）

ピンタレストの画像はダウンロードすることができます。
画像をクリックして実際のWebサイトを見に行くこともできます。
（関連ページに移動するだけの場合もあります。）

ダウンロードではなく、以下のように画像を右クリックして「画像をコピー」⇒Photohsopにペーストしていくと早いです。
ペースト後、command（Ctrl）＋Tで変形モードに入り（メニューバー＞編集＞自由変形）サイズ調整して並べていきます。

このような感じでムードボードができていきます。

Photoshopで作成したムードボードのサンプル

ここでは、「ライト・清潔・白多め」「メインカラー多め・ライトとダークの中間」「ダーク・本格的・黒多め」「アナログ感をプラス」という4つのイメージに分類できました。

ここにクライアントの業種に関連するキーワードをひとつ、ふたつ入れるようにすると上手く分類できます。

例えば、飲食店であれば、「先進的、ファーストフード、高級感、自然素材、オーガニック、味わい深い、家庭的、アットホーム、温かい、団欒、落ち着き、本格的、敷居の高さ・低さ・・・」など多くのキーワードがあります。

もちろん、ヒアリング内容から大きくはみ出さないようにします。

この分類により、具体的にどの方向性でデザインするか見えてきました。

配色ルールや利用する画像も考慮しながら、Webサイトの目的を見失わないようにトンマナとWebサイト全体のイメージを決定していきます。

Web制作過程のどのタイミングで役立つのか

以上、ここまでの作業はWeb制作過程のどのタイミングで役立つでしょうか？

そして、何よりイメージを具体化するトレーニングになりますし、やればやるほど資料作成能力が磨かれ、デザインの引き出しも増えますね。

オリジナルのアイデアが詰まったデザインができるクリエイターほど、こういった作業を繰り返し、多くの引き出しを持っているものです。

まとめ

フクモトのスクラップブック

ムードボードを作るための素材は、今回紹介したデジタル上のものだけでなく、新聞、雑誌、チラシの切り抜き、街で見かける広告、ポスター、商品パッケージやシールなど生活の中の至る所にあります。

そういった素材を普段から集めてデザインのインスピレーションが詰まったスクラップブックを作るのもよいですね。

以下は、私のスクラップブックの一部です。
ロゴや新聞広告の切り抜き、本の帯、ポストカードなどデザインの参考になりそうなものをスクラップしています。

今年からipadで管理しようとしているのですが、やはり紙も捨てがたい。
パラパラとめくるのも楽しいものです。