「ムードボードってよく聞くけど、結局どう作ればいいの？」「Pinterestで画像をたくさん集めても、これでいいのか分からない」。駆け出しデザイナーなら、誰しも一度はこんな悩みにぶつかります。

実は、ムードボードは「画像から作る」のではなく「言葉（形容詞）から作る」方法もあります。形容詞を起点にすれば、素材選びの基準が明確になり、迷いが消えます。

本記事では、NOT DESIGN SCHOOLのUIデザインメンター・キャシ（Katherine）さんのウェビナー「非デザイナーのためのデザイン入門！〜センスに頼らない"形容詞の魔法"を覚えよう〜」をベースに、駆け出しデザイナーが今日から実践できる「形容詞起点の4ステップ」ムードボードの作り方を解説します。

本記事は「センスに頼らないデザイン」シリーズの第4弾です。先にハブ記事「デザインのセンスは磨ける｜形容詞起点の3ステップ完全ガイド」を読むと理解が深まります。

▶ ウェビナー動画：非デザイナーのためのデザイン入門！〜センスに頼らない"形容詞の魔法"を覚えよう〜

1. ムードボードとは？｜ビジュアルの方向性を決めるツール

ムードボードとは、プロジェクトの方向性を「画像・色・フォント・テクスチャ」などのビジュアル要素で1枚のボードにまとめたものです。

ムードボードの3つの役割

駆け出しが誤解しがちなポイント

ムードボードは完成形のデザインではありません。あくまで「方向性を確認するためのインプット段階」のツール。これを混同すると、ムードボード作りに時間を使いすぎて先に進めなくなります。

ムードボードは「頭の中で描いているふんわりしたイメージを、実際にビジュアルに翻訳する変換装置」だと考えると、用途が明確になります。

2. 駆け出しがムードボード作りで陥る3つの失敗

ムードボードの作り方を学ぶ前に、よくある失敗パターンを押さえましょう。

失敗1｜目的を決めずに素材を集め始める

「とりあえず Pinterest で『おしゃれ』で検索」から始める人が多いですが、これは順番が逆です。

問題点：

• 集めた素材にバラつきが出て、方向性が定まらない

• 「いい感じ」だけで選ぶので、後で説明できない

• クライアントに見せても「で、何がしたいの？」となる

失敗2｜素材を集めすぎて止まる

「もっといいのがあるはず」と無限にスクロールして、いつまでも完成しないパターンです。

問題点：

• 完璧を目指して時間を消費

• 量が増えるほど絞り込みが大変になる

• 「ベストな素材」を探すあまり、本来の目的を見失う

失敗3｜画像だけで完結させる

ムードボードは画像だけではありません。カラーパレット・フォント・テクスチャ・レイアウト・キーワードまで含めるのが本来の形です。

問題点：

• 「画像コレクション」止まりで、デザイン判断に使えない

• カラー・タイポの根拠が示せない

• 制作フェーズで「結局どうすれば？」となる

解決方法 = 「形容詞起点の4ステップ」

これら3つの失敗を全て回避できる方法が、本記事のテーマである「形容詞起点の4ステップ」です。次の章から詳しく解説します。

3. 「形容詞起点」4ステップフレームの全体像

「ムードボードを言葉で作る」という考え方を実装するためのフレームです。以下の4ステップを順番に進めます。

合計4〜6時間で、完成度の高いムードボードが1枚作れます。重要なのは順番を絶対に変えないこと。素材集めから始めると、3つの失敗パターンに陥ります。

4. ステップ1｜形容詞を3〜5個に絞り込む

最初のステップは「プロジェクトを表現する形容詞を3〜5個に絞り込む」ことです。

形容詞を出す3つのアプローチ

A. クライアントヒアリングから抽出する場合

ヒアリング時に以下のような問いを投げかけて、回答から形容詞を抽出します。

B. 既存ブランドから言語化する場合

既存ブランドのリブランド・新規プロダクト追加の場合は、ブランドガイドラインから抽出します。これはシリーズ#3「ブランドカラーパレットの作り方」のステップ2と同じプロセスです。

C. 自社プロジェクトの場合

自分で考える場合は、以下の問いに答えます。

• Why：なぜこのプロジェクトをやるのか？

• Who：誰のためにやるのか？

• What：何を表現したいか？

• How：競合とどう違うか？

詳しくは「ステップ1｜Why（なぜ）を定める」を参照してください。

形容詞を絞り込む3つのコツ

1. 20〜30個出してから3〜5個に絞る：いきなり3個に絞ろうとすると視野が狭くなる

2. 対義語のペアを意識：「Modern↔Classic」「Bold↔Subtle」など対比軸を持つ

3. 競合と被らない言葉を選ぶ：差別化のために他社が使ってない形容詞を意識

例：駆け出しデザイナー向けカフェのリブランド

3〜5個に絞ったら、ステップ2に進みます。

5. ステップ2｜素材を「広く・たくさん」集める（量重視）

形容詞が決まったら、ひたすら素材を集めるフェーズに入ります。ここでは「質より量」が鉄則です。

素材集めの3つの情報源

検索キーワードの組み立て方

各形容詞ごとに、日本語＋英語の両方で検索すると素材の幅が大きく広がります。

例：「温かい カフェ」で検索する場合

日本語パターン:
- 温かい カフェ
- ぬくもり カフェ インテリア
- 居心地のいい 喫茶店

英語パターン:
- warm cafe interior
- cozy cafe atmosphere
- inviting coffee shop

英語で検索すると海外デザインのトレンドも吸収できるので、必ずセットで検索しましょう。

集める素材の3つのカテゴリ

ムードボードは画像だけではありません。以下3カテゴリをバランスよく集めます。

合計20〜30点集まったら、ステップ3に進みます。それ以上集めると絞り込みが大変になるので、量で止めるのが大事です。

よくある失敗：質を求めすぎる

「もっと良い素材があるはず」と無限スクロールするのが駆け出しの典型的な失敗パターン。この段階では質を判断しないこと。集めるだけ集めて、選別はステップ3でやります。

6. ステップ3｜形容詞ごとにグルーピングして絞る

集めた20〜30点の素材を、形容詞ごとにグルーピングして絞り込みます。

グルーピングの手順

1. 3〜5個の形容詞を縦軸に並べる

2. 集めた素材を「どの形容詞を最も強く表現しているか」で分類

3. 各形容詞ごとに3〜5点ずつ選ぶ（合計10〜20点に絞る）

例：3形容詞でのグルーピング表

合計11点になりました。各形容詞に最低3点は確保することで、形容詞間のバランスを保てます。

絞り込みの3つの判断基準

1. 形容詞との整合性：その素材が「温かい」を強く表現しているか？

2. 他の素材との調和：全体のトーンが揃っているか？

3. 差別化要素：競合と違う方向性を含んでいるか？

「形容詞に当てはまらない素材」の扱い

「いいなと思ったけどどの形容詞にも当てはまらない」素材は、潔く外す勇気を持ちましょう。形容詞起点で絞ったムードボードに、形容詞外の素材を入れると軸がブレます。

ただし、「この素材があるから新しい形容詞を加えたい」というケースは要検討。形容詞の見直しが必要なサインかもしれません。

7. ステップ4｜カラー・タイポ・余白までトーンを抽出する

絞り込んだ素材から、最終的に「ブランドのトーン」を抽出します。これが他の解説記事との一番の違いです。

抽出する4つの要素

要素1｜カラーパレット（5〜6色）

選んだ素材から共通するカラーを抽出します。FigmaのImage Paletteプラグインを使うと、画像から自動で色を抽出できます。

温かい：暖色系（オレンジ/ベージュ/ブラウン）
本物の：低彩度・高明度（ナチュラルカラー）
手作り感：くすみ系（モスグリーン/テラコッタ）

→ 抽出例：
ベージュ #F5E6D3 / テラコッタ #C97B5F / モスグリーン #6B7B5A / 
ダークブラウン #3E2723 / 純白 #FAFAFA / 黒 #1C1C1C

カラー選定の詳細はシリーズ#2「色相環×形容詞」、シリーズ#3「ブランドカラーパレット」を参照してください。

要素2｜タイポグラフィ（2〜3書体）

素材内の文字組みから、フォントの傾向を抽出します。

メイン書体（見出し用）＋サブ書体（本文用）の2〜3書体を決めます。

要素3｜余白・グリッド・密度

素材内の余白の取り方を観察します。

• 余白多め（密度低） → 高級感・上品・落ち着き

• 余白少なめ（密度高） → エネルギッシュ・カジュアル・若々しい

「温かい × 本物の × 手作り感」の場合、余白多め＋やわらかいグリッドが合います。

要素4｜形状・線・テクスチャ

素材内に共通する形・線の表情・素材感を抽出します。

• 角丸 vs 直線：角丸=親しみ、直線=洗練

• 手書き線 vs 機械線：手書き=温かい、機械=精密

• マットテクスチャ vs グロステクスチャ：マット=自然、グロス=モダン

これらの要素を「ムードボードの右下に注釈として記載」しておくと、後のデザインフェーズで参照しやすくなります。

完成イメージ：1枚のムードボードに含める要素

A3サイズ目安で、1枚のムードボードに以下を含めるのが理想です。

この1枚があれば、配色・フォント・レイアウトの判断軸が全て揃います。「迷ったらこの1枚に戻る」のがムードボードの本質的な価値です。

8. おすすめツール3選｜Pinterest / Figma（FigJam） / Milanote

ムードボード作成に向いているツールを3つに絞って紹介します。

ツール1｜Pinterest（素材収集の王道）

特徴：キーワード検索→関連画像が自動で表示される。世界中のデザイン素材が集まる最大規模のプラットフォーム。

こんな人におすすめ：

• ステップ2の「素材集め」フェーズで一気に量を集めたい人

• インスピレーションを広げたい人

料金：無料

ツール2｜Figma（FigJam）（ムードボードのコラージュ＋共有）

特徴：FigJamは無限キャンバスでのコラージュに最適。ムードボード用の公式テンプレートも豊富。チーム編集・コメント機能も強力。

こんな人におすすめ：

• ムードボードをチームやクライアントと共有しながら作りたい人

• Figmaでデザイン制作する人（同じツール内で完結）

• AIプラグイン（AI Mood Board Generator）を使ってみたい人

料金：無料プラン／Professional $16/月

ツール3｜Miro（チーム協業・無限キャンバス）

特徴：無限キャンバスのオンラインホワイトボード。ムードボードテンプレートが豊富で、ドラッグ&ドロップで画像・動画・ファイルを自由に配置できる。リアルタイム共同編集とコメント機能が強力。

こんな人におすすめ：

• チームでブレインストーミングしながらムードボードを作りたい人

• 無限キャンバスで自由にレイアウトしたい人

• 7,000以上のテンプレートライブラリから選びたい人

• ムードボード以外にもブレスト・カスタマージャーニーマップなど多用途で使いたい人

料金：無料プラン（編集可能ボード3枚／メンバー無制限）／Starter $8/user/月（年払い）／Business $20/user/月

ツール選びの基準

駆け出しが最初に使うべきは Pinterest + Figma の組み合わせ。素材は Pinterest で集めて、Figma に貼り付けてコラージュする流れが王道です。

9. 校長の見解｜AI時代のムードボード活用法

ここからは、NOT DESIGN SCHOOL校長のもちが、ムードボードについて思うところを書いていきます。

視点1：ムードボードは「クライアントとの認識ズレ」を防ぐ実用的なツール

言葉だけのヒアリングだと、「親しみやすい」の解釈がクライアントとデザイナーで違うことがよくあります。あるクライアントの「親しみやすい」がIKEA系で、デザイナー側の「親しみやすい」がZARA系なら、ムードボード共有の段階でこのズレが見えてきます。

ムードボードを介在させるだけで、認識の擦り合わせがスムーズになり、後の修正回数が減ると、もちは経験的に感じています。

視点2：最初は叩きで作って、後からブラッシュアップしていくのも有効

ムードボードは完璧を目指さず、まず叩き版を素早く作って、そこからブラッシュアップしていく方が結果的に質が上がると、もちは感じています。

最初から完璧を目指すと、いつまでも素材集めフェーズから抜け出せません。まずは60%の完成度でも「叩き」として、さっさと見せてしまったほうが早く進むパターンも多くあります。「あとからブラッシュアップしても良い」という意識を持っておきましょう。

視点3：駆け出しは「素材集めが少なすぎる」傾向もある

NOTで生徒さんを見ていると、ムードボード作成で陥る2つの極端パターンがあります。

1. 素材を集めすぎて止まる（無限スクロール症候群）

2. 素材集めが少なすぎる（3〜5個で「完成」と判断してしまう）

特に駆け出しに多いのが2のパターン。少なすぎる素材で完成させると、デザインの方向性が狭まり過ぎてしまい、結果、参考デザインのパクリデザインになりがちです。

最低でも20〜30個集めてから絞り込むことで、絞り込むプロセスを持つことで、「オリジナルの方向性を生み出す練習」になります。「まず量を集める→選別する」の順序を守りましょう。その方がムードボードの質が安定すると、もちは感じています。

10. 限界と注意点｜ムードボードが効かないケース

ムードボードは万能ではありません。以下の3点に注意してください。

注意点1：ムードボードに頼りすぎると「素材の模倣」になる

参考と模倣の境界線が曖昧になりがちです。集めた素材をそのままLPやロゴのデザインに使うと、パクリ作品になってしまいます。

ムードボードは「方向性の確認」までで、実際のデザインは独自にゼロから組み立てる意識が必要です。「色温度・形の方向性・余白の使い方」など抽象化した要素を抽出するのがムードボードの本来の使い方です。

注意点2：ムードボードは「インプット」止まり、ビジュアル「アウトプット」ではない

ムードボード = 完成形ではありません。ここからカラーパレット・ロゴ・UI・タイポを実際に作っていく工程が別途必要です。

「ムードボードができたから完了」ではなく、ムードボードを判断軸として参照しながら、実際のデザインを別途作る意識を持ちましょう。

注意点3：形容詞が定まる前にムードボード作っても効果が薄い

順序が逆だと「なんとなく集めて、なんとなく良さそうな雰囲気」で終わります。

必ず以下の順番を守ってください：

形容詞を決める → 素材を集める → 絞り込む → トーンを抽出する

こちらの記事のステップ2「形容詞でムードを定める」で形容詞起点の考え方を確認してから、本記事のムードボード作成プロセスに入るとスムーズです。

11. FAQ

Q1. ムードボードに含める素材は何点が適切ですか？

A. 完成版のムードボードでは10〜20点が目安です。素材収集フェーズでは20〜30点集め、絞り込みフェーズで10〜20点まで減らします。30点を超えると視覚的に複雑になり、方向性が見えにくくなります。

Q2. ムードボードは1案だけ作ればいいですか？

A. プロジェクト初期のヒアリング後は、3案作るのがおすすめです。「Friendly寄り」「Bold寄り」「Modern寄り」など方向性を変えた3案を提示すると、クライアントが自分の好みを選びやすくなります。詳しい3案出しの手法はシリーズ#3「ブランドカラーパレットの作り方」で。

Q3. AIツール（Claude、Gemini）を使ってムードボードを作るのはアリですか？

A. アリです。形容詞を渡すと、AIが「こういう方向性のムードボードが合うのでは」とテキストで提案してくれます。ChatGPTなどで視覚的なボードも自動生成が可能です。ただし、AIアウトプットは必ず人間が再選定する前提で使ってください。詳しいAI活用法は駆け出しデザイナーのためのClaude入門で。

Q4. クライアントから「もっと違う方向性も見たい」と言われたら？

A. 「形容詞を変えた別案」を提示するのが正解。「親しみやすい→洗練された」「温かい→クールな」など、対義語ペアで別案を作ると、クライアントとの認識合わせが進みます。修正対応の詳しい方法はロゴデザインのヒアリング&修正対応完全ガイドで。

Q5. ムードボードを作る時間がない時はどうすれば？

A. 「ミニムードボード」（30分版）でも効果があります。形容詞3個を決めて、Pinterestで各形容詞ごとに3点ずつ（計9点）集めて、Figmaに貼り付けるだけで最低限のムードボードになります。完璧を目指すより、まず作ってしまうことが大事。

参考リンク

ウェビナー動画

• 非デザイナーのためのデザイン入門！〜センスに頼らない"形容詞の魔法"を覚えよう〜（NOT DESIGN SCHOOL公式 / 登壇：キャシさん）

スピーカー

• キャシ（Katherine）さん：NOT DESIGN SCHOOL UIデザインメンター

• 肩書き：シニアデジタルプロダクトデザイナー／Friends of Figma London Group Leader

• X：@uialchemistjp

ツール

• Pinterest（素材収集）

• Figma / FigJam Moodboard Maker

• Figma AI Mood Board Generator

• Figma Image Palette

• Milanote

• Unsplash / Behance / Dribbble

出典・公式ドキュメント

• How To Make a Mood Board in 5 Steps - Figma

• Mood Board Templates - Figma Community

NOT DESIGN SCHOOL 関連記事

• 🌟 シリーズハブ：デザインのセンスは磨ける｜形容詞起点の3ステップ完全ガイド

• シリーズ#2：配色をセンスではなくロジックで選ぼう｜色相環×形容詞の完全マップ

• シリーズ#3：ブランドカラーが迷わなくなる3つの円フレーム

• 駆け出しデザイナーのためのClaude入門

• Figma Makeとは？使い方・料金・活用例まで徹底解説

• ロゴデザインのアイデア出し完全ガイド

• ロゴデザインのヒアリング&修正対応完全ガイド

「センスに頼らないデザイン」シリーズ

1. 最初：デザインのセンスは磨ける｜形容詞起点の3ステップ完全ガイド

2. 配色をセンスではなくロジックで選ぼう｜色相環×形容詞の完全マップ

3. ブランドカラーが迷わなくなる3つの円フレーム

4. 本記事：ムードボードを言葉で作る方法｜形容詞からビジュアルを立ち上げる4ステップ

5. 「センス」を後天的に身につける方法｜分解→再現の練習法（公開予定）

6. 駆け出しが0からデザインを作るプロセス（公開予定）