端末を振る・傾ける操作、本当に誰でも使える?‐第33回‐

2026年06月23日掲載

イラスト:左下に「秘書」、右下に「師匠」、中央には右手を上げた「見習い君」

イラスト:笑顔の秘書秘書:前回、見習い君は地図サイトに「ジェスチャ操作」を使う仕組みを実装しました。
指の震えがある人や、力が入りにくい人にも配慮した良い改善です。
そして見習い君は、その地図サイトをさらに使いやすくするため、ある機能を追加しているようです。

ウェブアクセシビリティ職人「見習い君」と「師匠」がアクセシビリティな世界を目指す
このストーリーは、新人ウェブアクセシビリティ職人「見習い君」とベテラン職人「師匠」、解説を担当する「秘書」を通して特に障がい者をはじめ身体的な制約がある人たちがウェブ利用時にどのような障壁にぶつかり、どのような工夫をして克服しているかなど「ウェブアクセシビリティ」の実例をはじめ「ウェブアクセシビリティ」と共に重要な「社会的アクセシビリティ」についても紹介していきます。

端末を振る・傾ける操作で見落としがちなアクセシビリティ配慮事項

イラスト:笑顔で後ろで手を組む師匠

師匠:見習い君が作った地図サイト、ずいぶん良くなっておったな。
ジェスチャ操作に頼らなくても操作できるようになっておる。

イラスト:笑顔で答える見習い君

見習い君:ありがとうございます!
ジェスチャ操作が難しい人もいると教えてもらったので、「拡大」「縮小」ボタンだけでなく、指を横にずらすことでキャンセルできる仕組みも加えてみました。

師匠:うむ。
手や指を自由に動かせない人、力が入りにくい人にとっても使いやすくなった。とても良い改善じゃ。

見習い君:ですよね!ありがとうございます!
これで、だいぶアクセシビリティに配慮できた気がします。

師匠:うむ。
……そして見習い君、さらに何か機能を追加しているようじゃな。

イラスト:手をポンと叩く見習い君

見習い君:バレました?(笑)

イラスト:顎に手を当て考える師匠

師匠:さっきからカチャカチャしておるからな。
わかりやすいぞ(笑)

見習い君:はは(笑)
まだテストサイトの段階ですが、スマートフォンを振るだけで、衛星写真表示に切り替えられる機能を作っています。
この機能があれば、楽ですよね!

イメージ画像:スマートフォンを振って、地図が衛星写真の地図に切り替わる様子

師匠:なるほど。
ちなみに、その機能はどうやって実現しておる?

見習い君:えっと
……スマートフォンの動きを検知させています。

イラスト:人差し指を出して説明する師匠

師匠:ふむ。
スマートフォンには「加速度センサー」や「ジャイロセンサー」があり、端末の動きを検出できる。
例えば、次のような操作じゃ。

  • ・スマートフォンを振って更新する
  • ・傾けて視点を変える
  • ・端末の向きによって画面を操作する
    (例:スマートフォンを傾けてキャラクターを動かすような操作)

では質問じゃ。
スマートフォンを振る操作は、誰でも問題なくできるじゃろうか?

イラスト:右手で顎をささえ意見を聞く見習い君

見習い君:……あっ。
振るのが難しい人もいますね。

師匠:そのとおりじゃ。
例えば:

  • ・腕の動きに制限がある人
  • ・力が入りにくい人
  • ・手の震えがある人

こういった人にとって、スマートフォンを振ったり傾けたりする操作は難しい場合がある。
さらに、問題はそれだけではないのじゃ。

見習い君:まだあるんですか?

イラスト:笑顔で後ろで手を組む師匠

師匠:うむ。
例えば:

  • ・歩いているときに意図せず反応する
  • ・少し傾けただけで画面が切り替わる
  • ・同じように操作したつもりでも、反応しなかったり、違う動きになったりする

便利そうに見えて、実は不安定になりやすい操作でもあるのじゃ。

見習い君:なるほど……。
こういう操作は、ウェブアクセシビリティではどう考えられているんですか?

師匠:良い質問じゃ。
WCAG2.2の達成基準 2.5.4「動きによる起動」で、こうした考え方が整理されておる。

イラスト:笑顔で答える見習い君

見習い君:ちゃんと考え方がまとめられているんですね。
具体的には、何に気をつければいいんですか?

師匠:まず重要なのは、動きによって起動する機能には、 ボタンなど、別の操作方法も用意することじゃ。

イメージ画像:「衛星写真に切り替える」というボタンが用意されている

見習い君:つまり、ボタンでも操作できるようにする、ということですね。

師匠:そうじゃ。
次に、その操作は利用者が無効化できるようにすること。

イラスト:手をポンと叩く見習い君

見習い君:なるほど。
確かに、勝手に反応すると困る人もいますね。

師匠:うむ。
そしてさらにもう一つ、意図しない動作を防ぐ設計にすることじゃ。

見習い君:例えば、少し傾けただけで画面が切り替わらないようにする、という感じですね。

師匠:その理解で良い。
ただし、すべての動きによる操作が対象になるわけではない。
歩数を計測するなど、動きそのものが目的になっている機能については、例外として扱われておる。

見習い君:分かりました!
ちなみに、今回私が作った機能は、どう直せばいいですか?

イラスト:人差し指を出して説明する師匠

師匠:簡単じゃ。
振る操作の機能はそのままにしておきつつ

  • ・同じ機能の「切り替えボタン」を追加する
  • ・振る操作の機能を無効化できるようにする

この2点じゃな。
加えて、少しの動きで意図せず切り替わらないようにするなど、誤操作を防ぐ工夫ができるとなおよし。

見習い君:なるほど。「消す」のではなく、「追加する」のですね。

師匠:そのとおり。
ちなみに、傾きで視点を変える機能を加える場合も、ボタンなどで同じ操作ができるようにするとよい。

見習い君:だいぶ分かってきました。
前回と同じで、「便利な操作を消す」のではなく、「誰でも使える操作手段を追加する」ことが大切なんですね。

師匠:うむ。
スマートフォンを振る・傾ける操作は、多くの人にとっては便利な操作でもあるからな。

イラスト:笑顔で答える見習い君

見習い君:そうでした。その視点を忘れないようにします。
ありがとうございます!テストサイトを見直してきます!

師匠:うむ。その姿勢が大事じゃ。

イラスト:案内する秘書

秘書:前回、ジェスチャ操作に頼らない地図操作を実装した見習い君。 今回はそこから一歩進んで、次の点に気づくことができました。

  • スマートフォンを振る・傾ける操作を使う場合は、必ずボタンなどの代替手段を用意することが重要であること
  • 少しの動きで意図せず動作しないよう、誤操作を防ぐ設計が大切であること
慣れている操作を残しつつ、誰でも安心して使える操作方法を重ねていくことが、ウェブアクセシビリティではとても重要です。 詳しくは、以下の参考情報をご覧ください。

特別協賛企業の製品・サービスのご紹介

  • NTT Innovative Devices
  • NTT ExCパートナーの公式サイトへ
  • 特別協賛企業の製品・サービスのご紹介_日本電信電話
  • NTTファイナンス株式会社の公式サイトへ
  • NTTアドバンステクノロジ株式会社の公式サイトへ

お知らせ

編集部のおすすめ記事

  • ゆうゆうゆう便り(メルマガ読者募集中)
  • ゆうゆうゆうのfacebook
  • 広告バナー募集中
ページの先頭へ