インスピレーションを活用する–ムードボードのガイド

公開: 2022-03-11

デザインプロジェクトのインスピレーションを見つけることは一つのことです。 それを整理し、そのインスピレーションを、クライアントとユーザーを驚かせるデザインを作成するためのよりまとまりのある基盤に変えることは、まったく別の獣です。

ソリューション? ムードボード。

ムードボードは、画像、素材、テキスト、その他のデザイン要素を最終的なデザインのスタイルを表す形式に配置する物理的またはデジタルのコラージュです。 ムードボードは、ブランドデザイン、製品デザイン、Webサイトのデザイン、およびその他のほとんどすべてのタイプのデザインプロジェクトの作成に使用できます。

ムードボードの目的

ムードボードは、プロジェクトに関するインスピレーションを整理することから始めて、多くの目的を果たすことができます。 これらは、スタイルと美学を一貫性のあるものに保ち、クライアントの目標と期待に沿ったものにするために、デザインプロジェクト全体で貴重なリソースになる可能性があります。

ムードボードは、実際の設計プロセスに飛び込む前に、プロジェクトのスタイルを洗練するための優れた方法でもあります。 これらは、リソースと時間の点でモックアップやプロトタイプよりもはるかに少ない投資であり、最終的なデザインのルックアンドフィールについて多くを伝えることができます。

ムードボードのレイアウトは、完成したデザインプロジェクトと同じくらい洗練されたものにすることができます
画像、イラスト、ロゴ、タイポグラフィ、色を組み込んだムードボードは、優れたコミュニケーションツールです。 (Diffusion Digitalによる)

ムードボードは、デザインのアイデアをクライアントに伝えるための優れた方法でもあります。 ウェブデザイナーが「ミニマリスト」または「グロテスクフォント」または「リアリズム」と言うとき、多くのクライアントはそれが何を意味するのか完全に無知になります。 しかし、それらを取り入れたムードボードを見せれば、彼らはすぐに理解し、アイデアが好きか嫌いかを表現できます。

最後に、ムードボードを使用すると、プロジェクトで一緒に作業するときに、設計チームがすべて同じページにいることを確認できます。 あるデザイナーのミニマリストの考えは、同僚の考えよりもはるかに最大主義的かもしれません。

ムードボードの作り方

ムードボードを作る方法は1つだけではありません。 それらはすべて異なるフォーマット、形状、およびスタイルで提供されます。 デザイナーの中にはデジタルで作成する人もいれば、物理的なコラージュを作成する人もいます。 ムードボードをデジタルで作成する人のために、Photoshopテンプレートから専用アプリまで、利用可能な多くのオプションがあります。

美しい物理的なムードボードのレイアウト
写真と色見本を使用して物理的なムードボードを作成することは、1つのオプションです。 (Planolyによる)

ムードボードに含めるもの

ムードボードはそれぞれ異なり、デザイナーが含めるものはプロジェクトによって異なります。 ブランドムードボードには、パッケージやWebサイトのデザインよりも多くの要素が含まれている場合があります。 重要なのは、作成中のデザインのルックアンドフィールを伝えるために必要な数の要素を含めることです。

ムードボードに含めるもののいくつかのアイデアは次のとおりです。

画像:これらには、ブランド画像、ストック写真、製品画像、Instagramやその他の写真共有サイトで見つかった写真、イラスト、さらにはロゴなどが含まれます。

色:デザインのカラーパレットを組み込むことは、ほとんどのムードボードの重要な部分であり、見本として含めることも、画像やその他のデザイン要素に組み込むこともできます。

視覚的なメタファー:視覚的なメタファーは、現代の広告とブランディングの重要な部分であり、必要に応じて含めることができます。

言葉:伝えられるべきブランドやメッセージに結びつく言葉は、ムードボードの重要な部分になる可能性があります。

フォント:デザイナーは、テキストが目立つデザインのムードボードに特定のフォント(または少なくとも一般的なフォントスタイル)を含める必要があります。

テクスチャ:デザインに組み込むテクスチャまたはパターンは、ムードボードに含める必要があります。

説明:必要に応じて、ムードボードに含まれる要素の説明により、コンテキストが追加され、最終的な設計に向けてさまざまなパーツがすべてどのように連携するかを簡単に確認できます。

ムードボードに説明を含めると、わかりやすくなります
ムードボードのさまざまな要素の説明を含めると、提示されたアイデアが明確になります。 (エミリーホルトによる)

テーマに落ち着くと、ムードボードだけでなく、それに基づく最終的なデザインにもまとまりをもたらすことができます。 テーマは抽象的なものでもかまいませんが、デザインやブランドの目標と密接に関連している必要があります。 たとえば、子供服のサイトにはジャングルやカーニバルのテーマがあるかもしれませんが、それはトラやピエロを組み込む必要があるという意味ではありません。 代わりに、これらのテーマに基づくムードボードには、自然な質感や原色などを含めることができます。

ムードボードのインスピレーションを集める

ムードボードのインスピレーションは、事実上どこからでも得られます。 デザイナーは、インスピレーションのファイルをスワイプして保持することがよくあります。これは、開始するのに最適な場所です。 それ以外の場合は、ストックフォトサイト、デザインギャラリー、Coolors.coやDesign Seedsなどのカラーパレットサイト、物理環境や物理オブジェクト、Typewolfなどのタイポグラフィギャラリー、さらにはソーシャルメディアなどの場所を探してください(InstagramやPinterestは特に熟した場所です。デザインのインスピレーションを見つける)。

ムードボードのインスピレーションを収集するとき、設計者は完成したプロジェクトの目標を念頭に置く必要があります。 また、ブランド価値やターゲットユーザーが誰であるかなども念頭に置く必要があります。 これらはすべて、収集されるインスピレーションの種類に大きな影響を与えます。

たとえば、企業の法律事務所のWebサイトのデザインは、10代の若者を対象としたストリートファッションサイトのWebサイトのデザインとは大幅に異なるトーンとスタイルを持っている可能性があります。 設計者がムードボードで作業を開始するときにこれらの違いを念頭に置いていない場合、完成したボードはクライアントと共鳴しない可能性があります。

ムードボードのすべての要素が、完成したデザインに直接または文字通り関連している必要はありません。 感情や一般的なスタイルを呼び起こす画像を見つけることは、特定のフォント、色、デザイン要素と同じくらい重要です。

米国を拠点とするフルタイムのフリーランスUIデザイナーが望んでいた

ムードボードフォーマット

ムードボードは、物理形式またはデジタル形式で作成できます。 どちらにも長所と短所があります。

物理的なムードボードは、デジタルデザイナーが画面の範囲外で考えるのに役立ちます。 これらは、現実の世界から多くのインスピレーションを得ているプロジェクトに最適です。 しかし、それはまた、作成するために多くの印刷ともう少し混乱を必要とする可能性があります。 物理的なムードボードは、アーカイブしたり、クライアントや他のチームメンバーと共有したりするのが難しい場合もあります(最良の共有オプションは、多くの場合、それらの写真を撮ることです)。

物理的なムードボードの例
マルゴーのこの製品ムードボードは、物理的なムードボードの良い例です。 (マルゴーによる)

一方、デジタルムードボードは、日常的に使用するのと同じツールを使用するという意味で、デザイナーの創造性を制限することがあります。つまり、常に使用するのと同じ考え方を使用している可能性があります。 。 悪いことではない場合もありますが、真にユニークなデザインを考え出すと、邪魔になることがあります。 ただし、デジタルムードボードは、画像ファイルとしてエクスポートして共有できるため、非常に簡単に共有できます(一部のプログラムでは直接共有できます)。

デジタルムードボードの例
デジタルムードボードは、クライアントや他のチームメンバーにデザインスタイルを提示するための非常に洗練された方法です。 (ミラノテによる)

ムードボードソフトウェア

ムードボードを作成するためのソフトウェアオプションは多数あります。 すでに使用しているほぼすべてのデザインプログラムを使用できます(ほとんどのデザインプログラムで使用できるテンプレートもあります)。 その他のオプションは次のとおりです。

  • Pinterest。 プロジェクトごとにボードを作成することは、オンラインで見つけたアイデアを整理するための優れた方法です。 ボードはパブリックまたはプライベートにすることができます(そして特定の個人と共有することができます)。
  • ムードボード。 アカウントを必要とせずに無料のムードボードを作成します。 開始するのに役立つテンプレート、または空白のデザインからテンプレートを作成するためのテンプレートがあります。
  • ムードザー。 Moodzerはこのシーン(現在はベータ版アプリ)の新機能ですが、共有しやすい見事なムードボードを作成するために必要なすべての機能を備えているようです。
  • AdobeSpark。 Adobe Sparkを使用すると、他のアドビ製品とうまく連携する形式でムードボードを簡単に作成できます。 ストックフォト、フォント、デザイン要素のライブラリを使用して、さまざまな形状やサイズのムードボードを作成するための十分な柔軟性を提供します。
  • Canva。 Canvaは、ムードボードテンプレートとさまざまな組み込みフォント、デザイン要素、ストックフォトを提供しています。

ムードボードのレイアウトは
Canvaで作成されたミニマリストのムードボードレイアウトの例。

ムードボードの作成に使用されるソフトウェアは重要ではありません。 重要なのは、創造性を刺激し、クライアントや他の意思決定者と簡単に共有できる形式で行われることです。

コミュニケーションツールとしてのムードボード

モックアップやプロトタイプに飛び込む前にムードボードを作成する最大の利点の1つは、クライアントや他のチームメンバーとコミュニケーションをとるための貴重なツールであるということです。 設計者が最初にモックアップやプロトタイプを作成するときに、クライアントが設計に満足していない場合、時間とリソースが無駄になるだけでなく、クライアントが望んでいたものとはまったく異なると感じた場合、信頼が失われる可能性があります。

一部のムードボードのテーマは、他のテーマよりもまとまりがあります
このムードボードのアーキテクチャは、プロジェクトのスタイルを非常に明確に伝えています。 (レイワードによる)

ムードボードを作成することで、クライアントとの恐ろしい「見ればわかる」症候群を防ぐこともできます。 彼らにムードボードを見せることで、彼らはまだ比較的ローファイで簡単に作成できるものを見ることができます。 クライアントが何を望んでいるかが完全にわからない場合、デザイナーは複数のムードボードを作成することもできます。

プロセスの早い段階でクライアントにムードボードを表示すると、設計プロセスの最初からデザイナーとクライアントを同じページに配置できるため、完成したデザインの改訂が少なくなる可能性があります。 そして、デザイナーが最初からクライアントの期待に応えたとき(それらの期待が明確に表現されていなくても)、クライアントはデザイナーの能力をより信頼します。

結論

デザイナーがデジタルまたは物理的なムードボードを作成するかどうかにかかわらず、それらはあらゆるプロジェクトのまとまりのあるデザインスタイルを作成する上で重要なステップです。 ムードボードフェーズに十分な時間を費やすと、プロジェクトがよりスムーズに実行される可能性があります。

ムードボードを作成することの大きな利点の1つは、ムードボードに何を含める必要があるか、またはどのように見えるかを指示する実際の「ルール」がないことです。 これにより、設計者はこのフェーズで大量の創造的な自由を得ることができますが、これは設計の後のフェーズで衰える可能性があります(もちろん、特定のプロジェクトによって異なります)。

ムードボードの利点と欠点がないことを考えると(ある程度の時間を費やす以外は)、単純なWebサイトの更新であろうと完全なブランディングの概念であろうと、設計者が作業するすべてのデザインプロジェクトにムードボードを組み込むことは理にかなっています。

•••

参考文献:

  • 30日間のデザイン–ブランディングのケーススタディ
  • ブランドイラスト101:ナラティブの視覚化
  • 盗みの芸術:マスターデザイナーになる方法
  • スタートアップがスタイルガイドを必要とする理由
  • ブランドストーリーの力を過小評価しないでください