この記事の内容
あやね
役に立つムードボードは、魅力的な写真を集めるだけでなく、デザインの判断をまとめたものです。まず作りたい体験を決め、関連する参考資料を集めてから、その方向性を支える画像、色、書体、操作の手掛かりだけを残します。完成したボードを見て、別のデザイナーも「このプロジェクトに合うものと、合わないものは何か」を判断できることが大切です。
今回は、近所の落ち着いた道を見つけられるサイクリングアプリを想定して作成します。チームで共有するビジュアルなブレインストーミングの場で、まず可能性を広く集め、ムードボードでアプリの方向性を絞り込みます。自分で作り始める前に形式を見てみたい場合は、こちらのムードボードの実例を参考にしてください。
ムードボードとは？
ムードボードは、デザインの方針を視覚的に伝える資料です。写真、色見本、書体、インターフェースの参考例、質感、短いメモなどを含められますが、どの要素にも役割が必要です。サイクリングアプリなら、公園の写真は落ち着いた雰囲気、ルートマップの一部は案内の簡略化、書体のサンプルはプロダクトの語り口を考える手掛かりになります。ただし、この段階のボードは、まだそのまま実装できる画面ではありません。
1 枚のボードで複数の案を検討することはできますが、最終的な方向性を示すボードでは、どれを採用するか決める必要があります。参考資料と採用したルールを明確に分けましょう。そうしないと、目を引く画像が検討中の候補なのか、チームで採用を決めた方針なのか、見る人には分かりません。
ムードボードを使う理由
すべての画面を作り込む前に、チームでトーンについて話し合えます。「親しみやすい」「活発な」「落ち着いた」といった言葉の受け取り方は、人によって異なります。実例を示せば、その違いを目に見える形で共有できます。複数の担当者が関わる場合、関係者が方向性を比較したい場合、要件がまだ十分に固まっていない段階でビジュアル制作を始める場合に、特に役立ちます。
その後の判断を確認する基準にもなります。ルート画面で突然、鮮やかなネオンカラーや密度の高いデータ表示を使い始めたら、合意したボードと比較します。ボードがユーザビリティの検証結果やプロダクト要件に優先するわけではありませんが、意図的な変更なのか、見た目が方向性からずれているだけなのかを見分けやすくなります。
ムードボードを作る 10 のステップ
1. 方向性を決める
目指すユーザー体験を 1 文で書きます。サイクリングアプリなら、「地図を専門的に感じさせずに、より静かなルートを見つけられるようにする」といった内容です。対象ユーザー、画面サイズ、既存のブランドルールなど、いくつかの制約も加えます。これが、参考資料を採用するか除外するかの判断理由になります。
2. 既存の資料を集める
プロダクトの企画概要、現在の配色、ロゴの使い方、画面のスクリーンショット、既存の調査結果から始めます。自由に見た目を試すだけの作業にせず、これらの制約を維持します。必ず満たす要件と、まだ調整できる案を分けておきましょう。
3. 発想の手掛かりになる画像を集める
最初は幅広く、サイクリングルート、道路標識、公園、地図、関連するアプリ画面などを集めます。後に公開物へ使う可能性のある画像は、出典や利用権限も保存してください。この段階では、整ったグリッドを作ることよりも、選択肢を広げることを重視します。
4. 動きや音を検討する
動きが重要な場合は、静止画だけで伝わると考えず、操作へのリンクや注釈を付けます。例えば、ルートのプレビューでは、進む方向を示すための控えめな画面遷移が必要かもしれません。一方、このアプリに音が不要なら、デザイン上の判断に役立たない要素として省きます。ボードにメディアを参考資料として載せることと、デザインツールがあらゆる形式を直接再生できることは別です。
5. 書体と色を選ぶ
候補を少数に絞り、実際に近い画面で試します。落ち着いた緑と温かみのあるニュートラルカラーは屋外の雰囲気に合いますが、地図の線、ボタン、文字には十分なコントラストが必要です。書体のサンプルには、装飾的なアルファベットだけでなく、見出しと短い本文を含めましょう。
6. 考えを整理する
参考資料を、雰囲気、地図の表現、インターフェースのパターン、書体、色といった役割で分類します。重複するものは取り除きます。似た森の写真を 20 枚並べるより、雰囲気が伝わる写真 1 枚と、情報の優先順位が伝わる画面 1 枚のほうが、判断に役立ちます。
7. 新しい案を受け入れる余地を残す
採用済みの方向性とは別に、「後で検討する」領域を設けます。調査やテストから具体的な疑問が生じたら、新しい参考資料を追加できます。ただし、流行の画像を見つけるたびに、合意済みのボードを黙って変えてはいけません。何を、なぜ変更したのか記録します。
8. 意図を説明する
採用した資料のまとまりごとに、選んだ理由を 1 行で添えます。「地図をひと目で読み取れるよう、ルートの線をシンプルにする」のほうが、「モダンにする」より具体的に行動へ移せます。どれが発想の参考で、どれが提案するルールなのかを明確にしてください。他社製品の参考例を載せることは、そのインターフェースを複製してよいという意味ではありません。
9. チームと共同で検討する
Pixso では、参考画像、色見本、サンプル画面を 1 つのデザインファイルのキャンバスに配置し、コンテンツ、インターフェース、ブランドの担当者と一緒にレビューできます。下の例では、集めた着想と採用した方向性を分けています。ビジュアルボードから 2 つの画面上の設計判断につなげる流れを示すもので、ソフトウェアがその判断を自動で行うという意味ではありません。
10. フィードバックを求める
「落ち着いたルートを最もよく表す参考例はどの 2 つか」「ルートが見やすくなる色の組み合わせはどれか」「プロダクトに合わないと感じる部分はどこか」など、焦点を絞った質問をします。回答はボードのそばに記録しましょう。漠然とした賛成だけでは、次の画面に何を反映すべきか、デザイナーには伝わりません。
まとめ
別の人がボードを使って最初の画面を作り、その選択の理由を説明できれば、方向性を共有する準備ができています。サイクリングアプリなら、分かりやすいルートの線、控えめな配色、読みやすい文字、意図のあるトーンがその基準になります。これらの判断を小さな UI の試作に落とし込み、実際のユーザーの目的に照らして確認してください。ルート選びを助ける画面になっていなければ、画像の組み合わせに固執せず、方向性を見直しましょう。
