HPの文字が読みにくい。AIと「困る場所」から直す順番を決める

これを、手元に。

はじめる前に用意するもの

• 直したいページの公開URL
• 読みづらい箇所のメモ
• 変えないブランドの条件

入力先は普段使う対話型AI。サービスの利用条件・料金・情報の扱いを確かめ、初回は架空の情報で試します。

いっしょに、進めましょう。

やってみる手順

1. 01

   一つの用事で困る場所を探す

   スマホで「営業時間を知りたい」など一つの用事を試し、文字が薄い、見出しが分からない、横へ動かさないと読めない場所をメモします。古いという印象だけで全体の作り直しを決めません。

   たとえば。

   仮想例：飲食店のHPで営業時間が画像の端に薄く表示されていた場合、営業時間・定休日を文字で示し、背景とのコントラストを測る案にします。横長の料理一覧は狭い画面でも読める並べ方を検討。写真を新しくするだけで解決したとは扱いません。

2. 02

   文字と背景の明るさを確かめる

   通常の本文は4.5:1以上を参考に、文字と背景の配色を測定します。大きな文字には例外があるため基準の定義も確認し、数値が分からなければ制作担当に尋ねます。写真やAIの見た目の判定だけで合格にしません。

3. 03

   文章と見出しを整理する

   長い一段落を用事ごとに分け、「ご案内」のような曖昧な見出しを「営業時間・アクセス」等へ具体化します。大切な説明が画像の中だけにある場合は、通常の文字として載せる方法も検討します。

4. 04

   幅と文字サイズを変えて読む

   文字を200%に拡大したとき内容や操作が欠けないか、狭い幅で本文が折り返すかを確かめます。幅320 CSSピクセルは端末の物理画素数とは別です。表や地図など例外になる部分は分けて確認します。

5. 05

   一か所直した後に同じ用事を試す

   改善前後で営業時間などの内容をそろえ、見つけられるかを再確認します。読めないために必要情報を得られない箇所を先に直し、装飾はその後で検討します。未測定の項目は完了にしません。

出てきたら、ここを見る。

できたものを、確かめよう。

持ち帰るものは「困る場所／困る用事／直す案／人が測る項目／再確認結果」の改善メモです。 これは手順の完成形の例で、実際にAIを操作して得た結果の記録ではありません。

• スマホで本文とボタンが見つかる
• 文字と背景の見分けやすさを確認した
• 拡大やキーボードでも操作できる