Webデザインのイメージをうまく伝えられないときは？ムードボードで外注のズレを防ぐ方法

Webデザインを外注したいものの、希望する雰囲気をうまく言葉にできず、相談を止めてしまうことがあります。

「おしゃれにしたい」「信頼感を出したい」「今っぽくしたい」と伝えるだけでは、発注者とデザイナーが別の完成形を想像する可能性があります。

ただし、デザインの専門用語を覚える必要はありません。参考サイト、色、写真、避けたい表現などを整理し、ムードボードとして視覚化すれば、言葉だけで説明するよりも方向性を共有しやすくなります。

高品質なWEBサイトデザイン、プロが制作します

 

Webデザインのイメージが伝わらない原因

イメージが伝わらない主な原因は、同じ言葉でも人によって想像するデザインが異なることです。

たとえば、「高級感のあるサイト」という要望でも、次のように複数の表現があります。

• 黒と金を使った重厚なデザイン
• 白と余白を多く使った上品なデザイン
• 明朝体と落ち着いた写真を使った和風デザイン
• 深い紺色を使った法人向けデザイン
• 商品写真を大きく使ったラグジュアリーなデザイン

「親しみやすい」「シンプル」「女性向け」「スタイリッシュ」も同様です。

言葉だけで完成形を指定すると、初稿を見た後に認識の違いが判明し、大幅な修正につながります。

発注者がデザイン用語を知らなくても依頼できる

Webデザインを依頼する際、発注者がフォント名や配色理論を理解している必要はありません。

必要なのは、事業の目的と利用者へ与えたい印象を伝えることです。

最低限、次の内容を整理します。

• 何を提供する会社や店舗か
• 誰に見てほしいか
• Webサイトを見た人に何をしてほしいか
• どのような印象を持ってほしいか
• 避けたい印象は何か
• 参考にしたいWebサイト
• 使用できるロゴや写真
• 競合サイトと同じにしたくない部分

デザイナーは、これらの情報をもとに、色、文字、写真、余白、レイアウトへ落とし込みます。

「デザインは分からないので全部お任せ」とだけ伝えるよりも、事業の特徴と避けたい方向性を共有したほうが、初稿の精度を上げやすくなります。

ムードボードとは何をまとめた資料？

ムードボードとは、Webサイトの雰囲気やデザイン方針を、写真、色、文字、キーワードなどでまとめた資料です。

本格的なデザイン制作へ入る前に作成し、発注者とデザイナーの認識を合わせるために使います。

ムードボードへ掲載する主な項目は次のとおりです。

• デザインのコアコンセプト
• 想定する利用者
• 与えたい印象
• 使用する色
• 使用候補の書体
• 写真の雰囲気
• イラストの有無
• 余白やレイアウトの方向性
• 参考サイト
• 使用を避ける表現

たとえば、法律事務所のサイトなら、濃紺、白、グレーを中心にし、余白を広く取り、落ち着いた人物写真を選ぶ方向性が考えられます。

子ども向け教室なら、明るい色、丸みのある書体、自然な笑顔の写真を中心にする方法があります。

ムードボードを確認すれば、完成デザインを作る前に「想定よりカジュアルすぎる」「写真が暗い」「色が競合と似ている」といった問題を修正できます。

言葉だけの指示とムードボードの違い

比較項目	言葉だけで共有	ムードボードで共有
色の伝え方	明るい青、落ち着いた緑など	実際の色見本を提示
写真の伝え方	信頼感のある写真	人物、背景、明るさまで確認
書体	高級感のある文字	使用候補の書体を表示
全体の雰囲気	おしゃれ、シンプルなど	複数の要素を一枚に整理
認識のズレ	完成後に判明しやすい	本制作前に確認しやすい
修正の負担	初稿後に大きくなりやすい	方向性の段階で調整できる

口頭や文章による説明が不要になるわけではありません。

言葉で目的を説明し、ムードボードで見た目を共有することで、両方の情報を補完できます。

ムードボードを作ったほうがよいケース

希望する雰囲気を説明できない

「参考サイトはあるが、どこが好きなのか説明できない」という場合に役立ちます。

複数の参考サイトから、写真、色、文字、余白などを分けて整理すれば、好みの共通点が見えてきます。

社内の意見がまとまっていない

経営者は信頼感を重視し、担当者は親しみやすさを重視しているなど、関係者によって希望が異なる場合があります。

ムードボードを見ながら話し合えば、抽象的な言葉ではなく、具体的な色や写真を基準に決定できます。

既存サイトを全面的に変えたい

リニューアルでは、現在のサイトで残す要素と変える要素を分ける必要があります。

ロゴやブランドカラーは残し、写真、文字、余白、レイアウトを変更するといった整理に使えます。

ブランドの統一感を重視したい

Webサイトだけでなく、SNS、広告、パンフレット、営業資料でも同じ印象を使いたい場合です。

ムードボードを基準にすれば、各媒体で色や写真の雰囲気がばらつくのを防げます。

オリジナルデザインを依頼したい

テンプレートを使わず、一からデザインする場合は、自由度が高い分だけ方向性の確認が重要です。

最初に基準を作ることで、発注者の好みだけでなく、事業やターゲットに合ったデザインへ進めやすくなります。

ムードボードを作る前に決める4つのこと

1．Webサイトの目的

見た目を考える前に、Webサイトの役割を決めます。

代表的な目的は次のとおりです。

• 問い合わせを獲得する
• 商品を販売する
• 予約を受け付ける
• 会社の信頼性を伝える
• 採用応募を集める
• サービス内容を説明する
• ブランドの認知を広げる

目的が異なれば、目立たせる情報やデザインも変わります。

会社の信頼性を重視する場合は、実績、所在地、代表者、取引先などを見やすくします。

商品販売が目的なら、商品の魅力、価格、購入ボタン、利用者の声を優先します。

2．想定する利用者

年齢や性別だけでなく、Webサイトを見る状況まで整理します。

たとえば、同じ美容サービスでも対象者によってデザインが変わります。

• 初めて美容医療を検討する20代
• 高価格帯の施術を探す40代
• 法人契約を検討する企業担当者
• 地域の店舗を探している子育て世帯

利用者の知識量や検討段階によって、写真、文字量、説明方法を変える必要があります。

3．与えたい印象

与えたい印象は、3つ程度に絞ります。

• 信頼感
• 親しみやすさ
• 専門性
• 高級感
• 清潔感
• 先進性
• 温かさ
• 活発さ
• 落ち着き
• 誠実さ

すべてを入れようとすると、方向性が曖昧になります。

「専門性を最優先にしつつ、堅すぎない印象にしたい」のように、優先順位を付けて伝えます。

4．避けたい印象

希望だけでなく、避けたい方向も重要です。

• 子ども向けに見えるデザインは避けたい
• 派手な原色は使いたくない
• 高級すぎて価格が高く見えるのは避けたい
• 医療機関のように固い印象にはしたくない
• 競合と同じ青色中心にはしたくない
• 写真素材らしさが強い人物写真は避けたい

避けたい例がある場合は、該当するサイトや画像を提示します。

参考サイトは「丸ごと好き」で選ばない

参考サイトを送るときは、サイト全体ではなく、どの部分を参考にしたいか説明します。

確認する項目は次のとおりです。

• ファーストビュー
• 配色
• 写真
• 書体
• 余白
• ボタン
• メニュー
• サービス紹介
• 実績の見せ方
• スマホ表示
• アニメーション
• 問い合わせ導線

たとえば、次のように伝えます。

• A社は配色を参考にしたい
• B社は写真の使い方が好み
• C社はサービス紹介が読みやすい
• D社のようなアニメーションは不要
• E社と同じ業種だが、似すぎないようにしたい

複数サイトを組み合わせることで、デザイナーは発注者の好みと事業上の要件を分けて理解できます。

参考サイトを選ぶ際の注意点

競合サイトだけを選ばない

同業他社だけを参考にすると、似たデザインになりやすくなります。

業種が異なっても、ターゲットや与えたい印象が近いサイトを含めます。

たとえば、上品さを重視する歯科医院なら、ホテル、化粧品、住宅などのサイトも参考になります。

大企業のサイトをそのまま基準にしない

大企業のサイトは、撮影、動画、イラスト、システム開発に大きな予算を使っていることがあります。

同じ見た目を小規模な予算で再現できるとは限りません。

参考にしたい要素を絞り、予算内で実現できる範囲を確認します。

見た目だけで選ばない

きれいなサイトでも、自社の目的に合うとは限りません。

問い合わせ獲得が目的なら、ボタンの位置や情報の順番まで確認します。

ムードボードとワイヤーフレームの違い

ムードボードとワイヤーフレームは役割が異なります。

比較項目	ムードボード	ワイヤーフレーム
決める内容	雰囲気、色、写真、書体	情報、順番、配置、導線
主な目的	見た目の方向性を共有	ページ構成を設計
作成時期	本デザイン前	本デザイン前
写真	イメージ写真を使用	仮の枠で示す場合がある
色	使用候補を具体化	白黒やグレーが中心
確認する人	発注者、デザイナー	発注者、デザイナー、実装担当者

ムードボードだけでは、どの情報をどこに配置するか決まりません。

ワイヤーフレームだけでは、完成時の色や写真の印象まで共有できません。

方向性と構成の両方が曖昧な場合は、ムードボードとワイヤーフレームを作ってから本デザインへ進みます。

ムードボードを確認するときのチェック項目

資料を受け取ったら、単に「おしゃれかどうか」だけで判断しないでください。

次の点を確認します。

• ターゲットに合っているか
• 商品やサービスの価格帯に合っているか
• 競合と似すぎていないか
• ロゴと色が合っているか
• 使用予定の写真を用意できるか
• 文字が読みやすいか
• 希望する印象が優先されているか
• 避けたい表現が含まれていないか
• 社内の他媒体と統一できるか
• スマホ画面でも成立するか

発注者の個人的な好みだけで決めると、利用者に合わないデザインになる場合があります。

「自分が好きか」だけでなく、「対象者にどのように見えるか」を基準にします。

デザイン制作へ進む前に決める内容

ムードボードの確認後は、次の項目を確定します。

• メインカラー
• サブカラー
• 背景色
• 見出し用の書体
• 本文用の書体
• 写真の方向性
• イラストの有無
• 角丸や直線などの形
• ボタンの雰囲気
• 余白の取り方
• Webサイト全体のトーン

すべてを細かく固定する必要はありません。

修正の基準になる程度まで決め、本制作で具体化します。

高品質なWEBサイトデザイン、プロが制作します

 

このサービスでは、テンプレートを使わないオリジナルのWebサイトデザインを依頼できます。

デザインのイメージを言葉にしにくい場合は、コアコンセプト、トーン、配色、書体などをまとめたムードボード資料の作成も相談できます。

基本のデザイン制作に含まれる内容

案内されている主な制作内容は次のとおりです。

• オリジナルのWebサイトデザイン
• 全ページのPC版デザイン
• 全ページのスマートフォン版デザイン
• フリー画像素材の収集
• 修正対応
• Figma、JPEG、PNG、PDFでの納品
• 幅広い業種への対応

テンプレートへ文章や写真を差し替えるのではなく、ヒアリング内容をもとに一からデザインを構築するサービスです。

基本はデザイン制作であり、コーディング、WordPress構築、サーバーへの公開作業などは別途確認が必要です。

料金は掲載画面と本文の両方を確認する

サービスページの購入欄には40,000円と表示されていますが、サービス本文では次の料金が案内されています。

制作内容	本文記載の料金目安
トップページデザイン	80,000円から
下層ページデザイン	1ページ40,000円から
LPデザイン	1ページ80,000円から
トップページのコーディング	60,000円から
下層ページのコーディング	1ページ30,000円から

依頼内容によって料金が変わるため、表示価格だけで総額を判断せず、見積もり相談が必要です。

3ページ以上を注文する場合は、合計金額から10,000円引きとなる案内もあります。

追加で相談できる内容

ムードボード作成

デザインコンセプトを視覚化する資料です。

案内されている主な内容は次のとおりです。

• コアコンセプトの言語化
• トーンとマナー
• カラーパレット
• タイポグラフィ
• 今後の進め方
• PDF形式での資料納品

「何となくのイメージはあるが言葉にできない」という場合に適しています。

ワイヤーフレーム作成

ページの構成案を用意できない場合に相談できます。

基本は発注者側でワイヤーフレームを用意する形ですが、作成時間がない場合や、情報構成から任せたい場合は追加で依頼できます。

ロゴデザイン

Webサイトと同時にロゴを依頼する場合は、ロゴ料金から5,000円引きになる案内があります。

新規開業やブランドリニューアルで、ロゴとサイトの雰囲気をそろえたい場合に使えます。

コーディング

デザインとセットの場合、HTMLやCSSなどによるコーディングも相談できます。

ただし、次の作業は別途見積もりです。

• サーバーへのアップロード
• 公開作業
• 問い合わせフォーム
• WordPress構築
• 特殊な機能
• 外部システムとの連携

公開まで依頼したい場合は、必要な作業をすべて伝えて総額を確認します。

修正回数無制限の範囲を確認する

サービスでは修正回数無制限と案内されていますが、大幅な修正は対象外です。

一般的な調整として相談しやすいのは次の内容です。

• 色の調整
• 文字サイズの変更
• 写真の差し替え
• 余白の調整
• ボタンの見た目
• 軽微な文章変更
• 一部要素の位置変更

別途料金になりやすいのは次の変更です。

• ターゲットの変更
• サイト目的の変更
• ページ構成の全面変更
• 掲載内容の大量追加
• デザイン完成後の方向転換
• 参考サイトの全面変更
• 事業コンセプトの変更

ムードボードで方向性を確認してから本制作へ進めば、大幅修正を減らせます。

初稿を見てイメージと違った場合の伝え方

「イメージと違う」だけでは、デザイナーが修正点を判断できません。

次のように具体化します。

• 想定より明るいため、彩度を落としたい
• 親しみやすさより専門性を強めたい
• 写真が若者向けに見えるため変更したい
• 余白が少なく、情報量が多く見える
• 文字が細く、信頼感より繊細な印象が強い
• 競合サイトと配色が似ている
• 商品より人物写真が目立っている
• 高級感が強く、価格が高く見える

理由まで伝えると、別の色や写真を使った改善案を提案してもらいやすくなります。

見積もり相談で送る内容

相談時は、次の情報をまとめます。

「法人向けサービスのWebサイトデザインを検討しています。

デザインの希望をうまく言葉にできないため、本制作前にムードボードの作成も依頼したいです。

サイトの目的は、サービス内容を説明し、問い合わせを獲得することです。対象者は中小企業の経営者と管理部門担当者です。

希望する印象は、信頼感、専門性、先進性です。一方で、固すぎる官公庁風のデザインや、原色を多く使ったデザインは避けたいです。

参考サイトを3件添付します。A社は配色、B社は写真の使い方、C社は余白を参考にしたいです。

トップページと下層ページ3ページを想定しています。PC・スマートフォン版のデザインと、必要に応じてワイヤーフレーム作成も相談したいです。

原稿とロゴは用意済みですが、写真素材はありません。デザインのみの場合と、コーディングを含めた場合の見積金額、初稿予定日、最終納品予定日をご提示ください。」

決まっていない項目は、「相談して決めたい」と明記します。

デザインの方向性を共有するチェックリスト

購入前に次の項目を確認してください。

• Webサイトの目的
• ターゲット
• 最優先で与えたい印象
• 避けたい印象
• ブランドカラー
• 使用できるロゴ
• 使用できる写真
• 参考サイト
• 競合サイト
• ムードボードの必要性
• ワイヤーフレームの必要性
• PC・スマホ版の範囲
• ページ数
• 納品形式
• コーディングの有無
• WordPressの有無
• 公開作業の有無
• 修正範囲
• 納期
• ポートフォリオ掲載の可否

すべてを自分で決める必要はありません。

未定の部分と、譲れない条件を分けて伝えることが重要です。

言葉にできないイメージは視覚化して共有する

Webデザインのイメージをうまく説明できない場合は、抽象的な言葉だけで発注せず、参考サイトやムードボードを使って視覚化します。

特に確認したいのは次の項目です。

• サイトの目的
• ターゲット
• 与えたい印象
• 避けたい印象
• 色
• 写真
• 書体
• 参考サイト
• 競合との差
• PCとスマホの見せ方

ムードボードで方向性を確認し、ワイヤーフレームで情報構成を決めてから本デザインへ進めば、完成後の大幅な修正を減らせます。

高品質なWEBサイトデザイン、プロが制作します

 

デザインの希望を言葉にできない場合も、事業内容、参考サイト、与えたい印象、避けたい表現を伝えて相談できます。

ムードボード、ワイヤーフレーム、PC・スマホ版、コーディング、公開作業の範囲を確認し、見積もりに納得してから購入へ進んでください。