Lesson 14 Webの特性を考慮した長文レイアウト術 - Webデザイン表現&技法の新・スタンダード・レイアウト編

Webデザイン 表現&技法の 新・スタンダード

Lesson 14

Webの特性を考慮した 長文レイアウト術

制作・文

安住 光（travelogue）

Webページ上において読みやすくわかりやすい文章のデザインとはどのようなものだろうか。Webユーザーの特性を踏まえ、テキストがメインコンテンツとなるWebページをデザインする際におさえておくべき点について検討する。

Webページを閲覧するときに、ユーザーは情報を流し読み（拾い読み）しかしない場合が多い。つまり制作者側は、ページの上から下まで完全に網羅して読み、理解してくれ ているユーザーは基本的にほとんどいないものと思っておいたほうがよい。Webページを閲覧する際、ユーザーの目線は、左上を起点にF字の形にそって移動すると言われている。ページの内容にもよるが、左上付近のコンテンツのほうがユーザーの目に留まる可能性が高い【1】【2】。


【1】制作者はページ内容全部がユーザーの目に入っていると思いがち


【2】ユーザーの目線は左上を起点にF字の形にそって移動すると言われている

小さなフォントサイズは今も昔もユーザーが不満を持つ原因として挙げられる。サイズはブラウザで調整可能だったとしても、初心者や高齢者のようなユーザーはその方法 を知らない可能性がある【3】。

知っていても、そこまでして読みたいと思ってくれるとは限らない。いずれにしろデザイナーの好みでフォントサイズを小さくすることは避け、ブラウザのデフォルトの状態で読みやすい大きさの表示であることが好ましい。


【3】ブラウザで文字を拡大する方法を知らないユーザーもいる

フォントサイズとともに、行間もきちんと配慮しておく必要がある。フォントサイズだけ大きくしたとしても、上下の行がくっついていると可読性はまったく向上しない【4】【5】。行間の指定では％等の単位付きの指定方法ではなく、単位を省略した記述方法にすることにより【6】、行中の一部だけフォントサイズを大きくした場合でもその大きな文字にあわせて行間が調節される。


【4】文字は大きくても行間が狭いと文章はとても読みにくい


【5】文字サイズとあわせて行間もき適切な間隔になるようにしよう


【6】CSSで行間の指定時は単位を省略した記述方法にするとよい

文章をレイアウトする際に一行を長くすると、ユーザーはどこを読んでいたのかわかりにくくなる【7】。特に最近のパソコンはモニタのワイド化が進んでおり、画面が横に長くなっている。ブラウザを最大化した場合、1段組みでは非常に読みにくくなるので注意が必要だ。読みやすくするために、文章コンテンツの段組を分けるなどの方法を検討しよう【8】。


【7】16:9のワイド画面で1段組にした場合、行が横に広がり、どこまで読んだかがわからなくなりがちだ


【8】段組を分けて一行の横幅を短くした例

HTML にはp タグのほかにもリスト（ol、ul、dl）、テーブル（table）、引用（blockquote）など様々なタグがある。pタグだけで一様な文章が延々と続くよりも【9】、これらのタグで適切に構造化してデザインで差別化すると、ぱっと見たときにわかりやすくなる。本文のエリアと注釈や補足などのエリアを背景色や罫 線などで差別化するのもよく使われる手法だ【10】。


【9】メリハリがなく見た目が一様な文章


【10】CSSでメリハリのあるスタイルを追加して読みやすくする

長い文章は見出しを設け、ある程度の長さごとに区切るとわかりやすくなる【11】【12】。Webページの場合、頻繁に区切る方が読みやすくなる場合が多い。具体的には、3 ～4行ごとに改行を入れる、意味の区切りごとに見出しを入れるなどだ。


【11】流し読みするユーザーにとってダラダラと続く文章は敬遠されがちだ


【12】適度な長さで区切り見出しを設けると流し読みしやすい

文中に見出しを設けるなら、あわせて用意しておくと便利なのが目次である【13】。各見出しのセンテンスをそのまま箇条書きにしてページの先頭付近に設置すればよい。目次からそのまま移動できるようにページ内リンクを設定しておこう。目次は、ユーザーがそのページの内容を大まかに把握できる内容になっている 必要がある。各見出しがわかりやすく的確なセンテンスとなるように工夫しよう。


【13】見出しとあわせて目次を用意しておくと利便性が高い