高齢の方にも読みやすいホームページにする文字と色の工夫

年配の方が「見づらい」と感じるのはどんなときか

年齢を重ねると、細かい文字にピントが合いにくくなったり、薄い色どうしの違いが分かりにくくなったりすることがあります。また、スマートフォンの小さな画面で、指先で細かい場所を押すのが難しいと感じる方もいます。

ホームページで「見づらい」と言われる場面は、おおむね次のようなものです。

• 文字が小さく、画面を指で広げないと読めない
• 薄い灰色の文字や、写真の上に重ねた文字が読みにくい
• ボタンが小さく、隣のボタンを押してしまう
• どこが押せる場所なのか見た目で分からない
• 文章が長く続き、どこに何が書いてあるのか探しにくい

これらは年配の方だけの困りごとではありません。屋外の明るい場所でスマートフォンを見る方や、忙しくて流し読みをする方にとっても、同じように読みにくいものです。年配の方に読みやすいホームページは、結果として多くの人に読みやすいホームページになります。

文字の大きさと書体の工夫

本文の文字は「少し大きいかな」くらいを目安に

パソコンでもスマートフォンでも、本文の文字が小さすぎると読む気持ちが続きません。ホームページの文字の大きさは「px（ピクセル）」という単位で決めることが多く、本文は16px程度を基本にしているサイトがよく見られます。年配のお客様が多い会社であれば、それより一回り大きめにすることも考えてみてください。

大切なのは数字そのものよりも、実際の画面で読んでみて楽に読めるかどうかです。社内の方やご家族など、身近な年配の方にスマートフォンで見てもらうと、気づくことが多くあります。

注意書きや小さな文字を減らす

営業時間、料金の条件、電話番号の受付時間など、大事な情報ほど小さな文字で書かれていることがあります。小さな文字は「読まなくてもいい補足」に見えてしまうため、お客様にとって大切な情報は本文と同じ大きさで書くほうが親切です。

読みやすい書体を選ぶ

筆で書いたような書体や、線がとても細い書体はおしゃれに見えますが、長い文章には向きません。本文には、線の太さが均一で形がはっきりした「ゴシック体」を使うと読みやすくなります。見出しなど短い部分で雰囲気を出したいときだけ、特徴のある書体を使うとよいでしょう。

行と行の間にゆとりを持たせる

文字が大きくても、行と行の間が詰まっていると読む場所を見失いやすくなります。行の間を少し広めにとり、1行の文字数が長くなりすぎないようにすると、目の移動が楽になります。

色の組み合わせの工夫

文字と背景の色に「はっきりした差」をつける

読みやすさにいちばん影響するのは、文字の色と背景の色の差です。白い背景に薄い灰色の文字、水色の背景に白い文字などは、見た目がやわらかくても読みにくくなりがちです。

色の差は「コントラスト比」という数値で確認できます。ウェブの読みやすさについての国際的な指針（WCAG）では、通常の文字で4.5対1以上がひとつの目安とされています。インターネット上には、色を入力するだけでこの数値を調べられる無料の確認ツールもあります。

真っ黒より「少しやわらかい黒」も選択肢

白い背景に真っ黒な文字は差がはっきりしますが、長く読むとまぶしく感じる方もいます。ほんの少し灰色がかった濃い黒にすると、読みやすさを保ちながら目への負担をやわらげられます。ただし、薄くしすぎると先ほどの「差が小さい」状態になるので、確認しながら調整します。

色だけで意味を伝えない

「赤い文字の部分は必須です」「緑は空きあり、赤は満席」のように、色だけで情報を伝えると、色の違いが分かりにくい方には伝わりません。「必須」と文字で添える、記号を一緒に使うなど、色以外の手がかりも用意しておくと安心です。

写真の上に文字をのせるとき

トップページの大きな写真の上にキャッチコピーをのせるデザインはよく使われます。この場合は、写真を少し暗くしたり、文字の後ろに帯状の色を敷いたりして、文字がはっきり読めるようにします。スマートフォンでは写真の見える範囲が変わるため、パソコンとスマートフォンの両方で確認することが大切です。

ボタンを押しやすくする工夫

ボタンは指で押しやすい大きさに

スマートフォンでは、ボタンを指で押します。ボタンが小さいと、押したつもりが反応しなかったり、隣のボタンを押してしまったりします。お問い合わせや電話のボタンなど、よく使われるボタンほど大きめにし、ボタンどうしの間にもすき間をとっておきましょう。

「押せる場所」だと見た目で分かるように

文字だけのリンクや、枠のない薄いボタンは、押せる場所だと気づかれにくいものです。ボタンには背景の色をつけ、四角い形にするなど、ひと目で「押せる」と分かる見た目にします。文章の中のリンクは、色を変えるだけでなく下線をつけると分かりやすくなります。

ボタンの言葉は具体的に

「こちら」「詳しくはこちら」だけでは、押した先に何があるのか分かりません。「料金表を見る」「電話で相談する」「お問い合わせフォームへ」のように、押した後に何が起こるかが分かる言葉にすると、迷わず進んでもらえます。

電話番号は押すだけでかけられるように

年配のお客様の中には、フォームよりも電話で問い合わせたい方も多くいらっしゃいます。スマートフォンで電話番号を押すとそのまま電話がかけられる設定にしておき、番号は大きな文字で、受付時間も近くに書いておくと親切です。

文章と並べ方の工夫

一つの段落は短めに

文字の大きさや色を整えても、文章がぎっしり詰まっていると読みにくさは残ります。一つの段落は数行程度にまとめ、話題が変わるところで段落を分けましょう。

見出しで内容が分かるようにする

見出しを読むだけで、そのあとに何が書いてあるか分かるようにすると、必要なところだけを探して読めます。「サービス」より「お庭の手入れの料金と流れ」のように、具体的な見出しのほうが親切です。

専門用語やカタカナ語を言いかえる

業界では当たり前の言葉でも、お客様には分かりにくいことがあります。カタカナ語や専門用語は、できるだけふだんの言葉に言いかえるか、すぐ後に短い説明を添えます。

大切な情報は見つけやすい場所に

電話番号、営業時間、所在地、お問い合わせ方法は、多くのお客様が探す情報です。ページの上のほうや、どのページからでもすぐ見つかる場所にまとめておくと、何度もページを行き来せずに済みます。

勝手に動くものは控えめに

自動で切り替わる写真や、流れる文字は、読んでいる途中で内容が変わってしまい、落ち着いて読めない原因になります。使う場合は切り替わりをゆっくりにする、止められるようにするなどの配慮があるとよいでしょう。

自社のホームページを確認してみましょう

専門的な知識がなくても、次の点は自社で確かめられます。スマートフォンとパソコンの両方で、実際に画面を見ながら確認してみてください。

まとめ：読みやすさはお客様への気配り

年配の方に読みやすいホームページにするための工夫は、特別な技術というより、お客様への気配りの積み重ねです。

• 本文の文字は大きめにし、大事な情報を小さな文字で書かない
• 文字と背景の色の差をはっきりさせ、色だけで意味を伝えない
• ボタンは大きく、押せることが分かる見た目と具体的な言葉にする
• 段落を短くし、見出しと分かりやすい言葉で探しやすくする

すべてを一度に直す必要はありません。まずはチェック表で気になったところから、一つずつ見直してみてください。それだけでも、お客様の「見づらい」という声を減らすきっかけになるはずです。