シニア向けWebサイトで注意すべき4つのデザインポイント
少子高齢化に伴い、シニア層へ配慮したWebサイトの需要が高まってきています。
シニア層とは65歳前後～と言われており、インターネットの利用率を見てみると、令和5年では60～69歳が90%、70～79歳が67%と年々増加しています。
参考ページ：令和５年通信利用動向調査の結果
一般的に、50代後半頃から視覚機能の低下が現れてくると言われています。
Webサイトなど文字情報が中心の媒体は、シニア層に配慮したデザイン設計が必要です。
本記事はシニア層をターゲットとしたWebデザインのポイントを4つ解説します。
また、優れたWebデザインの参考サイトもあわせてご紹介します。
目次
注意すべきデザインのポイント
ポイントは大きく4つの項目に分類できます。
① フォント（文字）
② 色・配色
③ レイアウト
④ UI・パーツ
① フォント（文字）
一番気を付けたいのは文字の使い方です。
40歳を過ぎると近くのものが見えにくくなることも少なくありません。そのため、フォントの大きさや種類を考慮し読みやすくする必要があります。
フォントは大きく、行間・字間はゆとりを持つ
フォントサイズは全体的に大きくしましょう。本文は18px以上にし、見出しも本文と差がはっきり出るサイズにしてください。行間はゆとりを持って、行と行の間にその文字の半分以上が入るようにするとスッキリして読みやすいです。字間もゆとりを持って、文字同士がくっついて1つの塊に見えないように注意してください。ただし字間を離しすぎると文章として読みづらくなってしまいます。
フォントの種類は基本ゴシック
フォントの種類は線が均一なゴシック体が無難で読みやすいです。明朝体は線の太さに差があり、細い部分が見えづらくなる可能性があるので、小さいサイズで使用する場合は注意してください。どうしても明朝体を使いたい場合は、キャッチコピーや見出しなど大きく文字が入るところで使用すると、落ち着いた品のある印象を与えられます。
② 色・配色
加齢により色の見え方も変わってくる場合があります。隣り合わせの要素はコントラストを意識し、区別しやすいようメリハリをつけましょう。フォントは可読性を意識して、白系の背景には黒や濃いめの色を使いましょう。
黒と青はくっつけない
加齢に伴い「青色」を判別する機能が低下すると言われています。そのため黒と濃い青系の色は差が分かりづらいので違う色を代用するか、明度の高い青にしましょう。
コントラストをつける
明度・彩度・色相の差や、オブジェクトの大きさの差をコントラストと呼びます。シニアの場合、隣り合わせの要素の明度のコントラストが小さいと、区別しづらい場合があります。特に重要な文字ではコントラストを大きくはっきりと差が出るようにしてください。
③ レイアウト
レイアウトとは一言でいうと「配置」です。高齢になるにつれ認知機能が低下してくると、情報をいっぺんに処理したり、理解することが難しくなる場合があります。複雑で一貫性のないレイアウトは避け、できるだけシンプルで整列されたレイアウトを心掛けましょう。レイアウトは、シニア層に限らずUIデザインにおいても大切なポイントです。下記の記事で詳しく解説しているので興味がある場合はご一読ください。
余白（マージン）をしっかりとる
高齢者になると手先の細かい動きがしにくくなる傾向があります。リンクなどのクリック（タップ）が必要な箇所は、クリックが反応する領域をなるべく広く設定し、リンクが隣り合っている場合は余白をしっかりとり、誤って違うリンクを押してしまわないように設計しましょう。
奇をてらわず整列させる
「オシャレだから」という理由だけで不規則に要素を並べたり、同じような要素をランダムな大きさにすると、理解するまで時間がかかってしまい、余計な疲労につながります。重要度が同じくらいの情報は大きさを揃え、均等に整列させると読みやすくなります。
④ UI・パーツ
UIとはUser Interface（ユーザーインターフェイス）の略称で、Interfaceには「接点、接触面」という意味があります。Webサイトの場合、主にボタンやフォームなど“ユーザーが操作するパーツの使いやすさやわかりやすさ”のことを指します。シニア向けサイトでは、直感的な分かりやすさ、簡単な操作が求められるため、若者向けのWebサイトよりもUIに注意する必要があります。
予測できるデザインにする
ボタンやテキストリンクなど、ユーザーが自分でアクションを起こす要素は「押せるのか」「押すとどうなるのか」が予測できるように工夫が必要です。私たちがよく目にしているフラットなデザインのボタンも、シニア層からするとただ”色が変わっている箇所”としか認識されない可能性があるため、ボタンに陰を付けたり立体感を出すことで「押せるボタン感」を出すことが大切です。今見ているページから違うエリアに遷移するボタンには「矢印（→）」アイコン、外部サイトに遷移する場合は「別タブ」アイコンなどアイコンを置くとユーザーは予測がしやすくなります。
CVボタンなど重要なボタンは、背景とのコントラストを大きくし目に留まりやすくしてください。文章中のテキストリンクは、リンクであることが分かるように下線を引いたり青文字にしましょう。また、シニア層が普段聞きなれない横文字や専門用語は避け、一目で理解できる言葉でできるだけ表現しましょう。
写真・イラストを使う
テキストが長々と続くと、読み疲れたり、読む気力がなくなってきてしまいます。写真やイラストを組み込みながら飽きさせない工夫が必要です。
シニア向けWebデザインの参考サイト3選
シニア層を考慮したWebサイトは、遊び心がなく少し昔っぽい印象のサイトが多いと思います。優先順位は「読みやすさ・わかりやすさ＞デザイン性」ですが、デザイン性のある素敵なサイトはたくさんあります。今回はデザイン性がありつつわかりやすいサイトを3つご紹介します。
登米診療所 | TOYOMA CLINI
宮城県にある診療所のWebサイトです。広いマージンですっきり＋区切り線で要素の境界がとてもわかりやすくなっています。丸みを帯びた大きな文字で親しみやすく、規則的なレイアウトで優しさを感じるデザインです。
社会福祉法人 明照園 | 熊本県天草市の特別養護老人ホーム
熊本県にある特別養護老人ホームのWebサイトです。ゆったりとした字間・行間で読みやすく、イラストや写真を多く使っており見ていて飽きません。優しい色合いとほっこりするイラストは温かみを感じます。
着物買取｜バイセル公式
着物の買取サービスのWebサイトです。買取相場や着物の種類など情報は多いですが、要素の区切りがしっかりされており見やすいです。ユーザーにシニア層が多いためか、ユーザーが困ったとき用のリンクが追従してくれるのでサイト内で迷子になっても安心です。シニア層にも認知度が高い国民的アニメを起用しており、おなじみのキャラクターがユーザーに安心感を与えます。
まとめ
シニア向けのWebサイトはわかりやすさ・読みやすさを特に重視しなければなりません。これらにデザイン性を取り入れることは簡単ではないですが、プライムナンバーズなら色覚の多様性に配慮した色使いを考えながらデザインするデザイナーが在籍しているので、ご提案やお手伝いをすることができます。
Webサイトの新規制作やリニューアルをお考えの方はプライムナンバーズにお気軽にご相談ください。
