デザインを作り込んでいるときには、パーツパーツに注目しがちです。作成を進めたら、サイトのターゲットや目的に沿ったデザインとして成立しているかも確認してみましょう。
Webデザインのチェックについて
クライアントにWebデザインをチェックしてもらう前に、セルフチェックを行いましょう。
Webデザインのチェックはポイントは大きく２つに分かれます。 * クライアントが望む結果を出せるデザインか * １つのサイトとして統一され、安定感のあるデザインか
また、納品前にはデザインデータの整理も必要になります。
【デザインセルフチェックリスト】
1.仕様書・目的に沿ったデザインか
- 仕様書のデザインテイストと合致しているか
- デザイン根拠を説明できるか
- 競合サイトとの差別化・優位点があるか
- ファーストビューにインパクトはあるか
- 必要な情報が掲載されているか
- ターゲットユーザーから逸れたデザインになっていないか
- ユーザーが問題なく使用できるか
- タイトル、見出し、文章それぞれの区別がつくか
- 文字量は適切か
- テキストは読みやすいか
- スマホでも可読性・操作性が維持されているか
2.デザインルールが守られているか
- 規定のデザインルールを守っているか
- 禁止表現は使われていないか
- サイト全体のテイストに乱れはないか
- 写真の色味は揃っているか
- カラーテイストが定まっているか
- 色を使いすぎていないか
- 読みやすいフォント設計か
- 無駄なフォント切り替えはないか
- 使用している画像は綺麗か（ダミーを除く）
- パーツ毎（タイトル、見出しなど）に統一性はあるか
3.デザインデータは綺麗か（※納品時）
- 不要なデータはないか
- 画像のリンク切れはないか
- レイヤーやグループは整理されているか
- 文字サイズは整数か
- オブジェクトサイズは整数か
- どの環境の人でも確認できるか
下記では、それぞれの大項目ごとに、チェック時に意識しておきたいポイントを紹介します。
1.仕様書・目的に沿ったデザインか
一枚の絵として見た場合には素晴らしいデザインでも、目的を達成できなければWebサイトとして“良いデザイン”であるとは言えません。 Webサイトを訪問したユーザーが「ふーん、カッコいいじゃん」「サイトにお金かけてるなぁ」とだけ思って素通りしてしまったら、意味がないのです。
例えば、資料請求をしてもらうことが目的のサイトの場合。 「資料を取り寄せてみたい」とユーザーに思わせることができ、かつトップページやLPから資料請求のフォームへ行きやすいことが重要になります。
デザインしたサイトの見栄えだけではなく、
- ヒアリングや仕様書のデザイン定義に沿っているか
- WebサイトもしくはWebページを設置する目的は何か
- その目的を達成するためのの情報が掲載されているか
- 目的達成までのユーザー導線に問題はないか
という部分をもう一度見直してみましょう。
●デザインに根拠はあるか
仕事としてデザインを引き受けた際、最も重要なのが「根拠」です。
- どうしてボタンはこの色なんですか？
- この要素は、なぜここに配置したのですか？
- ここが斜めになっているのは何故ですか？
作成したデザインに対して、クライアントに上記のような質問をされた場合に、お答えできるデザイン根拠があるかを考えてみましょう。 お仕事でデザインを引き受けた以上、なんとなくという回答は出来ません。
また「格好よく見える」「おしゃれに見える」というのは、主観的なイメージですよね。 例えば、格好いいの場合は「ユーザーがどうして格好いいと思うか（ユーザーにどう思われることを狙っているか）」を説明できなくてはいけません。クライアントに聞かれた時点で、クライアントはそのデザインの意図が掴めていない可能性が高いので尚更です。
デザインした理由（根拠）が、説明できるようにチェックしましょう。 デザインに正解はありません。 部分的に多少こじつけっぽくなっても、事実でありクライアントが納得出来れば良いです。
ターゲットユーザーを考慮しているかも根拠にする
作成したサイトのデザインは、ターゲットユーザー目線で「良い」と感じられるかを客観的に考えてみましょう。
カッコいい、オシャレなどの印象は、人によって異なります。 ターゲットユーザーが10代女性の場合と、40代男性の場合では、好まれるデザインはかなり異なるでしょう。使いやすさについても同様で、Webサイトやアプリに慣れている方・あまり馴染みのない方では感じ方が違います。
下記サイトはwebデザインのアワード機関『AWWWARDS』で選ばれたポートフォリオで、とてもオシャレです。しかし、これが飲食店や病院のサイトであれば、どこを見てよいか分からず、すぐにサイトを閉じてしまうユーザーもいそうですよね。
ここまで極端ではなくとも、例えば、中高年の方がターゲットでfont-sizeが12px~14pxだったら…多くの方が「読みにくい」と感じてしまうのではないでしょうか。
アイコンを使ってスッキリしたデザインにしたつもりでも、ターゲット年齢層が高い場合は不親切で分かりにくいと思われてしまうかもしれません。 反対に10代がターゲットであれば、アイコンを取り入れたデザインのほうが「シンプルで分かりやすい」と評価される可能性が高いです。
【デザイン根拠の例】 * 10代の方に人気のある〇〇や〇〇などのサイトでは、ポップな印象を出すために補色配色がよく使われています。御社のベースカラーはオレンジですので、このボタンは差し色として青を持ってきました。
60代以上の方でも見やすく、使いやすく感じるようにフォントを少し大きめにしています。文章箇所は装飾を抑えシンプルにすることで、読みやすさを出しました。
見出しは大きめにしたほうが訪問ユーザーの目をひき、かつデザイン性も高く見えます。軽量・シンプルなデザインをご希望されていたこともあり、グラフィカルな欧文フォントを背景のように見せるデザインにしました。
●SP / TBにも適したデザインか
スマホやタブレットなど、画面が小さく指で操作する端末でも見やすさ・使いやすさが維持されているかを確認してください。
例えば、小さなテキストリンクは指でタップしにくいですよね。 ナビゲーションのようにリンク同士が近ければ尚更です。 リンク箇所がストレス無くタップできるかは、重要なポイントといえます。
そのほかに、文字を含む図の扱いもチェックしましょう、 PCでは問題なく表示されていても、スマホ幅だと文字が潰れてしまうこともあります。
情報の抜けがなく、わかりやすいか
ヒアリング、ミーティング等でクライアントから希望された内容が、きちんとコンテンツとして掲載されているか確認します。コピペミスで文字が欠けている、途中に変なスペースが入っていないかもチェックしましょう。
また、情報の分かりやすさも大切です。
- ユーザーが気になっている情報を探せるか
- クライアントが見て欲しい情報は目をひくデザインになっているか
全体を俯瞰するイメージでチェックしましょう。
文字色のコントラストが低めの場合は、画面の明るさ・コントラストを変えても読みやすさが維持されているかも合わせて確認しましょう。PCでもスマホでも、ディスプレイ設定は人によってかなり差があります。
競合他社と比較して劣った印象はないか
Webサイトの目的を達成するためには、競合他社のサイトよりも魅力的に見える必要があるでしょう。
ヒアリング時に頂いた競合サイト、また、同業種でトップクラスの知名度があるサイトと、完成したデザインを比較してみましょう。それらのサイトの「二番煎じ」のような印象になっていないか、仕事を請け負った企業の特色・メリットが伝わるデザインになっているかを確認します。
2.デザインルールが守られているか
既存のルール（レギュレーション）を守っているか
LP追加やパンフレット・販促物などがある場合、クライアント側からデザインルールを指定される場合があります。その場合は、提示されたデザインルールを守ったデザインになっているかを確認してください。
文章を作成している場合は、そちらのレギュレーション（禁止表現がある、字送りや固有名詞などの表記は統一されているか）もチェックしておきましょう。
デザインルール（レギュレーション）が設定されているか
クライアント側からデザインルールの指定がある場合も、イチから自分で決めて作った場合も、作成したデザインの中でルールが作られているかは重要です。ユーザーがサイトを認識しやすくするために、基本的なデザインルールは設定されている必要があります。
特に下記４つの項目に注意してください。
●色を使いすぎていないか
「この要素を強調したい」 「この辺が寂しいからアクセントで色を入れよう」 と、思いつきで色数を増やすと、使用色の数が膨大になってしまうことがあります。
１ページ内で使用している色数、見え方を確認しましょう。 カラフルなデザインでも、わかりやすいサイトもあります。
重要なのはサイトの安定感と、情報の優先度・色の意味が通っているかです。 例えば同じ意味のボタンが、違う色をしていたら違和感がありますよね。 色が多すぎてわかりにくい場合は、使用する色を情報の種類・優先度に合わせて絞る・同系色の濃淡に変えるなどして色でも重要度が分かるようにすると良いでしょう。
●フォントを使いすぎていないか
サイト内で使用する図版や見出しを作り込むんでいくと、つい色々なフォントを使ってしまうことがあります。結果として、パーツパーツは良いデザインであっても、全体を通してみると不安定な仕上がりになってしまうことも珍しくありません。
フォントの数はあまり増やさないように心がけましょう。 フォントを変える場合は使用する理由がある部分にのみにします。
また、見出しなどテキストで入力することを想定している部分は、Webサイトで再現できるフォントを使用します（デバイスフォントもしくはwebフォント）。Webフォントを使用する場合は何を使用するのか、ライセンス料が必要なWebフォントを使いたいのであればクライアントが支払えるかを確認しておきましょう。
●写真加工・図版は適切か
サイトに使用している写真や図が綺麗に出来ているかをチェックします。 無理に引き伸ばしていたり、解像度が低く荒く見えてしまうものがないか確認しましょう。
自作した画像がある場合は、違和感がないかもチェックします。 特にファーストビュー（ヒーロー画像）では画像の切り抜き・合成などの加工をすることも多いでしょう。中途半端な画像加工は素人っぽさが出てしまいます。 違和感なく見られるクオリティかを確認してください。
●ホバーアクション等が統一されているか
ボタンやリンクなどの部分では、アクティブを示す色・マウスホバー時の色なども設定します。これらの色の変化も、共通したルールを持たせられているかを確認しましょう。
3.納品前 > デザインデータは綺麗か
クライアントからGoが出たら、デザインデータを整理してから納品しましょう。 （※引き続きコーディングも自分で行う場合は、そのままでも化）
どのソフトでデザインをしていても共通で行うべきことは、下記の4つです。 1.不要なデータは削除する 2.文字サイズを整数にする 3.オブジェクトサイズを整数にする 4.画像・スマートオブジェクトのリンクは切れていないか
加えて、背景・画像・テキストなど、内容ごとにレイヤーもしくはグループを分けると親切です。データが整理されていないと、画像の書き出しなどにものすごく手間がかかってしまうのですよね。
同じくらいのクオリティであれば、扱いやすく整理されたデザインデータを納品してくれる方に仕事をお願いしたいはずです。競合との差別化という意味でも、デザインデータは綺麗に整理してお渡ししましょう。
フォントについて
OSによって標準でインストールされているフォントは異なります。 デザインを行う上では、初期OSフォント以外のフォントをインストールしている事もあるでしょう。
下図はIllustratorで画像リンク切れがあり、使用されているフォントがインストールされていない場合の表示です。ピンク色の背景色が、該当フォントがないことを意味しています。 原型はほぼわからないですね。
デザインデータを開く環境が、制作環境と同じとは限りません。 フォントをアウトライン化したデータ、もしくは1枚の画像として書き出したデータをセットで用意すると良いでしょう。クライアントとのやりとりも少なくてすみます。
まとめ
Webデザインは、Webサイトを使ってクライアントが目的を実現できることを第一に行います。素敵なデザインを作ることが目的ではなく、目的を果たすための手段がデザインなのです。
デザインをしていると、パーツを作り込むことに拘ってしまいがち。 クライアントの要望、ターゲットユーザーの好み、使いやすさ（見やすさ）などがおざなりになっていないか、ある程度形ができたら「そのデザインの根拠が説明できるか」を客観的にチェックしてみましょう。