高齢者にも見やすいホームページの直し方｜文字の大きさ・色・電話導線と費用の目安

介護、葬儀、自動車整備、リフォームなど、お客様に高齢の方が多い業種があります。こうした業種では、「見やすさ」が問い合わせの数に直結しやすくなります。

文字が小さい。薄い色で読めない。電話番号がどこにあるか分からない。このような状態では、困って探しに来たお客様が、電話をかける前に画面を閉じてしまいます。

この記事では、直す場所を5つに分けました。電話の入口、文字、色、ボタン、言葉です。それぞれ、社長が見て判断できる形で整理しています。

技術的な作業は、担当者や制作会社に任せて構いません。ただ、何を頼むのかが分かっていると、見積もりを比べやすくなり、不要な作業を避けられます。

なお、スマホで正しく表示されるかどうかは別の話です。こちらはスマホ対応していないホームページの影響で詳しく扱っています。この記事は、スマホで開けることを前提にした「見やすさ」の記事です。

なぜ高齢のお客様には「見やすさ」が問い合わせを左右するのか

見やすさは、デザインの好みの問題ではありません。お客様が電話をかけるかどうかを分ける、実務上の条件です。

高齢のお客様が多い業種で起きやすいこと

お客様に高齢の方が多い業種では、ホームページを開く場面が「困ったとき」に偏りやすくなります。急ぎで、不安で、落ち着いて読む余裕がない状態です。

そのときに、文字が小さく、色が薄く、問い合わせ先が見つからないと、読み進める前に離れてしまいます。次の表は、業種ごとの典型的な場面を整理したものです。一般的な傾向をまとめたもので、個々の会社の状況とは異なる場合があります。

見ている人は、高齢のご本人だけではありません

介護や葬儀では、ホームページを見るのはご家族であることも多くあります。ご家族が50代から60代の場合でも、老眼が始まっている方は少なくありません。

つまり、「高齢者向け」と考えるより、「老眼や、慣れない操作を前提にした見やすさ」と考えたほうが、実態に合います。

見やすさは「年齢」ではなく「条件」の問題です

見えにくさには、年齢だけでなく、いくつかの条件が重なります。画面の小さいスマホで見ている。外の明るい場所で見ている。老眼鏡を外している。急いでいる。

これらは、どの年代の方にも起こります。見やすく直すことは、高齢の方のためだけでなく、すべてのお客様に役立つ改善と言えるでしょう。

先に結論：直す順番と「自社でやる／任せる」の判断表

最初に、社長が判断する材料を一覧にします。迷ったときは、費用が小さく、問い合わせに近い順に進めてください。

費用の目安は、後ほど根拠を示します。ここでは、「1から5は小さく、6は大きい」と覚えておいてください。

順番の理由

• 電話の入口は、問い合わせという成果に最も近く、直す手間も小さいからです。
• 文字と色は、直した効果がすぐ体感でき、確認も簡単だからです。
• 言葉の見直しは、社内に答えがあり、外注せずに進められるからです。
• 全体の作り直しは、1から5を直した結果を見てから判断しても遅くないからです。

文字の大きさ・行間の直し方

最初に確認しやすいのが文字です。社長がスマホで開いて、腕を伸ばした距離で読めるかを見るだけで、状態が分かります。

大きさと行間の目安

以下は、制作の現場でよく使われる目安です。法律で決まった数値ではなく、読みやすさの経験則として使われています。ピクセル（画面上の大きさの単位）で示します。

公的な基準ではどう書かれているか

ウェブの見やすさには、国際的な基準があります。WCAG（ウェブコンテンツのアクセシビリティ指針）と呼ばれ、現在は2.xの版が使われています。

日本の規格では、JIS X 8341-3がこれに対応しています。公共の分野では、総務省の「みんなの公共サイト運用ガイドライン」でも、この規格を目標にすることが示されています。

WCAG 2.xには、文字に関して次のような内容が含まれています。

• 文字を200%まで拡大しても、内容や機能が失われないこと（達成基準1.4.4）。
• 行の高さを文字の大きさの1.5倍にしても、内容が崩れないこと（達成基準1.4.12のテキストの間隔）。

つまり、「最初から読みやすい大きさ」にするだけでなく、「お客様がスマホ側で拡大しても崩れない作り」であることも大切です。

よくある失敗

• 電話番号や料金を画像にしている。拡大するとぼやけ、番号をコピーすることもできません。
• 細くて薄い字体を使っている。おしゃれに見えますが、読みやすさは下がります。
• 大きくしすぎて、スマホで1行に数文字しか入らない。改行が増えて読みにくくなります。
• 全文を太字にしている。強調したい部分が分からなくなります。

社長が1分でできる確かめ方

1. お持ちのスマホで、自社のホームページを開きます。
2. 腕を伸ばした距離、または老眼鏡を外した状態で、本文を読んでみます。
3. 電話番号と受付時間を探し、10秒以内に見つかるかを数えます。
4. スマホの設定で文字サイズを大きくして、もう一度開き、表示が崩れないかを見ます。

スマホの文字サイズは、iPhoneなら「設定」の「画面表示と明るさ」から変えられます。Androidなら「設定」の「ディスプレイ」です。機種により表示名は少し異なります。

色の差（コントラスト）の直し方

文字の大きさと同じくらい、読みやすさを左右するのが色の差です。薄い色は、年齢を重ねるほど見分けにくくなる傾向があります。

色の差は「数字」で測れます

文字色と背景色の明るさの違いは、コントラスト比（色の差の比率）という数字で表せます。WCAG 2.xの達成基準1.4.3では、次のように定められています。

• 普通の大きさの文字は、4.5対1以上。
• 大きな文字（18ポイント以上、または太字で14ポイント以上）は、3対1以上。

実際の色の組み合わせで計算すると、次のようになります。数値は、同じ計算式で求めた参考値です。

色選びの実務ルール

• 本文は、真っ黒でなくてもよいので、濃い色を選びます。薄いグレーは避けます。
• 写真の上に文字を載せるときは、文字の下に濃い帯を敷きます。写真の明るい部分では、白い文字が消えてしまうためです。
• 色だけで意味を区別しません。「赤字は必須」とするより、「必須」と文字でも書きます。
• リンクは、色を変えるだけでなく、下線も付けます。文字との違いが分かりやすくなります。
• 薄い水色や薄い黄色の背景に、同じ系統の薄い文字を重ねない。

測り方

色の差を測る無料のツールがいくつかあります。たとえば、「WebAIM Contrast Checker」は、文字色と背景色を入れると比率を表示してくれます。

担当者に頼めば、トップページと電話のボタン、料金表の3か所を測るだけで、10分ほどで状況が分かります。

ボタンとリンクの大きさ・名前の直し方

スマホは指で押します。指は画面上の矢印より太く、小さなボタンでは押し間違いが起きます。

大きさの目安

押す場所の大きさにも、基準や推奨があります。ここでは、公に示されている数字だけを挙げます。

実務では、スマホで重要なボタンの高さを48ピクセルから56ピクセルとし、幅は画面の横幅いっぱいにすることが多くあります。ボタン同士の間隔は、10ピクセル以上あけると押し間違いが減ります。

ボタンの名前は「押した後」が分かるように

「詳しくはこちら」や「送信」といった名前では、押した後に何が起きるのか分かりません。高齢の方は、押すことに慎重な場合があります。

フォームは入力を減らす

問い合わせフォームは、電話が苦手な方や、夜間に連絡したい方の受け皿になります。ただし、入力欄が多いと途中でやめてしまいます。

• 必須の項目は、お名前、お電話番号、ご用件の3つ程度にします。
• 電話番号は、全角でも半角でも、ハイフンの有無にかかわらず受け付けます。
• エラーが出たときは、「お電話番号を入力してください」のように、直す場所を具体的に示します。
• 送信後に「折り返しのお電話は、平日の何時ごろ」という案内を出します。

フォームに営業メールが増えて困る場合は、問い合わせフォームに営業メールばかり届くときの対策をご覧ください。

言葉をやさしくする：専門用語・カタカナ・略語の見直し

文字が見やすくても、言葉が難しければ読み進めてもらえません。ここは、社内の人が一番よく分かっている部分です。外注せず、自社で進められます。

言い換えの例

文章を整える3つのルール

• 一文は短くします。目安は60字以内です。
• 1つの段落は3文から4文までにします。
• 1つのページで伝えることは、1つにします。

料金や流れは、数字と番号で書く

「料金はお問い合わせください」だけでは、電話をかけるときの心の負担が大きくなります。幅のある目安でも、数字があるだけで安心できる方は多くいます。

たとえば、「基本のコースは○万円から○万円、内容により変わります」のように、幅と条件を書いておきます。流れは「1. お電話　2. ご訪問　3. お見積もり」のように、番号を付けて示します。

写真の使い方

• 建物の外観、スタッフの顔、実際の作業の様子を載せると、初めてのお客様も安心しやすくなります。
• 写真の中に文字を埋め込まず、説明は本文で書きます。
• 写真には代替テキスト（読み上げ用の説明文）を付けます。読み上げソフトを使う方への配慮にもなります。

介護分野の言葉の整え方は、介護の集客を利用者募集と採用の両輪で立て直す実務ガイドでも触れています。デザインの参考は、介護・福祉のホームページデザイン参考をご覧ください。

電話導線の直し方：タップで電話・受付時間・番号の大きさ

高齢のお客様が多い業種では、最終的な問い合わせは電話であることが少なくありません。電話の入口は、見やすさの中で最も成果に近い部分です。

電話導線の確認項目

「タップで電話」は、どう頼めばよいか

制作会社や担当者には、「スマホで、電話番号をタップすると電話がかかる設定にしてください」と伝えれば通じます。技術的には、電話番号のリンクに「tel:」という指定を入れる作業です。

番号が1つのページに数か所ある場合は、すべてに設定します。設定後は、社長ご自身のスマホで押してみて、正しい番号で電話の画面が開くかを確認してください。

受付時間の書き方

• 「年中無休」より、「月曜から土曜の9時から18時、日曜は休み」のように具体的に書きます。
• 祝日、お盆、年末年始の扱いも書きます。
• 葬儀のように24時間受け付ける業種では、「24時間、深夜も電話に出ます」と明記します。
• 書いた時間に、実際に電話に出られることが前提です。

ホームページを直しても、電話に出られなければ意味がありません

電話の入口を直した後に増えるのは、電話の件数です。ところが、社内で電話が取れない時間帯や、担当者が不在で折り返しが遅れる状況があると、お客様の信頼を逃してしまいます。

ここは、社長が決めるべき部分です。次の3点を確認してください。

• 昼休みや外出中の電話は、誰が出る、または転送されるのか。
• 時間外は、留守番電話の案内が適切か。
• 「ホームページを見ました」と言われたとき、受けた人が取り次ぎ方を分かっているか。

効果の測り方

電話が増えたかどうかは、通話の記録で確認できます。難しい仕組みは要りません。電話を受けた人が、「何を見てお電話いただきましたか」と一言聞き、メモに残すだけで構いません。

より詳しく数字を追いたい場合は、ホームページ側で電話ボタンが押された回数を計測する方法もあります。割合の考え方はCVR改善で上がらない原因は？で解説しています。

業種別の直し方の例（架空のケース）

以下は、実在の会社ではなく、説明のために作った架空の例です。結果の数字は載せず、「何を直したか」だけを示します。

どのケースでも、行ったのは「文字、色、ボタン、言葉、電話」の見直しです。大きな作り直しや、新しい機能の追加は行っていません。

葬儀社の場合は、緊急時に選ばれる条件が特殊です。葬儀社のホームページ制作ガイドで、載せる内容を整理しています。

業種を問わず、集客全体の考え方はホームページで集客する方法にまとめています。

費用と手間の目安：自社でやる範囲と任せる範囲

費用は会社により大きく異なります。ここでは「一般的な幅」として、前提を明記して示します。実際の金額は、見積もりで確認してください。

前提条件

• サイトは、10ページから30ページ程度の小規模なものとします。
• WordPressなど、管理画面から更新できる仕組みで作られているものとします。
• 制作会社の作業単価は、1時間あたり5,000円から10,000円と仮定します。
• 金額は税別の目安で、会社の方針により前後します。

作業ごとの目安

費用は「作業時間の見立て」に「時間単価」を掛けて求めています。たとえば2時間から3時間の作業なら、5,000円×2時間で1万円、10,000円×3時間で3万円という幅です。

上の表は、あくまで目安です。サイトの作りが古い場合や、画面の仕組みが特殊な場合は、修正に時間がかかり、費用が増えることがあります。

見積もりを見るときに聞く5つの質問

1. 何ページ、何か所を直す見積もりですか。
2. スマホとパソコンの両方で確認する費用は含まれていますか。
3. 直した後に、年配の方による操作確認は含まれていますか。
4. 元に戻したいときの対応は、どうなりますか。
5. 修正後の保守（月額の管理費）は、いくらかかりますか。

維持費の内訳はホームページの維持費はいくら？に、一般的な相場がまとまっています。

費用をかけすぎないための進め方

最初から大きく投資する必要はありません。電話の入口と文字を先に直し、3か月ほど電話の件数と相談の内容を観察します。変化が見られたら、色やボタンの見直しに進みます。

それでも改善が見られない場合に初めて、全体の作り直しを検討します。順番を守れば、無駄な費用を避けやすくなります。

やってはいけない5つのこと（NOT TO DO）

見やすさの改善では、善意で行ったことが逆効果になる場合があります。次の5つは避けてください。

AIを使って、直す作業を半分に減らす方法

文章の見直しなど、AI（文章を作る人工知能）が手伝える部分があります。ただし、最終的な判断は人が行います。

担当者に渡すチェックリスト

ここからは、社長から担当者や制作会社に渡す項目です。そのまま印刷するか、メールに貼り付けて使えます。

社長から担当者への依頼文の例

「当社のホームページを、高齢のお客様にも見やすくしたい。まず、下のチェックリストでスマホの状態を確認し、直す場所と費用の目安を一覧にしてほしい。作り直しはまだ決めない。」

A　電話の入口

B　文字と行間

C　色の差

D　ボタンと言葉

E　確認の進め方

作業は、4週間ほどに区切ると進めやすくなります。担当者は週に2時間から3時間を確保する想定です。

• 1週目：社長と担当者が、スマホで現状を確認し、メモを取ります。
• 2週目：チェックリストを使い、直す場所を一覧にします。見積もりが必要なものは依頼します。
• 3週目：電話の入口と文字の大きさを先に直し、スマホで確認します。
• 4週目：年配の方に「電話をかけるところまで」を試してもらい、迷った場所を記録します。

1か月後に、電話の受付メモを見直し、次の一手を決めます。続ける、広げる、止めるのいずれかです。

よくある質問

まとめ：小さく直して、電話の増減で確かめる

高齢のお客様にも見やすくする近道は、電話の入口、文字、色、ボタンと言葉の4か所を、この順に直すことです。

費用は、部分的な修正なら数万円から数十万円の幅が一般的です。全面的な作り直しは、その後に必要かを判断すれば遅くありません。

社長が決めるのは、どこまで直すか、誰に任せるかの2点です。作業は、この記事のチェックリストを担当者に渡して進めてください。まずは今週、ご自身のスマホで電話番号を押してみることから始めてみてはいかがでしょうか。

関連記事

• スマホ対応していないホームページの影響｜放置するリスクと直す費用の目安
• CVR改善で上がらない原因は？問い合わせにつながる割合の直し方
• 介護の集客を利用者募集と採用の両輪で立て直す実務ガイド
• 葬儀社のホームページ制作ガイド｜緊急時に選ばれる必須コンテンツと費用