スマートフォンの普及により、高齢者が自らネットで情報を探す時代となりました。
しかし、多くのウェブサイトは若年層向けのおしゃれさを優先するあまり、高齢者にとっては下記のようなハードルが存在しています。
- 文字が小さすぎて読めない
- どこがクリックできるのかが一見でわからない
- アイコンが何を表す記号なのかがわからない
せっかく質の高いサービスを提供していても、サイトの使い勝手が悪いだけで、大切な顧客との接点を逃しているかもしれません。
本記事では、介護業界に特化した制作実績を持つプロの視点から、高齢者がストレスなく閲覧できるホームページの5つの基本原則を解説します。記事の後半では、優れたユーザー体験を実現している実際のサイト事例3選もご紹介します。
ぜひ参考にしてみてください。
Service
【先着3施設限定・30%OFF】
介護専門のホームページ制作サービス
かいごのヒカリは、介護業界で300名以上の転職面談を担当してきた元・キャリアアドバイザーが在籍。ご家族が入居前に不安に感じるポイントも、求職者が応募前に知りたい情報も熟知したうえで、集客と採用の両方に効くサイトを設計します。
重要事項説明書の公開や処遇改善加算の見える化といった行政対応も織り込み済み。制作期間中は何度でも無料でご相談いただけます。
今だけ先着3施設限定でモニター特別価格30%OFFを実施中ですので、ぜひお気軽にご相談ください！
高齢者が見やすいホームページの特徴5選
高齢者にとっての見やすさを構成する要素のうち、最も効果的なのが視覚的なデザインです。
ここでは5つの基本原則を紹介します。
本文フォントは16px以上
文字のサイズは、読みやすさを左右する一番の要因です。
多くのサイトで採用されている14px前後のフォントは、高齢者にとっては目を凝らさないと読めないレベルであることが多いです。私たちは介護系のホームページ制作を専門にしていますが、本文の基本サイズを16px〜18px以上に設定することを推奨しています。
スマホでは15px以下のフォントが使われるケースが多いですが、どの端末でも常に16px以上が維持されるようにするのがおすすめです。
また、文字と文字の間隔（字間）や、行と行の間隔（行間）にもゆとりを持たせることが重要です。
行間が詰まっていると、次の行に移る際に視線が迷いやすくなるため、1.6倍〜1.8倍程度の広めの行間を確保しましょう。
コントラストを意識して配色されている
「おしゃれな淡いグレーの文字」は、高齢者にとっては背景に溶け込んでしまい、存在しないも同然に見えることがあります。
サイトのデザイン性だけを意識してしまうと、高齢者にとって使いにくいサイトになってしまいます。
加齢により色の明度差を感じにくくなるため、背景と文字のコントラスト比には細心の注意が必要です。WCAG（ウェブアクセシビリティ・ガイドライン）でも推奨されている通り、コントラスト比は最低でも4.5:1以上（理想は7:1以上）を確保しましょう。
例えば黒地に白、あるいは白地に黒といった、パッと見て境界がわかる配色が最も安全です。
また、色だけで「重要」や「クリック可能」を伝えない工夫も必要です。
例えば、青色の文字がすべてリンクだと思い込んでいるユーザーも多いため、リンクには下線を引く、ボタンには立体感を持たせるといった、色以外の視覚情報も組み合わせることが不可欠です。
アルファベットやカタカナを控える
「アクセスの詳細はこちら」とするよりも「行き方はこちら」とした方が、直感的な理解が進みます。
専門用語・カタカナ英語・省略語は高齢者にとっての認知負荷を高め、離脱の原因となります。
高齢者にとって馴染みのない言葉を使ってしまうと、離脱率が下がってしまうだけでなく、ボタンがクリックされないなどコンバージョン率が下がってしまう傾向があります。
なるべく日本語、かつ理解しやすい単語を選ぶようにしましょう。
クリック範囲を大きく確保している
手先の細かい動きが苦手な高齢者にとって、小さなリンクやボタンを正確にクリックするのは困難な作業です。
「押したつもりなのに反応しない」というストレスは、サイトへの不信感に直結します。
ボタンのサイズ自体を大きくするのはもちろん、その周囲のクリック可能な領域（ヒットエリア）を十分に広げることが重要です。
さらに、ボタンが「押せるものであること」を直感的に伝えるデザインも忘れてはいけません。
平坦に見えるフラットデザインよりも、かすかな影（ドロップシャドウ）やグラデーションを用いた、物理的なボタンに近いデザインの方が、高齢者には圧倒的に分かりやすいのです。
クリックできるということが一瞬で判断できるデザインが大事だといえます。
写真と図解を活用している
長いテキストのかたまりは、それだけで読む意欲を削いでしまいます。
写真・図解・比較表などを適切に配置することで、一目で内容が理解できる構成を目指しましょう。
例えば、介護施設の1日の流れを説明する際、文章だけで綴るよりも、意味を伴うアイコンを組み合わせたフロー図の方が、圧倒的に記憶に残りやすくなります。
ただし、写真・アイコンは単なる飾りではなく、内容を補完するものである必要があります。
不鮮明な写真や、イメージの湧きにくい抽象的な画像は避け、実際のスタッフや施設の雰囲気が伝わる顔の見える画像を選定しましょう。
高齢者が見やすいホームページの具体例3選
次に、高齢者が見やすいホームページの具体例3選を紹介します。
どのようなポイントが高齢者に優しいのか、など具体的に紹介します。
社会福祉法人さつき会
全体的にフォントサイズが大きめに設定されているだけでなく、空間を広めにとることで読者の負担が軽減される工夫がなされています。
また文字情報ばかりでなく、写真・イラストを多用することで理解しやすい構成になっています。
メニューも「ごあいさつ」や「法人案内」や「日々のできごと」など簡単な文字が使われています！
医療法人社団清生会
テキストに頼らず、一目でわかるアイコンを設置しているのが非常にわかりやすいです。
例えばヘッダーメニュを見ると、デイケアにはリハビリをしているアイコン、デイサービスには送迎車のアイコン、整形外科には松葉杖のアイコンが表示されています。
何ができる場所なのかが、瞬時にわかる仕様になっています！
株式会社和が家
ページごとの文字量が少なく、写真を多く活用することで、視覚的にわかりやすいサイトになっています。
またカタカナや英語を使わず、日常的によく使われる単語だけでサイトが構成されているのも良いポイントです。
高齢者が見やすいホームページの確認方法
特徴を知っていても、自分の施設のホームページが当てはまっているかどうかは別の話です。確認に使うのは、手元のパソコンとスマートフォンだけで足ります。
確認方法は、以下の3つになります。
- 文字の大きさは実機で確かめる
- 色の濃さは4.5対1で測る
- 拡大しても崩れないか見る
それぞれ具体的に説明します。
文字の大きさは実機で確かめる
パソコンの大きな画面で読めても、スマートフォンでは印象が変わります。確認をパソコンだけで済ませると、公開後に読みにくいという声が出やすくなります。
本文だけでなく、注釈やメニューの文字も同じ目で見てください。
| 見る端末 | 確かめること |
|---|---|
| スマートフォン | 本文を腕を伸ばした距離で読めるか |
| パソコン | 本文が見出しに比べて細く薄くなっていないか |
| タブレット | 横向きにしたときに本文の幅が広がりすぎないか |
判定に迷ったら、実際の利用者やご家族に開いてもらうのがいちばん確実です。見学に来た方や職員のご家族に、目の前で1分だけ見てもらう形でも十分な材料になります。
ぺんすけ読めるかどうかを決めるのは、作った側ではなく読む側です。
70代・80代の方が読めなければ、16ピクセルを満たしていても見やすいとは言えません。
色の濃さは4.5対1で測る
文字と背景の明るさの差は、感覚ではなく数値で判定できます。
ウェブアクセシビリティの国際規格であるWCAG 2.1は、本文の文字と背景のコントラスト比を4.5対1以上と定めています。
18ポイント以上の大きな文字と、14ポイント以上の太字は3対1以上が基準です。
測るときは、無料のコントラスト判定ツールに文字色と背景色のカラーコードを入れます。カラーコードが分からないときは、制作会社に本文の文字色と背景色を数値で教えてほしいと伝えれば確認できます。
| よくある配色 | 目安の比率 | 判定 |
|---|---|---|
| 白地に濃いグレー（#767676） | 約4.5対1 | 基準を満たす |
| 白地に薄いグレー（#999999） | 約2.8対1 | 基準に届かない |
| 淡い色の帯に白抜き文字 | 帯の色しだい | 帯を濃くして測り直す |
白地に薄いグレーの文字は、上品に見えても基準の6割程度の濃さしかありません。施設案内や利用料金など、読み落とされて困る文章ほど濃い色で置いてください。
デイサービスのホームページで、営業日カレンダーの注釈を薄いグレーにしていたとします。
背景が白で文字が #999999 なら比率は約2.8対1となり、4.5対1の基準に届きません。
文字色を #595959 前後まで濃くすると約7対1になり、本文でも余裕をもって基準を満たせます。
色の指定を変えるだけなので、ページを作り直す必要はありません。
出典：WCAG 2.1 達成基準 1.4.3 コントラスト（最低限）（W3C）
拡大しても崩れないか見る
高齢の方は、ブラウザの拡大機能で文字を大きくして読むことがあります。WCAG 2.1は、支援技術を使わずに200%まで拡大しても内容と機能が損なわれないことを基準にしています。
拡大で崩れるページは、本文が16ピクセルあっても最後まで読み進められません。
確認の手順は次のとおりです。
- パソコンで施設のページを開きます
- Windowsは Ctrl キーと + キー、Macは command キーと + キーで200%まで拡大します
- 文字の重なり・見切れ・横方向のスクロールが出ていないかを見ます
文字を画像として作っている箇所は、拡大すると輪郭がぼやけて読めなくなります。料金表やアクセス案内を画像1枚で置いている施設は、この段階で気づけます。
ぺんすけ横スクロールが出たら、スマートフォンでも同じ崩れ方をしている可能性が高いです。その場で両方を見比べると、直すべき場所がはっきりします。
出典：WCAG 2.1 達成基準 1.4.4 テキストのサイズ変更（W3C）
高齢者向けデザインに関するよくある質問
介護施設のホームページ制作は「Terace」にお任せ！
当メディアを運営する私達は、介護専門のホームページ制作サービス「かいごのヒカリ」を運営しています。
ディレクター、デザイナー、フロントエンジニアの合計3名で、各分野のプロが協力してホームページを制作しています！
- 介護業界で2年間採用に携わっていたスタッフが制作を担当
- インターネット公表の義務化に対応（重要事項説明書・運営規定など）
- サイト更新は丸投げしてもらってOK
- ホームページ制作期間中は何度でも無料相談できる
- 顔の出ているフリーランス3人が運営
現在の料金プランは、下記のとおりです。
2026年8月現在、先着3施設のみ制作費用を5万円割引で対応しています。
ホームページ制作を考えている方は、ぜひ介護特化のホームページ制作サービス「かいごのヒカリ」のサイトをご覧ください。
コメント