依頼したWEBデザインの初稿チェック方法【デザインディレクション】

最近はデザイナーとして作る側になることが多いのですが、デザイナーさんに依頼して、出来上がったデザインをチェックする際の考え方をまとめました。（誰かに説明する時のための覚え書き✨）

前提として、WEBデザインを依頼する際には、サイトマップと下記の内容を記載したデザイン指示書をお送りしています。

・サイトのテーマ、デザインコンセプト
・ターゲット、ペルソナ
・デザイン対象ページ
・テイストの参考サイト
・色の参考サイト
・パーツの参考サイト
・ワイヤー
・ギミックの仕様

❶指示書を見て自分が目指したいデザインを思い出す

本当は、覚えているのが理想なのかもしれませんが……複数の案件を同時進行していたりすると、デザインを依頼している間に別の業務をしているので、もう一度「自分がこの案件で目指したいデザイン」を思い出す必要があります。

この作業を飛ばして初稿を見ると、「上がってきた初稿の方向性に引っ張られる」ことがあります。
私もメンターのチェックを卒業するまでは、本当はAというテイストのデザインにしたかったのに、デザイナーさんが作ったBのテイストに合わせて修正依頼を書いてしまう…ということがありました。

まずは初稿デザインを開く前に、自分が作成した指示書を見返して、「完成形のイメージ」を頭の中に思い浮かべます。
そうして初めて初稿デザインを開くことで、「完成形のイメージとデザインの乖離している部分」を見つけやすくなります。

❷上から下までざっと見て違和感を書き出す

スマホ表示用のデザインの場合、実寸サイズ（例：幅375px）で見て、できれば実機でも見てみます。
デザインを見ながら、具体的な修正案を考える前に、自分が修正したいと思った、違和感を感じたポイントを書き出していきます。
部分的な修正案を上から順に考えていると時間がかかってしまったり、全体のバランスが崩れてしまう事があるため、とりあえず全体の課題を把握してから全体を60点→80点のデザインに引き上げる修正を考えるイメージで、課題を書き出していきます。
例えば、以下のように書き出していきます。

・余白が狭い
・枠枠している
・装飾のバランスがよくわからない
・見出しと本文のジャンプ率。全体のバランスが悪い
　文書構造を意識したい
・コントラストが弱く読めない見出しがある
・ふきだしは角丸に、線を付けるとしても薄くしたい
・ボタンのデザイン、線の色が濃すぎて見出しよりも目立ってしまう
・黄色、ターコイズは塗りで使用する部分は薄くしてほしい
・なんかボタンがうるさい
・フッターの印象が悪い、汚い　ベージュは塗りで使用しない
・フッターのパーツ　いきなりビジネス向け感がある

こちらは実際の案件で私が書き出した違和感です。
誰に見せるわけでもないので、自分が読んでわかるように書けばOKです（笑）。
具体的に書くことで、自分で課題の解決策がわからなくても、上司やメンターに「このあたりが枠が多い印象なので修正したいのですが、変更案が思いつかなくて…」と相談することもできます。

❸参考サイトと見比べて、違いを見つけ修正案を考える

【まずは全体感の調整】
・全体：色の割合を参考サイトに合わせる
└デザインを50％くらいの表示にするなどして、ページ全体でベースカラー、サブカラー、アクセントカラーの比率がイメージしていたものとあっているか確認。比率がイメージとずれていれば調整します。
また、参考サイトとは異なっていても、目立たせたい部分が目立っていないときは別の色を入れる事があります。

・全体：参考サイトとデザインルールの違いを見つける
└先ほど書き出したデザインの違和感を基準に、目指していたデザインと何が違うのか？を見ていきます。

・参考サイトは目立たせる部分にのみ黄色を使っているが、デザインではあちこちに使われていて色が効いていない
・参考サイトでは塗りの背景で情報を区切っているが、デザインでは枠線のボックスが多い
・参考サイトと文字のジャンプ率、余白の大きさが違う
・参考サイトでは写真が大きく使われているが、デザインでは小さい
・参考サイトとモチーフの入れ方(目を引きたい部分にのみ入れるなど)や、使われている回数が違う

といったように、目指したデザインとのデザインルールの違いを見つけていきます

・全体：基本的には色がなくても画面構成と文字組だけでデザインが成立するようにする
└フォント、文字サイズ、余白、レイアウトだけでも画面が成立するように調整をします。
見づらい画面のときは

・グルーピングが文字と余白だけでもわかるか
・外枠より内枠の方が余白が小さくなっているか
・余白は行間より広くなっているか
・文字サイズは文書構造に合わせて入れ子状に小さくなっているか

という点をチェックしていきます

【全体の後に細部を調整】
・細部：目立たせたいポイントを目立たせる
└リンクボタンや見せたいコンテンツ、キャッチ、バナーなどが、画面の中で目立っているか、画面をスクロールしてきて目を引くデザインになっているかを確認します。
「目立つ」というのは相対的なものなので、単純に派手な色や装飾をいれて目立たせるのではなく、周囲の余白を増やしてみたり、周囲の装飾を減らしてみたりということもします。

・細部：装飾を調整する
└テイストずれないか、足りない部分がないか、多すぎないかを確認します。
線や形の種類、効果の種類が増えれば増えるほど情報量が増えてしまうので、種類を減らしたり、なくても成立する装飾は引き算してみたりします。

❹修正指示書にまとめる

修正の方向性が決まったら、修正指示をまとめていきます。
私の場合はデザインに直接指示を書き込んで、変更後のイメージがあればそれも指示の近くに貼り付けます。
修正指示を書くときに気をつけているポイントは、３つあります。

【修正指示を書くポイント】
・全体のフィードバックを入れる
指示書の最初に、デザイン全体に対してのフィードバックを入れるようにします。細部の調整の指示から話が始まってしまうと、デザイン全体の雰囲気は問題ないのか？レイアウトは良いのか？あしらいだけの調整だけで良いのか？などなど、不安になるので「OKな部分」も伝え、配色やジャンプ率、余白の撮り方など全体に影響のある部分については全体のフィードバックに記載します。

■全体的に
・全体の雰囲気、配色、世界観はイメージ通りです！ありがとうございます。
・全体的にテキスト周りはボックスとボックス内のテキストとの余白が狭い印象なので、余白を広く調整したいです。
・見出しの部分、コントラストが弱く読みにくい部分を改善したいです。
・見出しと本文のジャンプ率をもっと上げたいです。参考サイトの文字サイズ、ジャンプ率を参考にしていただけますと幸いです。

例えばこのように記載します。（上記は実際の案件のものではなく、例として書きました）

・「なぜそうしたいのか」の「解決したい課題」も伝える
例えば「ここを40pxの文字にして、太字にして、背景の色は#000000にしてください」というような指示だけだと、具体的にはなっていますがデザイナー側からすると「どうしてそうしたいのだろう？」と思いつつもそれに従うしか無くなってしまいます。
「ここのキャッチはもっと目立たせたいので、文字を大きくして背景を黒くしてください。または、他の表現はありますでしょうか？」とか「枠が多い印象なので、余白や背景色でグループを表現したいです」というような指示だと、目的に合わせてデザイナーさんが提案しやすくなります。
そもそも修正指示の表現がテイストに合っていない場合は、テイストに合うようにデザイナーさんが調整してくれるかもしれません。
どのように変更するかは、ある程度デザイナーさんに委ねてしまった方が良い場合もあります。

・修正指示を作り込み過ぎない
これは上記の「デザイナーさんが従うしかない指示にしない」という意味もありますが、「指示する側の時間をかけ過ぎない」というのが一番の目的です。デザインはデザイナーさんのお仕事なので、よほどのことが無い限り「このようにしてください」という指示は最初は出さないようにします。
例えば修正指示の回数が２回までに限られている場合は、最初の修正指示は「課題と方向性を伝えて全体を調整する」ことを優先し、二稿でも思うように行かなかった場合は修正デザインを作成して「この部分はこうしてください」というようにしています。
デザイナーさんのスキルにも寄りますが、あくまでもデザイナーさんはオペレーターではなく表現のプロなので、ディレクション側もある程度はプロに相談して表現を委ねる、というテイの方が長期的にはうまくいく気がします。
伝え方が悪いのか思うように修正できず、自分でデザインを作ることもありますが……🥺。
一度お任せするワンステップがあった方が、自分の想像以上のデザインになる可能性もあるし、デザイナーさんとしても成長の機会になると思います。
（「お任せ」といっても、「なんか違う」「もっとオシャレな感じで」というような丸投げなお任せはNGですよ…！
どのような課題があって、どのような印象に変えたいのかを伝えましょう）

デザイナーさんも、自分でも解決できない迷宮デザインになってしまった場合は、メンターや上司に相談しましょう🥺

おわりに

自己流の思考の流れや気をつけているポイントをまとめてみましたが、
私がデザイナーとして担当するときは自分でコンセプトを決めてデザインすることが多く、あまり指示書を元にデザインをしたことがありません。
なので「こういう指示書だとデザインしやすいんだけどな〜」というデザイナーさんのご意見があれば教えていただけると嬉しいです！

来年も良いクリエイティブを生み出すぞ！良いお年を〜✋