Web関連

そうそうコレコレ!複数人でちゃんとデザインの方向性を認識統一できる「ムードボード」 の使い方

ishizuka_mood01.png

プロジェクトで制作したデザインが「なんかイメージと違う…」となってしまったこと、

デザイナーの方なら一度は経験したことあるのではないでしょうか。

「キーワードや参考サイトなど、しっかりヒアリングしたはずなのにどうして?」
今回は、こうしたデザインの認識違いを防ぐのに有効な方法、「ムードボード」についてご紹介します。

1.ムードボードとは

ムードボードについての公式な説明文はありませんが、いくつかの技術系サイトでは「ある「イメージ」を複数人で共有するために、写真やイラストをスクラップ状に貼り付け、視覚的に分かりやすくしたもの」といった内容で紹介されていました。

例えば、「可愛い」というキーワードに対して
「女の子、ピンク、ふわふわ」というイメージを抱く人もいれば、
「赤ちゃんや小動物、カラフル、丸っこい」というイメージを抱く人もいます。

このように、人によって異なるイメージも、一度写真で貼りだすことによって
「それはイメージと違う」「これはイメージに近い気がする」と、
言葉によるイメージの違いや誤解を防ぐことができ、プロジェクト内で認識統一をすることができます。

ishizuka_mood02.png

2.ムードボードの作り方

決められた作り方、フォーマットはありませんが、
PhotoshopVIPさんで様々なサンプルが紹介されています。
以下、効果的なムードボードを作るためのポイントをまとめました。

ishizuka_mood03.png

1.とにかく貼り出す

ブレインストーミングのように、とにかくイメージに近い画像をたくさん貼り出しましょう。
一見、プロジェクトに関係のないようなジャンルの画像でも構いません。
コスメ系のデザイン制作だったとしても、イメージに近いと感じたなら、食品パッケージの画像を選んでもOKなのです。

2.整理する

画像を出しきったら、イメージを固めるために整理をします。
イメージと異なるものは排除し、残った画像も
「メインとして使う写真」「配色」「フォント」「アイコン、パーツ」など
どの部分の参考とするものなのかカテゴリを分けましょう。

3.テーマを決める

「信頼性」「清潔感」など、全体のテーマを決めます。
写真の色調は鮮やかなものかレトロ調か、
同じ⻘でも⽔色に近いものか、エメラルド色に近いものかなど
選ぶべき画像のポイントがより明確になり、ムードボードに⼀貫性が生まれます。
プロジェクトのコンセプトとズレがないかも再確認できます。

まとめ

いかがでしたでしょうか。
言葉だけでは、イメージを伝えるのも想像するのも難しいことです。
プロジェクトでお互いが正確なデザインイメージを描き、スムーズに制作を進めるためにも
ムードボードを活用してみてはいかがでしょうか。

Web制作でお困りの方はWeb制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

なぜ2MBなの!?ビジネスマナーの意外な理由前のページ

こんなのあったの・・!?驚愕のアプリ集次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 新型コロナウイルスで日本の働き方改革が起こる
  3. 新しい販売形態であるDtoCについて考えてみる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    万能のUIなんか存在しない!?

    最近、強化ガラスのキーボードが気になっているIAの加藤です。見た目が、…

  2. Web関連

    SiriとOK Googleはどっちが優秀か、Web制作会社がやってみた。(Siri編)

    体験レポートとは?ティファナのスタッフが巷で話題になっていることや…

  3. Web関連

    オンラインショッピングしたことありますか?

    こんにちは!IAの鑓水です。今回はついつい使う、オンラインショ…

  4. Web関連

    シームレス化が進む!1つのWordPressで複数のサイトを更新する方法とは?

    ネット活用のシームレス化を考えるに辺り、運用者側も同一の管理画面を利用…

  5. Web関連

    フェイクニュースに騙されていませんか?

    皆さんは自分が見た情報の真偽を正しく見抜けていますか?噂話、風刺な…

  6. Web関連

    ホームページ制作の大きな失敗原因と解決方法はこれだ!

    ホームページ制作の失敗の原因と解決方法はこれだ!失敗する原因は3つ、解…

おすすめ記事

最近の記事

  1. DX(デジタルトランスフォーメーション)・デジタルシフトへの…
  2. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  3. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  4. 非接触がこれからの常識。ウィズコロナ・アフターコロナはIoT…
  5. キャッシュレス決済はウィズコロナでのウイルス対策に繋がってい…

アーカイブ

  1. Web関連

    「ハッカソン」って何?知らないと恥ずかしい?IT業界でよく聞くコトバ
  2. Web関連

    サイトの骨格、ワイヤーフレームとは
  3. Web関連

    あなたは何目線で見る?面白マップ!
  4. SNS関連

    上手く活用できていますか?企業としてのTwitter活用術
  5. Web関連

    CMSの強い味方!? 高さを自動調節してくれるjQueryAutoHeight.…
PAGE TOP