独学デザイン入門

Webデザイン制作に強い味方になるヒアリングシートの作り方を解説

この授業は次のような方におすすめします。

・Webデザインの制作をすることになったのだけれど、ヒアリングシートを使うのにどんな効果があるのかを知りたい

・ヒアリングシートを手作りしたいのだけれど、どんな項目を入れれば良いのかを知りたい

・ヒアリングシートを作るにはどんなツールを使ったら良いのかを知りたい

この授業を受けていただくことで、上に挙げたようなことの疑問を解決し、クライアントから喜んでもらえるようなWebデザイン制作を作ることができる手助けになるヒアリングシートを作ることができるようになりますよ。

どうぞ最後までご覧になってください。

ヒアリングとは

先生
先生
ヒアリングというのは、Web制作を依頼された時に、クライアントから、次のようなことを聞き出すことなんだ。

・Webサイトを制作する目的

・Webサイトの方向性

・どんなデザインにしたいのか

デザイニャー
デザイニャー
クライアントと実際に会ってヒアリングをすることもあれば、最近ではZoomをを利用してオンラインでヒアリングすることもあるそうだニャン。

先生
先生
ほとんどが、初めて会う方とヒアリングすることになるんだけれど、大切なお客様になるし、円滑に話ができるコミュニケーション力が必要になるんだ。

コミュニケーションが苦手だと思っているのであれば、練習みたいに、日頃から笑顔で相手の話を聞いたり、何かを質問することを意識しましょう。

【徹底解説】Webデザインやサイト制作に必要なヒアリングのポイントこの記事は次のような方におすすめです。 ・初めてWebサイト制作を依頼された。 ・Webサイトを作る際のヒアリングはどん...

ヒアリングをする目的

デザイニャー
デザイニャー
ヒアリングをするときに、実際にクライアントが希望していたものと違うという事態にならないためにも、ヒアリングをしっかりとする必要があるニャン。

先生
先生
ヒアリングをするには次の3つの目的を持ってするようにしよう。

・クライアントの問題を理解するため

・クライアントとデザインのイメージを共有するため

・新しい視点をクライアントに提案するため

クライアントの問題を理解するため

デザイニャー
デザイニャー
まずヒアリングをする目的は、クライアントの問題を理解するためというのが第一だニャン。

先生
先生
そうだね。クライアントは、今抱えている事柄を解決するために、Webサイト制作を依頼してくるんだ。例えば次のような課題が挙げられるよ。

・多くの人に自社の商品を知ってもらいたい

・会社に貢献してくれる優秀な人材を採用したい

・企業のイメージアップをしたい

デザイニャー
デザイニャー
クライアントがどんな問題を抱えていて、どんなWebサイトを作りたいのかを、ヒアリングで把握することが必要なんだニャン。

先生
先生
そういった問題を理解して、どんな感じで商品を見せるか、企業のイメージアップをするには、どんなデザインがいいのかというように、ヒアリングをすることで、Webサイトの構成や方向性を決めていくんだ。

ヒアリングではまずは、クライアントが何に悩んでいて何を解決したいのかを聞き出していきましょう。

クライアントとデザインのイメージを共有するため

デザイニャー
デザイニャー
Webデザイナーは、クラアントとの間でデザインのイメージを共有しておくことはとても大切なんだよニャン。

先生
先生
そうだね。かっこいいというという言葉を聞いたとすると、インパクトがあってアメリカンテイストなイメージをイメージする人もいれば、シンプルでスタイリッシュなデザインをイメージする人もいるよね。

デザイニャー
デザイニャー
かっこいいとか可愛いと一概に言っても、受け取る人によってイメージするのは様々なんだよニャン。

先生
先生
初めはそう言ったように認識の違いがあるかもしれないから、クライアントがイメージしているのはどんなWebサイトなのかを、具体的に聞いてみることが重要だよ。

新しい視点をクライアントに提案するため

デザイニャー
デザイニャー
ヒアリングの際に、ただクライアントの要望を聞くだけでなく、Webデザイナーとして先導する姿勢も大切だよニャン。

先生
先生
クライアントも、どんなWebサイトを作りたいのか、具体的なことが固まっていないことも意外と多いし、そのため、クライアントからの依頼内容が抽象的なこともあるんだ。

デザイニャー
デザイニャー
クライアントが持っている課題と、作るWebサイトに期待することを聞き出して、本当にその方向性のWebサイトでいいのかを導き出すのもWebデザイナーの仕事だニャン。

先生
先生
導き出した結果、Webサイトを作る必要がないという結論になることもあるからね。

新しい視点やアイデアをクライアントに提案していきながら、言葉にしにくい細かいニーズをつかんで、本当にクライアントが望んでいるニーズを引き出して形にしていくことがWebデザイナーの仕事として望まれます。

Webデザインの仕事でヒアリングシートを使う目的とタイミング

先生
先生
Webサイトを作る際には、次のような工程があるんだ。

・要件確認

・設計

・デザイン

・コーディング

デザイニャー
デザイニャー
Webサイトの制作に携わる、ディレクターやデザイナー、コーダーなどのスタッフにクライアントの要望や方向性などの情報を共有することが必要になるんだニャン。

先生
先生
そこで役に立つのがヒアリングシートというものなんだけれど、それにはあらかじめ、クライアントへの必要事項がまとめられていて、クライアントが持っているニーズを把握するのにとても役に立つんだ。

ヒアリングシートを活用することで、

・売上

・集客アップ

・ブランディング

など、何のためにWebサイトを作りたいのかという背景を聞き出すことができますし、ページ数や配色など、どんなWebサイトを作っていくのかという方向性を固めることができます。

先生
先生
ここからは、次の2つのことについてお話ししていくね。

・ヒアリングシートを使う4つの目的

ヒアリングシートを使うタイミング

ヒアリングシート使う4つの目的

先生
先生
ヒアリングシートを使う目的は、次の4つだよ。

・クライアントの要望を詳しく聞き出して、現状把握をする

・明確なゴールを設定する

・スムーズに打ち合わせをする

・確認漏れの防止

先生
先生
Webサイトを作る際に必要な項目を質問していく時には、まず、クライアントの現状を聞き出して現状把握をすることなんだ。

デザイニャー
デザイニャー
クライアントから聞き出したことをヒアリングシートに落とし込むことによって、課題点や目指すWebサイトの役割を把握することができるんだニャン。

先生
先生
そして、ゴール設定を明確にすることによって、集客率がアップするWebサイトを作れる可能性が高くなるんだ。

デザイニャー
デザイニャー
さらにヒアリングシートは、確認漏れ防止にも役立つんだよニャン。

先生
先生
そうだね。確認漏れに気がつかないまま作業をしていってしまうと、Webサイトができた後にクライアントから修正依頼がくるなど、余計な作業が発生するリスクが出ることもあるんだ。

ヒアリングシートを使うタイミング

Webサイトを作るには、

・画面設計

・デザイン

・コーディング

などの工程があります。

デザイニャー
デザイニャー
ヒアリングをするタイミングは、これらの工程より一番早い段階が理想だニャン。

先生
先生
ヒアリング方法には、次の2つがあるよ。

・対面形式 ⇨ 実際に会っての打ち合わせ、テレビ会議など

・データ形式 ⇨ メールを使ってクライアントから回答してもらう

先生
先生
ヒアリングするときに大切なのは、質問形式で行うことだよ。

デザイニャー
デザイニャー
自己紹介の時なんかに、いきなりどうぞとお願いされても、なかなか難しいのと同じだニャン。

先生
先生
だから、クライアントが話しやすいように、質問形式にして、会話のキャッチボールをするようにするのが、ヒアリングのコツだよ。

Web制作に入ってから、クライアントの事業の狙いや方向性が変わることもあることも考えて、その都度相談しながら進行していくことがおすすめです。

Webデザインの仕事でヒアリングシートを使う3つのメリット

先生
先生
ヒアリングシートは、作る手間がかかりはするけれど、ヒアリングシートを活用することで、クライアントに喜んでもらえる提案ができるんだったら、そのメリットの方が大きいよね。

デザイニャー
デザイニャー
それにヒアリングシートは無料のツールで作れるから、お金もかからないニャン。

先生
先生
Webデザインの仕事でヒアリングシートを使うメリットは次の3つだよ。

・クライアントの要望を深く聞き取ることができる

・情報漏れを防ぐのに役立つ

・スムーズに問題解決ができる

クライアントの要望を深く聞き取ることができる

デザイニャー
デザイニャー
ヒアリングシートを使うと、クライアントが抱えている問題や課題、要望に答えることができるニャン。

先生
先生
それはなぜかというと、ヒアリングシートに書き込んでもらうことで、細かい設計のポイントや悩みを答えてもらうことができるからなんだ。

デザイニャー
デザイニャー
それに、クライアントとWebサイトの製作者の意図を合わせることができるから、クレームの発生を防ぐこともできるんだニャン。

情報漏れを防ぐのに役立つ

デザイニャー
デザイニャー
ヒアリングシートを活用すれば、クライアントに関する情報漏れを防ぐのに役立つんだニャン。

先生
先生
それはね、ヒアリングシートには、クライアントから聞き出したい内容をある程度固められているからだよ。

デザイニャー
デザイニャー
確かに、会話だけのヒアリングを行っていると、他の話題にそれていくこともありがちだけど、ヒアリングしたい内容を固めておいたら、話題がそれても元に戻すことができて、情報漏れを防ぐことに役立つニャン。

スムーズに問題解決ができる

先生
先生
ヒアリングシートを活用することで、クライアントが抱えている問題を早く解決することにも役立つんだ。

デザイニャー
デザイニャー
なぜならば、会話で質問するよりも、ヒアリングシートを使った方が、ヒアリング効果が出るからだね。

先生
先生
クライアントは悩みを解決したいと思っていても、どこに課題があるのかがわからないので、こちらの方から改善したい場所を教えてくださいと質問しても曖昧な返事しか返ってこないことが多いんだ。

デザイニャー
デザイニャー
その点ヒアリングシートを使えば、クライアントが抱えている問題の課題や解決策を導くために、細かくヒアリングすることができるんだニャン。

先生
先生
この細かくヒアリングするというのは、会話だけではできないものなんだ。

デザイニャー
デザイニャー
だから、ヒアリングシートは、クライアントの問題解決を早めるために必要なものだということなんだニャン。

Webデザインの仕事に役立つヒアリングシートの項目の9つの例

先生

先生
先生
Webデザインの仕事で役立つヒアリングシートの項目は次の10個が挙げられるよ。

・Webコンテンツを構築する目的

・狙うターゲット

・どんな情報を入れるか

・どんなデザインにしたいか

・今のWebコンテンツの状態

・クライアントが希望するコンテンツやデザイン

・クライアントが希望するコーディングやシステム仕様

・システムの仕様

・予算と納期

Webコンテンツを構築する目的

デザイニャー
デザイニャー
Webサイトを作るためには、「何のために構築するのか」という目的を知る必要があるんだニャン。

先生
先生
その理由としては、クライアントはWebサイトを作ることが目的というよりも、Webサイトを作ることで何を得ることができるのかという効果の方を目的としているからなんだ。

デザイニャー
デザイニャー
その効果については次の2つのようなものが挙げられるんだニャン。

・売上や集客が増える

・ブランディング効果

先生
先生
目的を明確にすることで、どんなWebコンテンツを作るのかという方向性を決めることができるということなんだ。

狙うターゲット

デザイニャー
デザイニャー
Webサイトを作る目的と同じように、Webサイトを訪れるターゲットについても聞き出すんだニャン。

先生
先生
その時、売上を伸ばしたいとか集客したいという要望に沿ってデザインするだけでは、「誰に向けて訴求しているのか」という部分がわからないんだ。

デザイニャー
デザイニャー
どんな人に興味を持ってもらいたいのか、ターゲットを明確にすることで、Webサイト設計の方向性が変わってくるんだニャン。

先生
先生
そうだね。例えば、ただ「男性向け」というよりも、「結婚間近の未婚男性向け」の方が、目標にするターゲットには刺さるからね。

・性別

・年齢層

・職業

・地域や言語

というように具体的にすることで、クライアントが作りたいWebサイトのイメージはつきやすいです。

デザイニャー
デザイニャー
つまり、どんなWebサイトにしたいのかというイメージをすり合わせるためには、ヒアリングでターゲットを明確にすることが重要なんだニャン。

どんな情報を入れるか

先生
先生
次は、どんな情報を入れたいのかということをヒアリングするんだ。

デザイニャー
デザイニャー
Webサイトを訪れたターゲットに、何を伝えたいのかということを知る必要があるんだよニャン。

先生
先生

どんなデザインにしたいか

先生
先生
クライアントに正確な見積もりを提示するために、どんなデザインにしたいのかについて整理しておこう。

・コーポレートカラー

・使用したい配色

・希望するイメージ

・写真素材の有無

・動画素材の有無

・ロゴマークの有無

・コピー、テキスト素材の有無

・指定フォントの有無

・デザインについての決まり

・既存のチラシや参考サイトの有無

今のWebコンテンツの状態

先生
先生
現在のサイトの情報をヒアリングシートに書いてもらうことで、クライアントが気がついていない課題に気がつくことができるんだ。

デザイニャー
デザイニャー
Webサイトのデザインなどは、クライアントからも認識できるけれど、見えない専門的なことはWebサイト制作のスキルを持っている人にしかわからないことがあるからニャン。

先生
先生
現在のサイトの情報というのは次のようなものだよ。

・サイト規模

・ドメインの有無

・サーバ管理

・アクセス解析

先生
先生
クライアントが気がついていない課題を見つけることで、クライアントからの評価も上がるんだ。

クライアントが希望するコーディングやシステム仕様

デザイニャー
デザイニャー
クライアントが希望するコーディングやシステム使用は次のような項目が挙げられるニャン。

・対応デバイスやブラウザ

・CMS指定

・SNS指定

・アクセス解析

先生
先生
上に挙げた以外にも、クライアントが希望するコーディングやシステム仕様があるようだったら、一緒に聞いておこう。

予算と納期

デザイニャー
デザイニャー
Webサイトを作る上での予算や納期は必ず記載してもらうことで、次のようなトラブルやクレームを防止することができるニャン。

・予算が足りずに作り直しになる

・納期を把握していなかったので、Webサイト公開日に間に合わなくなる

先生
先生
クライアントの予算内でできるWebサイトを作ることや、クライアントが希望する納期から逆算してスケジュールを立てていくことが大切だよ。

ヒアリングシートを作るツール

デザイニャー
デザイニャー
Webサイト制作のためのヒアリングシートを自分で作ろうと考えている人も多いようだニャン。

先生
先生
ヒアリングシート自体には決まった書式はないから、自由に作ってOKだよ。その場合は次の点に気をつけて確認しておこう。

・後から見直しやすくできているか

・社内のチーム内で共有する時のためにわかりやすくまとめられているか

先生
先生
ヒアリングシートを作成するのに良いツールは、次の3つだよ。

・Excel(Googleスプレッドシート)

・Word(Googleドキュメント)

・Googleフォーム

Excel(Googleスプレッドシート)

デザイニャー
デザイニャー
Excelは、セルに自由に色をつけたり、項目を分けたりするなど、自由なレイアウトに作ることができるもので、馴染み深く使いやすいツールだニャン。

先生
先生
左の列に項目、右の列に解答欄を作って、行ごとに管理していくことができるよ。

デザイニャー
デザイニャー
Wordも、文書作成をする際によく使う、お馴染みのツールだニャン。

先生
先生
質問項目に見出し設定をして、回答を標準テキストでクライアントに記入してもらうことで、ナビゲーションから項目を管理できるよ。

Googleフォーム

 

先生
先生
Googleフォームは、無料で使えるGoogleのWebフォームだよ。

デザイニャー
デザイニャー
項目の設定を自由にできるから、Web知識が比較的浅くても簡単に使うことができるツールだよニャン。

先生
先生
クラアントにURLを送信して回答してもらうこともできるし、ヒアリングしながら自分で回答を選択することもできるよ。

デザイニャー
デザイニャー
回答を送信することでGoogleスプレッドシートに自動的に反映できるから、データ化して管理することもできる、便利なツールだニャン。

ヒアリングシートはその都度ブラッシュアップしていこう

デザイニャー
デザイニャー
Webサイトなどの案件をこなした経験がない場合は、Webで調べたりするなどして、テンプレート的なヒアリングシートを使う方が多いと思うけど、多くの案件を経験するうちに、これも確認しておいた方がいいなという内容も出てくるニャン。

先生
先生
Webの技術の進歩もしていくからそれも合わせて、その都度ヒアリングシートをブラッシュアップしていこう。

まとめ

先生
先生
この授業では次のようなことをお話ししてきたよ。

・ヒアリングとは

・ヒアリングをする目的

・クライアントの問題を理解するため

・クライアントとデザインのイメージを共有するため

・新しい視点をクライアントに提案するため

・Webデザインの仕事でヒアリングシートを使う目的とタイミング

・ヒアリングシートを使う4つの目的

ヒアリングシートを使うタイミング

・Webデザインの仕事でヒアリングシートを使う3つのメリット

・クライアントの要望を深く聞き取ることができる

・情報漏れを防ぐのに役立つ

・スムーズに問題解決ができる

・Webデザインの仕事に役立つヒアリングシートの項目の9つの例

・Webコンテンツを構築する目的

・狙うターゲット

・どんな情報を入れるか

・どんなデザインにしたいか

・今のWebコンテンツの状態

・クライアントが希望するコンテンツやデザイン

・クライアントが希望するコーディングやシステム仕様

・システムの仕様

・予算と納期

・ヒアリングシートを作るツール

・Excel(Googleスプレッドシート)

・Word(Googleドキュメント)

・Googleフォーム

・ヒアリングシートはその都度ブラッシュアップしていこう

私たちは頑張るあなたを応援しています。