1. TOP
  2. WEBサイト制作
  3. クライアントとのイメージのズレをなくす「ディレクション」と「プロトタイピング」

クライアントとのイメージのズレをなくす「ディレクション」と「プロトタイピング」

なぜクライアントとのイメージのズレが起こるのか?

クライアントと綿密な打ち合わせをしたのに「なんか思っていたのと違う・・・」と言われたことありませんか!?

今回は、このクライアントのイメージのズレをなくすための「ディレクション」と「プロトタイピング」について解説します。

 

数々のWEBデザイナーを悩ませているこのクライアントとのイメージのズレ

「じゃあ、どこを、どう、変えたらいいですか?」と聞き返してみても、明確な回答を出せるクライアントは非常に少ないのではないかと。

そして、大抵の場合、

「そもそも、それがわからないからデザイナーに相談しているんだ!貴方はプロなんでしょ!?」とこうなるわけですね。

この意識のズレを解消するのがディレクションの役割なのですが、このディレクション・・・奥が深いんです。

イメージのズレをなくすディレクションのポイント

答えはクライアントが持っている」が私の持論なのですが、その「答え」をどう引き出すかこそディレクションの本領発揮です。

そのために、私は以下の手順でWEB制作を行なっています。

  1. アイスブレイク(相手の心の壁を崩す)
  2. 情報収集(敵を知り、己を知れば百戦して殆うからず)
  3. 共通言語化(同じ土俵にたつ)
  4. 在りたい姿(目標)をイメージ
  5. Speak(使命感をかきたて、自分語りをさせる)
  6. ブランディングシナリオ作り(戦略立案)
  7. コマーシャルプラン作り(戦術選択)

↑ アイスブレイクから実際の広告戦略(コマーシャルプラン)までの一連の流れ

色々なサービスのブランディングを行なってきて感じたことは「クライアントは傷ついている」ということです。

なかなか自分の想いを伝えきれず、せっかくサイトを作っても効果を感じられていない

期待しても期待を裏切られての繰り返しになってしまっているのです。

だからこそ、まずはアイスブレイクによってクライアントの心の壁を崩すことが重要となります。

 

アイスブレイクの重要性

アイスブレイクの肝は「相手の心に寄り添う」ことです。

クライアントの心の壁を崩すためには「なぜ自分が貴方の役に立ちたいのか」という理由を熱意を持って語ることが重要です。

人は「想いで響きあう」のです。

心を開いてもらうことができなければ、クライアントの本音、真に願うことを聞き出せず、結果として「思っていたのと違う」ということになってしまうのです。

相手の悩みに目を向け、その悩みを解決するために脳に汗をかく。

持てる限りの力で相手の目標を達成するために取り組むこと。

まず「信用」してもらい、「実績」を積み上げて、「信頼」を勝ち取るのです。

信用してもらうための第一歩、それがアイスブレイクです。

 

情報収集のポイント

クライアントの心を開いたあとは、戦略を立案するための情報を集めます。

孫子の兵法の有名な一説「敵(彼)を知り、己を知れば、百戦して殆(あや)うからず

孫子の兵法について「彼を知り己を知れば、百戦して殆うからず」

孫子の兵法に学ぶサイト制作ディレクションの在り方とは

サイト制作においては以下のとおりです。

敵:業界・競合相手・世の中の流れなど事業を取り巻く環境

己:使命感・将来目標・リソース(人・物・金)の状況など

リソースの中でも人と金の部分については、心を開いてもらわなければなかなかヒアリングができません。

ただし、適切な戦略を立案するためにはこのリソースの把握が欠かせないのです。

  • 人・・・人間関係・一体感・採用状況・片腕となる存在・事業承継など
  • 金・・・売上状況推移・広告予算・固定費変動費の割合など
  • 物・・・サービス/商品による売上構成・今後のリリース予定など

サイトは作ったら終わりではありません

むしろ作ってからが重要なのです。

リソースを把握できたら、リソースの適切な配分を軸に戦略を練ることができます。

敵と己の状況(彼我の戦力差)を把握して検討し、状況によっては戦う市場を変えるマーケットチェンジことも重要となります。

参考:「レッドオーシャンからブルーオーシャンへ」

 

共通言語化の必要性

わからない言葉が出てきたら、人の脳はフリーズしてしまったり、その部分がずっと気になってしまったりします。

だからこそ、どうしても専門用語を使う場合は、その用語の定義や何故それが重要なのかを説明し、理解してもらうことが重要です。

私が今まで書いてきた記事も共通言語化を目的に執筆しています。

サイト制作において最近よく使う用語としては、

上記のスライドに記載し、既に説明してきた、モバイルファーストレスポンシブデザインユーザーフレンドリーデザインといったデザインのポイントや下記のスライドのような「SEO」「CMS」などの用語やポイントなどの説明は必須だと思います。

 

SEOやCMSの活用方法やポイントについては別の機会にしっかり説明したいと思います。

共通言語化のポイントはクライアントを置いてきぼりにしないことです。

 

在りたい姿(目標)をイメージする

クライアントがサイトを制作する目的の大半は「売上をあげること」です。

一時的ではなく、継続的な売上づくりには「ブランディング」が欠かせません。

  • 売上をあげるための「ファンづくり
  • ファンづくりのための「商品・サービスの質の向上
  • 商品・サービスの質の向上のための「在りたい姿(目標)のイメージ

この在りたい姿をイメージしてもらうための手法が「Speak」です。

Speakによる感情コントロール

 

上記記事にて解説させていただいたように

人を動かすためには「論理で説得して、感情で動かす」ことが重要です。

そして、人を動かすためには「相手が何を求めているのか」を想像することが重要なのです。

人は誰もが課題を持っていて、その課題を解決するために貴方のサービスを使う。

この考え方を JTBD(Job to be done)と言います。

クライアントが解決したい、解決すべき課題は何なのか。

クライアントのサービスを待っているユーザーはどのような課題を抱えているのか。

クライアントとユーザー双方の課題が合致(Fit)したとき、サイトはその目的を果たすことができるのです。

上記の考え方を深く知りたい人は、是非「Value Proposition Design」について読んでみてください。

私もワークショップを開催していますので、深く知りたい方は是非ご参加ください。

さて、ここまでの対応をすれば、貴方とクライアントの間には十分なコミュニケーションが図られており、貴方はクライアントの心をしっかりとグリップできていると思います。

ここからはいよいよ「デザイン」の登場です。

 

デザインディレクション

クライアントとコミュニケーションをたっぷりと行なった後は、いよいよサイトの設計図づくりです。

このサイトの設計図のことをワイヤーフレームといいます。

ワイヤーフレームをもとにデザイナーがコンテンツを伝わりやすくレイアウト(配置)し、コーダーが色々なデバイス(スマホ・タブレット・PC)表示最適・表示速度・SEOを意識しながらコーディング(実装)作業を行うのです。

このデザイナーやコーダーの作業は大変手間がかかるため、修正作業が大きな負担になってしまいます。

だからこそ、ワイヤーフレームの段階でクライアントとのイメージの擦り合わせをしっかりと行なっておくことが重要となります。

では、ワイヤーフレームを具体的にどのように作るのかを見ていきましょう。

 

従来のワイヤーフレーム作成方法

実はこのワイヤーフレームの作成、ここの間で、大幅に進化しました。(※2018.03執筆時点)

従来はどのようにワイヤーフレームを作っていたかと言うと

①まずは手書きする

デザインソフトは、重く、アイデア出しが難しかったため、まずは手書きで色々なアイデアを書き出していました。

(参考:ワイヤーフレームの考え方)

②デザインソフトを使って整形する

手書きのままではクライアントに見せても伝わりにくいため、デザインソフトを使って整形を行います。

その際に、どの要素がどこに入るのかをクライアントに伝え、必要な素材(画像・文章)を提出してもらうのです。

上記の画像のように、従来のワイヤーフレーム設計では、以下のような課題がありました。

  • 白黒が多く、色を乗せたとき大幅にイメージが違ってしまう
  • 写真などが入っていないため、出来上がりのイメージがつかない
  • どこにどの要素が入るのかを全て説明しないと伝わない

結構致命的です(涙)

正直なところ、白黒のワイヤーフレームで完成を想像しろと言われても・・・というクライアントの心の叫びが聞こえてきます・・・。

熟練のディレクターやデザイナーはたくさんのサイトを見てきているので、ここにはこのような要素が入って、色はこうでというイメージがつくと思うのですが、クライアントはそうはいきません。

ただ、素材が提出されないことにはサイトができないと言われ、イメージがつかないまま素材を提出する。

そして、デザイナーやコーダーがサイトを設置したものを見て、実物を見て初めて思っていたのと違う!」となるわけです。

そこで、手直しが入ります。

写真の出し直しや、文章の差し替え・・・デザイナーやコーダーの手を煩わせ、工数が増え、結果として単価をあげないと採算が取れないようになっていく・・・。

これが長年のWEB制作の現場の問題点でした。

ワイヤーフレーム制作を「劇的」に変えた、Adobe XD

この問題に終止符を打った(自分的には)のがAdobe XD(Experience Design)の登場です!

このAdobe XDは一体何ができるツールなのか。

私がオススメする重要な機能は次の5つです。

  • Webサイトやアプリの画面デザインをサクサク作れる
  • ケーブルで繋ぐことで実機で表示しながら制作できるライブビュー機能
  • プロトタイプ作成機能により、完成イメージがつきやすい
  • シェア&レビュー機能により、遠隔地のクライアントともやり取りが容易
  • デザインスペック機能により、デザイナーとコーダーのやり取りがスムーズに

Adobe XDが登場するまで、Webディレクターやデザイナーに主に使われていたソフトは「Sketch」でした。

ただ、Sketchでは、単体でプロトタイプ作成ができず、「Prott」という別サービスとの連携が必要となっていました。

次章にて詳しく書きますが、私はクライアントとのイメージの擦り合わせにはプロトタイプの作成(プロトタイピング)が欠かせないと考えています。

だからこそ、単体で、ワイヤーをサクサク作成でき、プロトタイプの公開から、レビュー機能まで備えているAdobe XDこそが、WEBデザイン制作の手法を劇的に変えたと感じています。

実際、私はこのXDのおかげで、UI/UXデザイナーとしての仕事を行うことができています。

プロトタイピングについて

プロトタイピングとは、実働するモデル(プロトタイプ)を早期に製作する手法およびその過程を意味する。 その目的は、設計を様々な観点から検証する、機能やアイデアを形にすることでユーザーから早めにフィードバックを得るなど、様々である。 (from Wikipedia)

上記のWikipediaからの引用にもありますが、プロトタイピングの肝は、クライアント・ユーザーからのィードバックが早い段階で得られることです。
実際に動いている画面を見るからこそ、クライアントとのイメージのずれを早期に解消することができるのです。

ここからは私が作成してきたものをもとに、プロトタイピングの実例を紹介していきたいと思います。

 

プロトタイピングの実例①(スマホサイト)

プロトタイピングの実例①(スマホサイト)株式会社Wavy様「助っ人」リニューアル提案

プロトタイピングの実例①(スマホサイト)株式会社Wavy様「助っ人」リニューアル提案

https://xd.adobe.com/view/2dcab5f5-0c3e-4277-bd8c-0bbcf018421a

こちらは現在UI(User Interface)改善をうけおっている、株式会社Wavyが運営するオウンドメディア「助っ人」のスマホ版リニューアル案として作成したプロトタイプです。(3月中にリニューアル予定!お楽しみに!!!)

いくつかボタンを設置しており、画面遷移も確認することができます。

画面遷移での確認が必要な理由は「UX」の検討のためです。

UXの重要性について

UX(User Experience)の重要性が近年叫ばれており、日本においては、UX Days Tokyoを中心に様々なワークショップが開催されています。

UXとは、ユーザーが製品・サービスを通じて得られる体験のことです。

たくさんの情報・数えきれないサービスに囲まれ、現在のユーザーは多忙です。

結果として、現在のユーザーは非常にシビアです。

見辛い・使い辛いものは、見やすく・使いやすいものにどんどん置き換わっていきます。

そのあまりの早さに多くのサービスが取り残されていっています。

ビジネスの世界は適者生存

ユーザーの行動を考えなければ生き残れないのです。

 

プロトタイピングの実例②(レスポンシブ確認)

以前、レスポンシブデザインの重要性について触れました。

レスポンシブデザインについて

Adobe XDを活用すれば、スマホ・タブレット・PCでどのようにデザイン(要素の配置や文字サイズなど)が変わるのかを実機でクライアントに確認してもらうことができます。

以下は、ロサンゼルスの自動車販売会社から、サイトリニューアルの相談を受けたときに、スマホ・タブレット・PCのデザインの違いとそれぞれのレイアウト案を説明するために作成したプロトタイプです。

プロトタイピングの実例②(レスポンシブ確認)「KONDO MOTORS様」

プロトタイピングの実例②(レスポンシブ確認)「KONDO MOTORS様」

https://xd.adobe.com/view/4c583fa4-3f72-4a80-b51f-0e00621ad61c

デバイスごとに表示が違うということを知らない人はほとんどいませんが、モックアップを作ることで、具体的なイメージが伝わり文字サイズをどれくらいにするのかなどを含めて細部までの打ち合わせができるようになります。

その結果として、後々の修正作業を大幅に減らすことができるのです。

 

プロトタイピングの実例③(ワイヤーフレーム)

実例紹介の最後は、ワイヤーフレーム(サイト全体の設計図)です。

プロトタイピングの実例③(ワイヤーフレーム)「さわやか整骨院様」

プロトタイピングの実例③(ワイヤーフレーム)「さわやか整骨院様」

https://xd.adobe.com/view/ca1f1bc2-f24e-40a9-a065-ffce845011e2

こちらは以前も紹介した、静岡の整骨院「さわやか整骨院」のサイトを制作させていただくときに打合せで作成した、サイト全体のワイヤーフレームです。

TOPページだけではなく、他のページはどのような設計にするのかを見せて話すことにより、クライアントはサイト全体の想像がつき、必要な素材(画像・文書)の提出も捗るのです。

その結果、作成にかかる工数・期間共に短くなり、サイトの公開時期も早くなります。

現在において、ビジネスで勝ち残る重要な要素に「スピード」があります。

サイトを一刻も早く、公開・リニューアルし、それによって競合するサービスから一歩先んずることが重要なのです。

 まとめ

今回クライアントとのイメージのずれをなくすための要素について色々と解説させていただきましたが、一番大切なことは、

イメージの擦り合わせをするコミュニケーション」です。

そのために、共通言語化に取り組み、言葉を尽くし、色々なツールを駆使してクライアントがイメージがつきやすいように心を砕くのです。

サイト制作は、WEBデザイナーだけで行うものではなく、クライアントと共に行うものです。

絶対にやってはいけないのは「丸投げ」です。

共に作り上げる意識を持って、待っているユーザーに良質な情報を届けていきましょう!

 

シェア大歓迎です!

Make the world better place

 

記事
クライアントとのイメージのズレをなくす「ディレクション」と「プロトタイピング」
タイトル
クライアントとのイメージのズレをなくす「ディレクション」と「プロトタイピング」
説明
「なんかイメージしてたのと違う」というクライアントとのイメージのズレをなくすための「ディレクション」と「プロトタイピング」
執筆者
メディア
NEXT Innovation

\ SNSでシェアしよう! /

Stakeholder Successの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

Stakeholder Successの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

    この記事をSNSでシェア

ライター紹介 ライター一覧

Fumio Sakurai

Fumio Sakurai

株式会社NEXT Innovation 代表取締役
小3からプログラミング(Basic)を学び、法学部 → 財務系コンサル → 外資系生保営業 → ITスタートアップ起業という異色の経歴を持つ。
職種は「ビジネスデザイナー」
事業の戦略・戦術立案から実際の運営支援、マーケティング、ブランディング、社員育成、業務改善、システム制作を行う。

おそらくアスペルガー症候群であり、常にやりたいこと・アイデアが止まらなくなってしまうため、一社専属での会社員を勤められず、起業に至った。
現在5社の顧問を行いながら、コンサルティング・ブランディング指導を行なっている。

この人が書いた記事  記事一覧

  • リスクを恐れ、縛られて生きますか? ー 「自分の人生を自分でコントロールする生き方」

  • 「投資」していますか?継続的に売上を上げ続ける会社の特徴について

  • CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

  • AdobeMUSEの開発終了にみるWEB制作の潮流

この記事もあわせて読みたい!

  • スマホ・PCのデザインはどう違うか

  • 「ブランディング」のためのリファーラルマーケティング