動くWebを、スマートフォンで使いやすくする
動きを止める操作、読める情報、描画の負担を一緒に確認します。
WebGLやアニメーションを使ったWebは、ブランドの印象や商品の説明に役立つ場面があります。スマートフォンで使う人にとっては、文章が読めること、操作を間違えないこと、必要な情報へ進めることも大切です。
W3Cのアクセシビリティ資料は、prefers-reduced-motionという利用者の設定を使い、動きを抑える方法を説明しています。サイト側で動きを止める操作も用意すると、訪問する人が自分に合う表示を選べます。
動きが止まっても、説明が残る
重要な情報を、アニメーションの途中だけに表示しないようにします。料金、仕様、問い合わせの入口は、静止した状態でも読める構成にします。
3Dが表示できない環境では、写真や図、文章へ案内します。操作ができることを前提にせず、同じ情報を確かめる方法を残します。
小さい画面で、操作を分ける
画面全体が回転操作になっていると、ページを下へ動かしたい人が迷う場合があります。商品を見る領域と、ページのスクロールを分け、操作方法を短く示します。
ボタンの文字、押せる範囲、指で隠れる場所も確認します。キーボードで操作する人や、画面読み上げを使う人が何を選んだか分かる表示にします。
描画の負担を、実機で確かめる
表示する要素の数、画像の大きさ、画面の解像度、動かす時間が負担に影響します。机の上の一台で確認した結果を、すべての端末の性能には広げません。
まず、必要な操作と読める情報をそろえ、複数の利用環境で確かめます。neneでは、表現を追加する際に、スマートフォンの導線と動きを抑えた表示も一緒に考えます。