高齢者が見やすい色や文字サイズ・フォントは？ SFOに配慮したサイト作り

前回までの“心”“技”に引き続き、今回はシニアの“体”、特に「視力」や「手先」の衰えに焦点を当てた改善ポイントの紹介です。

逃れられない「眼」と「手」の衰え

シニアの“体”の変化のなかで、代表的な症状の1つが「老眼」です。早い人では40代から、近くのものにピントを合わせることが少しずつ難しくなってきます。「ゆこゆこ」のアンケート調査によると、50歳以上のおよそ8割が老眼の症状を自覚しているとのことです。

※ゆこゆこ「シニアの目に関する調査」より

老眼と合わせて考慮したいのが、「老人性白内障」です。一般的にこれを患うと、物がかすんで見えたり、黄色いフィルターがかかったように見えたりすると言われています。発症割合は60代で70％、70代では90％にまで上ります。こちらも老眼と同様、シニアのほぼ全員が何らかの影響を受けていると考えたほうが賢明でしょう。

老眼や老人性白内障以外に、考慮すべき点があります。

キーボードやマウス、タッチ操作のパフォーマンスに直結する「手先の巧緻性（こうちせい：器用に操る力）」の衰えです。これにより、思わぬ操作ミスを起こしたり、操作に長い時間が必要になったりという影響が出てきます。

また加齢にともない指先の水分が失われることで、静電式タッチパネルの反応感度も悪くなってきます。

今回は、上記のような視力や手先のハンディを抱えているシニアを、上手にフォローするための7つのポイントを紹介していきます。

ポイント1フォントの大きさよりも、行間とコントラストに配慮する

シニアの利用が多いWebサイトでは、一般的に、ピクセル単位で16px以上のフォントサイズ（ポイント単位で12pt以上）が適していると言われます。これ以上小さい文字では、目のかすみやブレなどにより文字の判別がしづらく、“疲れやすい”“読むのが面倒だ”という印象を与えてしまいます。

ただ、文字が見えにくくなったと実感しているシニアは、ブラウザの表示設定自体を大きめに変更していたり、また普及が進むタブレット機器などで必要に応じて画面の拡大を行ったりしているため、そこまで厳守する必要はなくなってきています。「文字サイズ変更ボタン」もほとんど使われていないのが現状です。

それよりも、フォントサイズ以上にシニアからのクレームが出やすいのが、「行間」と「コントラスト」の2つの要素です。これらは基本的にユーザー側で調整を行うことができないため、制作時にしっかりと配慮する必要があります。

• 行間はline-heightが160%～180%程度だと読みやすいでしょう。

• コントラストは、日本工業規格「JIS X 8341-3:2010」により、テキストと背景のコントラスト比を「4.5対1」以上とするよう推奨されています。

  この数値は、「淡い背景色に白抜き文字」や「白背景に赤文字」など、一般的によく見かけるデザインでも不適合になる場合があるので、「カラー・コントラスト・アナライザー2013J」などの無料チェックツールを活用して一度は確認しておきたいところです

  • カラー・コントラスト・アナライザー 2013J（エー イレブン ワイ ［WebA11y.jp］）

フォントの設定時に参考になるのが「Yahoo!ニュース」の本文ページです。多くのシニアが同ページを利用していますが、読みにくいと訴える人はほぼいません。実際にCSSを確認してみると、次のように指定されており、文字サイズと行間も十分な大きさで、文字と背景のコントラスト比は7.94対1と十分な値が確保されています。

• フォントサイズ：16px
• 行間：180%
• フォントカラー：#515151
• 背景色：#FFFFFF

※Yahoo!ニュースより

ポイント2黄色やグレーの使用時は注意が必要

老人性白内障を患うと、特に黄色と白を見分けにくくなります。また青と濃いグレーの組み合わせなども同じ色に見えやすくなるため、テキストリンクはフォントカラーを青色とするだけでなく、できれば下線の有無などで判別できるようにするとよいでしょう。

余談ですが、シニアコムが2012年に行った「色に関するアンケート」では、シニアが嫌いな色として、次のものが上位に挙げられていました。

• ゴールド
• グレー
• 紫
• ピンク
• 茶

この結果については、意外に思われる方も多いのではないでしょうか？　これらの理由として、ゴールドは白内障によってさらにまぶしさを感じやすいこと、グレーはコントラストを低下させてしまうことなどが影響しているのかもしれません。

• シニアから見た色の嗜好アンケート（シニアコム）の調査資料より

ポイント3動画コンテンツを積極的に活用する

老眼のシニアにとって、細かいテキストばかりのページを読むことは、少しずつ億劫な作業となってきます。そこでおすすめなのが、積極的な動画コンテンツの活用です。

というのも、シニアはページ内に埋め込まれた動画に対して、若い人よりも比較的ポジティブな反応を示すのです。

その理由をうかがってみると、

• 「自分で文字を読まなくても全部しゃべってくれるから」
• 「いろいろなところを自分で何度もクリックしなくてよいから」

という回答が得られました。この方法は、特にテキストが長くなりがちな、複雑なサービスや商品の説明に、うってつけだと言えるでしょう。

※通販生活より

ポイント4ボタンやリンクは大きさを確保する

手先の巧緻性（器用に操る力）が衰えたシニアにとって、マウスカーソルを数ピクセルだけ動かすような細かい操作は、至難の業と言えるでしょう。上手にターゲットの上にカーソルを移動できた場合でも、最後のクリックの際に力加減を調整できず、カーソルがずれてしまうこともよくあります。

こうした失敗をできるだけ防ぐため、ボタンやテキストリンクはクリックしやすい適切な大きさを確保することが大事です。PCサイトの場合、テキストリンクは16px以上、主要なボタンの幅はその倍の32px以上あるとよいでしょう。

また忘れずに対応したいのが、入力フォームページなどにある「チェックボックス」や「ラジオボタン」「プルダウン」の類です。「いきいき通販サイト」では、ラジオボタンの高さは36px、プルダウンの高さは40pxと大きめの指定となっています。

※いきいき通販サイトより

ポイント5ドラッグ操作を強要しない

「ドラッグ＆ドロップ」も、シニアが非常に不得手とする操作の1つです。ドラッグでマウスパッドの端まで到達したマウスをそれ以上どうやって動かせばよいかわからなかったり、クリックを保持している最中に指が離れて思わぬ場所にドロップしてしまったりと、操作の失敗確率が非常に高いのです。

通常のサイトではそれほど必要とされない操作ではありますが、たとえば絞り込み検索でよく用いられるスライダー式のUIは、数値を直接入力できる欄を設けるなどして、機能を代替する方法をいっしょに提供しておくとよいでしょう。

ポイント6入力フォームでは入力支援機能を積極的に活用する

最近では、フリガナの自動入力、住所の自動入力、ハイフンの自動補完など、JavaScriptのライブラリを用いた入力支援機能を備えるサイトが増えてきました。

シニアは、こうした機能を目の当たりにすると、「入力がとてもラクだ！」と喜び、非常にポジティブな印象を抱いてくれます。この機能は全年代のユーザーに対して有効ですが、シニアはテキスト入力に大変長い時間を必要とし、かつ入力ミスも多いため、その効果はシニアの利用が多いサイトほど増幅するのです。

一方で、［Backspace］キーなどを押したときに、意図せず入力内容がすべてクリアされてしまうといった“悲惨な事故”を予防するため、入力画面から離脱するような操作は、確認のダイアログボックスを表示するように設定しておくこともおすすめします。

ポイント7入力欄は無用な分割を避ける

姓名・郵便番号・住所・電話番号などの入力フォームでは、「姓と名」「頭3桁と下4桁」「都道府県と区域と丁番号」など、1つの項目であっても、入力欄が複数に分割されているケースがあります。

しかし、多くのシニアは文字を入力する際、手元のキーボードに集中しているため、そうしたフォームでは初めの入力欄にすべての情報を入力してしまうミスを犯しがちです。

［Tab］キーで入力フォームを移動するワザを知る人も少なく、キーボードとマウスの間を何度も行ったり来たりするうちに、選択個所を間違えたり、フォーカスが外れたまま入力を再開してしまったりすることもあります。

データベースの構造上の問題で対応が難しい場合もありますが、こうした入力欄は可能な限り1つに繋げてあげるほうが親切です。

また、入力の例を添え書きするのも効果的です。「HOME'S介護」の資料請求フォームでは、できるだけ少ない入力欄になるよう構成されています。

※HOME'S介護より

まとめ

本連載の第2回から第4回にかけて、“心”“技”“体”それぞれの視点からサイトのシニアフレンドリー化のポイントを解説してきましたが、皆さまいかがでしたでしょうか？

上記3つの視点のうち、唯一“心”のポイントについては、今後5年～10年をかけて少しずつ障害を感じるユーザーは減少する可能性が考えられます。しかし一方で“技”や“体”は人間の意志や経験とは無関係に衰えていくものですから、遅かれ早かれ、ほとんどのサイトが対応を求められるでしょう。

次回は、パソコンやタブレット、スマートフォンなど、シニアがインターネットを利用する“環境”に焦点を当てて、サイト側で必要な対応策について考えてみたいと思います。