高齢のお客様にも読みやすいホームページの作り方 ─ 文字・色・ボタンの基本

「ホームページを新しくしたら、常連のお客様から『前のほうが見やすかった』と言われた」。たまに聞く話です。

作った側に手抜きがあったわけではありません。今どきの見た目に寄せた結果として、読みにくくなっていることがほとんどです。

この記事では、年配のお客様が多い商売のために、どこをどう直すと読みやすくなるのかを制作側からまとめました。特別な道具は要りません。手元のスマホ1台で確かめられることばかりです。

「今どきの見た目」が、そのまま読みにくさになることがある

読みにくいサイトの多くは、雑に作られたものではなく、「今どきに見せる工夫」が裏目に出たものです。

流行の見た目には共通の型があります。余白を広く取り、文字を細くし、色を淡くして、大きな写真の上に言葉を重ねる。写真で見ると確かに洗練されて見えます。

ただ、この型は「目のピントが合いやすい人が、明るい室内で、新しいスマホを近くで見る」ことを前提にしています。前提が変わると、同じ画面が急に読みにくくなります。

読みにくさを生む4つの定番

年配のお客様から「見づらい」と言われるとき、原因はだいたいこの4つのどれかです。

若い人は困らないので、気づかれにくい

この4つがやっかいなのは、作る側の目では問題が見えないところです。

制作者も、社内で確認する担当者も、たいていは目のピントが合いやすい年代です。新しいスマホを顔の近くで見て、明るい事務所で確認します。その環境では、薄いグレーの文字もきちんと読めます。

そして年配のお客様は、読みにくくても「読みにくい」と言ってくれません。黙って閉じて、電話帳や紹介など別の手段に戻るだけです。

「見やすいサイト」は古くさいサイトではない

ここで誤解されやすいのですが、読みやすくすることと、野暮ったくすることは別です。

読みやすいサイトは、文字が大きくて、余白が整っていて、押す場所がはっきりしている、というだけです。色数を絞って写真を大きく使えば、十分に今どきの顔になります。

• 直すのは「文字の大きさ・濃さ・書体の太さ・ボタンの形」の4つ
• 写真の質やレイアウトの雰囲気は、そのまま残せることが多い
• 全面的な作り直しをしなくても、この4つだけで印象は大きく変わる

文字 ─ 大きさ・書体・行の間を見直す

文字まわりで見るところは3つだけです。本文の大きさ、書体の太さ、そして行と行の間です。

本文は小さくしすぎない

まず本文の大きさです。「小さめのほうがスマートに見える」という理由で本文を小さくしているサイトは、かなりあります。

判断の仕方は簡単です。スマホを腕を伸ばした距離に持って、本文が無理なく読めるかどうか。ここで目を細めるようなら、小さすぎます。

数値で何ポイント、という決め方より、実際の見え方で決めるほうが確実です。端末によって同じ指定でも見え方が変わるためです。

書体は細すぎないものを選ぶ

次に書体の太さです。細い書体は、線が薄く見えるぶん、薄い色の文字と同じ問題を起こします。

日本語は漢字の画数が多いので、細い線で小さく表示すると、へんとつくりがくっついて見えます。本文には、細すぎない標準的な太さの書体を使うほうが失敗しません。

• 本文には、極端に細い書体を使わない
• 見出しを太くするのはよいが、本文まで太くすると重く見える
• 装飾的な書体は、ロゴやキャッチコピーなど短い言葉だけに使う

行の間と、1行の長さ

見落とされがちなのが、行と行の間です。ここが詰まっていると、読んでいる行を見失いやすくなります。

行の間をゆったり取ると、それだけで「読める文章」に見えます。文字を大きくするより効く場面も多いところです。

1行の長さも同じです。パソコンの画面で端から端まで文字が並んでいると、次の行の頭を探すのに時間が掛かります。本文の幅は、画面いっぱいに広げないほうが読みやすくなります。

段落を短く切る

文字の設定だけでなく、文章の形も読みやすさに直結します。

• 段落は3文くらいまでで切る
• 見出しを増やして、目で追える固まりを作る
• 大事なところは箇条書きにして、拾い読みできるようにする

色 ─ 背景と文字の濃さをはっきり分ける

色で迷ったときは、色合いではなく「濃さの差」だけを見てください。ここがはっきりしていれば、たいていの人が読めます。

薄いグレーの文字をやめる

白い背景に薄いグレーの文字は、いまのウェブでよく見かける組み合わせです。落ち着いて見えるので、注意書きや補足に使われがちです。

ただ、この組み合わせは背景との差が小さく、目のピントが合いにくい方には文字が背景に溶けて見えます。本文と注意書きは、背景としっかり差のある濃い色に戻すのが確実です。

薄い色を使いたい場合は、飾り線や背景の面など、読まなくても困らない部分に回します。

色の違いだけで意味を伝えない

もう一つ大事なのが、色だけに意味を持たせないことです。

色の見え方には個人差があり、加齢によって特定の色の区別が付きにくくなることもあります。屋外の明るさや、画面の設定でも見え方は変わります。

• 「赤い文字が必須項目です」ではなく、「必須」と文字でも書く
• 「緑が営業日、灰色が休業日」の表には、記号や文字の説明を添える
• 料金表で強調したい行は、色だけでなく枠や太字も併せて使う

写真の上に文字を置くときは

写真の上に見出しを重ねる形は、印象的な反面、いちばん読めなくなりやすい置き方です。

写真は場所によって明るさが違います。同じ白い文字でも、空の部分では消え、影の部分では読めます。しかも画面の幅が変わると、文字が重なる場所も変わります。

• 文字を重ねる部分に、半透明の暗い面を敷いて明るさを揃える
• 写真の上ではなく、写真の下や横に文字を置く形に変える
• どうしても重ねるなら、文字を太くして、明るさの変化が少ない写真を選ぶ

明るい屋外での見え方も見る

現場で働く方や、外出先で調べる方は、明るい屋外で画面を見ます。屋外では画面全体が白っぽく見え、薄い色はほとんど飛びます。

事務所の中だけで確認していると、この状態に気づけません。晴れた日に一度、外でスマホを開いてみてください。

ボタンと電話番号 ─ 「押せる」と分かる形にする

ボタンで見るところは4つです。大きさ、間隔、形、そして書いてある言葉です。

ボタンは大きく、間を空ける

指で押す動作は、思っているより正確ではありません。手が少し震える方、指が乾きにくい方、手袋をしている方もいます。

小さなボタンが隙間なく並んでいると、隣を押してしまいます。押し間違えて別のページに飛ぶと、そこで諦める方は多いです。

• ボタンは、指の腹で押せる大きさにする
• ボタンとボタンの間に、はっきり分かる隙間を空ける
• 文章の中のリンクを並べるより、独立したボタンにまとめる

「押せる」と分かる形にする

最近のデザインでは、枠のない文字だけのボタンや、背景と同じ色のボタンがよく使われます。見た目はすっきりしますが、押せるのかどうかが分かりません。

年配のお客様に限らず、「押せると気づかれなかったボタン」は、無いのと同じです。

• 背景色を付けるか、枠で囲うか、どちらかははっきりさせる
• 下線付きのリンクは、下線を消さない
• 画面の中で、押せるものと読むだけのものの見た目を混ぜない

文言は、次に何が起きるかを書く

ボタンの中の言葉も読みやすさの一部です。「詳しくはこちら」だけだと、押した先で何が起きるか分かりません。

• 「詳しくはこちら」ではなく「料金表を見る」
• 「送信」ではなく「この内容で問い合わせる」
• 「CLICK」のようなアルファベットだけの表記は避ける

電話番号は、そのまま押せる形に

年配のお客様が多い商売では、いまも電話が主役です。だからこそ、電話番号の置き方で結果が変わります。

画像として置かれた電話番号は、スマホで押しても発信できません。番号を長押しして選んで、電話アプリに貼り付ける、という操作が必要になります。ここで諦める方はかなりいます。

• 電話番号は画像ではなく文字で置き、押すとそのまま発信できる形にする
• 番号は大きく、画面の上のほうに置く
• 受付時間を番号のすぐ横に書く（掛けてよい時間が分かると、掛けやすくなります）
• 「お問い合わせ」より「電話で相談する」のほうが、何が起きるか伝わります

言葉 ─ 専門語とカタカナを減らす

文字が読めても、言葉の意味が分からなければ伝わりません。読みやすさの半分は、言葉選びで決まります。

カタカナは日本語に言い換える

制作の現場で当たり前に使う言葉が、そのままサイトに載っていることがあります。書いた側は説明したつもりでも、読む側には届きません。

言い換えが難しい言葉は、初めて出てくるところで一言だけ補えば十分です。「CMS（お知らせを自分で更新できる仕組み）」のような書き方です。

アルファベットの略語をそのまま出さない

業界の中で通じる略語は、外では通じません。とくに、社名でも商品名でもないアルファベットの並びは読み飛ばされます。

• 略語を使うなら、初出で日本語の意味を添える
• 見出しやボタンには略語を使わない
• 英語のキャッチコピーを置くなら、その下に日本語で同じ内容を書く

一文を短くする

一文が長いと、読み終わるまでに前半を忘れます。読点でつなげず、短く切るほうが伝わります。

• 「〜で、〜が、〜ので」とつながっている文は、2つか3つに割る
• 一文には、言いたいことを1つだけ入れる
• 敬語を重ねすぎない（「〜させていただいております」は「〜しています」で足ります）

よくある質問は話し言葉で書く

お客様からよく聞かれることを、そのままの言葉で書いておくと効きます。

「駐車場はありますか」「日曜はやっていますか」「初めてでも大丈夫ですか」。実際に電話で聞かれている質問こそ、サイトに載せる価値があります。

スマホで自分の手で確かめる ─ 拡大・横向き・腕を伸ばした距離

読みやすさの確認に、専門の道具は要りません。自分のスマホで、次の5つを確かめれば十分です。

1. 腕を伸ばした距離で見る

まず、スマホを腕を伸ばした距離に持って、自分のサイトを開いてください。

この距離で本文が読めるかどうかが、最初の関門です。目を細めたり、腕を縮めたくなったりしたら、文字が小さいか、色が薄いかのどちらかです。

2. 文字を大きくした状態で開く

スマホ本体の設定で、文字を大きくして使っている方がいます。設定で文字サイズを大きくしてから、自分のサイトを開いてみてください。

ここでレイアウトが崩れるサイトは珍しくありません。ボタンから文字がはみ出したり、メニューが重なったり、料金表が切れたりします。

• 文字を大きくしても、ボタンの文言が全部見えるか
• 表が画面からはみ出していないか
• 見出しと本文が重なっていないか

3. 拡大できるようにしておく

画面を2本の指で広げて、拡大できるかどうかも確かめてください。

サイトの作りによっては、拡大そのものができない設定になっていることがあります。これは「レイアウトを崩したくない」という理由で入れられがちですが、読めない人から読む手段を奪う設定です。拡大できる状態にしておくほうが親切です。

4. 横向きにしてみる

スマホを横向きにして開く方もいます。横向きにすると1行が長くなり、縦の余白が減るので、縦向きでは問題なかった画面が急に窮屈になります。

• 横向きでメニューが画面を覆っていないか
• 画面の上下に固定された帯が、本文の場所を食いつぶしていないか
• 横向きのまま、問い合わせフォームを最後まで入力できるか

画面の幅に合わせて組み変わる作りについては、ホームページのスマホ対応とはで詳しく説明しています。

5. 家族に押してもらう

最後が、いちばん確実な方法です。自分より年上の家族や知人に、スマホを渡して操作してもらってください。

このとき、こちらから説明してはいけません。「うちのサイトで、料金のページを開いてみて」とだけ頼んで、黙って見ます。

• どこで手が止まったか
• どこを押そうとして、押せなかったか
• 何を探しているのに見つからなかったか

この3つが分かれば、直す場所が決まります。実際にやってみると、作った側が予想もしなかった場所で止まります。

年配のお客様が多い業種で、特に効くこと

同じ直しでも、電話と紹介で仕事が決まる商売ほど、効果がはっきり出ます。

除排雪業

冬の申し込みは、寒い屋外や車の中から、手袋をしたまま見られます。この条件では、小さなボタンはほぼ押せません。

• 申込ボタンと電話番号を、トップの上のほうに大きく置く
• 料金表は、画面からはみ出さない形にする
• シーズン契約の受付状況を、短い文で分かるように書く

シーズン契約の受け付け方は、除排雪業のホームページの作り方にまとめています。

クリニック・治療院

体調が悪い方が、痛みを抱えたまま見る画面です。長い説明を読む余裕はありません。

• 診療時間と休診日を、画像ではなく文字で大きく置く
• 電話番号をそのまま押せる形にする
• 初めての方向けの案内を、短く分けて書く

予約につながる作りについては、クリニック・治療院のホームページの作り方で説明しています。

士業事務所

相続や年金の相談は、ご本人が高齢の場合もあれば、ご家族が代わりに調べている場合もあります。どちらにも読める作りが要ります。

• 取り扱う分野を、専門用語ではなく相談者の言葉で書く
• 相談の流れを番号付きで並べる
• 費用の考え方を、分かる範囲で先に出す

分野の見せ方は、士業のホームページの作り方に書いています。

どの業種でも共通すること

3つの業種に共通しているのは、**「困っている人が、急いで、良くない条件で見る」**という点です。

明るい屋外、寒い車の中、体調の悪い状態。落ち着いて画面を見られないからこそ、大きな文字と押せるボタンが効きます。

LIT STUDIO では、札幌のWeb制作スタジオとして、こうした業種向けのホームページと業務アプリをセットで作っています。いまのサイトのどこを直せばよいか分からないときは、お問い合わせからサイトのURLを添えてご相談ください。

まとめ ─ 公開前に見直すチェックリスト

公開前や、リニューアルの打ち合わせの前に、次の6点を確かめれば大きく外しません。

• 本文を小さくしすぎていないか。腕を伸ばした距離で読めるか
• 背景と文字の濃さに、はっきり差があるか。薄いグレーの文字が本文に使われていないか
• 色の違いだけで意味を伝えている場所がないか（必須項目・営業日など）
• ボタンは大きく、間が空いていて、押せると一目で分かる形か
• 電話番号が文字で置かれ、スマホからそのまま発信できるか
• 文字を大きくした状態と、横向きの状態で、崩れずに読めるか

最後に一つだけ。読みやすさは、見た目の好みの話ではなく、**「読んでもらえるかどうか」**の話です。

どれだけ良い内容を書いても、読まれなければ無いのと同じです。迷ったら、自分より年上の方に一度スマホを渡してみてください。直すべき場所は、たいていその場で分かります。