完成度UP！必ずやるべきデザインを仕上げる前の見直しポイント

デザイン開発には大きく3つの工程があります。

1つは情報の理解、2つめはルール設定、そして3つめにデザイン作業です。

今回は3つめの、デザイン作業が一通り終わった後にチェックすべき見直しポイントについてまとめました。

見直し作業、やるとやらないではびっくりする程完成度に差が出ます。ポイントを1つ1つ確認しデザインをより良く仕上げていきましょう！

ユーザー視点で客観的に！6つの見直しポイント

デザインが一通り出来たら、まずユーザーになりきってデザインを見てみましょう。
デザインを進めていくにつれて、計画からずれていってしまう事は良くある事です。なので改めてユーザーの視点で見直しましょう。
難しいようであれば、競合のデザインと並べて比較すると客観的に判断できる事もあります。
そうして見た時に、訴求内容が伝わるデザインになっているかどうかを確認する為の6つのチェックポイントをみてみましょう。

• デザインテイストはターゲット向きになっているか
• 直感的に訴求情報がわかりやすいか
• 文字、テキスト情報は読みやすいか
• ページ全体や各セクションにおける縦幅でストレスを感じないか
• ボタンなどの操作パーツのユーザビリティは問題ないか
• 飽きさせないレイアウトになっているか

1.デザインテイストはターゲット向きになっているか

デザイン作業中から常に気をつけているつもりでも、出来上がったらターゲットに対してテイストがずれてしまっていく事もあります。
今一度、ターゲットの立場に立ってデザインを見てみましょう。
何か違和感を感じる場合は途中からどこかの色やフォントがずれている可能性が高いです。しかし発見すれば十分に改善出来、デザインがより良くなります。

2.直感的に訴求情報がわかりやすいか

一度訴求内容(サービスや商品)が何だかを忘れてデザインを見直してみましょう。直感的に目に入る要素から訴求内容がわかりますか？

3.文字、テキスト情報は読みやすいか

テキストには、一目でわかるようなビジュアル的テキスト部分、読ませる部分、読ませなくても良いような部分があります。それぞれにメリハリをつける事でそれぞれの役割が分かれて読みやすさにつながります。
また、ランディングページデザインにおいては基本テキストは読み飛ばされるものだと考え、部分的に読んでも内容が頭に入るようなフォント設定が必要になります。

4.ページ全体や各セクションにおける縦幅でストレスを感じないか

これは特にランディングページですが、必然的に縦幅が長くなってきます。必要以上に間延びしたようなデザインになっていないか、コンテンツの区切りがわかりやすいか確認していきましょう。

5.ボタンなどの操作パーツのユーザビリティは問題ないか

ボタンであればしっかり周りの要素に埋もれる事なく差別化出来ているか、意図的ではない紛らわしい操作パーツはないかなどをチェックしていきます。

6.飽きさせないレイアウトになっているか

デザインが単調にならないように、余白の持たせ方やジャンプ率などの点において、見ていて飽きないようなレイアウトになっていますか？目線の動きで違和感がある箇所はないか確認していきましょう。

デザインの構成要素をもう一度検証して最適化する

ユーザーの視点に立って見直すポイントを6つあげましたが、今度はデザイナーの立場で見直していきましょう！
大きく、デザインの構成要素はカラー、フォント、写真(イラスト)、レイアウト、オブジェクトの5つに分けられます。

各要素が、前もって決められたルールやトンマナに沿って作られているかを、全体ではなく要素毎に分けて考え、デザインを最適化していきましょう。これによりデザインがまとまり、ぐっと完成度を上げる事ができます。

【カラー】

予め決めてある配色計画に基づいている事は重要ですが、いざ全体で見た時に本当にターゲットに合った配色になっているかをメインカラー、サブカラー、コンバージョンカラーを中心に見直してみましょう。

▼カラー見直しポイント

• メインカラーはターゲットに合っているか
• サブカラーがページ全体で統一されているか
• コンバージョンカラーは他の要素と差別化され目立っているか

【フォント】

フォントの見直しポイントは大きく2つあります。ひとつは視認性・可読性を高める事。ふたつめは画像テキストとHTMLテキストの棲みわけについてです。
またフォントの種類や太さでテイストはガラリと変わります。全体のデザインの中でフォントのテイストがずれていないか確認しましょう。

▼フォント見直しポイント

• ターゲットに対して、テイストはずれていないか
• 種類、サイズ、色において可読性があるか
• 改修が想定される部分は編集しやすいようにHTMLテキストになっているか

【写真・イラスト】

写真・イラストを見直す際に、まずは伝えたい情報がキチンと伝わる素材かどうかという点が重要ですが、仕上げのポイントとしては全体のトーンを統一させる事です。同じカメラマンが撮ったものなら良いのですが、素材サイトなどから選んでいくと多少テイストやトーンが違う素材が混在する事があります。Photoshopで調整しながら素材は全体的に統一感をもたせるようにしていきましょう。

▼写真・イラスト見直しポイント

• 写真やイラストは直感的でわかりやすいものが選定されているか
• サイズはが大きすぎたり小さすぎたりせず適切であるか
• 素材のトーンは揃っているか
• 素材のトリミングや加工がきちんとできているか

【レイアウト】

全体で見た時に、目線の流れが自然にいくかという点と、余白(マージン)の取り方の細かいツメ作業がメインになってくるかと思います。

▼レイアウト見直しポイント

• 余白の取り方はテイストにあっているか
• 上下左右、見出し周りのマージンはルールに基づいているか、もしくは統一されているか

【オブジェクト・アイコン】

最後にオブジェクトに関してですが、これも他同様、ルールに基づいているかのチェックになります。
初歩的にですが、ボタンの角丸の角度が統一されているかや、アイコンはちゃんと情報を持ったデザインになっているかなど、それぞれのパーツをよりしっかりと作り込んでいきましょう。

▼オブジェクト見直しポイント

• オブジェクトの形状がルールに沿って全体に統一されているか
• アイコンの意味が通じるか、作り込みが甘いところはないか

まとめ

いかがでしたか？デザインの見直し作業はついつい時間がなくておざなりになってしまうという事もあるかもしれません。
ですが完成させる前に一度改めて見直す事はとても大事です！予めしっかりスケジュールに組み込むようにしましょう。
また、編集を想定したデザインデータを作成する事は見直し後の改善作業をスムーズで効率的に行う為に必要になってきます！
完成前の見直しと一手間の修正でぐっと完成度を上げたデザインを作っていきましょう。