【UI/UX】シニアユーザーに優しいUIデザインのコツ 前編
こんにちは。UI/UXデザイナーのなりたです。
ソニックムーブでは、近年シニアユーザー向けのアプリ/ Web開発のご相談が増えています。
それもそのはず、60代のインターネット利用率は9割を超え、70代でも7割近くに！！（出典：令和6年の通信利用動向調査）
年齢に関係なく、誰もが使いやすいプロダクトデザインがしたい…！！！
若い頃はおしゃれで尖ったデザインにばかり目が行っていましたが、自分が年を重ねるにつれ、最近はひしひしとそう感じています。
そこで今回は、実案件で考慮した点をもとに、シニアユーザーに優しいUIデザインのコツ👴👵❤️をまとめてみました！
シニアユーザーの困りごと
小さな文字が読みにくい
コントラストの識別がしづらい
細かいタップ操作・マウス操作がしづらい
スワイプやピンチなどスマホ特有のジェスチャーに慣れていない
デジタルプロダクトのアイコンに慣れていない
短期記憶力やマルチタスク能力が低下する
上記の困りごとを以下のように分類して、デザインでの解決方法を検討していきます。
その1. 読みやすさのデザイン
適切なフォント設定は？
まず、一般的な基準値としてMaterial Design : Design section “The type system”の表を参照し、老眼の方が多いシニア向けにはこの本文設定よりもやや大きいフォントサイズを選択することにします。
本文は16px以上（可能なら18px以上だとベター）、行間は170%～200%程度がおすすめです。
最小サイズは12px（注釈等で限定的に使用）としますが、できる限り14pxまでで表現するよう心がけます。
さらに、ユーザーがフォントサイズを変更して閲覧しても、崩れないように設計することも大事ですね！
読みやすい書体は？
株式会社日本SPセンターによる「シニアの読みやすさ、入力のしやすさに関するホームユース調査」では、シニアには太めの書体が好まれるというリサーチ結果が得られています。
この結果で個人的に意外だったのは明朝orゴシックでは差がなかったという点です。明朝・ゴシックに関わらず、線が太めで可読性が高いことがポイントになるようですね。
また、フォント選定の際、和文のみではなく欧文や数字のデザインにも注目しましょう！
特に数字は料金など重要な情報に使われることが多いので、書体の選定には「1」と「7」の違いがはっきりわかるかどうか？など、識別性を重視したいですね。
UDフォントは読みやすいという声が多い一方で、装飾文字（袋文字やドロップシャドウなど）は敬遠されているようです。
読みやすいコントラスト比は？
高齢になると視力が落ちるため、背景色と文字のコントラストが強い方が情報を認識しやすくなります。
前述の株式会社日本SPセンターによる「シニアの読みやすさ、入力のしやすさに関するホームユース調査」でも、文字の小ささに次いで「暗いところや明るいところで文字が見にくいこと」がシニアの悩みとして挙げられています。
適切なコントラスト比でデザインすることは、シニアに優しいUIづくりの大切なポイントです。
WCAG（Webコンテンツアクセシビリティガイドライン）では、コントラスト比の最低限の基準値は 4.5:1（レベルAA）、高度の基準値は 7:1とされています。
※ただし、大きな文字・付随的な文字（純粋な装飾や写真の一部）・ロゴタイプをのぞきます。
🎨Figmaならカラーピッカー内でコントラスト比を確認できる！
2025年のアップデートより、Figmaではデフォルトでカラー選択時にコントラスト比をチェックでき、さらにAA or AAAでセーフとなるカラーを自動で教えてくれる機能が搭載されました！
デザイン時には、上記のようなFigmaの機能や、文字色と背景色のコントラスト比をチェックするオンラインツールなどを使って、見えやすさを確認していきましょう！
オンラインツール：WebAIM Color Contrast Checker
Figmaプラグイン：Contrast
さて、前編【読みやすさのデザイン】はここまで。
後編は【使いやすさのデザイン】【わかりやすさのデザイン】についてまとめていきます！
