いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。
この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。
フォントサイズ
フォントサイズや行間などは文章の視認性を大きく左右します。
WCAG 2.0では英語などの場合は18ptまたは14ptの太字、日本語の場合はそれと同等の文字サイズが望ましいとされています。1pxは0.75ptと同等とされているので、18ptは24pxとほぼ同等です。さらに、行の高さ（line-height）は150%〜200%、段落の間隔は行送りの1.5倍以上が推奨されています。
＊18ptは1.5emと同等、14ptは1.2emと同等
そのほか、Googleも読みやすいフォントサイズについて基準を提示しており、これによると16pxを基本のフォントサイズ、行の高さを1.2emにすることが推奨されています。
WCAG準拠のフォントサイズは、文章メインのサイトではやや大きすぎるので、Google準拠の16pxを基準とすることがおすすめです。行間はWCAG 2.0の最低150%以上を目安にすると読みやすい文章となります。
ポイント
・文字サイズは16px〜24pxを目安とする
・行間は150〜200%を目安とする
コンテンツ幅
スマートフォンなどの小さい画面向けのデザインは考慮されているが、大きな画面向けのデザインはあまり考慮されていないというサイトがあります。大きなディスプレイのほか最近ではテレビでサイトを表示することもあります。
WCAG 2.0では文章の幅が半角文字80字、40字を越えないことが推奨されています。これは、16pxの全角文字の場合、おおよそ640pxになります。つまり、メインコンテンツの幅は640px前後を目安とすると良いでしょう。
このサイズを超えた場合、ユーザーはコンテンツを見るために視線を大きく動かす必要が出てきてしまいます。
サイドバーなどを含めた全体のコンテンツ幅に関しては、レイアウトによっても異なるので一概には言えませんが、CSSフレームワークのBootstrapで使われている最大コンテンツ幅1170pxが目安になるのではないでしょうか。
ポイント
・小さな画面だけでなく大きな画面も考慮する
・メインコンテンツの幅は640pxを目安とする
色・コントラスト
色やコントラストも文章の視認性に影響を与えます。
WCAG 2.0では、コントラスト比によって背景色と文字色の基準を示しています。コントラスト比は最低で4.5 : 1、推奨は7 : 1となっています。文字の大きさによっても推奨されるコントラスト比は異なり、大きな文字の場合は最低で3 : 1、推奨は4.5 : 1となっています。
また、リンクの色についても基準が定められており、周囲にあるテキストとリンクの色のコントラスト比は３：１以上が推奨されています。ただし、これだけでは色盲の方には区別ができないので、アンダーラインも合わせ使うと良いでしょう。
アクセシビリティ全般については以下の記事で詳細に説明されています。
ポイント
・背景色と文字色のコントラスト比は最低３：１以上、推奨７：１
・文字色とリンクの色のコントラスト比は３：１以上が推奨
レイアウト
レイアウトにはさまざまな種類がありますが、サイトに適したレイアウトを選ぶことが大事です。例えば、写真をメインにしたサイトと、記事やコラムをメインにしたサイトでは適したレイアウトは全く異なります。
レイアウトを決める際に考慮すべき点は以下の通りです。
・コンテンツ量
・コンテンツのタイプ（写真、文章）
・コンテンツの更新頻度
・メインとなるコンテンツ
以下の記事で、コンテンツタイプ別のレイアウトについて詳細に説明されているので気になる方は参照ください。
また、これに加えてユーザーの視線をどのように誘導するか考慮することが大事です。視線誘導のパターンとしては、ユーザビリティ研究で有名なヤコブ・ニールセン氏が発表したF字型のほか、グーテンベルグダイアグラム、Z字型などがあります。
ポイント
・サイトに適したレイアウトを選ぶ
・視線誘導を考慮してコンテンツを配置する
アニメーション
アニメーションは最低限にしましょう。ユーザーはコンテンツを見に来ているのであって、アニメーションを見たい訳ではありません。
また、アニメーションでユーザーを待たせることは絶対に避けるべきです。読み込み速度がサイトの離脱率を高めるのと同じく、ユーザーを待たせるアニメーションは離脱率を高めてしまいます。
Googleのマテリアルデザインガイドラインでは、パソコン向けのアニメーションの継続時間は150～200msを推奨しています。
ポイント
・アニメーションの使用を最低限にする
・ユーザーを待たせるアニメーションを避ける（200ms以下）
スクロール
ユーザーのスクロールを邪魔してはいけません。例えば、このサイトのようにスクロールジャックやカクカクしたスクロールは最悪です。JavaScriptなどでスクロールを調整している場合は、やめることを検討したほうが良いでしょう。
多くのサイトではスクロールを調整することはしていないので、ユーザーはスクロールを調整される挙動に慣れていません。つまり、ユーザーがパソコンの設定やブラウザの設定通りにスクロールすると思っているところに全く異なる挙動がされるので、ユーザーは混乱してしまいます。
また、以前であれば話題性のためにパララックスデザインを採用することも少なからずありましたが、今ではそこまで珍しくいものではなくなったため、単にユーザーにとっては使いにくいサイトとなってしまっています。
ポイント
・スクロールジャックなどでスクロールを邪魔しない
