高齢者に優しいWebデザイン｜見やすく、迷わず、押しやすいサイトの作り方

2026年7月21日

診療時間を確認したいのに、文字が小さくて読めない。予約ボタンを押そうとして、隣の広告を開いてしまう。フォームを入力しているうちに時間切れになり、最初からやり直しになった——。高齢の利用者が多いサイトでは、こうした小さな使いにくさが、問い合わせや来店を諦める原因になります。

高齢者向けだからといって、特別な別サイトを作る必要はありません。文字を読みやすくし、操作を間違えにくくし、迷っても戻れるようにする。これは、年齢を問わず多くの人が使いやすいWebサイトの基本です。

この記事では、加齢によって起こり得る変化を踏まえ、見やすく、迷わず、押しやすいWebサイトを作るポイントを具体的に解説します。

加齢で変わる「見え方・聞こえ方・操作・理解」

W3Cは、高齢のWeb利用者に起こり得る変化として、視覚、身体機能、聴覚、認知機能の変化を挙げています。

変化することがある機能	Web利用で起こり得る困りごと
近くへ焦点を合わせる力	小さい文字や細かな注記を読みにくい
コントラスト感度・色の見分け	淡い文字や、色だけで示した状態を判別しにくい
手指の細かな動き	小さいボタンを押しにくく、隣の項目を誤操作する
聴力	動画の会話や、高い音、背景音のある音声を聞き取りにくい
短期記憶・集中	長い手順や複雑なメニューで、現在地を見失いやすい
新しい操作への慣れ	独自アイコンや予測しにくい動作の意味を判断しにくい

これらの変化は、すべての高齢者に同じように起こるわけではありません。デジタル機器に慣れた人もいれば、初めてオンライン手続きをする人もいます。年齢だけで能力を決めつけず、見え方や操作方法を選べる設計にします。

高齢者がWebでつまずきやすい場面

場面	起こり得ること
小さく細い文字、淡い文字	営業時間や料金など重要情報を読めない
文字を拡大するとレイアウトが崩れる	横スクロールが増え、読む位置を見失う
小さいボタンが密集している	押し間違いや誤送信が起きる
メニュー階層が深く、名称が曖昧	必要なページへたどり着けない
電話番号が画像で掲載されている	スマートフォンから直接電話できない
動画に字幕がない	音声の内容を確認できない
フォームの入力条件が後から示される	何度もエラーになり、修正方法がわからない
短い時間制限や自動ログアウトがある	入力途中で内容が失われる
重要情報がPDFだけにある	スマートフォンで拡大と移動を繰り返す必要がある

特に、診療時間、所在地、料金、予約、問い合わせなど、利用目的に直結する情報から優先して見直しましょう。

文字を読みやすくし、拡大しても崩さない

文字を最初から読みやすくすることに加え、利用者がブラウザやスマートフォンで拡大しても使えるようにします。

1. 小さすぎる文字と細すぎる書体を避ける

本文、補足、フォームの説明まで実機で確認します。重要な条件や料金を小さな注記に押し込めないようにします。装飾の強い書体や極端に細い文字は、本文では避けます。

2. 文字と背景のコントラストを確保する

WCAG 2.2レベルAAでは、通常の大きさの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比を求めています。写真やグラデーションの上の文字、薄いグレーの補足文、ボタン内の文字も確認します。

3. 色だけで意味を伝えない

エラーを赤、正常を緑だけで示すのではなく、アイコンと「入力内容を確認してください」などの文言を添えます。リンクには色だけでなく、下線などの手がかりを加えます。

4. 200％拡大しても内容を失わせない

文字を200％まで拡大し、文章、ボタン、フォームの文字が切れたり重なったりしないか確認します。拡大後もページ全体に不要な横スクロールが発生せず、主に縦方向へ読み進められるようにします。

5. 文字を画像にしない

営業時間、料金、キャンペーン条件などは、画像の中だけに掲載せずHTMLテキストでも提供します。テキストなら、拡大、読み上げ、検索、コピーを利用できます。

たとえば、お知らせバナーを次のように改善できます。

改善前： 営業時間と電話番号を小さな画像の中だけに掲載する
改善後： 営業時間と電話番号をHTMLテキストでも表示し、電話番号はタップして発信できるリンクにする

ボタンやリンクを押しやすくする

手の震えや細かな操作の難しさがあると、小さく密集した操作部品は誤操作につながります。

WCAG 2.2の達成基準2.5.8「ターゲットのサイズ（最小）」（レベルAA）は、例外を除き、ポインター操作の対象を24×24 CSSピクセル以上にするか、小さい対象同士が近づきすぎないようにすることを求めています。

これは適合のための最低基準です。より押しやすくする目安として、達成基準2.5.5「ターゲットのサイズ（高度）」（レベルAAA）では44×44 CSSピクセル以上が示されています。予約、送信、メニューなど、よく使う重要なボタンは、十分な大きさと間隔を確保しましょう。

アイコンだけでなく「予約する」「メニュー」などの文字を添える
ボタンの見た目だけでなく、押せる範囲も広くする
「戻る」と「確定」など結果の異なるボタンを離す
ドラッグだけでなく、タップやボタンでも同じ操作を行えるようにする
ホバーしないと現れない操作に頼らない
スマートフォンを片手で持った状態でも操作できるか確認する

押した直後に処理結果を表示し、二重送信を防ぎつつ「受付中」「予約が完了しました」など現在の状態を伝えることも大切です。

迷わせないナビゲーションにする

情報を見つけやすくし、途中で現在地を見失っても戻れるようにします。

メニュー名を具体的にする

「サービス」「インフォメーション」のような広い言葉だけでなく、「診療内容」「料金」「アクセス」「予約・問い合わせ」など、探している情報を予測できる名称にします。

重要情報へ短い手順で到達できるようにする

診療時間、住所、電話番号、料金、予約などを深い階層へ隠さず、トップページや固定メニューから確認できるようにします。

ページごとの配置と名称を統一する

同じ機能の名称や位置をページごとに変えないようにします。ロゴを押すとトップページへ戻るなど、一般的な操作方法も利用できます。

現在地と戻り道を示す

ページタイトル、選択中のメニュー、パンくずリストなどで現在地を示します。ブラウザの「戻る」を使っても、入力内容や選択状態が不必要に失われないようにします。

問い合わせ方法を一つに限定しない

Webフォームだけでなく、電話やメールなど複数の連絡方法をわかりやすく示します。聴覚に困難がある人もいるため、「高齢者には電話だけ」と決めつけないことが重要です。

フォームと手続きをやり直しにくくする

入力フォームは、文字を読む力、内容を記憶する力、細かな操作を同時に求めます。失敗しにくく、間違えても修正しやすい設計にします。

入力欄の上に、消えないラベルを表示する
必須か任意か、入力例、文字形式を入力前に示す
郵便番号から住所を補完するなど、入力の負担を減らす
同じ情報を同じ手続きの中で繰り返し入力させない
エラー筧所と修正方法を具体的に示す
エラーがあっても、正しく入力した内容は残す
送信前に内容を確認し、戻って修正できるようにする
予約や購入の確定後に、結果と問い合わせ先を明確に示す

時間制限がある場合、WCAG 2.2の達成基準2.2.1「タイミング調整可能」（レベルA）は、例外を除き、利用者が制限時間を解除・調整・延長できることを求めています。延長の警告を出すだけでなく、入力内容を保持したまま簡単に延長できるようにします。

パスワード入力では、文字列の記憶やパズルの解答だけに頼らず、パスワードマネージャー、コピー＆ペースト、生体認証などを妨げないことも大切です。

動画・音声は字幕と操作方法を用意する

動画でサービスや手順を説明する場合、音声を聞き取りにくい人にも内容が伝わるようにします。

会話や重要な音の情報へ字幕をつける
自動再生を避け、利用者が再生・停止・音量を操作できるようにする
背景音を抑え、話し声を聞き取りやすくする
動画だけで重要情報を伝えず、要点を文章でも掲載する
再生ボタンや字幕ボタンの位置と名称をわかりやすくする

字幕は高齢者だけでなく、音を出せない場所で見る人や、内容を文字でも確認したい人にも役立ちます。

利用者が自分に合う表示を選べるようにする

加齢による変化や必要な調整は人によって異なります。サイト側の標準表示を読みやすく整えたうえで、次のような設定を妨げないようにします。

ブラウザやスマートフォンの文字拡大
OSのコントラスト・色反転・拡大鏡
キーボードによる操作
スクリーンリーダーや読み上げ
サイト側の文字サイズ・色・間隔の調整機能

調整機能があっても、複雑なメニュー、小さなボタン、読みにくい文章、入力内容が消えるフォームなど、サイト本体の問題が自動で直るわけではありません。標準の設計を整えることが先で、調整機能はその補助です。

業種別に優先したい情報

高齢の利用者が多い業種では、サイトの目的に直結する情報を特に見つけやすくします。

業種	優先して確認したい情報
クリニック・診療所	診療時間、休診日、受診方法、持ち物、電話・Web予約
眼科・内科	対応できる症状、検査内容、院内設備、付き添い・アクセス
整骨院・接骨院・鍼灸院	施術内容、料金、保険適用の条件、予約、入口や階段の情報
デイサービス・訪問介護	サービス内容、対象地域、利用までの流れ、相談窓口
士業	相談できる内容、費用、必要書類、面談方法、問い合わせ先