ハウツー

同じURLでA/B案を見せるためのチェックリスト

デザインのA案・B案を同じURLで順番に見せる運用は、事前の設計が甘いと「どちらを見たか分からない」「キャッシュが残って差し替わっていない」「フィードバックがA案・B案で混在する」といった問題が起きます。このチェックリストで、A/Bレビューの前後を通して確認すべき項目を整理します。

準備するもの

A案・B案の各HTMLファイルが独立して動作することを、本番アップロード前にローカル環境またはステージング環境で確認します。特に両案で画像パスやフォントの相対パスが異なる場合、差し替え後に表示崩れが発生するため、ファイルの依存関係を一覧表に書き出してから確認してください。

チェックリストには「A案確認用」と「B案確認用」の2セクションを設け、同じ確認項目を繰り返す形式にします。各セクションに「確認者名」「確認日時」「確認端末」を記入する欄を設けると、後から「どちらを誰がどこで確認したか」をトレースできます。

差し替えスケジュール(日時・担当者)をチェックリストの先頭に明記し、関係者全員が見られる状態にしておきます。「誰がいつ差し替えるか」が曖昧なままだと、担当者不在中に差し替えが行われずスケジュールが乱れます。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

実際の手順

チェック①(A案アップロード後):シークレットウィンドウと通常ウィンドウの両方でURLを開き、A案が表示されることを確認します。認証フローが正しく機能しているか、表示速度が許容範囲内かも確認してチェックボックスにチェックを入れます。

チェック②(B案差し替え後):差し替え直後に同じくシークレットウィンドウで新しいURLにアクセスし、B案が表示されることを確認します。A案のキャッシュが残っていないかを確認するため、必ずキャッシュクリア後に表示を確認してください。

チェック③(フィードバック収集後):A案・B案それぞれのフィードバックが混在していないかを確認します。フィードバックが「どちらの案に対するものか」が明記されているか、コメント欄・フォームで整理できているかを確認し、問題なければチェックを入れて工程完了とします。

失敗しやすい点

チェックリストに「確認した」とチェックを入れたものの、実際にはURLをクリックせずに目視だけで確認を済ませてしまうケースがあります。チェック項目を「URLにアクセスして〇〇が表示されたことを確認した」という行動レベルの記述にすると、口頭確認と実際の動作確認を混同するミスを防げます。

差し替え前後でファイル構成が異なる(A案はindex.htmlのみ、B案はindex.html+サブフォルダ)と、差し替え後にサブページへのリンクが404エラーになることがあります。差し替え前にB案のファイル構成を確認し、リンク先のパスが全て正しいかをチェックリストに追加してください。

テンプレ文面

A/Bレビュー開始時のクライアントへの案内文例:「〇〇様 デザイン案の確認をお願いします。現在【A案】が公開されています。〇月〇日〇時に【B案】に切り替えますので、その前にA案のご感想をいただけますと幸いです。フィードバックは下記のフォームへお願いします。フォーム:〇〇」

レビュー完了後の次ステップ案内文例:「A案・B案のご確認ありがとうございました。いただいたフィードバックをもとに最終案を制作します。最終案の共有は〇月〇日を予定しています。引き続きよろしくお願いします。」

よくある質問

チェックリストを使っても「A案とB案のどちらに対するフィードバックか分からなくなった」場合はどうすればよいですか?

フィードバックフォームの送信内容に「確認した案(A/B)」の選択肢を設けておく方法が最も確実です。フォームがない場合はフィードバックメッセージの冒頭に「A案について:」と記載するよう依頼してください。

A案・B案の差し替えを夜間に行う予定ですが、翌朝クライアントが確認する際にスムーズにアクセスできますか?

夜間差し替えでも翌朝には新しいファイルが表示されますが、クライアントのブラウザに前日のA案がキャッシュされている可能性があります。翌朝の通知メッセージにキャッシュクリア手順を含めておくか、HTMLのCache-Controlヘッダーで「no-cache」を設定しておくと、キャッシュ問題を事前に防げます。

A/Bレビューのチェックリストをクライアントにも共有して確認してもらう必要はありますか?

チェックリスト全体を共有する必要はありません。クライアントには「確認する観点(デザイン・コピー・CTA)」と「フィードバックの提出先・期限」だけを伝えれば十分です。チェックリストは制作側の内部管理ツールとして活用し、品質保証のエビデンスとして保管してください。

関連記事

ハウツー

同じURLでA/B案を見せる方法

同一URLでデザインのA案・B案をクライアントに見せる方法を解説する記事。「URLが2つあってどちらを見ればいいか分からない」というクライアントの混乱を防ぎたいWebデザイナーや制作ディレクターが、効率的なA/Bレビューフローを構築するための手法を把握できます。

4分で読める
ハウツー

同じURLでA/B案を見せるときの手順と注意点

同一URLでA案・B案を順番に確認してもらう際の手順と落とし穴を解説する記事。複数のデザイン案を同じURLで管理したいWebデザイナー・制作ディレクターが、キャッシュ問題やフィードバック混在を防いで効率的なA/Bレビューを実施するための判断材料が得られます。

4分で読める
ハウツー

Notionに共有URLを貼るためのチェックリスト

NotionにWebプレビューURLを貼る前後に実施すべきチェック項目を一覧化した記事。デザイン確認やHTMLプレビュー共有を行うWeb制作者が、送付ミスや情報漏えいを防ぐためのポイントを把握できます。

4分で読める
「ハウツー」の記事をもっと見る →