「読みにくい」は伝わってこない
ホームページを作った側は、大きな画面で、明るい室内で、内容を知ったうえで見ています。この条件では気づけないことがあります。
たとえば、屋外でスマートフォンを見ている方、老眼で小さな文字が読みにくい方、色の見え方が一般的な方と異なる方などです。こうした方が読みにくさを感じても、その声が制作側に届くことはほとんどありません。ただ静かに離れていくだけです。
こうした「読める人を減らさない」ための考え方を、Webアクセシビリティと呼びます。障害のある方への配慮という文脈で語られることが多い言葉ですが、実際には高齢の方や、通信環境の悪い場所にいる方まで含めた、幅広い読者への配慮を指します。
ここでは、専門的な基準の話ではなく、依頼する側でも確認できる基本的な部分をご紹介します。
文字の大きさと行間
本文の文字が小さいと、それだけで読む気力が削がれます。パソコンで見る場合、本文はおおむね16ピクセル前後が読みやすい目安とされています。デザイン上の見栄えを優先して12ピクセル程度まで小さくすると、読みにくさを感じる方が増えます。
行と行の間隔も影響します。詰まりすぎていると、どこを読んでいたか見失いやすくなります。文字の大きさの1.5倍から1.8倍程度の行間があると、視線が迷いにくくなります。
一行の長さも関係します。横に長すぎると、次の行の先頭へ視線を戻すのが難しくなります。パソコンの画面いっぱいに文章を広げず、ある程度の幅で区切るほうが読みやすくなります。
背景色と文字色の組み合わせ
見落とされやすいのが、背景と文字の明るさの差です。この差をコントラストと呼びます。
白い背景に薄いグレーの文字、写真の上に白い文字といった組み合わせは、洗練された印象になる一方で、明るい場所や小さな画面では読み取りにくくなります。デザインの確認をする際は、パソコンだけでなく、屋外でスマートフォンを見た状態でも確認してみてください。
色の見え方には個人差もあります。赤と緑の区別がつきにくい方は、男性のおよそ20人に1人といわれています。そのため、色だけで情報を伝える作りは避けたほうが安全です。
- 必須項目を赤い文字だけで示す → 「必須」という文字も添える
- グラフを色分けだけで区別する → 模様や直接のラベルも入れる
- 押せる場所を色の違いだけで示す → 下線や枠で形も変える
色は情報を補強する役割にとどめ、色がなくても意味が通じる作りにしておくと、多くの方に伝わります。
画像の中に文字を入れすぎない
デザインの都合上、文字を画像として作り込むことがあります。見た目は整いますが、いくつかの不都合があります。
拡大すると輪郭がぼやけて読みにくくなること、文章として検索の対象になりにくいこと、修正のたびに画像を作り直す必要があること、そして読み上げソフトを使っている方に内容が伝わらないことです。
画像には、その内容を説明する短い文章を設定できます。これを代替テキストと呼びます。目の不自由な方が使う読み上げソフトはここを読み上げますし、通信環境が悪くて画像が表示されないときにも代わりに表示されます。写真や図には、何が写っているのかを具体的に書いておいてください。
装飾のためだけの画像には、代替テキストを空にしておく扱いもあります。すべてに説明を付ければよいというものではありません。
リンクとボタンのわかりやすさ
リンクの文字を「こちら」「詳しくはこちら」とだけ書く形は、読み上げソフトを使う方にとって行き先がわかりません。「料金プランを見る」のように、押した先で何があるのかを文字にしておくと、誰にとっても親切になります。
スマートフォンでは、押す場所の大きさも重要です。指で押すには、おおむね44ピクセル四方程度の余裕が必要とされています。小さなリンクが密集していると、隣を押してしまう原因になります。
動きと音の扱い
自動で切り替わるスライドや、動き続けるアニメーションは、読んでいる途中の方の集中を妨げます。切り替えを止められるようにするか、切り替わる間隔を長めに取るのが無難です。
音声や動画が自動で再生される作りも、職場や電車内で開いた方を驚かせます。再生は利用者の操作に任せるほうが安心して見てもらえます。
文章そのものの読みやすさ
見た目の調整と同じくらい、書き方も影響します。
一文が長いと、読み終わるまでに主語を見失います。60字程度を目安に区切り、接続詞でつなぎすぎないようにすると、読み進めやすくなります。段落も3文から4文で区切り、間に余白を置くと視線が休まります。
専門用語も、読める人を選ぶ要因のひとつです。業界では当たり前に使われている言葉でも、はじめて読む方には意味が伝わりません。使う場合は、初出のときに一言添えておくと親切です。
見出しを適切に入れることも大切です。読み上げソフトを使う方は、見出しをたどって必要な部分へ移動します。文字を大きくして太字にしただけの「見出しに見える文字」では、この移動ができません。見出しとして扱う設定になっているかどうかは、制作を依頼する際に確認できます。
まとめ
読みやすさへの配慮は、特別な機能を追加することではありません。文字の大きさ、背景との明るさの差、色だけに頼らない表現、画像の説明文といった基本的な部分の積み重ねです。
まずは自社のホームページを、屋外でスマートフォンから開いてみてください。室内のパソコンでは気づかなかった読みにくさが見つかることがあります。それが、そのまま改善すべき箇所になります。
