秘書：前回、見習い君はスマートフォンを振る操作について学びました。「便利な操作でも、誰でも使えるとは限らない」という大切なポイントでしたね。そして見習い君は、現在あるサイトの改善に取り組んでいるようです。
- ウェブアクセシビリティ職人「見習い君」と「師匠」がアクセシビリティな世界を目指す
- このストーリーは、新人ウェブアクセシビリティ職人「見習い君」とベテラン職人「師匠」、解説を担当する「秘書」を通して特に障がい者をはじめ身体的な制約がある人たちがウェブ利用時にどのような障壁にぶつかり、どのような工夫をして克服しているかなど「ウェブアクセシビリティ」の実例をはじめ「ウェブアクセシビリティ」と共に重要な「社会的アクセシビリティ」についても紹介していきます。
文字を大きくしただけなのに、操作できない？
師匠：見習い君、今回は何を見直しておるのじゃ？
見習い君：スマートフォン表示です！見やすくなったか確認していたところです。
師匠：ほう、それは良いことじゃ。では画面を拡大してみよう。
見習い君：はい！ピンチ操作で拡大すると、こんな感じです。
師匠：……ふむ。確かに文字は大きくなっておるが、見えにくくないか？
見習い君：えっ？ちゃんと拡大できていますよ？
師匠：では質問じゃ。今の画面で、横にスクロールせずに内容を読むことはできるかの？
見習い君：……あっ。横にスクロールしないと読めませんね。見やすさが上がったはずなのに、逆に使いにくい？
師匠：そのとおりじゃ。文字を大きくすること自体は大切じゃが、「拡大するとレイアウトが崩れてしまう」場合があるのじゃ。
例えば、こんな状態じゃ。
- ・画面に収まらず、横スクロールしないと読めない
- ・ボタンが画面外にはみ出る
- ・画面内には収まっているが、一行に詰め込みすぎて読みにくい
見習い君：確かに…。見やすくしたつもりが、逆に使いにくくなっていますね。
師匠：そこで重要になるのが、「リフロー」という考え方じゃ。
見習い君：リフロー…ですか？
師匠：うむ。簡単にいうと、「画面を拡大しても、横スクロールせずに内容が読めるようにすること」じゃな。
特にスマートフォンでは、この考え方がとても重要じゃ。なぜだと思う？
見習い君：画面が小さいから…ですか？
師匠：そのとおり。スマートフォンでは、
例えば：
- ・高齢の人
- ・視力が弱い人
- ・小さい文字が読みづらい人
こういった人が、拡大して使うことが多い。
つまり、「拡大される前提」で設計しなければならないのじゃ。そして、拡大したときに横スクロールが必要になると、文章を読むたびに画面を左右に動かさなければならず、非常に読みづらくなってしまうのじゃ。
そしてもう一つ、重要なポイントがある。
見習い君：まだあるんですか？
師匠：うむ。それが「画面の向き」じゃ。前に教えたことを覚えてるかな？
参考記事：「横向きでスマートフォンを使いたい！ウェブアクセシビリティの落とし穴‐第30回‐」（新しいウィンドウで開きます）
見習い君：あ！スマートフォンを横向きにしたときも、配慮が必要ということですね？
師匠：そのとおり。そして実は、この「画面の向き」と、今回の「拡大時の表示（リフロー）」は深く関係しておる。
例えば：
- ・横向きにするとレイアウトが崩れる
- ・特定の向きでしか使えない
- ・向きを変えるとボタンが消える
こういった状態では困る人もおる。
この2つがそろって、初めて「どんな使い方でも使いやすい画面」になるのじゃ。
見習い君：なるほど…。では、どう改善すればいいですか？
師匠：ポイントはシンプルじゃ。
- ・横スクロールなしで読めるレイアウトにする
- ・画面の幅に合わせて、自動で文字や内容の配置が変わるようにする
- ・拡大しても、文字やボタンが途中で切れてしまわないようにする
- ・「縦・横」どちらの向きでも利用できるようにする
見習い君：つまり、「見やすくする」だけじゃなくて「どんな状態でも使えるようにする」ってことですね。
師匠：うむ、その理解でよい。
見習い君：ありがとうございます！前に教えてもらった「画面の向き」のときのサイトも含めて、ちゃんと見直してきます！
師匠：うむ。画面の大きさや向きが変わっても、変わらず使えるようにしてこそ、本当の使いやすさじゃ。
秘書：今回、見習い君は次のことに気づくことができました。
- ・文字を大きくするだけでは十分ではないこと
- ・拡大時にレイアウトが崩れない設計（リフロー）が重要なこと
- ・スマートフォンでは「画面の向き」も考慮が必要なこと
スマートフォンで「普通に使える」ことは、実は多くの配慮の積み重ねで成り立っています。ぜひ、自分のサイトでも「拡大した状態」「横向きの状態」を試してみてください。詳しくは、以下の参考情報をご覧ください。
