Web関連

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

0

ishizuka_mood01.png

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

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

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

1.ムードボードとは

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

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

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

ishizuka_mood02.png

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

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

ishizuka_mood03.png

1.とにかく貼り出す

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

2.整理する

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

3.テーマを決める

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

まとめ

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

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

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

関連するサービス

ホームページ制作

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    Webサイトメンテナンスの重要性

    今年のプロ野球は、松坂投手や黒田投手が戻ってくることもあり、とても楽し…

  2. Web関連

    javascriptの流行りの紹介

    今回は、javascriptの流行りのなかで、まだまだ今後も流行ってい…

  3. Web関連

    カッコイイWEBデザインは必要なのか?

    カッコイイWEBデザインについての考察。よくよく考えるとカッコイイWE…

  4. Web関連

    iPhone 6sが気になる!!

    iPhone 6sが気になる!!アップルからiPhone 6sが発売…

  5. AI関連

    気付いてますか?ビジネスで愛されるタブレット端末

    世の中はタブレット端末で溢れている今や当たり前になったタブレット端…

  6. Web関連

    アレが欲しい!ときに使いたいファッション通販サイト紹介(第1弾)

    こんにちは。デザイナーのイゲタです。洋服が欲しくなったとき、みなさん…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. AI関連

    エッジコンピューティングってなに?
  2. Web関連

    web制作初心者にとって勉強になるサイト10選!
  3. Web関連

    ホームページのリニューアルはいつすればいいの?
  4. Web関連

    【ホームページ制作】UI設計の基礎の基礎!WEBサイトに必要不可欠なナビゲーショ…
  5. AI関連

    【人工知能(AI)×災害対策】AIが台風を予測しビジネスにも変える!?
PAGE TOP