JavaScriptと動的コンテンツ
Flash前提の設計は終了し、JavaScriptも表示速度と代替導線を考えて使います。
本文
動く部品は状態が分かって初めて使える
商品画像の切り替え、サイズ選択、送料計算、カートへの追加はJavaScriptで動くことが多くなりました。画面が変わっても「選択済み」「在庫なし」「追加できた」が分からなければ、購入者は操作を続けられません。
JavaScript自体を避ける必要はありません。ボタンがキーボードでも使えること、結果が文字で示されること、読み込みに失敗しても価格や販売条件が確認できることを見ます。
動的な部品で確認すること
- 操作マウスなしでサイズ選択やカート追加ができるか。
- 変化選択結果やエラーが見える文字で伝わるか。
- 通信失敗処理が止まった時に再試行や問い合わせへ進めるか。
- 基本情報スクリプト未読込でも商品仕様と販売条件が読めるか。
サイズ選択の実例
服のサイズを選ぶと価格と在庫が切り替わる場合、現在選んだサイズと在庫状態をボタンの色だけで示さないようにします。「Mサイズを選択中」「在庫なし」などの表示を置き、在庫がないサイズを選んだ時は購入できない理由を明確にします。
カート追加後に画面が変わらない場合は、押せたか分からず二重操作につながります。「カートに追加しました」と次の行き先を表示するか、カート画面への移動を明確にします。
公開前・改善時に確認すること
| 確認項目 | 実務で見るポイント |
|---|---|
| 表示 | JavaScriptが遅れても重要情報が読めるようにする。 |
| 購入 | カート、在庫、フォームのエラー表示を確認する。 |
| 計測 | 広告タグや解析タグで表示速度を落としすぎない。 |
新機能を入れた日のテスト
スマホの低速回線、キーボード操作、文字拡大で主力商品の注文を一度通します。画像の拡大表示が閉じられない、固定ボタンが合計額を隠す、読み込み中のまま戻らないといった問題は実操作で見つかります。
購入が完了できない障害は、装飾崩れより優先して直します。W3Cの実装時チェックも参照してください。
不具合を切り分ける
どの操作で止まるかを順番に記録すると修正しやすくなります。
| 見る場所 | 確認すること |
|---|---|
| 選択前 | 価格・在庫・送料の基本情報が表示される。 |
| 選択後 | 選んだ条件と更新後の価格が分かる。 |
| 注文時 | 処理中、成功、失敗の状態が示され、再試行できる。 |