MILK編集部モノづくりのヒントになるような記事をお届けします。44248タイトルとURLをコピーいくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。フォントサイズフォントサイズや行間などは文章の視認性を大きく左右します。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を基準とすることがおすすめです。2.0の最低150%以上を目安にすると読みやすい文章となります。ポイント・文字サイズは16px〜24pxを目安とする・行間は150〜200%を目安とするコンテンツ幅スマートフォンなどの小さい画面向けのデザインは考慮されているが、大きな画面向けのデザインはあまり考慮されていないというサイトがあります。大きなディスプレイのほか最近ではテレビでサイトを表示することもあります。2.0では文章の幅が半角文字80字、40字を越えないことが推奨されています。これは、16pxの全角文字の場合、おおよそ640pxになります。メインコンテンツの幅は640px前後を目安とすると良いでしょう。このサイズを超えた場合、ユーザーはコンテンツを見るために視線を大きく動かす必要が出てきてしまいます。サイドバーなどを含めた全体のコンテンツ幅に関しては、レイアウトによっても異なるので一概には言えませんが、CSSフレームワークのBootstrapで使われている最大コンテンツ幅1170pxが目安になるのではないでしょうか。ポイント・小さな画面だけでなく大きな画面も考慮する・メインコンテンツの幅は640pxを目安とする色・コントラスト色やコントラストも文章の視認性に影響を与えます。2.0では、コントラスト比によって背景色と文字色の基準を示しています。