読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

Webデザイナーがクライアントの要望を把握する時の10ポイント

blur

Webデザインを学んで、初めて他人のサイトを作る時、いろいろと不安も出てくることがあるでしょう。

今回は、まだWebサイトを作ったことがない人向けに、クライアントとの対応のポイントをまとめてみました。

相手の要望を汲み取る

まずは、相手の要望を汲み取るパートです。

ここは、ほとんどプログラミングや画像編集のスキルは必要が無いですが最も重要なパートだと言えます。

というのも、このパートをないがしろにしてサイトを作った場合、ほぼ100%の確率で大きな修正が入るからです。

すると、「今まで時間をかけて作った部分が全て必要なくなった」なんてことも起こってしまいます。

初めてのあなたは、以下のポイントを守ってみてください。

ヒアリングシートを使う

paper - Webデザイナーがクライアントの要望を把握する時の10ポイント

まずは、ヒアリングシートを使いましょう。

行き当たりばったりで、クライアントのニーズや要件を聞こうとしたくなりますが、最初は基礎に忠実に行くべきです。

僕が普段、仕事をしている際に聞くようにしている項目を説明します。

  • クライアント情報(個人情報)
  • 必ずおいて欲しいコンテンツ・パーツ
  • サイト全体で出したい雰囲気
  • メインカラー(あれば)
  • 訪れるユーザーのターゲット層

このあたりは確実に聞きます。もちろん、応用的により細かく聞くこともあります。

サイト全体で出したい雰囲気というのは「明るさ」「清潔さ」「高級感」などにあたります。

カンプを作る

カンプとは「完成見本」「デザイン案」のことです。たまに、ラフスケッチと混同して表現されることが多いです。

似たようなものとして「モックアップ」「モック」「ワイヤーフレーム」「ラフ案」などがあります。

正直このあたりはどれで呼ぼうといいと思うのですが、厳密にはカンプは完成見本なので、完成形に近いデザインになっているはずです。

そのカンプの作り方ですが、細かく分類すると3パターン程あります。

HTML・CSS形式で見せる

これは、ベタ打ち(ファイルに全てのコードを直接入力、PHPなどを使わない)でHTMLとCSSを書き、クライアントに見せる方法です。

その後の制作に移る際に、かなり使いやすいですが、作成に時間がかかりやすいのがデメリットです。

PHOTOSHOPなどの画像で見せる

次は、画像編集ソフトを使います。最近は、このスタイルが一般的になります。

カンプを作るのにオススメな編集ソフトとしては

photoshop - Webデザイナーがクライアントの要望を把握する時の10ポイントcomp - Webデザイナーがクライアントの要望を把握する時の10ポイント

などがあります。

手書きで見せる

あとは、手書きで描く方法があります。クライアントの目の前でささっと描けるので、速くて柔軟性があるのがメリットです。

ただ、最近のサイトは画像の見栄えも影響してくるので、画像のイメージを出せないのが手書きのデメリットと言えます。

表現方法を統一する

最後に、相手の要望を汲み取る際に重要なポイントとして、表現方法を統一することです。

あなたが、余白のことをある時は「余白」と言い、ある時は「空白」と言うと、知識の多いクライアントは察してくれますが、ほとんどの場合は

「余白と空白って別物なのか…」と勘違いされてしまいます。

「ラフスケッチ」「ワイヤーフレーム」なども同じ事が起きます。クライアントが混乱しないように、表現方法はそれぞれ定めておくといいでしょう。

要望を形にする

次は要望を形にするパートです。正直なところ、このパートは僕達はメインで作ることしか無いのですが、この時のクライアントとの関わり方も大事です。

週1回程度で連絡を入れる

往々にして、僕たちは作成中のWebサイトに触れる機会が多いために、どこがどう変わって、どこまで進んでいてというのが理解できています。

ですが、だからといって何も連絡せずにいると、クライアントは「本当に進めてくれてるのかな…?」と不安になってきます。

初めてサイト制作の依頼をする方程、これはよく心配されるので、週1回程度で進捗報告をするようにしましょう。

この進捗報告は、あなたに2つのメリットをもたらしてくれます。

  • クライアントが安心する
  • 修正時の手戻りが防げる

クライアントが安心するのに加えて、修正で何度も何度も手戻りするのを防げるのです。

作っては壊し、作っては壊しということをやっていると、制作側としても滅入ってしまうのでこれは大きなメリットです。

確認したい部分を明確にして聞く

せっかく連絡をいれるのであれば、現時点でのサイトについてのフィードバックをもらえるといいですね。

ただし、その際には「どうですか?」という抽象的な質問はやめましょう。

「どうですか?」と聞かれた場合、クライアントはどこを見たらいいのかわからないため、何を答えればいいのかと困惑します。

その結果、何のフィードバックも帰ってきません。

feedback - Webデザイナーがクライアントの要望を把握する時の10ポイント

出来る限りクライアントがフィードバックしやすくなるように、「このメニューバーについては、イメージと違う部分はありますか?」などと聞くようにしましょう。

また、聞くだけでなく、「お任せします」と言われることを想定して、その場合はどうするかの対応策を記載しておくといいですね。

例)

「スマホで見た際のメニュー項目がデフォルトでは隠れるようにしてあります。これは、特に問題がなければハンバーガーメニュー(これも説明します)を押すと表示されるようにする予定なのですが、最初から表示しておいて欲しいなどの希望はありますか?」

相手が要望を言葉にできない時の対処法

実際には、クライアントが「こんな感じ!」といって、全然言葉が通じない時があります。

そんな時にまず行ってほしいことを紹介しておきます。

言葉の統一をする

先程も言いましたが、まずは言葉の統一をすることです。僕が今までにクライアントとわけがわからない感じになった表現は

  • グローバルナビ
  • ハンバーガーメニュー(ハンバーガーか何か?と言われました)
  • サイドバー
  • メインビジュアル
  • paddingとmargin

あたりになります。この当たりは、しっかり表現を統一しておきたいです。

カンプを作ってみせる

他には、カンプをさっと作ってみせるという方法があります。

一度目に映りイメージできるようになると、要望が具体的になってきます。

「ここのスペースをもっと広げて欲しい」など…

このカンプが作れるのであれば、準備しておくと一気に説明が楽になります。

他のサイトをいくつか見せる

カンプを作る時間まではない…といった方のために

他のサイトをクライアントに見せるといった方法もあります。

これなら、カンプを作る手間は省け、完成品のイメージもお互いに掴みやすいのでオススメです。

クライアントはイメージを表現できない

これはずっと心に刻んでおいてほしいことです。

「クライアントは、あなたに具体的にしてもらえない限り、Webサイトのイメージが表現できない」ということです。

基本的なスタンスとしては、ヒアリング→具体化→ヒアリング→具体化であると考えてください。

Webデザイナーとして持っておきたいもの

最後に、Webデザイナーとしてクライアントと会う際に、持ち合わせておきたいものについて話します。

今回は、要望を聞く瞬間なので、制作前だけに絞って言うと、大体この2つのどちらかがあればいいでしょう。

  • 紙とペン
  • タブレット

紙とペンを持っておいたほうが良いのは、その場でラフスケッチが描けるからです。これだけでも、随分話が前に進むことが多いです。

タブレットは、その場でカンプを作る人もいるようなので一応書いておきました。僕はまだそんなに即興ではできませんが…

まとめ

いかがでしたか?この記事で一貫して覚えておいてほしいことは、あなたがやるべきなのは「要望を聞く」というよりも「具体化させる」というお手伝いみたいなものです。

手戻りの少ない、楽しいサイト制作ができるように、Webデザイナーとしても出来る限りのことをしていきましょう!

 

 

 

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら