クライアントに振り回されるWebデザイナーに共通した、たった一つの特徴

どうしたらクライアントの納得するデザインにたどり着けるのだろう。と考えたことはありませんか？デザインのフィードバック地獄で苦労したWebデザイナー、ディレクターの方は多いと思いますが、振り回されがちなWebデザイナーの特徴とその対処法について、ケーススタディでまとめてみました。

■クライアントに振り回されるWebデザイナー/WEBディレクターの特徴

「フィードバック指示を額面通りに受け取ってしまう」
これに尽きます。クライアントはデザインをした事が無い人がほとんどなので、修正指示もデザイン的には正しくない事がかなりの割合であります。
これは映画を観て良かった悪かったは誰にでも評価できるが、その映画をどのように修正したらよりよくなるかは経験を積んだ者にしかわからない、というのと同じことです。
にもかかわらず、「ここのボタンを赤くしてください」、「背景をグレーにしてください」という指示を額面通りに受け止めてそのまま修正してしまうのは、素人にデザインさせているのと同じことです。

■クライアントの指示の6割は違和感の訴え

6割というのは感覚的な話なので気にしないでいただくとして、例え具体的な修正指示だとしても、それは違和感の訴えに過ぎないことが多いです。前述の例だと、ボタンを赤くして欲しいのではなくて、目立たないから強調して欲しいだけだったり、背景が派手なのを少し抑えたいからグレーにしてくれといっているだけだったりします。要は赤でなくてもいいしグレーでなくてもいいのです。違和感を伝えるために自分たちなりに考えて言っているだけなので、それがよい結果を招くものとも限りません。

■クライアントが考えデザイナーはただ手を動かすだけになる

言われるままに作業をすると、デザイナーはただの作業者になり、試行錯誤してデザインの良し悪しを考えるデザイナーの役割はクライアントに移ります。これで見事なフィードバック地獄が完成します。

こうならないためには発注側がどのような意識でいるかを知ることが、デザインのやり取りでは非常に重要になります。発注側視点で具体的なケーススタディを元にその解決法について考えてみます。
（以下自著「Webデザイン受発注のセオリー」より抜粋なので、やや発注者視点になっていますが、Webデザイナー、ディレクターの方にも参考になると思います。）

アートディレクター不在時の体制

★このプロジェクトの教訓

発注者は依頼時にプロジェクトの前提事項についての説明を省きがちである。その結果どのようなズレが生じるのかを本ケースより読み取っていただきたい。またアートディレクターがいない体制時に起こりがちな「イメージの共有がうまくいかない」「フィードバックがうまくいかない」という問題についても、どのようにしたらうまくいくのかを考えながら読み進めてほしい。

■発注時のイメージ共有

中堅食品メーカーの WKS 食品では 2 ヶ月後に発売する新商品のカレールー「インドカレーの匠」のブランドサイトを宣伝部主管で立ち上げることになった。WKS 食品の Web サイトの統括はシステム管理部が行っているため、サポートとしてシステム管理部が入り、制作会社のコントロールをすることになった。

商品パッケージの製作がひと段落ついたころ、「インドカレーの匠」ブランドサイト構築の初回打ち合わせが行われた。参加者は、宣伝部から山戸主任、Webサイトを統括するシステム管理部から Web サイト担当である楠木主任だ。

商品パッケージはすでに完成しており、商品の写真素材や商品開発にあたっての世界観、ターゲットユーザーなどに関するドキュメントは揃っていた。しかし、用意されている素材自体は、商品ロゴと商品写真が 1 点、そしてパッケージの画像データがあるのみ。クリエイティブコンセプトのような資料は特にない状態だった。

現在のカレールー市場は、ほぼすべての商品が、小麦粉を使用する欧風カレーとなっている。タマネギとトマトとスパイスをベースとして小麦粉を使用しないインド風のカレールーは、インドカレーに対する敷居の高さもあって、商品が少ない。「インドカレーの匠」は、本格インドカレーと従来の欧風カレーの中間で「インドカレーの入門」のポジショニングを狙う、戦略的な商品である。

そのため、プロモーションでも極端なインド色は出さず「手軽に作れるマイルドなインドカレー」という方向性でプロモーションを行うことが社内会議で決定された。Web サイトのコンテンツも、一般になじみ深いバターチキンやキーマカレーのレシピ、日本の季節の素材を使ったレシピなどを掲載する方向で進めることになった。

■「ポップなインドカレー」の解釈

楠木主任は、取引実績のある 2 社の制作会社に声をかけ、2 社から出てきた見積もりと納期を比較して、ニルヴァーナデザインという 8 名ほどの小規模制作会社に依頼することにした。

ニルヴァーナデザインは、小規模の案件を素早く作らなければいけないような場合に重宝する制作会社だ。分業化はあまりされておらず、ディレクションもデザインもコーディングもみんながやるという体制で、スピード感がある。その反面、専門性が低く、デザインの細かいツメが甘いという特徴があった。ニルヴァーナデザインとの打ち合わせで、楠木主任は商品をひと通り説明した後、次のようにデザインの依頼をした。

と伝えた楠木だったが、打ち合せ中にニルヴァーナデザインの蓮池が無類のインドカレー好きということがわかり、その後は大いに盛り上がった。

■ムードボードでズレを埋める

打ち合わせから 1 週間後、ニルヴァーナデザインから提出されたデザインは、極彩色のバックグラウンドにヒンディーとおぼしき外国語が並び、インド料理店に流れるミュージックビデオのような世界観だったため、楠木主任は面食らってしまった。ニルヴァーナデザインの蓮池がインドカレー好きということで安心していたが、よりコアなインドマニア的な方向にズレてしまったようだ。

楠木主任は急遽、再度デザインの要件を伝える打ち合わせを開いた。言葉では誤解がより広がる可能性があったため、初期段階で見せないままでいた商品のポジショニングマップ（図 1）以外に、新たにムードボードを作成し、イメージのズレについて説明した（図 2）。

とばつが悪そうに答えた。言葉にできなかったイメージを蓮池が的確に表現してくれたことで、今回は意図が伝わったことを確信できた楠木主任であった。

■指示した通りのデザイン…

再度ニルヴァーナデザインから提出されたデザインは、方向性はほぼ問題なくなっていた。しかし、アイキャッチとなる画像のサイズがバラバラだったり、妙な余白があったり逆に狭かったり、完成度としてはもう一歩であった。楠木主任は、方向性も含めて宣伝部に確認を依頼したところ、修正の依頼が戻ってきた。そこに楠木主任が気になるポイントを追記する形で、修正依頼をニルヴァーナデザインに戻した。

その結果上がってきたデザインは、余白の幅や写真のサイズは整ったものの、ボタンの赤色は場違いで、タイトル周りの虎もやけに目立ってしまいバランスが崩れていた。ニルヴァーナデザイン側で考えた形跡がほとんどない仕上がりであったため、楠木主任はさらに細かく指示を行った。

その後、修正の回数を重ねるたびに、上がってくるデザインは楠木主任の指示通りで何のひねりもないものなっていった。

「いったいどちらがデザインをしてるのかわからない」楠木主任はそう思いながらも、度重なる修正の末、何とかまとめることができた。しかし宣伝部の不満は、プロジェクト完了後の言葉ににじみ出ていた「次に依頼するときはもっとデザイン力のある会社にしていただけないか」

■Analytics 【分析】

このケースの課題は、依頼時と修正指示時の 2 つである。依頼時の課題は後に自己解決しているが、「ポップ」という言葉の解釈の違いによるミスリードである。

修正指示時の課題は、修正指示にアートディレクションの指示を混在させてしまった結果、デザイナーが考えなくなってしまったことだ。どのような点が問題だったのかポイントごとに見ていこう。

●依頼時の課題

依頼者（このケースでは楠木主任）は依頼内容に関する情報を豊富に持っており、さまざまな場面で何度も検討を重ねているため、関係情報や前提事項について説明を省きがちである。社内会議で話し合われた「手軽に作れるマイルドなインドカレー」というプロモーションの方向性についてもドキュメント化されておらず、制作者に伝わっていない。

それに比べ、制作者（このケースではニルヴァーナデザインの蓮池）はこのプロジェクトの教訓事項や情報をほとんどど持っていないため、目の前の言葉に敏感に反応する傾向にある。

その結果「ポップ」という言葉の解釈が大幅にズレたのである。このケースはフィクションのためいささか大げさに書いているが、実際のプロジェクトでも、このような言葉の解釈のズレが重なった結果として、成果物に大きなズレが生じることが多々ある。

このケースでは楠木主任がいち早く状況を察知してムードボード及びポジショニングマップを使っているが、クリエイティブのイメージ共有においてムードボード及びポジショニングマップは有効な手段である。これらを作る時間がない場合は、打ち合わせ時に参考となる Web サイト見ながら方向性を検討していくのも有効な方法である。

●修正指示時の課題

修正指示書にあった内容は、次のように分類できる。

1. アートディレクション
   1. ページ内のボタンを「赤に」という指示
   2. タイトル周りの象の装飾に「イメージと違います。象じゃなくてトラを入れてみては？」という感想
2. 表現方法に関する要望・指摘
   1. 「画像サイズを合わせてください」という指示
   2. 余白の間隔をピクセル単位でそろえさせる指示
3. 要件達成に関する指示・要望・指摘
   1. ラベル修正の指示
   2. 写真を差し替えさせる指示

デザイン自体に正解がないように、デザインの修正指示にも正解は１つではない。だが「どのような表現方法にするか？」というデザインを考える部分（アートディレクション）について明確に担当を線引きしておかないと、このケースのようにどちらがデザインしてるのかわからなくなる。

ページ内のボタンを「赤に」というような明確な指示は、デザイナーにとって深く考えずにその通り実行するのが手っ取り早い解決手段となってしまう。十分な経験があったり機転が利くデザイナーであれば、なぜ「赤に」という指定なのか？　決して「赤がよい」わけではなく、強調させたい、もっと目に付かせたいというだけかもしれない。だとしたら赤以外でもっと適切な表現がある、と考えるだろう。

この場合は「このボタンをもっと強調したいので、デザインを提案いただけませんか？」というようにデザイナー側に意図を伝え、表現方法の提案を持ちかける方法がよく取られる。

同様に、タイトルまわりに入った象のイラストに対する「イメージと違います。トラを入れてみては？」というフィードバックも同様に指示に近い。「タイトルまわりはもうすこし落ち着いたものにしたい。色はアーシーカラーなどのようなものでまとめたい。象のイラストは、異国情緒がありすぎるように思います。何案かご提案ください」というフィードバックはどうだろうか。ただし、あらゆる内容に何案も求めることも余計な工程となる場合があるので、ディスカッションで結論を出せればそれに越したことはない。
※以上Webデザイン受発注のセオリー(P192〜P199)より抜粋。イラスト：ケン・サイトー

Webデザイン受発注のセオリー デザインコントロールが身につく本

今回自著のWebデザイン受発注のセオリーが増刷決定ということで、版元のワークスコーポレーション様のご好意により、本ブログで掲載許可を頂き掲載しています。

ここまでであまり触れていませんが、実際には「額面どおりに受け取らない」ということだけでなく、フィードバック真意を知ったらそれをどうやったらうまく解決できるのかロジカルに伝えるのもデザイナーの役割です。なぜボタンが赤だとよくないのか？違和感の原因は何なのか？その違和感を取り除くにはどのような方法が考えられるのか？ということをロジカルに説明する必要があります。

■最後に

ここまで読んでいただければ本の宣伝だったということがお分かりいただけると思いますが(笑)、第二版増刷にあたり、改めて読み返してみたところ、手前味噌ですがケーススタディが結構面白い内容で、あまり他に類を見たことが無かったので紹介させていただきました。Twitter上でも本書についていくつかよい感想もいただいています。

https://twitter.com/keitamatsubara/status/211745957157675009

https://twitter.com/ishib/status/133727836212178945

https://twitter.com/sabatorashiro/status/120887255815557120

ともかく、クライアントの指示書に振り回されないようにする為には、相手の真意は何かを考え、デザイナーとしての役割かは何かを意識して動くことが出来れば価値の高いデザイナーになることが出来るのではないかと思います。

「Webデザイン受発注のセオリー」にはこの他にもあと6つほど、受託やっていれば笑えつつ、ある意味笑えないケーススタディが収録されていますので是非お買い求めくださいｗ

Webデザイン受発注のセオリー デザインコントロールが身につく本

↓Amazonが売り切れの場合は版元のマーケットプレイスでも購入できます。
http://www.amazon.co.jp/gp/offer-listing/486267111X/ref=dp_olp_all_mbc?ie=UTF8&condition=all