これだけは確認しておきたいサイトの老眼対策5つのポイント

これだけは確認しておきたいサイトの老眼対策5つのポイント

Vision Of Eyechart With Glasses
Vision Of Eyechart With Glasses / kenteegardin

老眼(老視)とは、目の水晶体が固くなり、近くのものにピントを合わせづらくなる症状で、誰もがなる老化現象の一つです。

「老」という漢字が使われていますが、仕事をリタイアするような年代だけの話ではありません。早い人では40歳前後から見え方に変化が起き始め、その後60歳前後で安定するまで症状の悪化が続きます。

通常、パソコンを利用する際、目とモニタとの距離は30-50cm程度です。これはまさに老眼の影響を受ける距離であり、シニアの利用が多いサイトなどはこれに十分に配慮する必要があります。

また、老眼と同時に老人性白内障を発症する人も多くなり、60歳代で70%、70歳代で90%、80歳以上になるとほぼ100%の人に症状が見られます。水晶体の黄変により、黄色いフィルターがかかったように見えたり、物がかすんで見えたりすることがあります。

今回は、こうした加齢に伴って低下した視力に対応するためのサイトの施策についてまとめてみたいと思います。

 

フォントサイズは12pt以上で、相対指定に

シニアの利用が多いサイトでは、一般的に、ポイント単位で12pt以上、ピクセル単位で16px以上のフォントサイズが適していると言われます。

これ以上小さい文字では、目のかすみやブレなどにより文字の判別がしづらく、疲れやすくなってしまいます。

もちろん全てのテキストをこのサイズにする必要はありませんが、本文や重要な記述部分などでは、これを下回らない方がよいでしょう。また画像の中にあるテキストのサイズも同様の配慮が必要です。

またフォントサイズを指定するときは、絶対指定(pt、pxなど)ではなく、相対指定(em、%など)を用いて、ユーザーの環境で調節が可能なようにしておくとよいでしょう。

 

行間(行の高さ)は150%以上を確保

フォントサイズ以上に読みやすさを左右するのが「行間」です。これが十分確保されていないと、いくらフォントサイズの基準を守っていても読みにくい状態のままです。

できれば全てのテキストでline-heightを150%-200%程度確保したいところです。

また同じように、テキストを入れるブロックの余白(margin、padding)にも余裕を持たせると、行間同様、ユーザーが読みやすくなります。

 

テキストと背景のコントラストは高めに

日本工業規格の『JIS X 8341-3:2010』では、加齢によるコントラスト感受性低下への配慮として、テキストと背景のコントラスト比を4.5:1以上とすることを推奨しています。

1.4.3 最低限のコントラスト:
テキストおよび画像化された文字の視覚的な表現には、少なくとも 4.5:1 のコントラスト比をもたせる。ただし、次に挙げる場合は除く(レベル AA):

大きな文字:サイズの大きなテキストおよびサイズの大きな画像化された文字には、少なくとも3:1のコントラスト比がある。

付随的:テキストあるいは画像化された文字において、以下の場合はコントラストの要件は該当しない-アクティブではないユーザインタフェース要素の一部分である、装飾だけを目的にしている、視覚的に確認できない、あるいは重要な他の視覚的なコンテンツを含む写真の一部分である。

ロゴタイプ:ロゴあるいはブランド名の一部である文字には、コントラストの要件はない。

出所:WCAG 2.0(W3C勧告)日本語訳

背景白地に黒、もしくは濃いグレーのテキストであれば、コントラストが高いので心配ないでしょう。

また老人性白内障では黄白色のサングラスをかけたような見え方になり、背景とのコントラストが低いテキストは読みにくくなります。また色遣いにおいても、特に黄色と白の差が判別しにくくなったり、青が濃いグレーのように見えたりするので注意が必要です。

130628_1
画像参照:高齢者にやさしい色彩計画(PDF) – 長野県建築士会

青と濃いグレーが判別しづらいということは、テキストリンクは青色にするだけでは不十分ということになります。できれば下線を引くなどして色以外の特徴を持たせるのがおすすめです。

コントラストについては、以下のような無料のチェックツールも配布されています。個人的な感覚としては、「ちょっと見にくいかな?」と感じる程度で測定してみると、やはり4.5:1を下回っている場合が多いように思います。

カラー・コントラスト・アナライザー 2013J(エー イレブン ワイ)

 

見間違いやすい文字は使用を避ける

1(いち)とl(エル)、0(ゼロ)とO(オー)、一(いち)とー(伸ばし棒)など、見た目が似ている文字を使う際には注意しましょう。視覚に問題がなければ微妙なピクセルの差を見て判別できるのですが、老眼で文字がかすんだりブレたりして見える場合には難しくなってしまいます。

そもそもシニアの利用が多いサイトでは、アルファベット表記はできるだけ避けたいところです。

また全角と半角の区別もつきづらいので、入力フォームの記入例を書くときなども、例だけではなく「半角/全角」の表記を添えるとよいでしょう。

 

テキストよりも図表を積極的に使う

老眼になると目が疲れやすいため、テキストばかりのページを読み続けるのは非常に負担になります。そのため、シニアの利用が多いサイトほど、図表を積極的に使うことが大事です。

【参考記事】
【介護サイト比較】挿絵イラストの効果的な使い方 | マミオン有限会社
【介護サイト比較】表組でわかりやすく | マミオン有限会社

マミオンで行っているシニア層のユーザーテストでも、やはりテキストは読み飛ばして、図表のところで視線がストップしている様子がよく見られます。

図表は記憶にも負荷がかかりにくいため、記憶力が衰えてきたユーザーにも非常に有効なアプローチです。

 

いくらパソコンが使えても、目の老化は避けられない

今回、サイトの老眼対策として以下の5つについて簡単にご紹介しました。

・フォントサイズは12pt以上で、相対指定に
・行間(行の高さ)は150%以上を確保
・テキストと背景のコントラストは高めに
・見間違いやすい文字は使用を避ける
・テキストよりも図表を積極的に使う

今後、サイト利用者の高齢化がどんどんと進むにつれ、こうした対応は多くのサイトにおいて求められてくるはずです。いくらインターネットに慣れた世代が高齢者になったとしても、目の老化は避けられないのですから…。

 

またマミオンでは、こうしたサイトの老眼対策に加え、シニア層のサイト利用を想定したユーザビリティのポイント100個をまとめたガイドライン冊子を販売しています。


ユーザーが迷わないウェブサイト設計のためのガイドライン | マミオン有限会社

こちらはPDF版もありますので、すぐにお届けすることができます。
社内共有していただくことも可能ですので、1社に1冊用意して、後から発生するはずだった無駄な修正リソースの削減に役立ててみてはいかがでしょうか?

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です