ムードボードを活用して豊かなユーザー体験をデザインしよう | アドビ UX 道場 #UXDojo

Tracy Dai によるイラストレーション

ユーザー中心のデザインプロジェクトを始めるときは、ペルソナ、ワイヤーフレーム、プロトタイプなどが頭に浮かんでいるかもしれません。そんな場面でデザイナーが過小評価しがちな最初のステップは、クリエイティブプロセスを通じてチームを導くトーンの設定です。そこで登場するのがムードボードです。

多くのクリエイティブ分野の専門家たちが、アイデアやコンセプトを視覚化する強力なツールとして、ムードボードを使用しています。ムードボードは、感情、欲求、思考などの、抽象的な概念を総合的に扱える優れた能力を持っています。

ムードボードとは何か

ムードボードは、さまざまな感覚表現のリファレンスを集めた視覚的なパネルです。感情に訴える環境をつくり出し、クリエイティブな判断を導くツールとして機能します。

写真、イラスト、色、アニメーション、フォント、テクスチャ、そして匂いさえも、ムードボードに加えることができます。ムードボードを構成する要素は、ユーザーに喚起させたい感情を表現し、クリエイティブなビジョンを整えるものです。

ムードボードを使う理由

ムードボードは、抽象的なアイデアを纏め、デザインチーム、ステークホルダー、ユーザーのビジョンを統一するために使われます。また、チームがいつでもアクセスできる、一元化されたアセットの参照先として機能します。

ムードボードは、次のような用途に有効です。

• リサーチの文書として：ベンチマーク調査、ペルソナ定義、ユーザーインターフェイスのアイデア出しなど、いくつかのリサーチはムードボードに記述できます。
• デザインの探求及びガイドとして：プロジェクトを始めた時点では、デザイナーが自由にアイデアを探求できるスペースになり、一旦ボードが完成すれば、プロジェクトを通してチームが方向性を参照する資料になります。
• ビジョンを統一するツールとして：アイデアは抽象的なものですが、ムードボードはそのアウトラインを示すこができます。ステークホルダーがそれぞれのビジョンを提供し、共通認識に到達することにより、全員がプロジェクトの方向性に自信を持てます。

ムードボードの種類

ムードボードには、物理的なものとデジタルのものがあり、それぞれが固有の利点を持っています。デジタルのムードボードは、組み合わせや整頓が素早くでき、アニメーションや GIF などのデジタルアセットをそのまま受け入れることができます。一方、物理的なボードは、制作に手間がかかりがちですが、オフィスの壁のような物理的な環境に公開できます。

物理的なボードでは、塗料、布、紙、金属、香水、植物のような有機的な素材を、より徹底的に探求できます。これらの要素の中には、デジタルで再現した場合、触覚のようにその意味の一部が失われるものがあります。

デジタルのボードは、膨大な情報を集約し、より実用的な方法でアクセスできるように公開することが可能です。これは、リモートから働くチームに都合がよく、ビデオやアニメーションのようなメディアの収集に適しています。

ムードボードに含まれるもの

ムードボードには任意の要素を含めることが可能です。より重要視すべきことは、ムードボードを構成する要素間の関係とそのバランスです。一般的に、ムードボードに含まれる要素の種類には、以下のようなものがあります。

色 - ブランドや競合他社の色を収集します。新しいコンセプトに従って、探求したい感情に結びつく新しいパレットを試みることもできます。

画像 - 様々な種類の画像を並べられます。望ましいコンセプトを伝える写真を探求したり、将来の参照用に、ロゴ、アイコン、イラストのギャラリーを構築することも可能です。

アニメーション - デジタルのムードボードには、体験の一部を構成する感情に訴える要素として、アニメーションを簡単に記録できます。簡単なカーブ、プログレスバー、アニメーション付きのローディングアイコン、スクロール時のインタラクション、コンポーネントのマイクロインタラクションなどが含まれます。

フォント -視覚的な構成に利用できて、アイデアを強調したり、対比したりするのに役立つ書体ファミリーを探しましょう。

テクスチャとパターン - これらは、感情的な記憶を呼び起こす力を持った素晴らしい素材です。確立されたコンセプトを間接的に示すこともできます。

テキスト - メモ、洞察、キーワード、引用を整理して、ボードの他の要素と共に、アイデアを強調できます。

ムードボードのつくり方

ムードボードを作成する手法はいろいろとありますが、まずは、プロジェクトやチームに最適なタイプを選択することが重要です。

ウェブやアプリのデザインであれば、アニメーション、マイクロインタラクション、タイポグラフィを収集するためにデジタルのボードをボードを使うのがよいでしょう。一方、物理的なボードをオフィスに飾れば、誰もが確認できるリマインダーとして機能します。

効果的なムードボードを作成するための主要なステップは以下の通りです。

目的を明確にする

パズルのピースを集め始める前に、進むべき道を選択します。ペルソナが最終的なデザインに接したときに、どのような感情が湧き上がるべきかを明確な文章にしておきましょう。

「Edith がアプリをインストールしたら、エクササイズを始めようという気持ちになるはず。」

トーンを設定する

ブランドのトーンを設定すると、効果的なムードボードを作成するための準備になります。簡単な練習として、チームのビジョンを表すキーワードをいくつか選んでみましょう。トーンを表す言葉をボードに登録すると、いつでも誰でも参照できます。

トピックに関連する情報を集める

視覚的なリファレンスを探す前に、プロジェクトに関するトピックを少し調べてみましょう。ミーティング中のメモ、ユーザー調査のデータ、顧客とのインタビューなどから、プロジェクトに役立ちそうな洞察を引き出します。

価値を定義する

ムードボードに着手するときは、最初に、モダン、楽しい、子供っぽい、カラフル、スポーティーなどのはっきりとした価値を設定します。3 つか 4 つの形容詞を定義すると、リファレンスを収集するプロセスを円滑にできます。

大きく考え、小さく分ける

テーマに沿ったいくつかの大きなグループをまず定義してから、それぞれのグループを深く掘り下げていくと、リファレンスを探すプロセスが整理されます。

選択的になる

何か気になったものを単純にムードボードに置くことは避けましょう。プロジェクトの方向性に違いもたらすものだけを選ぶべきです。よく似た作品を見つけて迷ったときは、同じアイデアを表現するものをひとつ選びます。

視覚的に整理する

ムードボードの配置を整理するときは、大きさを利用して重要性を表現します。大きな写真や大きなフレーズは、並べられた様々な要素の中で、自然と注目点として機能します。

ムードボード作成に使えるツール

リファレンスを集めるのに役立つツールの選択肢には限りがありません。ここではいくつか代表的なものを紹介します。

• Niice - これは、ムードボード作成のための最も充実したソリューションのひとつです。いくつかのレベルでカスタマイズが可能で、動画の埋め込み、3D モデルをサポートし、ボードにアイテムを追加するためのブラウザ拡張機能も便利です。
• Savee - 使い方が明確で、ムードボードの作成と共有が簡単にできます。また、Dropbox との同期や、最適化された印刷、Instagram や Pinterest からの画像読み込みなどのオプションもあります。
• Behance - Behance に公開されたプロジェクトは、自分のプロフィールのプライベートまたはパブリックのムードボードに保存できます。これは、ウェブを検索することなく多くのリファレンスを収集する必要がある場合にとても便利です。
• Moodboard - これは、表現に満ちたムードボードを作成する必要がある場合に適しています。
• Photoshop - 完全にクリエイティブなコントロールをしたい場合には、Photoshop はムードボードを作成するための、最も強力で多彩な使い方ができるツールです。

インスピレーションを与えてくれる 8 つのムードボード

以下は、プロジェクトの雰囲気を捉え、インスピレーションを与え、クリエイティブチームの方向性を導く、物理的およびデジタルのムードボードのサンプルです。

おわりに

ムードボードを作成するプロセスは、チームを巻き込む楽しい時間であるのはもちろん、チームとステークホルダーの団結を促し、成功へつながる共通のビジョンを与えてくれます。これは、くつろぎと団結の瞬間です。遊び心のある方法ですべての関係者を発奮させるチャンスであり、プロジェクトの始まりからインターフェイスデザインの完成まで足並みを揃えて、最終的な成果物へと至るチャンスです。

この記事は How to Enhance UX Design with Mood Boards（著者: Vitor Guerra）の抄訳です