視線の誘導と意識の区切り

視線の誘導と意識の区切り

 こうした方法でテキストの読みやすさは改善されますが、それだけでは不十分です。次は、ブロックのレイアウトについて考えてみましょう。

 ページのレイアウトには「視線の誘導」と「意識の区切り」という大きな役割があります。ユーザーの視線と意識はレイアウトのデザインによってある程度コントロールすることが可能です。それには、行間や段落の間、見出しの前後や各ブロック間など、ページ内のあらゆる場所に存在する「余白」が大きな鍵となります。

 読みやすいページを作るためには、「余白をデザインする」という意識が大切です。余白はただ余っているだけの領域ではなく、ユーザーが情報のブロックを認識するために必要不可欠な要素です。見出しや段落に全く改行のない、すべての文章がひと続きになったページが果たして読みやすいでしょうか。ブラウザの隅から隅までびっしりと敷き詰められた文字の固まりは目で追いやすいでしょうか。

 また、同じ内容であっても、余白の取り方によってユーザーが受けるイメージは違ってきます。行間や余白が小さいと、内容が凝縮された専門書的で難しそうなイメージを与えます。逆に、行間や余白を大きく取った場合は、ゆったりとして柔らかい、親しみやすさを感じさせます。

 そして、余白には安心感を与える効果もあります。余白が少ないコンテンツを読み続けると、明確な意識の区切りを付けることができないので、疲れると共に「どこまで読めばいいんだろう」という不安感につながります。余白が目に入ると、そこで一息つくことができて、安心して次のブロックに向かうことができます。

 どのようなイメージを伝えたいかはケース・バイ・ケースですが、明確な意図のないデザインは、全体的にまとまりがなく散漫な印象になりがちです。これでは、個別のテキストが読みやすくても、その文章を最大限にユーザーに伝えることはできません。

 余白の設定が適切かどうかを確かめるには、ページのテキストを音読するのが効果的です。その際、余白の大きさに合わせて間を空けて読みます。次のブロックに入るリズムが、ユーザーが読む時のリズムです。そのリズムが心地よくなるように余白を設定してやると比較的うまくいくように思います。

Webサイトのリソースはすべて等価である

 ここまで、ページ内のテキストのデザインと、その集合であるブロックのレイアウトについて見てきました。最後に、そのページの集合体としてのWebサイト全体についても少し触れておきます。

 書籍や雑誌を読むのと、Webサイトを見るのとでは、「読む」という行為の流れが決定的に違います。書籍はページをめくって順番に読んでいく媒体です。もちろんページを飛ばしたり、戻ったりすることは自由にできるのですが、書籍そのものはそれぞれのページが順に並んでいるという物質的な特性を持っています。

 対して、Webサイトはそうではありません。物理的にはすべてのページはURLというリソースを持った独立した存在であり、そこに順列は存在しません。Webサイトにおいてはページ間の順列や関連性というのは物理的に保証されたものではありません。ナビゲーション設計などの情報デザインによって作り出されるものです。

 つまり、書籍ではあらかじめ物理特性から必然的に決められているルールを、Webサイトではデザイナーが自由に組み替えられるのです。

 ですが、ナビゲーションをデザインする時には、「デザイナーとしての個性を発揮しよう」などとは思わず、一般的なパターンを踏襲した方がユーザビリティは向上します。なぜなら、前回(http://www.thinkit.co.jp/article/131/1/)も述べたように高いユーザビリティを実現するには、ユーザーにとって次のアクションの結果が予想できる必要があるからです。

 ユーザーが欲しいものはWebサイトが提供する情報であって、個性的なナビゲーションや派手な視覚効果を伴うメニューではありません。

 奇をてらうのではなく、ユーザーが見やすく・読みやすくなるように1つ1つのデザインを重ねていく。その地道な積み重ねがユーザビリティの高いWebサイトへとつながっていくのです。

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored

ClickHouse Cloudが実現した広告運用SaaS「ATOM」のデータ基盤革新、パフォーマンスを向上しながら、運用負荷とコストを削減 11月11日 6:20 AIで開発が加速する時代、品質保証はどう変わる? Tricentisが示すAIエージェント活用の実像 11月9日 6:45 悪用までの猶予が「1分」に迫るフロンティアAI時代に開発と本番を貫く脆弱性管理が必要 10月29日 8:30 欧州CRA対応とSBOM運用。AI生成コードのOSS混入問題の対策とは ――スニペット単位で検出する「FossID」「Insignary Clarity」によるSBOM運用 9月16日 6:40 PostgreSQLからTiDBへ、稼働中SaaSで進める段階的DB移行の実践と再設計への展望 9月7日 6:30 機能安全開発におけるGoogleTestの活用を支援!「Parasoft C/C++test CT」で実現する効率化&AI連携 4月14日 6:30 【CNDW2025】Grafanaが明かす「オブザーバビリティの哲学」ー最小限の労力で実用的なインサイトを得るには 1月23日 6:30 【CNDW2025】プロダクト急増に備える基盤刷新 ーウェルスナビがECSからEKSへの移行で得た知見とは 1月15日 6:30 【CNDW2025】250環境を5人で運用、構築時間は30分に ーKINTOテクノロジーズが語るインフラ基盤組織の作り方 2025年12月18日 6:30 新たな自動化で熱視線! AIエージェントの「推論能力」を支える2つのコンポーネントとは? 2025年11月28日 6:30