記事一覧ウェブ制作のヒアリング　良いデザインは良い質問から始まる

ディレクション 2026.11.11

ウェブ制作のヒアリング　良いデザインは良い質問から始まる

ホームページの出来を左右するのは、デザイナーのひらめきよりも、制作の前にどれだけ正確な情報を集められたかです。

「かっこいいサイトにしたい」「他社と差をつけたい」。
こうしたご要望をいただいた時、私たち制作者の頭には、すぐにいくつものデザイン案が浮かびます。
ただ、その案がお客様にとって本当に正解かどうかは、情報が揃うまで分かりません。
誰に向けたサイトなのか、何を達成したいのか、どんな印象を持ってほしいのか。
これらが曖昧なまま作り始めると、どれほど優れたアイディアでも「なんだか違う」という結果になりがちです。

料理に例えるなら、腕の良いシェフでも、食べる人の好みやアレルギー、その日の目的を知らなければ、最高の一皿は作れません。
ホームページの制作も同じです。

この記事では、私たちが制作の出発点として一番大切にしている「ヒアリング」について、実際に作ったヒアリングシートの全項目まで紹介します。

ヒアリングシートの基本
なぜヒアリングがここまで大事なのか
ヒアリングでありがちな失敗と、その防ぎ方
擦り合わせを繰り返し、相手の意図を汲み取る
デザインの要素ごとに込める意図
実践：ここまでを踏まえて作ったヒアリングシート
ヒアリングの内容を、提案と制作にどう繋げるか
まとめ　良いデザインは、良い質問から始まる

ヒアリングシートの基本

ヒアリングシートとは、サイトの制作に必要な情報を漏れなく、同じ細かさで集めるための「質問の設計図」です。

打ち合わせの場で思いつくままに質問すると、聞き漏れや、担当者による差が生まれます。
ヒアリングシートを用意しておけば、どの案件でも必要な情報を押さえられます。
お客様にとっても、事前に考えを整理するきっかけになります。

ヒアリングシートの3つの役割

情報を集める: 目的／ターゲット／予算／納期など、制作の前提になる条件を集めます。
認識を揃える: お客様と制作会社が、同じ言葉で、同じゴールを見ているかを確かめます。
判断の拠り所にする: 制作の途中で迷った時に、「最初に何を目指していたか」に立ち返るための記録になります。

一般的に盛り込む項目

分類	主な質問	何に役立つか
企業／事業について	事業の内容、強み、競合、企業理念	伝えるメッセージの核を決める
サイトの目的	問い合わせ／採用／ブランディング／ネット販売など	構成と導線の優先順位を決める
ターゲット	年齢、職業、悩み、見る端末	言葉づかい、文字の大きさ、レイアウトを決める
デザインの方向性	好きなサイト／苦手なサイト、イメージの言葉、今のブランドカラー	配色、書体、写真の雰囲気を決める
ページの中身	ページの構成、原稿と写真の有無、更新の頻度	ページ数と、更新の仕組み（CMS）の要否を決める
機能／技術	フォーム、予約、多言語、SEO、ドメインとサーバー	開発の範囲と工数を決める
予算／スケジュール	予算の目安、公開の希望日、社内の承認の流れ	実現できる計画を立てる
運用／成果	更新の担当者、数値目標、公開後の改善の体制	長く成果を出せる設計にする

大事なのは、「何を作るか」だけでなく、「なぜ作るのか」「作った後どうしたいのか」まで聞くことです。
見た目の要望だけを集めたシートでは、目的に合ったデザインにはなりません。

なぜヒアリングがここまで大事なのか

ヒアリングの質は、手戻りの量／お客様の満足度／公開後の成果の3つに、そのまま表れます。

理由1.言葉の食い違いを防ぐため

同じ言葉でも、人によって思い浮かべるものは違います。
たとえば「シンプルなデザイン」。
ある人は白を基調にした余白の多いサイトを想像し、別の人は情報が整理された分かりやすいサイトを想像します。
「高級感」も、黒と金の重厚な雰囲気なのか、明るく上品で装飾を抑えた雰囲気なのかで、出来上がるものは全く変わります。

ヒアリングでは、こうした抽象的な言葉を「具体的に言うと？」「参考になるサイトは？」と掘り下げ、お互いのイメージを揃えていきます。

理由2.手戻りを減らし、時間と費用を守るため

制作の後半で「そもそもターゲットが違った」と分かると、デザインだけでなく、構成や原稿まで作り直しになります。
直す量は、工程が進むほど大きくなります。
最初の数時間のヒアリングが、数週間分の手戻りを防ぐことも珍しくありません。

理由3.「きれいなサイト」ではなく「成果が出るサイト」にするため

ホームページは作品ではなく、事業の目的を達成するための道具です。
問い合わせを増やしたいのか、採用の応募を増やしたいのか、ブランドの信頼性を高めたいのか。
目的が違えば、同じ業種でも合うデザインは変わります。
目的と数値目標を聞いておくことで、デザインの判断に「根拠」が生まれます。

理由4.お客様自身の考えを整理するため

ヒアリングは、お客様が自社の強みや課題を言葉にする機会にもなります。
「改めて聞かれて、自社の強みがはっきりした」という声をいただくことも、少なくありません。
整理された考えは、そのままサイトのメッセージの軸になります。

ヒアリングでありがちな失敗と、その防ぎ方

ヒアリングは「やっているつもり」でも、聞き方を誤ると必要な情報が集まりません。
私たちがこれまでの経験から学んだ、代表的な失敗とその防ぎ方を紹介します。

よくある失敗	起きること	防ぎ方
見た目の好みだけを聞いてしまう	目的に合わない、きれいなだけのサイトになる	デザインより先に、目的／ターゲット／ゴールを聞く
抽象的な言葉をそのまま受け取る	「シンプル」「高級感」の受け取り方が食い違ったまま進む	「具体的には？」と掘り下げ、参考サイトで確かめる
担当者の意見だけで進める	最終決定者の確認の段階で、大きな差し戻しが起きる	最初に決定者と承認の流れを確かめ、要所で同席をお願いする
質問が多すぎる	お客様の負担が大きく、回答が浅くなる	事前の記入と打ち合わせで役割を分け、優先度の高い質問に絞る
聞いた内容を記録に残さない	「言った／言わない」が起き、判断の根拠がなくなる	議事録とデザインの方針を文書で共有し、合意をとる
制作側が答えを先に決めている	質問が誘導的になり、本音が出てこない	仮説は持ちつつ、まずはお客様の言葉を最後まで聞く

要点

特に気を付けたいのは、最後の「制作側が答えを先に決めている」です。
経験を積むほど、「このタイプの会社なら、こういうデザインが合う」という仮説を持ちやすくなります。
仮説は大切ですが、それを確かめるために聞くのではなく、覆される可能性も含めて聞く姿勢が、本当の意図を引き出す鍵になります。

擦り合わせを繰り返し、相手の意図を汲み取る

ヒアリングシートは、一度記入していただいて終わりではありません。
回答を出発点に何度も擦り合わせることで、初めてお客様の本当の意図に近づけます。

要望の裏にある目的を聞く

お客様が口にする要望は、多くの場合「手段」です。
たとえば「トップに動画を入れたい」というご要望の裏には、「工場の雰囲気を伝えて、安心感を持ってほしい」という目的があるかもしれません。
目的が分かれば、動画以外のもっと良い手段を提案できることもあります。

私たちは要望をいただいたら、「それによって、見た人にどう感じてほしいですか？」「なぜそう思われたのですか？」と、一段深く質問するようにしています。

言葉ではなく、目に見えるもので確かめる

イメージの擦り合わせは、言葉だけでは限りがあります。
そこで、次のような方法を使います。

参考サイトの共有: 「好きなサイト」だけでなく「苦手なサイト」も挙げていただくと、受け入れられる範囲がはっきりします。
イメージボード（ムードボード）: 写真／配色／書体の見本を並べ、方向性を目で見て確かめます。
ワイヤーフレーム: 色や飾りを入れる前に、情報の配置と優先順位だけを確かめます。
デザインカンプ: 実際の見た目を確かめ、細かいところを整えます。

擦り合わせの進め方

ヒアリングシートの回答を読み込む

分からない点と、矛盾している点を書き出します。
打ち合わせで掘り下げる

目的とターゲットを、言葉で決めます。
議事録とデザインの方針を共有する

文書にして共有し、合意をとります。
方向性を目で見て確かめる

ムードボードやワイヤーフレームで確かめます。
デザインを提案する

要素ごとの意図を説明したうえで、ご意見をいただきます。
ご意見を「なぜそう感じたか」まで掘り下げて直す

5と6は、納得していただけるまで繰り返します。

この時に大事なのは、修正の指示をそのまま反映するのではなく、指示の背景にある感覚を読み解くことです。
「もっと明るく」という一言が、色の明るさの話なのか、写真の表情の話なのか、言葉づかいの話なのかで、直し方は変わります。

意図を汲み取るために心がけていること

専門用語を使わず、お客様の言葉で話す
決まったことは、必ず文字にして残す
迷ったら、ヒアリングシートの「目的」と「ターゲット」に立ち返る
提案には、「なぜこうしたか」という理由を添える

デザインの要素ごとに込める意図

サイトのデザインの要素には、どれも「なぜそうするのか」という意図があり、その根拠は全てヒアリングで得た情報です。
ここでは代表的な要素ごとに、私たちが何を考えて制作しているかを紹介します。

ファーストビュー：数秒で「自分に関係がある」と思ってもらう

ファーストビューは、サイトを開いて最初に目に入る、スクロールせずに見える範囲です。
訪問した人はここを見た数秒で、読み進めるか離れるかを判断すると言われています。

込める意図は、「誰のための、何のサイトか」を一瞬で伝えることです。
そのために、次の要素を組み立てます。

キャッチコピー: ターゲットの悩みや願いに、直接語りかける言葉を選びます。
ヒアリングで聞いた「お客様が自社を選ぶ理由」が元になります。
メインビジュアル: 「人の温かさ」を伝えたいなら社員の笑顔、「技術力」を伝えたいなら製品や現場の寄りの写真、というように、何を見せるかで印象が大きく変わります。
行動のボタン（CTA）: 「お問い合わせ」「資料請求」など、サイトの目的に合った次の行動を、ファーストビューの中に置くかどうかを判断します。

企業ロゴ：企業の考え方を1つの形にまとめる

ロゴは、企業の理念や姿勢を、一番小さな面積で表すデザインです。
サイトだけでなく、名刺／看板／パンフレットなどあらゆる場面で使い、長く企業の顔になります。

ロゴの制作では、ヒアリングで次のような点を深く伺います。

社名や屋号の由来と、込めた想い
企業理念や、大切にしている価値観
お客様や社会に、どう見られたいか（信頼、新しさ、親しみやすさなど）
使う場面（Web が中心か、印刷物や看板にも使うか）

そのうえで、形／色／書体のそれぞれに意図を持たせます。
たとえば、円は調和や包容力、直線や角は誠実さや安定感、右上がりの形は成長や前進を思い起こさせます。
小さく表示しても潰れないか、白黒でも見分けられるか、といった使いやすさも確かめます。

配色：文字より先に印象を決める

色は、文字を読む前に印象を決めます。
青は信頼／誠実、緑は安心／自然、オレンジは親しみ／活力、黒は高級感／重厚感といった連想を生かし、伝えたい印象とターゲットに合わせて選びます。

今のブランドカラーがある場合はそれを軸にし、メイン／サブ／アクセントの色の割合を決めます。
アクセントの色は、「押してほしいボタン」など、目を引きたい所に絞って使います。

書体：サイトの話し方を決める

書体は、サイトの話し方のようなものです。
明朝体は上品さや伝統、ゴシック体は読みやすさや力強さ、丸ゴシックはやわらかさや親しみを感じさせます。
ターゲットの年齢層によっては、文字の大きさや行の間を広めにして、読みやすさを優先します。

写真／イラスト：その会社ならではの空気を伝える

無料の素材写真は手軽ですが、他社のサイトと同じ印象になりがちです。
出来れば実際の社員／店舗／製品を撮影し、その企業にしかない空気を伝えます。
イラストは、形の無いサービスや複雑な仕組みを分かりやすく伝えたい時に向いています。

メニュー：迷わせない導線を作る

メニューの項目名や並び順は、ターゲットが知りたい順番に合わせます。
採用サイトなら「仕事内容」「社員インタビュー」「募集要項」、企業向けのサービスのサイトなら「サービス」「導入事例」「料金」など、訪問した人が検討する順番を考えて組み立てます。

CTA（行動を促すボタン）：ゴールまでの最後のひと押し

CTA は、サイトの目的を達成するための一番大事な部品です。
ボタンの文言／色／配置／数を、ヒアリングで決めた数値目標に合わせて組み立てます。
「お問い合わせ」よりも「無料で相談する」の方が気軽に押しやすいなど、言葉選び一つで結果が変わることもあります。

フッター：最後まで読んだ人の受け皿

フッターは、ページを最後まで読んだ、関心の高い人が目にする場所です。
会社の情報、アクセス、主なページへのリンク、もう一度の問い合わせの入口を置き、「次にどこへ行けばいいか」で迷わせないようにします。

要素と、根拠になるヒアリングの項目

デザインの要素	込める意図	根拠になるヒアリングの項目
ファーストビュー	誰のための何のサイトかを、数秒で伝える	目的、ターゲット、選ばれる理由
企業ロゴ	理念と姿勢を1つの形にまとめる	社名の由来、理念、見られたい印象
配色	文字より先に印象を決める	ブランドカラー、イメージの言葉
書体	サイトの話し方を決める	ターゲットの年齢層、イメージの言葉
写真／イラスト	その会社ならではの空気を伝える	素材の有無、撮影できるか、強み
メニュー	迷わず目的の情報へ案内する	ターゲットが検討する順番、ページの構成
CTA	ゴールへの最後のひと押し	サイトの目的、数値目標
フッター	関心の高い人の受け皿になる	会社の情報、問い合わせの方法

実践：ここまでを踏まえて作ったヒアリングシート

ここまでの考え方をもとに、当社で実際に使うヒアリングシートを作りました。
全7つの区分、計40問で、それぞれの質問に「この質問をする理由」を添えているのが特徴です。

理由を添えたのは、「なぜこれを聞かれているのか」を分かったうえで答えていただくためです。
質問の意図が伝わると、回答がより具体的になり、擦り合わせの精度も上がります。

Section 1.企業／事業について

No.	質問	この質問をする理由
1	事業の内容を一言で表すと何ですか？	サイト全体のメッセージの軸を決めるため
2	お客様があなたの会社を選ぶ一番の理由は何ですか？	ファーストビューのキャッチコピーの材料にするため
3	競合する他社と比べた強み／弱みを教えてください	他社との違いを、デザインで強調するため
4	企業理念や、大切にしている価値観を教えてください	ロゴや全体の雰囲気に反映するため
5	主な競合他社のサイトの URL を教えてください	業界の傾向をつかみ、埋もれないデザインにするため

Section 2.サイトの目的とゴール

No.	質問	この質問をする理由
6	今回サイトを制作／リニューアルする理由は何ですか？	解決したい課題をはっきりさせるため
7	サイトの一番の目的は何ですか？（問い合わせ／採用／ブランディング／販売など）	構成と導線の優先順位を決めるため
8	公開した後、訪問した人に最終的にとってほしい行動は何ですか？	CTA の文言と配置を決めるため
9	数値目標はありますか？（例：月の問い合わせの数）	成果を測る基準を共有するため
10	今のサイトの不満な点／良い点を教えてください	残す点と直す点を見極めるため

Section 3.ターゲット

No.	質問	この質問をする理由
11	一番のターゲットは、どんな人ですか？（年齢／性別／職業／地域）	配色、書体、文字の大きさを決めるため
12	その人は、どんな悩みや願いを持っていますか？	心に響くコピーと構成を考えるため
13	その人は、どんな言葉で検索してサイトに来ると思いますか？	SEO と見出しの言葉選びに生かすため
14	主にスマホとパソコンのどちらで見られますか？	どちらの画面を優先して組み立てるかを決めるため
15	問い合わせや購入までに、どんな点を比べて検討しますか？	メニューとページの順番を決めるため

Section 4.デザインの方向性

No.	質問	この質問をする理由
16	サイトの印象を、3つの言葉で表すと？（例：誠実／先進的／温かい）	デザイン全体の方向性を、言葉で固めるため
17	参考にしたい「好きなサイト」と、その理由を教えてください	イメージを具体的に共有するため
18	「こうはしたくない」という苦手なサイトと、その理由を教えてください	避ける方向性をはっきりさせるため
19	指定のブランドカラーはありますか？	配色の軸を決めるため
20	使ってほしくない色や表現はありますか？	業界や企業ならではの「使えないもの」をつかむため
21	今あるロゴ、パンフレット、名刺などはありますか？	ブランドの一貫性を保つため

Section 5.ロゴについて（ロゴの制作をご依頼の場合）

No.	質問	この質問をする理由
22	社名や屋号の由来と、込めた想いを教えてください	ロゴの題材とコンセプトの出発点にするため
23	ロゴを見た人に、どんな印象を持ってほしいですか？	形／色／書体の方向性を決めるため
24	希望の種類はありますか？（文字だけ／シンボル＋文字／エンブレム）	ロゴの構成を決めるため
25	ロゴを使う主な場面を教えてください（Web、名刺、看板、制服など）	どの大きさや素材でも使えるかを確かめるため
26	英字と日本語の、どちらの表記を主にしますか？	書体を選び、釣り合いを整えるため

Section 6.ページの中身と機能

No.	質問	この質問をする理由
27	必要だと考えているページを教えてください	サイトマップを作るため
28	原稿はご用意いただけますか？（文章の作成のご依頼も出来ます）	制作の範囲とスケジュールを決めるため
29	写真の素材はありますか？撮影のご希望はありますか？	写真の質と、その会社らしさを確保するため
30	お知らせやブログなど、公開した後に更新したいページはありますか？	更新の仕組み（CMS）の要否を判断するため
31	必要な機能を教えてください（フォーム、予約、ネット販売、多言語、地図など）	開発の範囲と工数を見積もるため
32	ドメインとサーバーの契約の状況を教えてください	公開までの技術的な準備を確かめるため
33	公開した後の更新は、どなたが担当しますか？	更新しやすい仕組みにするため

Section 7.予算／スケジュール／体制

No.	質問	この質問をする理由
34	ご予算の目安を教えてください	予算の中で一番効果が出る提案をするため
35	公開の希望日と、その理由を教えてください	優先する工程を決めるため
36	制作のご担当者と、最終決定者はどなたですか？	確認と承認の流れを滑らかにするため
37	社内での確認と承認にかかる期間の目安は？	無理のないスケジュールを組むため
38	公開した後の保守や運用のサポートは必要ですか？	長く続けられる体制を提案するため
39	打ち合わせのご希望の方法を教えてください（対面／オンライン）	擦り合わせを続けやすくするため
40	その他に、気になっていることや不安なことはありますか？	言葉にしにくい要望を拾うため

作ってみて気付いたこと

実際に作ってみると、「なぜこの質問をするのか」を言葉にすることで、私たち自身も質問ごとの役割を確かめ直せました。
一方で、質問が多すぎるとお客様の負担になります。
そのため実際には、Section 1〜4を事前に記入していただき、Section 5〜7は打ち合わせの場で一緒に埋めていく、という2段階で進めています。

補足

全ての項目が埋まらなくても大丈夫です。
空欄になった質問こそ、打ち合わせで一緒に考えるテーマになります。

ヒアリングの内容を、提案と制作にどう繋げるか

ヒアリングシートは、集めて終わりではありません。
その内容を「設計の言葉」に置き換えて、初めて役に立ちます。
当社では、回答をいただいた後、次の流れで制作に繋げています。

回答を整理して読み解く

回答を読み込み、目的／ターゲット／強みを一文ずつにまとめます。
矛盾や空欄は、この段階で質問の一覧にします。
デザインのコンセプトを言葉にする

「誰に、何を、どんな印象で伝えるか」を短い文章にまとめ、お客様と合意します。
この後の判断は、全てこのコンセプトに照らして行います。
サイトマップとワイヤーフレームを作る

ターゲットが検討する順番に沿って、ページの構成と情報の優先順位を決めます。
デザインを提案する

要素ごとに、「ヒアリングのどの回答を根拠に、なぜこうしたか」を添えてご提案します。
公開した後に振り返る

ヒアリングで決めた数値目標と実際の成果を比べ、改善に繋げます。

このように、ヒアリングの回答は、提案書やデザインの説明の中で何度も出てきます。
お客様にとっては、「自分たちの言葉がどう形になったか」が見えるので、直したい所の相談もしやすくなります。
ヒアリングは制作の入口であると同時に、プロジェクトの間ずっと立ち返る「共通の地図」です。

まとめ　良いデザインは、良い質問から始まる

優れたアイディアを思い通りの形にするために必要なのは、センスよりも先に、十分な情報と、それを共有するための対話です。

ヒアリングシート: 情報を漏れなく集める道具。
「何を作るか」だけでなく、「なぜ作るのか」「作った後どうしたいのか」まで聞く。
擦り合わせ: 集めた情報を、相手の本当の意図に近づける作業。
言葉だけでなく、目に見えるもので確かめる。
デザインの根拠: コピーの一行、ロゴの曲線一つ、ボタンの色一つにまで、ヒアリングで得た根拠を込める。

この積み重ねが、見た目が美しいだけでなく、事業の成果に繋がるホームページを生みます。

私たちはこれからも、「まず聞くこと」を何より大切にしながら制作に向き合っていきます。
サイトの制作やリニューアルを考えている方は、お気軽にご相談ください。
まだ考えがまとまっていない段階でも、ヒアリングを通じて一緒に整理していきます。

参考：佐野五月『デザインはヒアリングからはじまる』（マイナビ出版、2025年）

サイトの課題を、一緒に整理しませんか

IMG-flowは大阪のWeb制作会社です。
サイトの制作から公開後の運用改善まで、できることをサービスページにまとめています。

サービスを見る相談だけでも受け付けています

この記事は参考になりましたか？

ご回答ありがとうございました

前の記事 2026年8〜10月の新機能の棚卸し　Claude／ChatGPT／Perplexity／Notion／GitHub／Google／Chrome／Figma／Adobe 次の記事ブログを書くうえで知っておきたい著作権の基本　画像／引用／埋め込みのルール