ムードボードとは、写真・色・文字・素材感などの参考イメージを1枚に集め、デザインの方向性を言葉より先に共有するための資料です。「ムードボードを作りたいが、何を集めてどう並べればよいか分からない」という方は、集める前に判断の軸を決めてください。
筆者は2026年7月、自社のデザインの好みを8組の比較画像で判定し、その結果を1枚のルールにまとめました。以後の記事図解とアイキャッチは、この1枚を基準に迷わず作れています。ムードボードの作り方は次の3ステップです。
- ステップ①コンセプトを3〜5語で言語化する
- ステップ②素材をジャンルを越えて集める
- ステップ③比率と余白をそろえて配置する
この記事では、当社の活用例、作り方、質を上げるポイント、無料で始められるツール、メリットとデメリット、よくある質問を解説します。
目次
ムードボードが効いた3つの場面｜当社の活用例
ムードボードの価値は、きれいなコラージュを作ることではなく、「どちらが好みか」という判断を目に見える形で残すことにあります。当社では、Webサイトや記事画像の制作で迷いが続いたとき、参考イメージを集めて判定し、その結果を文章のルールに変えてきました。
ここでは、筆者が自社で実際に行った3つの場面を、日付と結果つきで紹介します。いずれも社外のデザイナーに頼らず、経営者と制作担当だけで進めた例です。
◆当社でムードボードの考え方を使った3つの場面（2026年10月4日時点）
| 場面 | 集めたもの | 判定の方法 | 残した結果 |
|---|---|---|---|
| Webとバナーの好みの言語化（2026年7月18日） | 実在サイトの画面8枚と自作バナー8枚 | AとBを並べた8組で選ぶ | 確定ルール8項目と1行の大原則 |
| 記事図解の基準の見直し（2026年9月6日） | 調査レポートの図3枚 | 旧基準と並べて共通点を抽出 | 3色・見出し帯なしの図解テンプレート |
| アイキャッチの型の決定（2026年9月6日） | 他社コラム一覧のアイキャッチ8枚と自作モック | 地色2案のモックを並べて比較 | 文言だけ差し替える1本のテンプレート |
筆者が作成
活用例①デザインの好みを8組の比較で1枚のルールにした
2026年7月18日、筆者は自社のデザインの好みを言葉にするため、Webサイト4組とバナー4組の比較ページを作りました。Webは「余白の多い画面と情報の多い画面」「実写が主役かイラストが主役か」のように、1つの軸につき実在サイトの画面を2枚並べています。
結果は、Webでは余白・実写・モノトーンに差し色を選び、バナーでは日時や特典まで載せる情報量・2〜3色・角丸・ほぼフラットを選びました。8組の答えを並べると「Webは静かに、バナーは働かせる」という1行に集約でき、以後の制作で迷う時間がなくなりました。
ムードボードは「集めた画像そのもの」より、「どちらを選んだか」と「なぜ選んだか」を記録したときに役に立ちます。当社は選んだ理由を1枚のルール文書にまとめ、デザインを作る前に必ず読む運用にしています。
活用例②記事図解の基準を参考図3枚から3色のルールに変えた
記事の図解を見直したのは2026年9月6日です。それまでの図解は濃い色の見出し帯・色付きのタイル・色の濃淡で段階を示す作りで、実質6色が混ざり、筆者自身が「ダサい」と感じていました。
そこで、良いと感じた調査レポートの図3枚を集め、旧図解と並べて共通点を抜き出しました。共通していたのは、色が主色と差し色と説明文のグレーの3色に収まること、見出し帯がないこと、角が小さく影がないことです。
この3点をルールにして図解のテンプレートを1本作り、2026年10月4日時点で11記事の図解を同じスクリプトから生成しています。参考図は「真似する元」ではなく、「自分たちが何を良いと感じているか」を取り出すための材料として使いました。
活用例③アイキャッチの型を比較で決めて26記事に展開
同じ2026年9月6日、記事のアイキャッチ（一覧やSNSで表示される代表画像）の型も決めました。参考にしたのは、他社のコラム一覧に並ぶアイキャッチ8枚です。単色の地に粒子の質感、小さなラベル、白の太字タイトル、下部にブランドのモチーフ、右上にロゴという共通の型が見えました。
地色はチャコールとオレンジの2案を自分たちでモックとして作り、並べて比較したうえでオレンジに決めています。ゴースト文字やコートの線画など、途中で出た装飾案は比較の段階で外しました。
型が決まった後は、ロゴの位置を右上に固定し、タイトルとラベルの文言だけを差し替える1本のテンプレートで生成しています。2026年10月4日時点で26記事のアイキャッチがこのテンプレートを呼び出しており、1枚ごとにデザインを考える時間はゼロになりました。
ムードボードの作り方3ステップ
ムードボードは、画像を集めてから考えるのではなく、考えてから集めると短時間で方向が決まります。当社の3つの活用例も、すべて「言語化→収集→配置」の順で進めました。
筆者が作成
ステップ①コンセプトを3〜5語で言語化する
最初に、デザインの核になるキーワードを3〜5語に絞ります。「おしゃれ」「きれい」のような語は人によって浮かぶ情景が違うため、「1950年代のレトロモダン」「無機質なミニマリズム」のように、誰が聞いても同じ情景が浮かぶ表現を選んでください。
言語化を省くと、集める段階で軸がぶれ、見た目は良くても方向の決まらないボードになります。当社の好みの言語化では、「情報量と余白」「トーン」「ビジュアルの主役」「堅実さと遊び」という4つの軸を先に決めてから画面を集めました。
キーワードが決まらないときは、ターゲットが普段見ている媒体や、避けたい印象（安っぽい・古い・騒がしい）を先に書き出すと、残る語が見えてきます。
ステップ②素材をジャンルを越えて集める
キーワードを目に見える形にするため、写真・配色・フォント・質感の素材を集めます。1つのサイトだけに頼ると既存の作品に似た無難な表現になりやすいため、映画の一場面や建築の細部、自然界の配色など、ジャンルを越えて拾ってください。
当社の図解の見直しでは、Web制作とは分野の違う調査レポートの図を参考にしました。分野を離れた素材ほど、自分たちが「何を良いと感じるか」の輪郭がはっきりします。
集める段階では数を絞りすぎず、「コンセプトに近い」と直感したものを一度並べてから、次のステップで選別します。当社の比較ページは1軸につき2枚、合計16枚で判定できました。
ステップ③比率と余白をそろえて配置する
集めた素材を1枚に並べるときは、情報の優先順位を大きさで表します。コンセプトを象徴する中心の画像を大きく置き、補足のテクスチャや色見本を小さく添えると、ボード全体に強弱が生まれます。
色は「どの色がどれだけの面積を占めるか」を比率で見せてください。隙間なく敷き詰めず余白を残すと、1枚ごとの素材が持つ空気感が伝わります。
配置の最後に、キーワードから外れた素材を外します。当社では、比較の途中で出た装飾案（ゴースト文字・線画のコート）を「色数を絞る」というルールに照らして外し、残った要素だけをテンプレートにしました。
ムードボードの質を上げる5つのポイント
3ステップで形になったボードを、実務で使える設計図にするためのポイントを5つ挙げます。いずれも当社が制作の現場で確認している項目です。
ポイント①色の比率を面積で示す
色は名前ではなく面積で伝えてください。全体の約70%を占めるベースカラー、約25%のメインカラー、約5%のアクセントカラーのように、使う割合に応じた大きさで配置すると、「どの色が主役か」が関係者全員に同じ形で伝わります。
当社の図解ルールは主色のチャコール、差し色のオレンジ、説明文のグレーの3色で、差し色はタイトルのキーワードと「ここぞの1か所」だけに使うと決めています。色の強さと面積を決めた段階で、配色の失敗はほぼ防げるはずです。
ポイント②素材感を1つ入れる
画面上の画像だけで作ると、視覚の情報に偏って奥行きが出ません。布の柔らかさ、金属の冷たさ、木目の温かさ、紙の粒子のような質感を1つ入れると、「グレー」という色の名前以上の印象を共有できます。
当社のアイキャッチは、オレンジの単色地に粒子の質感を重ねています。粒子の強さはモックを並べて「もう少し粒状感を上げる」と判断して決めたもので、質感の加減もムードボードで決める項目です。
ポイント③余白を決めてから並べる
余白は「余った場所」ではなく、先に決める要素です。画像を隙間なく敷き詰めると視覚のノイズが増え、伝えたいコンセプトが埋もれます。
当社の好みの言語化では、Webの最初の軸として「情報量と余白」を置き、余白の多い画面を選びました。余白をどれだけ取るかを最初に決めると、後の素材選びと配置の判断が速くなります。
ポイント④ターゲットの目で選ぶ
ボードに載せる素材は、自分たちの好みより「ターゲットが何を好むか」で選びます。ブランディングデザインと同じく、ターゲットが普段読んでいる媒体や、よく見るサイトの色使いと文字組みを確かめ、日常で心地よいと感じる要素を拾ってください。
当社の読者は岡山を中心とした中小企業の経営者と推進担当で、堅実さを求める相手に多色の派手な図解は合わないと判断し、3色に絞りました。制作者の主観だけで選ぶと、市場の感覚から離れた独りよがりのデザインになります。
ポイント⑤定期的に見直して差し替える
ムードボードは一度作って終わりではありません。制作が進むと新しい素材や判断が生まれるため、節目ごとに差し替えてください。
当社は、気になったサイトや画像を社内のチャットに投げて蓄積し、たまった時点で「どこが良いか」を選択肢で判定し、確定したものだけをルールに昇格させる運用にしています。ルールの文書には更新日を入れ、2026年7月18日の初版から2026年9月6日の図解・アイキャッチの更新まで、変更の経緯を残しています。
ムードボード作成に使える5つのツールと選び方
ツールは目的で選びます。各社の公式ページで確認できた機能と、無料で始められるかの表記を整理しました。料金プランは変わるため、契約前に公式サイトで確認してください。
◆ムードボード作成ツール5つの比較（各社公式ページの表記・2026年10月4日時点）
| ツール | 向いている目的 | 公式ページで確認できた主な機能 | 無料で始められるか（公式表記） |
|---|---|---|---|
| 参考画像を集める | ピンをボードに保存、ボードの非公開設定、参加者の追加 | ボード作成はアカウントで利用可 | |
| Canva | テンプレートで早く作る | ドラッグ＆ドロップ、プロが作ったテンプレート、AI画像生成「マジック生成」、共同編集 | 「AI搭載の無料アプリ」と案内 |
| Adobe Fireflyボード | AIで画像を生成して作る | テキストからの画像生成、複数画像のリミックス、スタイル参照、共有とフィードバック | 「はい、無料で使えます」と明記 |
| Milanote | メモやリンクも一緒に置く | ノート・画像・動画・リンクを1枚に配置、編集・コメント・閲覧の権限で招待 | 公式トップに料金の記載なし |
| Miro | チームで同時に編集する | ムードボードのテンプレート、リアルタイムと非同期の共同編集、画像・PDFでの書き出し、プレゼンテーションモード | 公式ページに料金の記載なし |
筆者が作成
ツール①Pinterest｜参考画像を集める
Pinterestは、気になった画像を「ピン」としてボードに保存できるサービスです。公式ヘルプでは、左側のプラスアイコンから「ボード」を選んで名前を付ける手順と、ボードを非公開にする設定、参加者を追加して複数人で保存する方法が案内されています。
集める段階で最も使いやすく、当社の好みの言語化でも、まず「良い」と感じた画面を集めるところから始めました。ただし保存した画像をそのまま制作に使うことはできないため、ボードは判断の材料として扱います。
出典：新規ボードを作成する | Pinterest help（スクリーンショットは筆者取得）
ツール②Canva｜テンプレートで早く作る
Canvaは、ドラッグ＆ドロップでムードボードを作れるデザインツールです。公式ページでは、プロがデザインしたテンプレート、グリッドとフレームで構造を作る機能、テキストから画像を生成する「マジック生成」、同僚や友人との共同編集が案内されています。
テンプレートから始められるため、初めて作る方が1時間以内に形にするならCanvaが最短です。公式ページには「AI搭載の無料アプリ」と記載があり、無料の範囲で試してから判断できます。
出典：ムードボードやイメージボードを作成 | Canva（スクリーンショットは筆者取得）
ツール③Adobe Fireflyボード｜AIで画像から作る
Adobe Fireflyボードは、生成AIでムードボードを作る機能です。
公式ページでは、テキストからの画像生成、複数の画像をブレンドして新しいスタイルを試すリミックス、スタイル参照で生成画像の雰囲気をそろえる機能、Adobe ExpressやPhotoshopとの連携が案内されています。
手元に参考画像が無い段階で「こういう雰囲気」を仮の画像として出せる点が、ほかのツールとの違いです。料金については、公式のよくある質問で「はい、無料で使えます」と明記されています。
ツール④Milanote｜メモやリンクも一緒に置く
Milanoteは、クリエイティブな仕事を整理するためのツールです。公式サイトでは、ノート・画像・動画・スケッチを1枚のボードに組み合わせ、Webのリンクや内容を保存し、ほかの人を編集・コメント・閲覧の権限で招待できると案内されています。
画像だけでなく「なぜこれを選んだか」のメモを隣に置けるため、当社が重視する「選んだ理由を残す」使い方に向いています。料金は公式トップページに記載が無いため、プランは公式サイトで確認してください。
ツール⑤Miro｜チームで同時に編集する
Miroは、オンラインのホワイトボードです。公式のムードボード作成ページでは、テンプレートから始められること、チームがリアルタイムでも非同期でも共同で作れること、ボードのリンク共有と画像・PDFでの書き出し、プレゼンテーションモードが案内されています。
複数人で同じ画面を見ながら「これは残す・外す」を決める会議には、Miroの広いキャンバスが向いています。料金は同ページに記載が無いため、公式サイトで確認してください。
出典：ムードボード作成ツールでアイデアやコンセプトを簡単共有 – Miro（スクリーンショットは筆者取得）
ムードボードを使う3つのメリットと3つのデメリット
ムードボードは万能ではありません。当社の経験から、効く点と注意する点を3つずつ挙げます。
◆ムードボードのメリットとデメリット
| 区分 | 内容 | 当社での実感 |
|---|---|---|
| メリット① | 認識のずれを先に防げる | 8組の判定を文書にしてから、制作途中の「イメージと違う」が無くなった |
| メリット② | 判断が速くなる | 図解・アイキャッチをテンプレートから生成し、1枚ごとの検討時間がゼロになった |
| メリット③ | 発想の幅が広がる | 分野の違う調査レポートの図から、記事図解の新しい基準を得た |
| デメリット① | 既存のイメージに引っ張られる | 参考8枚の型をそのまま写すと他社と似るため、文言と地色で差を付けた |
| デメリット② | 収集と整理に時間がかかる | 判定の軸を先に決め、1軸2枚・合計16枚に絞って解消した |
| デメリット③ | 解釈が人によってずれる | 画像だけでなく「選んだ理由」を文章で残すことで解消した |
メリット①認識のずれを先に防げる
「洗練された」「温かみのある」といった言葉は、人によって浮かぶ画面が違います。ムードボードで見える形にすると、制作者と依頼者の間で起きがちなイメージのずれを、作り始める前に解消できます。
当社では、好みを8組の判定で文書にしてから、制作の途中で「イメージと違う」と戻す場面が無くなりました。修正回数が減れば、制作の期間と費用も下がります。
メリット②判断が速くなる
最初に色のトーンや素材感が決まっていると、制作の途中で細かな判断に迷う時間が減ります。迷ったときに立ち返る基準があるため、一貫性を保ちながら進められます。
当社の図解とアイキャッチは、決めたルールをテンプレートにしたため、記事ごとにデザインを考える工程そのものが無くなりました。判断を1回で済ませ、あとは繰り返すだけにするのが、ムードボードの実務上の効果です。
メリット③発想の幅が広がる
ジャンルを越えて素材を集める過程で、自分たちだけでは思いつかない色の組み合わせや質感の対比に出会えます。当社の記事図解の基準は、Web制作とは分野の違う調査レポートの図3枚から得たものです。
同じ業界の作例ばかりを見ていると、どこかで見た表現に収束します。分野を離れた素材を混ぜることが、発想を広げる最も簡単な方法です。
デメリット①既存のイメージに引っ張られる
参考画像を集めると、その型をそのまま写したくなります。当社のアイキャッチも、参考にした8枚の型（単色地・ラベル・白タイトル・ロゴ）をそのまま使うと他社と見分けがつかなくなるため、地色と粒子の質感、モチーフで差を付けました。
参考は「何を良いと感じたか」を取り出す材料であり、完成形ではありません。取り出した要素を自社の言葉で言い換える工程を省かないでください。
デメリット②収集と整理に時間がかかる
制限なく集めると、選別と配置に時間がかかります。当社は判定の軸を4つずつ先に決め、1軸につき2枚、合計16枚で比較を終えました。
集める枚数より、「何を比べるか」の軸の数を先に決めると、整理の時間は大きく減ります。軸が決まらないまま100枚集めるより、4軸8枚で判定した方が結論は早く出ます。
デメリット③解釈が人によってずれる
同じボードを見ても、受け取る印象は人によって違うものです。画像だけを共有すると、制作が進んだ段階で「そういう意味ではなかった」というずれが出ます。
当社は、選んだ画像の隣に「選んだ理由」と「選ばなかった理由」を文章で残し、確定したルールと確認中の仮説を分けて書くようにしました。言葉を添えたボードだけが、時間がたっても同じ判断を再現できます。
ホームページ制作のイメージ共有なら、株式会社LAYUP
株式会社LAYUP（岡山市）は、Webサイト制作と、SEO・LLMO内製化支援、AIエージェント構築研修を行っています。筆者（代表取締役・光田直史）は、この記事で紹介した8組の比較と図解・アイキャッチのルール化を自社で行い、2026年10月4日時点で26記事のアイキャッチと11記事の図解を同じテンプレートから生成する運用を続けています。
ホームページのリニューアルで「イメージが制作会社に伝わらない」「社内で好みが割れる」という方は、集めた参考サイトと避けたい印象を書き出した段階でご相談ください。比較と判定の進め方から一緒に整えます。
ご相談はお問い合わせはこちらから受け付けています。
ムードボードの作り方でよくある3つの質問
質問①イメージボードやスタイルガイドとの違いは？
ムードボードとイメージボードは、どちらも参考イメージを1枚に集めた資料を指し、実務ではほぼ同じ意味で使われています。当社では、雰囲気（色・質感・トーン）を共有する段階の資料をムードボード、具体的な構図や完成イメージに近い参考をイメージボードと呼び分けています。
スタイルガイドは、ムードボードで決めた方向を色コード・フォント名・余白の数値まで確定させた仕様書です。当社の図解テンプレートは、ムードボードで決めた「3色・見出し帯なし」をスタイルガイドの段階まで落としたものにあたります。
質問②素材の著作権にはどう配慮すればよいですか？
社内でイメージを共有する目的で参考画像を並べる段階と、その画像を制作物に使う段階は分けて考えてください。公開する制作物には、他社サイトの画像やスクリーンショットをそのまま使わず、自社で撮影・作成した素材か、利用条件を確認した素材を使います。
当社は、記事の図解と人物の表現を外部のイラスト素材に頼らず、1色の線画アイコンと自作のテンプレートで統一しています。参考にしたサイトの名前と選んだ理由は社内の記録に残し、公開物には写しません。
質問③AIでムードボードは作れますか？
作れます。Adobe Fireflyボードはテキストから画像を生成してボードに並べられ、Canvaにも「マジック生成」というAIの画像生成機能があります。参考画像が手元に無い最初の段階で、「こういう雰囲気」を仮の画像として出す用途に向いた機能です。
ただし、AIで作った画像は「自社が何を良いと感じるか」の判定を代わりにはしてくれません。当社でも生成画像は検討の材料にとどめ、判定と理由の記録は人が行っています。実写を主役にすると決めたWebサイトでは、生成画像を完成物に使っていません。
ムードボードで「どちらが好みか」を言葉にして残そう！
ムードボードとは、参考イメージを1枚に集めてデザインの方向性を共有する資料であり、価値は「どちらを選び、なぜ選んだか」を残すことにあります。作り方は次の3ステップです。
- ステップ①コンセプトを3〜5語で言語化する
- ステップ②素材をジャンルを越えて集める
- ステップ③比率と余白をそろえて配置する
集めた画像は、選んだ理由を文章にした時点で初めて次の制作に効きます。まずは「情報量と余白」のような軸を1つ決め、2枚を並べてどちらが好みかを言葉にすることから始めてください。
最初の1枚のルールができれば、以後の制作で迷う時間は確実に減ります。判定の進め方や、決めたルールをテンプレートに落とす方法で迷ったら、株式会社LAYUPへご相談ください。