Webデザインのチェック項目

Webデザインをどうチェックしてよいかわからない、という方のために、Webデザインのチェックのポイントをまとめてみました。
デザインというとつい見た目の雰囲気にとらわれがちですが、Webは「操作」が必要なメディアですので、使いやすさも含め確認することでよいサイトが完成します。しっかり確認してユーザーを混乱させたり、失望させることがないサイトを手に入れましょう！

1、表示されるまでにかかる時間は長すぎないか

ユーザーがサイトで最初に体験すること、それは読み込み時間です。ページの表示速度に気を配ろう！パフォーマンスの話でも書いていますが、ユーザーは待たせられると不愉快になり、そのサイトには二度と戻ってこなくなります。
サイトが表示される時間に気を配りましょう。待ち時間が気になる場合は改善に力を入れましょう。

2、テキストが読みやすいか
（スマートフォン／タブレット／PC）

スマートフォンとPC用の両方で使用できるサイトを制作することが一般的になってきました。PCからは読みやすいのに、スマートフォンで表示すると文字が小さすぎて読みづらいサイトに出会うことがあります。すでにモバイルからのアクセスがPCからのアクセスよりも上回っているそうで、PC、スマートフォン、またタブレットでも、テキストの読みやすさをチェックしましょう。素晴らしい文章を準備しても読みづらいと読んでもらえません。

3、ページ間の移動は適切に行えるか

ユーザーがサイト内のコンテンツを自由に回遊できるできるような作りになっているかチェックしましょう。
見たいと思うコンテンツへ快適に移動できるか、いちいち戻らないといけなくて不便だと感じる箇所はないか、など確認しましょう。

4、はじめてでも馴染みやすく、ユーザがすぐ使い始められるか

どう操作すれば見たいページにたどり着けるのかわからないサイトはどんなにかっこよくても使ってもらえません。ユーザーはWebサイトの操作に慣れている方ばかりではありません。ユーザーが戸惑うような奇抜な作りになっていないか、ユーザーが使い方を学習することなくサイトの多くの機能をすぐに使えるかどうか、チェックしましょう。

5、ナビゲーションの項目につけられた名前がわかりやすいかどうか

ユーザーはナビゲーションに書かれた項目を手がかりにサイトを探します。ユーザーが情報を探すときに困らないような名前が付けられているか、専門用語などが使われていないか、社内目線でカテゴライズされていないか、情報のまとまりにふさわしい名前になっているかチェックしましょう。

6、今いる場所がわかるようになっているか

ユーザーが迷わないように今いる場所（ページ）がわかるような作りになっているか確認しましょう。例えばパンくずリストなどがあれば、現在の場所を伝えやすくなります。

7、スマートフォンで画面が拡大できるか

スマートフォンで画面が拡大できない仕様になっていると、高齢者など拡大機能を必要としている方がサイトを快適に見ることの妨げになってしまいます。また、画像内に書かれた文字などが読みづらい場合にも拡大できることが情報を伝える手助けになります。誰もが情報にアクセスできるよう気を配りましょう。

8、リンクがちゃんとリンクに見えるか

リンクなのか、そうでないのか区別がつかない場合は、リンクだとわかるように修正しましょう。ユーザーが手探りでサイトを使うようなことがないようにわかりやすい見た目にしましょう。
また、リンクではないのに、リンクされているように見えるようなものがないかもチェックしましょう。バナーに見えるのにリンクされていないただの画像だった、ボタンに見えるのにボタンではなかったということがないようにしましょう。

9、ナビゲーションやリンクボタン、リンクテキストはスマートフォンやタブレットでクリックできる十分な大きさ／スペースがとられているか

タッチスクリーンでは、リンクやボタンが小さかったり、近すぎたりすると、従来のマウス カーソルよりも正確にタップするのが難しくなります。ユーザーが間違えて誤ったターゲットをタップして困惑しないように、タップ ターゲットは十分に大きくし、他のタップ ターゲットに指を重ねずに押せるよう十分に離す必要があります。平均的な大人の指の腹のサイズは幅約 10 ミリで、Android UI のガイドラインで推奨されるタップ ターゲットの最小サイズは約 7 ミリ（モバイル ビューポートを適切に設定済みのサイトでは 48 CSS ピクセル）です。
https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately?hl=ja

10、フォームはストレスなく使えるか
（スマートフォン／PC）

Webサイトをチェックする際には必ずフォームの送信テストをすると思いますが、必ずPCとスマートフォンの両方から送信テストをしましょう。
実際に使うことで、ユーザーが感じるストレスを体験することができます。わざとエラーメッセージが表示されるような入力をして、エラー表示なども確認しましょう。
フォームはお問い合わせや、資料請求、申し込みなど、コンバージョンに繋がる重要なものになります。わかりやすく、ストレスなく使えるようになっているか必ず確認しましょう。

その他にも

• シェアボタンの動作確認
• PDFなどデータへのリンクはデータへのリンクだとわかるようになっているか
• タブのデザインは現在表示されているものとそうでないものの違いが明確かどうか

などもチェックすると良いかと思います。