高齢者のためのウェブデザイン8つのポイント

表記は「ログイン」→「会員の方はこちら」、「Access」→「交通案内」など、漢字や平仮名にしましょう。
アルファベットや片仮名表記で示される外来語に馴染みがない方にも言葉の意味が伝わりやすいよう、配慮が必要です。

一般的に、高齢の方が読みやすいフォントサイズは16px以上とされています。文字の読みやすさは書かれている情報の理解度に直結するため、対象となるユーザーに応じた適切な設定が必要です。

フォントサイズと同様気をつけたいのが、行間です。
line-heightが160～180%が読みやすいです。
行間が狭すぎると、行を移るときに次に読む行を見失いますし、反対に広すぎると、視線の移動距離が大きくなり疲れてしまいます。
フォントサイズはブラウザの表示設定などで変更できますが、行間はユーザー側での調整ができません。作る側がしっかり配慮しましょう。

テキストと背景は、しっかり色のコントラストをつけましょう。
日本工業規格「JIS X 8341-3:2010」では、テキストと背景のコントラスト比を4.5対1以上とするよう推奨しています。
白内障などにより視界がかすみ黄色味を帯びてくると、パステルカラーなどのペールトーンや彩度の低いカラーが識別しにくくなります。
特に黄色と白は識別しづらいので注意が必要です。

また、表示する色合いを変えられる機能を入れると更に利用しやすくなります。

無料のコントラスト確認ツールもあるので活用しましょう。

miChecker Ver.2.0
ColorTester

ボタンやテキストリンクは大きくしましょう。主要なボタンは、幅が32px以上あるとよいです。
入力フォームなどにあるチェックボックスやプルダウン※1※1プルダウンとは、PCやスマートフォンの画面デザイン（UI）においては、通常は畳まれた（非表示の）状態になっており、ボタンを押すと畳まれた表示領域が出現するという表示方法のことをさす。も、適切な大きさに設定する必要があります。
カーソルを数ミリ動かしたり、小さなボタンをタップしたりするなどの細かい動作が必要ないよう、手先が不自由な方の利用も前提とした設計が必要です。

また、フラットデザインのボタンは、単に背景が塗りつぶされたテキストに見えてしまいます。
薄い影を入れるなどして立体感を出し、心理的に「押したくなる」ボタンにしましょう。

※1 プルダウンとは、PCやスマートフォンの画面デザイン（UI）においては、通常は畳まれた（非表示の）状態になっており、ボタンを押すと畳まれた表示領域が出現するという表示方法のことをさす。

アイコンがなにを意味するか、テキストで補足を入れましょう。
アイコンは文字分のスペースを節約でき便利ですが、普段からWebサイトを利用していない場合、アイコンの意味がわかりにくく感じられる方や、アイコンをクリックすると詳細な情報が表示されることが理解しにくい方もいます。

参照：近畿日本ツーリスト

ウェブサイト上で数種類の商品やサービスを比較したいとき、主要な情報をまとめた一覧表があると便利です。
ページの行き来が多いと、今いるページや元のページへの戻り方がわかりにくくなるため、同じページで複数の情報を比較できると親切です。

「LIFULL介護」のページでは、違いのわかりにくい老人ホーム・介護施設が一目で比較できる表が掲載されています。

問い合わせ対応用の電話番号がある場合、ファーストビューの範囲内に設置しましょう。
高齢の方にとって「困った時にすぐ電話で直接相談ができる」ことは心強いものです。メールや問い合わせフォームの利用に不慣れな方にとっても、電話番号はすぐ見える場所に入れると親切です。

いかがでしたでしょうか。
ウェブサイトを作る時、自分では見やすいと思っても、様々な方に見ていただくことを十分考慮してデザインしたいですね。
先に挙げたような小さな工夫をすることで、幅広い年代の方にとってわかりやすい、快適なウェブサイトを増やしていきましょう。