独学・フリーランス・在宅・SNS疲れのWebデザイナーに
ビジネスの知識が加われば最強。自分の力で生きていけます。

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

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

こんにちは。フクモト学長(@WebcreatorsTips)です。未経験からフリーランス歴15年のWebデザイナーです。スクール運営 8年目になります。
詳しいプロフィールはこちら

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

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

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

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

ムードボードを作る作業は
  • 余白やグリッド、文字の扱い、配色などについて新たな発見につながる。
  • イメージを具体化するトレーニングになる。
  • 打ち合わせ準備や提案の際の資料作成にも役立つ。

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

  • 独学やスクール卒業後間もなく、実案件の経験が少ないWebデザイナーがひとりで制作する。
  • 5ページ程度のフランス料理店のWebサイト。
  • ヒアリングと打ち合わせが完了している。
  • コンセプトがある程度固まっている。

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

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

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

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

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

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

重要です!

最終的に、自分がコーディングができるレベルのWebデザインを提案するのも大事なポイントです。

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

参考までに!
コンセプトシート参考資料

このコンセプトシートは、スクールの課題として出している資料です。
よろしければ参考にされてください。
※仮案件なので実在しないお店です。
コンセプトシートを見てみる(Googleドキュメントが開きます)

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

Webデザインのムードボード ピンタレストの例

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

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

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

ピンタレストでの新規ボードの作り方とピン(保存)の方法
【アニメーション 1分40秒】

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

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

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

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

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

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

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

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

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

ピンタレストからPhotoshopでイメージボードを作る
【アニメーション 1分20秒】

※上記アニメーションの画像はデザインの参考までにピックアップさせていただいています。
掲載に問題がある場合は、⇒問い合わせフォームからご連絡ください。

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

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

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

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

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

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

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

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

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

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

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

打ち合わせ前
事前に送ったヒアリングシートをもとに、こういった資料を準備して打合せにのぞむ。
ビジュアルで確認することで、ぼんやりとしたイメージがはっきりとして、認識を合わせていくことができます。

提案時
提案資料の中にムードボードの項目を入れてみるのもよいです。
もちろん、クライアントにもムードボード作成に参加していただけるのがベストです。

制作時
ワイヤーフレーム、デザインカンプ、デザイン素材作成時の余白やグリッド等の参考になる。

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

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

まとめ

Webデザインのムードボードは
  • ムードボードを作ることは新たな発見につながる。
  • 打ち合わせや提案資料に入れることで、デザインの方向性について認識を合わせることができる。
  • ピックアップはピンタレストがおすすめ。
  • 初心者でも実装できそうなデザイン・レイアウトを集める。
  • 集めたデザインをイメージ別に分類する際にはシンプルなキーワードで分ける。

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

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

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

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

デザイナーのスクラップブック

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

Webクリエイターズスクール 学長 フクモトトモコ

【Webクリエイターズスクール】
学長 福本 智子

Webもデザインも未経験からいきなりフリーランス歴15年。
『仕事は自分で創りだす』をモットーに生きてきた50代。
Photoshop・WordPress・Webマーケティングが得意。

独学・Webスクールを卒業したのに仕事に繋げられない学習迷子さん、在宅・フリーランス希望の人を対象に「学んだ事を安定的な収入にする方法」をお伝えしてサポートしています。

関連記事

受講者の声

「動き出せない
あなたの背中を押します!」

組織に依存しない自由な働き方を
手に入れるためのオンラインスクール・オンラインサロンです。

スクール最新情報、フクモト学長の活動はメルマガで配信中~。