中高年の利用者が多いホームページで優先した文字・フォーム・導線

「中高年向け＝大きな文字」だけでは足りない

読みやすさは文字の大きさだけでなく、行間、1行の長さ、色の差、余白、見出しの順番で変わります。大きな文字を狭い箱へ詰めると、かえって改行が増えて追いにくくなります。

利用者を年齢だけで決めつけず、視力、操作経験、利用端末が違っても進める画面を目指します。

最初の画面で伝える3点

トップページの最初に、誰向けの何のサービスか、次に何をすればよいか、相談前に費用がかかるかを示します。背景写真の上に長い文章を重ねず、十分な色の差を取ります。

• このサイトでできること
• 対象となる人・対象外となる場合
• 相談・電話・詳しい説明への入口

ボタンとリンクは「押した後」を書く

「こちら」「詳しく」だけでは、どこへ進むか分かりません。「相談の流れを見る」「電話で問い合わせる」のように動作を示します。

リンク同士を詰めず、指で押し分けられる余白を作ります。電話番号はタップできるだけでなく、受付時間や通話料の案内が必要なら近くへ置きます。

フォームは入力前・入力中・送信後を分かりやすく

必須項目を絞り、項目名を入力欄の外に常に表示します。例文は補助に使い、入力すると消える文字だけを説明にしません。エラーは色だけでなく文章でも示します。

送信ボタンの近くに、返信目安、個人情報の扱い、送信後に表示される画面を説明します。送信できなかった時の電話など代替手段も用意します。

専門用語と長文を分ける

制度名や技術用語を避けられない場合は、最初に平易な言葉で結論を示し、その後に正式名称を補います。一文を短くし、手順は番号付き、比較は表へ分けます。

大切な注意をページ下部だけに置かず、判断する場所の近くに表示します。見出しだけを読んでも流れが分かるか確認します。

公開前に行う4つの確認

パソコンの通常表示だけでなく、狭いスマートフォン幅、文字拡大、キーボード操作、実際の問い合わせまで試します。W3CのWCAGでは、狭い表示や文字拡大でも情報と機能が失われない考え方が示されています。

• 狭い幅で横スクロールせず読める
• 文字を拡大しても重なりや切れがない
• リンクとボタンの目的が文言で分かる
• フォームのエラーと送信完了が確認できる