シニアユーザーにも分かりやすいデザイン
お久しぶりです。以前こちらの記事を執筆しましたWEBデザイングループの田中です。
私が所属しているWEBデザイングループでは、主に不動産情報サイト アットホームなど、C向けのサイトやアプリのデザインを手掛けていますが、先日、B向けのシステムのデザインに携わる機会がありました。
これまでC向けのデザインではメインターゲットを若年層とすることが多く、素早く使いやすいデザインを重視してきましたが、B（加盟不動産会社）向けのシステムのデザインとなると意識する部分が異なります。
不動産業界は他の業界と比べて年齢層が少し高めであるため、何よりも使いやすさと分かりやすさというのが重要となってきます。
社会全体で高齢化が進み、DXが加速する現代において、特に高齢者層のデジタルデバイド（情報格差）というのは深刻な問題となっています。
そこで今回はシニアユーザーや中高年層のユーザーにとって使いやすいデザインとは何かを考え、デザイン面で視認性を向上させるために気をつけたことを3つ取り上げます。
【POINT 1】視覚の違いを考慮した視認性の高い色の選び方
まず一つ目、色についてです。
いきなりですが下記2枚の画像は皆さんの目にはどんな色に見えますか？
色鮮やかなフルーツや花の画像に見えたでしょうか？
これが白内障の症状を持つ方々には下記の画像のように全体的に少し黄ばんで見えると言われています。
個人差はありますが、白内障や老眼といった視力の衰えに伴う症状は40代を過ぎると徐々に進行すると言われています。特に白内障になると視界が黄色っぽく濁り、色の識別が難しくなります。逆に赤やオレンジといった鮮やかな暖色系は、黄色が加わることでさらに色が濃くなり、認識しやすくなるとも言われており、先ほどのイメージ画像を元の画像と比較すると、りんごや赤いカーネーションなどの赤色が少しだけ濃くなっているように見えるかと思います。その代わり青や紫のものは少し色が薄くなり、グレーっぽくなったように見えませんか？
このように色によって認識しやすいものとそうでないものの差が生じるのは避けられません。 しかし色の組み合わせ方次第では、視認性を改善することができます。
では単に認識しやすい色同士を使って「赤の背景にオレンジの文字」を書けばいいのかというと、それは誤解です。 赤とオレンジは色相(色の種類)が似ているため、鮮明ではっきりとした色同士のまま重ねてしまうと下記の画像のようになってしまいます。
なんだか目がチカチカして見づらい感じがしませんか？
このように、明暗差が小さく彩度(色の鮮やかさの度合い)が高い色同士を組み合わせるとコントラスト比が小さくなるため、目がチカチカしてしまい逆効果になることがあります。では、色相(色の種類)が似ている組み合わせを避ければいいのかというと、そういうわけでもありません。白内障の症状を持つ方々でも認識しやすい色の組み合わせにおいて重要なのは、明度や彩度を調整しそれぞれの色にしっかり差をつけることです。
例えば、下記の画像をご覧ください。
先ほどの画像と比べると、格段にテキストが読みやすく目に優しい印象になったと思います。
一見、違う色に変えたようにも見えますが、実はこれは先ほどの赤とオレンジの明度や彩度を調整しただけです。
彩度や明度を調整すると同じ色相でも色の印象を大きく変えることが可能となるのです。
このように色の明度や彩度を調整して差をつけたり、他の色相の相性が良い色を組み合わせたりすることで、視認性を高めることができます。実際、色単体だけでも約1677万種類あると言われており、その組み合わせを考えると無限に多くのパターンが存在します。それらを微調整しながら工夫することで、年齢に関わらず幅広いユーザーに認識してもらえる色の組み合わせを見つけ出すことができるのです。
【POINT 2】シニアユーザーにも優しい文字デザイン
①文字サイズ
シニアユーザーに向けたデザインをする際には、文字サイズへの配慮も非常に重要です。 人間の目は加齢とともにピントを調整する力が弱くなります。この「老眼」と呼ばれる症状により、近くのものを見るときにピントを合わせることが難しくなります。老眼が進行するにつれて、小さい文字を読む際にピントを合わせるためにスマートフォンを目から離したり、目を細めたりといった工夫が必要になるため、デザインをする際は小さい文字の使用をなるべく避ける必要があります。
多くのWebサイトでは14px~16pxの文字サイズを中心に使われており、時には10px程度の小さい文字が使われることもあります。しかし下記画像をご覧いただくと分かる通り、10pxの文字はかなり見づらいので視認性を大きく損ねる可能性があります。シニアユーザーにとっても読みやすく分かりやすいWebサイトにするには、可能な限り16px以上の文字サイズを使用することが推奨されます。
18px デザインをする際には、文字のサイズへの配慮も非常に重要です。
16px デザインをする際には、文字のサイズへの配慮も非常に重要です。
14px デザインをする際には、文字のサイズへの配慮も非常に重要です。
12px デザインをする際には、文字のサイズへの配慮も非常に重要です。
10px デザインをする際には、文字のサイズへの配慮も非常に重要です。
②行間
また、気をつけるべきなのは文字のサイズだけではありません。行間についても配慮が必要です。 通常、行間は文字サイズの1.5倍程度に設定されることが多いですが、シニアユーザー向けの場合は1.75倍程度にすることで可読性が上がると言われています。たとえ文字サイズを大きくしたとしても行間が狭いと文字が詰まって見えるため、読みづらくなってしまいます。
×文字サイズの1倍(余白0)
「老眼」と呼ばれる自然な変化により、近くのものを見るときにピントを合わせる方法が変わります。シニアユーザーにとっても読みやすく分かりやすいWebサイトにするには、可能な限り16px以上の文字サイズを使用し、行間を1.75倍程度にすることで可読性が上がると言われています。
△文字サイズの1.5倍
「老眼」と呼ばれる自然な変化により、近くのものを見るときにピントを合わせる方法が変わります。シニアユーザーにとっても読みやすく分かりやすいWebサイトにするには、可能な限り16px以上の文字サイズを使用し、行間を1.75倍程度にすることで可読性が上がると言われています。
〇文字サイズの1.75倍
「老眼」と呼ばれる自然な変化により、近くのものを見るときにピントを合わせる方法が変わります。シニアユーザーにとっても読みやすく分かりやすいWebサイトにするには、可能な限り16px以上の文字サイズを使用し、行間を1.75倍程度にすることで可読性が上がると言われています。
③フォントの種類
さらに、フォントの種類も視認性に大きく影響します。
今まで挙げた、色や文字のサイズは一般的にも認識されやすい違いでしたが、フォントの使い分けは意識して見ないと気づきづらい部分かもしれません。しかし実際に皆さんが普段目にしている多くのデザインでは、目的に応じてフォントが使い分けられています。
例えば、このブログで使われているゴシック体は、線の太さが均等でシンプルな形状のため、シニアユーザーにとって認識しやすいフォントの一つです。視覚的に安定しており文字の形が規則的なため、読みやすさが向上します。そのため、長時間読んでいても目が疲れにくい特性があります。 一方、明朝体は縦線と横線で文字の太さが異なるため視認性が低く感じることがあります。文字の細い部分がかすんで見える場合もあり、シニアユーザーにとっては目が疲れやすく、長時間読むのにはあまり向いていないフォントとも言えます。 また、行書体などは筆跡の流れが不規則であるため、慣れていないとさらに読みづらく感じることがあります。行書体は主に装飾的な要素として使うには効果的ですが、実用的な用途で使用する際は注意が必要です。
【POINT 3】迷わず使えるナビゲーション
最後に、ナビゲーションの明確化です。
Webサイトにはさまざまなナビゲーションがありますが、ここではメニューアイコンを一例として取り上げます。
メニューアイコンは画面上に配置された小さなシンボルや図形のことを指し、押下するとそのサイトのメニューを表示させるナビゲーションです。主にスマートフォンサイトやアプリで使用されることが多いです。
メニューアイコンの中でも代表的なハンバーガーメニューは、三本線の見た目をしており、見た目がハンバーガーの形に似ていることからこの名前が付けられています。
このメニューをよく使用する人にとってはメニューボタンだと認識しやすいですが、インターネットに触れる機会の少ないシニアユーザーにとっては、ぱっと見ではその用途が分かりづらいことがあります。 メニューアイコンにもいろいろなデザインが存在しますが、例えば下記の例を見てみましょう。
こうして見てみると、ただの丸や線が並んでいたりするだけで、どうして「メニュー」だと認識できるのか不思議な感じもします。 見慣れてしまえば当たり前のように認識できますが、見慣れないうちは一体何を意味しているのか分かりづらいのも無理はありません。 メニューアイコンに馴染みがないユーザーにも迷わず使ってもらうには、押下後の画面を図形で表現してイメージさせることが大切であり、時には下記のように「MENU」や「メニュー」といったテキストを入れたりすると用途が伝わりやすいです。
また、他のナビゲーションについてもさまざまな工夫が可能です。例えば、ナビゲーションが表示された際にポップアップウィンドウやツールチップを表示させ、ナビゲーションの目的や意味をユーザーに理解してもらうための説明を加えることも効果的です。 不動産情報サイト アットホーム内でもポップアップウィンドウやツールチップなど、さまざまなナビゲーションを使用しています。
Webサイトには、私たちが当たり前のように使っていて何も違和感がなくなってしまっているパーツがたくさんあります。ですがシニアユーザーの方々には、こうした当たり前の操作やデザインが必ずしも馴染んでいるわけではありません。そのためナビゲーションがスムーズに行えるようにするためには、シンプルで分かりやすいデザインと、しっかりとした視覚的ガイドが必要です。こうした工夫を加えることで、シニアユーザーでも迷うことなく快適にWebサイトを利用できるようになります。
まとめ
今回シニアユーザーや中高年層のユーザーにとって使いやすいデザインについて考える中で、視認性の重要性を改めて実感しました。特にWebデザインにおいては、文字や色、フォントの選び方一つでユーザーの体験が大きく変わります。 私自身、普段は意識していないような細かな部分が、実はユーザーにとっては大きな影響を与えていることに気づきました。シンプルで直感的な操作ができるデザインが、どれほど利用者のストレスを減らすのかを理解し、今後もこの視点を大切にしていきたいです。 時には流行りのデザインを取り入れ新鮮なデザインに挑戦することも大切ですが、シニアユーザーを置き去りにしてしまうことがないよう、今後もユーザーの視点を第一に考えたデザインを追求していきたいと思います。
