ユーザビリティ・アクセシビリティ

誰でも読みやすく操作しやすいECサイトを作るための基本を整理します。

本文

初めての購入者として一周する

読みやすさと操作しやすさは、色や文字だけを個別に点検しても判断できません。スマホで商品を見つけ、サイズを選び、送料と返品条件を確認し、カートへ進む一連の流れで確かめます。

途中で文字を拡大し、キーボードでも操作し、画像や動画が読み込まれない場合も試すと、実際に購入を妨げる箇所が見えてきます。

代表商品を1点決め、商品一覧から注文確認まで通します。途中で「送料が分かるか」「エラーの原因が分かるか」「戻る操作で選択が消えないか」を記録します。友人や担当外の人にも同じ手順を頼むと、作り手には見えない迷いを見つけやすくなります。

W3Cのリフロー解説では、320 CSSピクセル相当の幅で原則として二方向のスクロールを必要としないことが説明されています。小さい画面で商品表やフォームがはみ出さないか確認します。

確認項目	実務で見るポイント
読みやすさ	文字サイズ、行間、余白、コントラストをスマホ基準で見る。
操作性	ボタン、リンク、フォームを押しやすくする。
代替情報	画像alt、動画説明、リンク名で内容が伝わるようにする。

まずカートや決済が使えない問題、次に価格・送料・返品が読めない問題を直します。その後に画像の説明、装飾、補助的なリンクへ進みます。修正後は同じ手順を再実行し、別の箇所が壊れていないか確認します。

アクセシビリティは一度の検査で終わりません。新商品、セール、フォーム変更など、運営でページが変わるたびに再点検します。

「使いにくい」だけでなく、画面、操作、起きたこと、期待したことを残すと改善につながります。

見る場所	確認すること
画面	商品詳細の送料欄、スマホ幅390pxなど場所と条件を示す。
操作	サイズ選択後にカートボタンを押した、など再現できる順番を書く。
結果	ボタンが隠れた、エラー文が出なかったなど観察した事実を書く。

学びを広げる