torublog

Web制作の受託案件で、デザインをクライアントに提示する際に、

デザインがなかなか決まらない
デザインが決まらず別案を出すように言われる
担当者の感覚やなんとなくで色々と指摘される
修正依頼に対応していたら混沌としてきた

そんなことありませんか？マジ辛いですね。そんなエンドレス修正地獄や炎上に極力ならず、スムーズにデザインFIXまで進める方法をまとめます。今回は、比較的大きめの案件の場合の例でまとめます。正直、どんなに経験のあるディレクターが回す案件でも、デザインがスムーズに決まらない場合は、デザイナーの問題ではなく、ディレクター（プロマネ）の問題であることが多いです。ちなみに、逆にどんなにすごいデザインが作れるデザイナー・ディレクターであっても、1発で決まることはほぼないので、そこは期待しないでください。クライアントと話しながら決まる細かい部分も多いからです。

記事を閲覧するメリット

デザインを作るときに迷わなくなる
デザインがスムーズに決まるようになる
クライアントが納得してデザインが決まる
クライアントもそのデザインが良いか悪いかを判断しやすくなる

デザインが決まらずに修正対応が多くなる理由

デザインが決まらない、ひっくり返る理由は以下のいづれかです。

なぜそのデザインになったのかの説明不足

よくあるのは、そもそもデザインを提示する際に、「なぜこのデザインになったか」「なぜこうしたか」という説明や理由がきちんとできていない、もしくはそれに伴ったアウトプットになっていないからです。その結果、クライアントが納得しないからです。逆にいうと、ぱっと見「うーん」という顔をしていたクライアントが、説明を聞いて「なるほどな」と納得して1発で決まることも以前ありました。本来デザインはデザイナーがクライアントに説明すべきだと思いますが、そうでない場合もあるため、その場合は簡単にドキュメント化するなどして、社内でディレクターときちんと話して共有しておくことが必須です。また、ディレクターがクライアントにデザインを説明する際によくある勘違いとしては、説明したつもりになっていることです。何が足りていないかは、後述するデザイン方針のまとめ方、に記載します。

デザイン説明の際に決裁者がいない

これもよくあるのですが、デザイン提示の際に、担当者レベルの人のみで確認をし、後日決裁者がNGを出してひっくり返る、ということです。そうならないためには、この人がOKを出したら決定、という人に、そのデザイン確認の打ち合わせに参加してもらう必要があります。それができない場合、その決裁者に確認を取ってもらうスケジュールが追加で必要になります。担当者でOKが出た後に、社内で決裁者に確認をしてもらう、そのフィードバックをもらう、修正する、といった時間が必要だからです。その分、1・2週間時間がかかりますね。その時間は無駄なので、同席してもらうがベストです。どうしても難しい場合は、フィードバックをもらう際に、どこの何が・なぜ・どう違うのか、詳細までもらう必要があります。「なんとなく違う」と言われてそのまま持ち帰ってくるのはディレクターとして論外です。ちなみに修正と変更も全く異なるので注意してくださいね。

デザインがなかなか決まらないとどうなるか

デザインが決まらないとどうなるか。以下です。

スケジュールが遅れる
それにより公開日が遅れる
クライアントが不満を持つ
デザイナーが消耗する
ディレクターも消耗する

良いことなしです。でもそんなことは、完璧ではなかったとしても、ある程度の事前準備で70％くらいは回避できます。

デザイン修正対応が少なくスムーズに決めるための事前確認

それでは、修正をなるべく少なくして、スムーズにデザインが決まるようにするために必要なこととはなんでしょうか。

サイトの目的とターゲットを明確にする（調査・戦略）

まず、デザインの作業をする前に、その上流工程がありますよね。ディレクターの行う調査・戦略決めなどのことです。

なぜそのサイトを作るのか。
なぜそのサイトをリニューアルするのか。
そのサイトを見る・使うのは誰か。
そのサイトに来たユーザーに、どうなって欲しいのか。
そのサイトを作った結果、何を達成したいのか。

そういった前提条件があって初めて、デザインはどの方向で作るのかという検討を開始できます。

ページの目的とプライオリティを明確にする（設計）

次に、サイト全体ではなく、その単体のページの目的やユーザーの動線、ページ内にある要素とプライオリティを明確にします。トップページでも下層のページでもどれも同じです。これよりも、これを上に置く。これよりも、このボタンの方を目立たせる。この要素は重要ではないから小さくて良い、もしくはいらない。このページに来た人は、次にこのページに行って欲しい。などです。そのページに何を置くか（要素）と、何が優先順位が高いか（プライオリティ）を作る前にクライアントと詰めておくことが必要です。どうやってそれらを詰めるか、それは1つ前の工程で決まっているはずの、ターゲットや戦略によって決まります。それらが決まれば、Adobe XDなどを使ってワイヤーフレームを作り、詰めていきます。それらを詰めずに、先にデザインを作ってからその辺りを決めていくと、かなり大きく修正が必要になってしまいます。実際のデザインを見てから、順番や大きさを調整する部分もありますが、それは細かい点であって、全体の大きな軸である要素とプライオリティはブレずに決めておく必要があります。

デザインに関するヒアリングをする

次に、クライアントにデザインに関する意向を聞くためのヒアリングを行います。聞くことは以下です。

ブランドイメージの確認

企業やサービスのイメージの確認・資料の受領

デザインに関する制約事項の確認

CI/VIガイドラインや、ロゴデータの受領必ず使わないといけないフォントや色などがあるか

クライアントのデザインへの意向

クライアントの考える、与えたいイメージデザインについて、今のサイトから変えたいことデザインについて、今のサイトから変えたくないこと競合他社とのイメージの違いはどこか、近いサイトはどれか

運用で改善したい点や現状の問題点

デザインに関して、現状のサイトで困っていることや改善したいこと例）カルーセルバナーを作るのが大変なため、画像とテキストを指定するだけにしたいなどです。デザインの意向や好みはあくまで参考程度にします。

デザイン方針（コンセプト）のまとめ方

ここまでで、サイトの戦略や設計ができていれば、デザイナーはそれらの情報をまとめ、デザインの「方向性」を作り始めることができます。ここで、戦略と設計や、ヒアリングでわかったことを再度確認し、具体的にどうするかをまとめます。

ターゲットは誰か

ターゲットとなるユーザーはどういう人で、どういったことを好んで、どういった価値観を持っているか。その人にどういった印象を与えたいか、どういったイメージを与えると効果的か。その印象を与えるために、何をどうするか。を決めていきます。

ターゲットに与えたい印象は何か

サイトの目的や目標、ブランドコンセプトなどから、キーワードを抽出して、具体的にどの方向性に持っていくかを検討します。具体的には、信頼感・安心感・高級感・柔軟・のどか・可愛らしい・子供っぽい・清潔・さわやか・冷静・シンプル・健康的・堅実・進化・活動的・大胆・強烈・衝撃的・革命的・シック・ゴージャス・豪華・派手・はなやか・色っぽい・にぎやか・楽しい・愉快・若々しい・新鮮・美味しそう・まろやか・大人っぽい・荒っぽい・たくましい・ポップ・カジュアルこういったワードからどちらの方向なのか、を決めていきます。以下のようなカラーイメージスケールを使うと、キーワードからカラーの組み合わせの方向が決まり、具体的にどのような感じのイメージ・色になるかが決めやすくなります。新版カラーイメージチャートただし注意点としては、ここではまだ具体的な色は決めません。こんな感じの色、というのを決めます。

その印象を与えるためにどうするか

参考サイトから良い部分を抽出する

与えたい印象に近しいサイトを洗い出します。あくまでイメージが近いサイトのため、同じ業界や競合サイトといった参考サイトではありません。たくさんリストアップしたら、その中から今回のサイトに取り入れたいものを抽出します。メモ書きでも構わないので、たくさん書き出します。どういった視点で見るかは、次のデザイン構成要素に記載します。逆に、今回は違うなというもの、取り入れないものをまとめておくと、説明する際の比較にもなりますが、工数がかかるので省いてもOKです。頭の中に入れておいてください。

デザインコンセプト（基本指針）を決める

わかりやすいのは、まずコンセプトとして言葉を決めてしまうのもありです。例えば、

お客様に安心感を与える空間を作る
お客様とスムーズなコミュニケーションができるようにする
お客様の問題に答えて相談しやすくする
信頼と技術力が伝わるようにする

などです。これらを元に、具体的にどういった手法が必要かを言葉でまとめておくのも良いかと思います。

各デザイン構成要素の方針を決める

誰にどういった印象を与える必要があるか、が明確になったら、デザインの印象を決めるための、デザイン構成要素をどういった方向性にするかを決めていきます。デザインの構成要素とは、デザインを印象付けるものです。見た目の色だけでなく、配置する写真や、パーツの形・大きさなど様々なものがありますよね。それの1つ1つが全体の印象を決めていきます。

レイアウト

ユーザーが使う端末の画面の大きさを元に、デザインする画面領域のサイズを決めます。ファーストビューに入る高さなども決めます。伝えたいことがかなりスクロールしないと見えない、となると本末転倒ですよね。左右にサイドエリアを設けるかどうか、そのエリアは何に使うかなどの、エリアの定義も行なっておくとスムーズです。

ビジュアル

写真の扱いを決めます。どういった写真を使い、どういった加工や配置をすることで、どういった印象を出すのか、などが決まってくるため重要です。

カラー

メインカラー・サブカラー・アクセントカラー・ニュートラルカラーを決め、全体でどういった印象を与えるかを決めます。

フォント

ゴシック体なのか明朝体なのか、英語もサンセリフなのか、フォントの種類によって大きく印象が変わります。

アイコン

アイコンを使う場合はどういったものにするか。線の太さなどでもだいぶ変わりますよね。

キーエレメント

要素の形状やテクスチャーなどを決めます。例えば、ボタンやリンクブロックの形が、角ばっているか丸まっているかで印象がだいぶ変わります。

サイズ・マージン

空間をどう持たせるか。各パーツの大きさはどのくらいが最適か。要素と要素の間のマージンを持たせることによってゆったりとした感じを与えるなど、ここも印象がだいぶ変わってきます。多分もっとありますが、大きくはこのくらいでしょうか。重要なのは、これらをきっちりとしたコンセプト資料としてまとめるのではなくて、きちんと説明できるようにしておく、ということです。そして、一番はユーザーの目的につながるかどうかです。クライアントやデザイナー目線で決めてはいけません。

どういった機能性を持たせるかを決める

ユーザーがアクションを起こす部分、例えば検索であったり、申し込みボタンであったり、ページ繰りであったり、そういった部分に使いやすさやわかりやすさを出すのもデザインの役割です。そのサイトの方向性にあった内容で、こういった部分を重視する、という説明ができればOKです。

どういったトレンドを取り入れるかを決める

ここまででだいぶ方向性が固まってきたかと思いますが、トレンドを取り入れるのも重要なポイントです。もちろん必ず流行りの何かを取り入れナイトいけないわけではなく、必要なもの・効果的なもののみを使い、ある程度の今感を出すというのみです。

デザインを作成する

ここまで固まれば、あとは作ってクライアントに提示するのみです。ここから先はデザイナーの技量によったり、細かいテクニックもあり、またデザインをクライアントに提示する際の注意点もいろいろあるのですが、今回のテーマから外れるため、また別でまとめたいと思います。それでは！