お客様に高齢者が多い会社のホームページでは、文字が小さい、ボタンが押しにくいといった見づらさが、そのまま問い合わせや予約の減少につながります。
この記事では、高齢者向けWebデザインのポイントと気をつけることを解説し、60歳以上がターゲットの接骨院のホームページを制作した事例も紹介します。
高齢者向けWebデザインが必要なホームページ
高齢者向けWebデザインが必要なのは、ホームページを見るお客様に高齢者が多い業種です。主に次のような業種が当てはまります。
- 病院やクリニック
- 接骨院や整骨院、鍼灸院
- 介護施設やデイサービス
- 住宅リフォーム会社
- 葬儀社や仏壇店
- 補聴器店や眼鏡店
- 地域密着の店舗
これらの業種では、60代以上のお客様が自分でパソコンやスマホを使い、診療時間やアクセス、料金などを調べてから電話や予約をするケースが多くあります。文字が小さくて読めない、どこを押せばよいか分からないといった見づらさがあると、お客様は内容を確かめられないまま、他の会社のホームページへ移ってしまいます。
高齢のお客様が多い業種ほど、見やすさがそのまま問い合わせや予約の数に表れます。
介護施設や葬儀社のように、子どもの世代が代わりに調べる業種もあります。その場合でも、本人や年配の家族が一緒に画面を見て決めることが多く、高齢者向けWebデザインにしておけば、どの年代のお客様にも内容が伝わりやすいホームページになります。
高齢者向けWebデザインのポイント
高齢者向けWebデザインでは、見た目の美しさよりも、読みやすさと操作のしやすさを優先します。ここでは、ホームページ制作で押さえておきたいポイントを紹介します。
本文の文字を大きくして行間を広げる
年齢を重ねると小さな文字が読みにくくなり、スマホの画面では特に負担が大きくなります。
高齢者向けWebデザインでは、本文の文字サイズを一般的なホームページより一回り大きくし、スマホでも無理なく読める大きさにします。目安として、本文は16px以上、高齢のお客様が中心のホームページでは18px程度まで大きくすると読みやすくなります。
文字を大きくするだけでなく、行間を広げることも大切です。行間が詰まっていると、読んでいる行を見失いやすくなります。行間は文字の高さの1.7〜2倍ほどを目安にし、1段落を長くしすぎないようにすると、文章のまとまりがつかみやすくなります。
文字と背景のコントラストをはっきりさせる
薄いグレーの文字や、淡い色の背景に白い文字を重ねたデザインは、おしゃれに見えても高齢者には読みにくくなります。年齢とともに色の差を見分けにくくなるので、文字と背景の明るさの差をはっきりさせることが基本です。
本文は白い背景に黒に近い濃い色の文字を使い、写真の上に文字を載せる場合は、写真を暗くしたり文字の背景に帯を敷いたりして読みやすくします。文字と背景のコントラストは、Webアクセシビリティの基準で4.5対1以上が目安とされており、チェックツールを使えば数値で確かめられます。
ボタンを大きくして押せる場所と分かる形にする
高齢者は指先での細かい操作が苦手な方も多く、小さなボタンや、ボタン同士が近い配置では押し間違いが起こりやすくなります。予約や問い合わせのボタンは、指で確実に押せる大きさにし、他のボタンとの間に十分な間隔を取ります。スマホでは、ボタンの高さを44px以上にするのがひとつの目安です。
ボタンの形も重要です。文字だけのリンクや、背景になじむ色のボタンは、押せる場所だと気づかれないことがあります。四角い枠や影をつけ、周りと違う色にして、ひと目でボタンと分かるデザインにします。
メニューの項目を絞って分かりやすい言葉にする
メニューの項目が多いと、どこに目的の情報があるのか探すのに時間がかかります。高齢者向けWebデザインでは、お客様がよく見る情報にメニューの項目を絞り、迷わず目的のページへ進めるようにします。
項目名には、カタカナ語や専門用語を避けて、誰にでも伝わる言葉を使います。たとえば、アクセスは交通案内、コンタクトはお問い合わせのように、言い換えるだけで分かりやすさが大きく変わります。
電話番号を大きく表示してタップで発信できるようにする
高齢のお客様は、問い合わせフォームよりも電話を選ぶことが多くあります。ホームページの上部や各ページの最後など、目に入りやすい場所に電話番号を大きく表示し、受付時間も一緒に載せます。
スマホでは、電話番号をタップするだけで発信できるように設定します。番号を見ながら手で入力する手間がなくなり、かけ間違いも防げます。電話番号を画像で載せると、タップで発信できないうえに拡大すると文字がぼやけるので、文字で表示するのが基本です。
問い合わせフォームの入力項目を減らす
スマホでの文字入力は、高齢者にとって大きな負担です。入力項目が多い問い合わせフォームは、途中で入力をやめてしまう原因になります。名前と連絡先、問い合わせ内容など、本当に必要な項目だけに絞ります。
入力欄は大きめにし、項目名を入力欄の外に表示して、入力中でも何を書く欄か分かるようにします。入力例を添えたり、郵便番号から住所を自動で入力できるようにしたりすると、入力の手間をさらに減らせます。
アイコンだけにせず文字を添える
スマホのホームページでよく使われる三本線のメニューアイコンや、電話や地図のアイコンは、見慣れていない高齢者には意味が伝わらないことがあります。アイコンだけで表示すると、メニューがどこにあるのか分からず、目的のページにたどり着けない原因になります。
高齢者向けWebデザインでは、アイコンの下や横にメニュー、電話、地図のような文字を添えます。アイコンと文字を組み合わせることで、ひと目で何のボタンなのかが分かります。
高齢者向けWebデザインで気をつけること
高齢者向けWebデザインは、見やすさを優先するあまり、かえって使いにくいホームページになることがあります。ここでは、高齢者向けWebデザインで気をつけることを紹介します。
文字を大きくしすぎて情報が探しにくくならないようにする
文字は大きいほど読みやすくなりますが、大きくしすぎると1画面に表示できる情報が少なくなります。スマホでは何度もスクロールしないと目的の情報にたどり着けず、今どこを読んでいるのか分からなくなってしまいます。
高齢者向けWebデザインでは、本文の文字サイズを読みやすい大きさにとどめ、見出しや強調したい部分との大きさの差で情報の優先順位を伝えます。すべての文字を同じように大きくするのではなく、診療時間や電話番号など特に見てほしい情報を大きくすると、必要な情報を見つけやすくなります。
高齢者向けに寄せすぎて古くさいデザインにしない
高齢者向けを意識しすぎると、原色を多く使った配色や、飾りの多い文字など、古くさい印象のデザインになりがちです。高齢のお客様であっても、古くさいホームページを見ると、会社やお店そのものが古い、きちんと運営されていないと感じることがあります。
ホームページを見るのは高齢者だけではありません。家族や若い世代のお客様が見ることも考えて、落ち着いた配色や整ったレイアウトで、清潔感のあるデザインにします。文字の大きさやボタンの押しやすさは高齢者向けにしつつ、見た目は今のホームページとして違和感のないデザインにするのが基本です。
自動で切り替わるスライダーや動きの多い演出は控える
トップページでよく使われる、写真が自動で切り替わるスライダーは、高齢者にとって読み終わる前に内容が変わってしまう原因になります。大事なお知らせをスライダーに入れると、見てもらえないまま次の写真に切り替わることもあります。
スクロールに合わせて文字や写真が動く演出や、画面が大きく切り替わるアニメーションは、目が疲れたり、どこを見ればよいか分からなくなったりします。高齢者向けWebデザインでは、動きのある演出は最小限にし、伝えたい情報は止まった状態で表示します。スライダーを使う場合は、切り替わりの速さをゆっくりにし、自分で前後に切り替えられるボタンをつけます。
高齢者向けWebデザインの見やすさを確認する方法
高齢者向けWebデザインは、デザインの画面だけでは本当に見やすいか判断できません。公開前のテストサイトで、実際に操作して確かめることが大切です。
タブレットや画面の小さいスマホで表示を確認する
パソコンの大きな画面や、新しい機種のスマホで見ると問題がなくても、高齢者が使っている端末では見え方が変わることがあります。高齢者は、画面が大きくて見やすいタブレットを使う方もいれば、何年も前に買った画面の小さいスマホを使い続けている方もいます。
テストサイトの確認では、タブレットと画面の小さいスマホの両方で表示を確かめます。画面の小さいスマホでは、文字が小さくなりすぎていないか、ボタン同士が近すぎて押し間違えないかを見ます。タブレットでは、レイアウトが崩れていないか、文字や写真が間延びして読みにくくなっていないかを確認します。
社内の2名以上が高齢者の立場でテストサイトを確認する
高齢のお客様に実際にテストサイトを見てもらうのは、なかなか難しいものです。その代わりに、社内の2名以上が高齢者の立場になって、テストサイトを操作してみる方法があります。
確認するときは、ホームページを初めて見るお客様のつもりで、電話番号を探す、診療時間や営業時間を調べる、予約や問い合わせをするなど、お客様が実際に行う操作を一つずつ試します。眼鏡を外した状態や、スマホの文字サイズを大きく設定した状態で見ると、高齢者の見え方に近づけられます。
1人で確認すると、その人の慣れや思い込みで見落としが出ます。2名以上で確認すれば、文字が読みにくい、ボタンが分かりにくいといった気づきを持ち寄れるので、見やすさの問題を見つけやすくなります。気になった箇所は画面のどこかを具体的にまとめて、公開前に直します。
高齢者のお客様が多いホームページを制作した事例
当社では、60歳以上の患者さんをターゲットにした接骨院のホームページを制作しました。ホームページを見る人のほとんどが高齢者になるため、高齢者向けWebデザインで制作しています。
本文の文字を大きくする、電話番号をタップで発信できるようにする、ボタンを押しやすい大きさにするなど、一般的な高齢者向けWebデザインのポイントはすべて取り入れました。そのうえで特に意識したのが、ページの中で重要な情報の周りに余白を取ることです。
たとえば、アクセスマップのページでは、最寄り駅から徒歩何分で着くかという情報が来院を考える患者さんにとって大事な情報になります。この部分はデザインを調整して、上下左右に余白を取りました。周りに文字や写真が詰まっていると、大事な情報でも他の情報にまぎれて見落とされてしまいます。
見てほしい箇所の周りに余白を取ることで、文字を大きくしすぎなくても自然と目に入り、高齢の患者さんにも見つけやすくなります。
ホームページの公開後は、予約数が増えました。文字の大きさやボタンの押しやすさに加えて、重要な情報を見つけやすくしたことで、高齢の患者さんが迷わず必要な情報を確かめて予約まで進めるホームページになっています。
まとめ
高齢者向けWebデザインで大切なのは、文字を大きくすることだけではなく、お客様が必要な情報を迷わず見つけて、電話や予約まで進めるホームページにすることです。見やすさを優先しながら古くさい印象にならないデザインにすれば、高齢のお客様にも家族にも伝わるホームページになります。
当社では、御社のお客様の年齢層をお聞きしたうえで、文字やボタンの大きさ、重要な情報の見せ方まで考えてデザインを提案しています。高齢のお客様が多い業種でも、問い合わせや予約につながるホームページに仕上げます。
お客様に高齢者が多いのに今のホームページが見づらい、これからホームページを制作するが高齢のお客様に伝わるか不安といったお悩みがあれば、お気軽にご相談ください。
