ウェブサイトをリニューアルしたばかりだとします。会議室の大きなモニターでは見栄えがよく、全員が提供内容を知っていて、目をつぶっても注文できます。しかし、顧客はスマートフォンで訪れ、会社について何も知らないまま、最初に戸惑ったところで離脱するかもしれません。だからこそ、ウェブサイトがきれいに見えるかを確認するだけでは不十分なのです。
このチェックリストの初版は、ウェブサイトやオンラインショップを幅広く確認するための一覧として使っていました。時間が経つにつれ、どのサイトにも当てはまるわけではないツールや個別ルールが増えていきました。今回の版では基本に立ち返り、利用者ができるべきこと、確認すべきこと、トラフィックに費用をかける前に問題を見つける方法に絞っています。
まず、最も重要な3つのユーザージャーニーを特定する
ウェブサイト全体のUX監査は、簡単に100件もの指摘に膨らみます。そこで私は、分析ツールを開く前に、ビジネスにとって最も重要な3つのジャーニーを選びます。典型的には次のようなものです。
- 新規訪問者が提供内容を理解し、問い合わせを送信する、
- 顧客が商品を見つけ、カートに入れ、支払いを完了する、
- 既存顧客がサポート、書類、連絡先情報を見つける。
それぞれのジャーニーについて、開始地点、想定する完了地点、主な障害を書き出します。そうすれば、チェックリストを機械的に消化するのではなく、ウェブサイトが具体的な意思決定を支えられているかを確認できます。
1。会議に参加していなかった人にも、提供内容が明確でなければならない
- 最初の画面を見ただけで、何を誰に提供しているのかわかりますか？
- メイン見出しは、企業スローガンではなく成果や課題を説明していますか？
- メニューを探し回らなくても、次のステップが見えますか？
- 訪問者は個々のサービスや選択肢を区別できますか？
- 意思決定に実際に影響する条件や制限を明示していますか？
会社を知らない人でテストしてみましょう。数秒間ページを見てもらい、ページを閉じて、その会社が何をしているのか、次に何をすると思うかを尋ねます。これは科学的な調査ではありませんが、社内の人にしか理解できない表現をすぐに浮かび上がらせます。
2。ナビゲーションは、考え込まず、マウスなしでも機能しなければならない
- 項目名は、訪問者が探しているものと一致していますか？
- リンク、ロゴ、前のステップへの戻る操作は機能しますか？
- モバイルメニューは読みやすく、閉じることができ、重要なコンテンツを覆っていませんか？
- 構造が長い場合、利用者が現在どこにいるのか明確ですか？
- 重要な操作にはすべてTabキーで到達できますか？
- キーボード操作時にフォーカスが見え、利用者が操作から抜け出せなくなることはありませんか？
アクセシビリティは、一部の人だけのための特別なモードではありません。十分なコントラストは日差しの下でスマートフォンを見るときにも役立ち、明確なフォームは急いでいる人にも役立ちます。簡単な確認には、Easy Checks（W3C）を利用できます。これは最初の確認であり、WCAGへの完全な準拠を証明するものではありません。
3。コンテンツは目線と意思決定の両方を導かなければならない
- メイン見出しは1つで、その下に論理的な見出し構造がありますか？
- 段落は読みやすく、重要な情報をざっと見て見つけやすくなっていますか？
- リンクやボタンは、クリックした結果を説明していますか？
- 意味が色、画像、ホバー効果だけに依存していませんか？
- 情報を伝える画像には、意味のある代替テキストがありますか？
- アニメーションが提供内容の理解を妨げず、サイトが利用者のモーション低減設定を尊重しているようになっていますか？
強い色を使うだけでは、コンバージョンボタンにはなりません。まず、クリック後に何が起こるのかが明確でなければなりません。「送信」は技術的な説明です。「初回相談を予約する」なら、不確実さを減らせます。
4。フォームでは、会社が実際に使う情報だけを尋ねる
- すべてのフィールドに、表示され、プログラム上も関連付けられたラベルがありますか？
- どのデータが必須で、なぜ必要なのか明確ですか？
- 利用者はスマートフォンやキーボードでフォームを完了できますか？
- エラーメッセージは、問題と修正方法の両方を説明していますか？
- 正しく入力したデータは、エラー後も残りますか？
- 送信後、利用者に明確な確認と次に起こることの情報が表示されますか？
アクセシブルなフォームに関するガイドで、W3Cはプロセスの完了に必要なデータだけを尋ねることを推奨しています。追加するフィールド1つごとに注意力が奪われ、データ取り扱いの作業も増えます。ビジネスで使わない情報なら、削除しましょう。
5。オンラインショップは、美しい商品ページだけでなく購入全体に対応しなければならない
カテゴリーと検索
- フィルターは人々の選び方に合っており、簡単に解除できますか？
- 結果がない場合の表示は役に立ち、別の進み方を提案していますか？
- 商品カードには、名前、価格、在庫状況、見やすい画像が含まれていますか？
- スマートフォンでも並べ替えと絞り込みを使えますか？
商品詳細
- カートに追加する前に、選択肢、価格、VAT、在庫状況、配送について説明されていますか？
- 写真は、顧客が判断するために必要なものを示していますか？
- カートに追加するボタンは、コンテンツを遮らずに見える位置にありますか？
- 在庫切れや販売終了の商品には、代替商品と適切な戻り先がありますか？
カートと注文
- 他のデータを失わずに、商品、選択肢、数量を変更できますか？
- 配送費や手数料を含む最終価格を、適切なタイミングで確認できますか？
- ビジネス上の理由なしに登録を必須にしていませんか？
- 支払いに失敗した場合、利用者をわかりやすい状態に戻せますか？
- 注文確認は明確で、誤った重複購入を防げますか？
「カートにはナビゲーションがあってはならない」というルールが、常に正しいとは限りません。単純な購入では、気を散らす要素を減らすことが役立つ場合があります。一方、複雑な商品では、顧客が条件や商品詳細を確認する必要があります。経験則ではなく、行動をテストしましょう。
6。ウェブサイトは、モバイル、遅いネットワーク、エラーに耐えなければならない
- 大きなレイアウトシフトを起こさず、メインコンテンツがすばやく読み込まれますか？
- クリックや入力に、気になる遅延なく反応しますか？
- 画像の寸法は適切で、必要な品質でのみ読み込まれますか？
- 外部スクリプトの不具合によって、注文やフォームが妨げられることはありませんか？
- 重要なジャーニーは、現在主流のブラウザーと実際のスマートフォンで機能しますか？
- 重要なステップの可用性とエラーを監視していますか？
ラボでのスコアは指針であって、ビジネス上の成果ではありません。実際の利用者と主要なジャーニーも観察しましょう。広告ピクセルが購入ボタンより重要になってはいけません。
7。コードの存在を確認するのではなく、テストで計測を検証する
重要なジャーニーごとに、テスト問い合わせまたはテスト注文を行います。イベントが1回だけ、正しい名前、値、通貨、取引識別子とともに送信されることを確認します。次に、対象システムで受信でき、実際の注文と一致していることを検証します。
- サンクスページのURLを開くだけで購入イベントが送信されていませんか？
- ページを更新したときにイベントが重複しませんか？
- タグは同意の状態を尊重していますか？
- データレイヤーに、本来含めるべきでない個人データが入っていませんか？
- コンテナには、会社が利用しているサービスだけが含まれていますか？
- 計測の担当者と、最後に確認した日時の記録がありますか？
実装については、Google Tag Managerを正しく設定する方法を参照してください。イベントの意味については、Google Analytics 4 ガイドをご覧ください。セッション録画やヒートマップは見落としを明らかにできますが、機密性の高いフィールドをマスキングし、同意ルールに従ったうえで、目的を明確に定めて活用してください。「念のため」すべてを録画することは、調査計画ではありません。
毎月のワークショップを開かずにチェックリストを使う方法
- 最も重要なジャーニーを1つ選び、スマートフォンで確認します。
- 同じことをキーボードだけで行います。
- 社外の人にタスクを完了してもらい、誘導はしません。
- 自分が提案する解決策ではなく、相手がためらった箇所を記録します。
- 分析、サポート、追加のテストで問題を検証します。
- 障害を1つ解消し、計測も含めてジャーニー全体をもう一度確認します。
1回の確認でウェブサイトを「UX対応済み」と宣言しようとしないでください。提供内容、デバイス、人々の期待は変化します。チェックリストの目的は、最もコストの高い摩擦を定期的に見つけ、何を最初に修正するかを決めることです。
ウェブサイトをより広いビジネスの文脈で見直したい場合は、オンラインマーケティングのチェックリストもご利用ください。UX、計測、集客の優先順位を決めたい場合は、主なジャーニーをお問い合わせページからお知らせください。