ホームページの文字が読みにくいときに確認したいこと

タブレットでホームページの読みやすさを確認する店舗担当者のイラスト WEBサービス

スマートフォンで自社のホームページを開くと、説明文が小さく感じる。注意書きを読もうとすると目を近づけてしまう。文字を大きくするとボタンの一部が見えなくなる。こんな状態は、見た目の印象だけでなく、お客様が必要な情報を読めるかという視点で確かめましょう。

この記事は、ホームページの文字が読みにくいと感じた店や会社の担当者向けです。全部のデザインを作り直す前に、実際に読む場面で問題を記録し、制作担当へ相談する方法を紹介します。専門的なコードを書く必要はありません。完成するのは、読む場所、困り方、改善後の確認結果を残す一枚の確認票です。

最初にお客様が読む三つの場所を選びます

サイトの全ページを一度に点検するより、本文、注意書き、ボタンの三つから始めます。本文はサービスの説明、注意書きは利用条件、ボタンは予約や問い合わせへ進む場所です。島田市周辺の店舗でも、自社のお客様が実際に読むページを選べば、地域名のために別のページを増やす必要はありません。

確認するときは、普段使うスマートフォンとパソコンを用意します。端末名や画面の設定を記録し、最初はいつもの表示で読みます。明るさを極端に上げたり、特別な大画面でだけ確かめたりすると、読者が困る状態を見落とすことがあります。屋外で読むことが多い案内なら、その場面も別に確かめます。

読む文章を三つ選んでおきます。サービス説明の一段落、例外条件の注意書き、予約ボタンの文字です。「雰囲気が暗い」より、「注意書きの一行目が背景と同じような色で読みにくい」のように、場所と困り方を組み合わせて記録します。

文字の大きさだけでなく行間と背景を見ます

文字が十分大きくても、行が詰まりすぎると次の行を追いにくくなります。文章が横に長く続くと、行の終わりから次の行へ戻る場所が分かりにくい場合もあります。背景写真の明るい部分と暗い部分で、同じ文字が読みやすくなったり読みにくくなったりすることもあります。

困る状態 見る場所 担当者へ伝えること
文字を近づけないと読めない 本文と小さな注記 端末、ページ、読めない文章
どの行を読んでいたか迷う 長い説明段落 行間、行の長さ、段落の区切り
背景と文字が重なる 写真の上の説明 読みにくくなる背景部分
ボタンの意味が読めない 予約・問い合わせのボタン 文字の大きさ、色、収まり方

一つの問題に対して、文字を大きくする、余白を増やす、背景を単純にするなど複数の改善が考えられます。どれが適切かは、ページの内容と端末で確かめます。自分で決まった数値を指定する前に、困っている場面を共有すると、制作担当が原因へ合う変更を考えやすくなります。

短く言い換えられる説明は、文章自体を整理する方法もあります。ただし、大切な利用条件を削って見た目だけ短くしないようにします。読みにくい条件を隠すために小さな文字へするのではなく、本文から分けて見出しを付けるなど、内容が読める形を相談します。

拡大したときも情報が欠けないか確認します

ブラウザにはページを拡大する機能があります。操作名は使うブラウザや端末で異なるので、自分の環境の表示設定を確認します。パソコンで倍率を選べる場合は、通常表示から途中の倍率を経て200％まで拡大し、同じ文章とボタンを見ます。スマートフォンでは、普段使う拡大方法でも確かめます。

Webの読みやすさに関する技術資料であるW3CのWCAG 2.2「文字サイズの変更」の解説は、文字を200％まで拡大しても情報や機能を失わないことを示しています。ここでは点検の参考にしています。この確認だけでサイト全体がすべての基準へ適合した、または法律上の判断ができたという意味ではありません。

拡大後は「大きくなったからよい」で終わらせず、文章の終わりが切れていないか、隣の文字と重ならないか、ボタンの言葉をすべて読めるかを見ます。大きくした結果、問い合わせ先へ進めないなら、読みやすさと操作の両方を相談する必要があります。

問題を見つけたら、倍率と端末を記録します。表示画像を保存する場合は、周囲の個人情報や別アプリの通知が入っていないか確認します。読みにくい箇所を囲んでおくと、制作担当が同じ状態を再現しやすくなります。画像だけでなく、切れている文章も文字で送ります。

そのまま使える読みやすさ確認票

次の型は、担当者が改修前後を比べるためのものです。読みにくい文章を一件ずつ記録します。修正の依頼日や料金などは普段の連絡方法で伝え、この票では見え方を再現する情報に集中します。

ページURL：
読む目的：
対象の見出し・文章・ボタン：
端末とブラウザ：
表示倍率または拡大方法：
通常表示で困ること：
拡大したときに困ること：
文章・ボタンで欠けている部分：
同じページのほかの場所でも起きるか：
改善後に確認する文章と操作：
確認日・確認担当：

次は架空例です。ある体験事業者の予約ページで、注意書きが小さく、パソコンで200％へ拡大すると末尾が枠から消えたとします。確認票には「キャンセル条件の二行目末尾が読めない」と記録します。担当者へ枠の高さや文字の収まり方を見直してもらい、改修後は同じ文章が最後まで読めるかと、予約ボタンへ進めるかを確かめます。実在の改修事例ではありません。

一件の確認票で複数ページの全問題を解決しようとせず、共通して起きる場合だけ別のURLを追記します。「全体的に小さい」という印象から始めても、実際の場所を選び直すと、相談する内容が具体的になります。

改修後は同じ条件で読み直します

修正の前後で端末や倍率を変えると、よくなったのか分かりにくくなります。まず同じ端末、同じページ、同じ文章を、記録した設定で読み直します。通常表示と拡大表示の両方を確かめ、周囲の見出しやボタンも確認します。

  • 選んだ本文が途中で切れず読めるか。
  • 注意書きの意味が読み取れるか。
  • 写真の上の文字も読めるか。
  • 予約・問い合わせボタンの文字が見え、操作できるか。
  • 別の画面の幅でも、文章が重ならないか。

可能なら、自社サイトに詳しくない人へ同じ案内を読んでもらいます。「読みやすいですか」だけでなく、「このサービスの利用条件を説明してください」と頼むと、内容を読み取れるかを確認できます。読みにくさと説明不足は別なので、返答に合わせて改善する場所を選びます。

直した箇所は、確認票へ結果を追記して残します。次に写真や文章を更新したときも、同じ確認を繰り返します。最初から大きな改修へ進む必要はありません。お客様が必要な情報を読めない場所を一つずつ確かめ、直した後にも読める状態を保つことから始めましょう。

関連する記事

LIFESEEDSでは、読む人に伝わる案内と運用を整えるホームページ制作を案内しています。今回の手順を自社で進めにくい場合は、お問い合わせからご相談ください。

コメント