ハウツー

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

「AとBどちらのデザインが良いか」をクライアントに確認してもらう場面では、2つのURLを別々に送るより「同じURLでA案・B案を切り替えられる」構成の方がフィードバックを集めやすくなります。ギガサイト便のファイル差し替え機能を活用することで、URL変更なしにA案からB案へスムーズに切り替えられます。

準備するもの

A案・B案のHTMLファイルを別々に用意します。ファイル名は「design-a.html」「design-b.html」のように区別しておき、どちらかをまずギガサイト便にアップロードしてURLを取得します。このURLが「レビュー用の固定URL」になるため、クライアントへの案内はこの1つのURLだけを伝えればよい状態にします。

A案とB案でナビゲーション構造やファイル依存関係が異なる場合、差し替え時に参照先が壊れることがあります。事前にA案・B案両方を別のローカルサーバーで動作確認し、外部リソースへの依存(CDN・外部フォントなど)が問題なく読み込まれることを確認してからアップロードしてください。

切り替えのタイミングをあらかじめ設計しておきます。「最初にA案を見てもらい、翌日B案に差し替えて両方の印象を別日に聞く」「A案とB案を同一HTMLの中でタブ切り替えで見せる」など、どの方法を取るかによって準備するHTMLの構成が変わります。ファイル差し替え方式を選ぶ場合は、切り替え時刻と差し替え作業者をあらかじめ合意しておいてください。

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

実際の手順

手順①:A案のHTMLファイル(またはzip)をギガサイト便にアップロードし、URLを取得します。クライアントに「本日〇時から〇時まではA案が表示されます」とメッセージを送り、確認時間帯を明示します。

手順②:A案の確認期間が終わったら、ギガサイト便の管理画面で同じURLにB案のファイルを差し替えアップロードします。URLは変わりません。クライアントに「同じURLでB案に切り替えました。〇時から〇時の間にご確認ください」と通知します。

手順③:両案の確認が完了したら、フィードバックを収集します。「A案・B案どちらが好みか」「それぞれの気に入った点・気になった点」をフォームやNotionコメントで集約すると、後から比較検討する際に整理しやすくなります。

失敗しやすい点

「URLが同じだから同じページが見えている」とクライアントが思い込み、B案に差し替えた後も「A案を見ています」という誤認識でフィードバックをもらうケースがあります。差し替え後は必ずクライアントに「〇〇時にB案に更新しました。ページを再読み込みしてご確認ください(Ctrl+Shift+R / Cmd+Shift+R)」とキャッシュクリアの方法を案内してください。

同一HTMLファイル内でABを切り替えるタブ方式の場合、「タブが見つからない」「スマホで操作できない」というフィードバックが来ることがあります。UIの複雑さを避けたい場合はファイル差し替え方式の方がシンプルで、クライアントの操作負荷が低くなります。

テンプレ文面

A案の確認依頼メッセージ例:「〇〇様、デザインA案のプレビューURLをお送りします。本日〇時まで下記URLからA案をご確認いただけます。翌日〇時よりB案に切り替えますので、A案のご感想をその前にコメントください。URL:https://...」

B案への差し替え通知メッセージ例:「B案に切り替えました(〇〇年〇月〇日 〇〇時)。同じURLよりご確認いただけます。ページを開いている場合はCtr+Shift+R(Mac:Cmd+Shift+R)で強制再読み込みをお試しください。」

よくある質問

A案とB案を同時に見せたい場合、1つのURLで両方表示する方法はありますか?

1つのHTMLにABを並べて表示するか、左右スプリット表示にする方法があります。この場合ファイル差し替えは不要ですが、スマートフォンで見ると2つが縦に並んで比較しにくくなるため、クライアントがどのデバイスで確認するかを先に確認してから設計してください。

ギガサイト便でファイルを差し替えた際、クライアントのブラウザキャッシュが残って古い案が表示されることはありますか?

ブラウザキャッシュによって古い版が表示されることがあります。差し替え通知時にCtrl+Shift+R(Windowsの強制リロード)またはCmd+Shift+R(Macの強制リロード)を案内するか、HTMLのキャッシュ制御ヘッダーを適切に設定することで防げます。

A案・B案のフィードバックを同時に収集する場合、混在しないようにするにはどうすればよいですか?

フィードバックフォームに「現在表示されているのはA案・B案どちらですか?」という選択肢を設けるか、A案確認中とB案確認中でフォームのURLを別にすることで、どちらに対するフィードバックか明示的に紐づけられます。

関連記事

ハウツー

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

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

4分で読める
ハウツー

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

同一URLでA案・B案を切り替えるレビューフローで確認すべき項目をチェックリスト形式でまとめた記事。ファイル差し替え方式を使うWebデザイナー・ディレクターが、キャッシュトラブルやフィードバック混在を防ぐための事前・事後確認の全体像を把握できます。

4分で読める
ハウツー

レビュー用URLをSlackで配る方法

Slackでレビュー用URLを共有したい担当者向けに、準備・送信・無効化の一連の流れを解説。どのチャンネルに何をどう送ればよいか判断できます。

3分で読める
ハウツー

レビュー用URLをTeamsで配る方法

TeamsでレビューURLを共有したい担当者向けに、チャンネル・チャット・会議チャットの使い分けと配布時の設定手順を解説。どの機能を使えばよいか判断できます。

4分で読める
ハウツー

メールで期限付きURLを送る方法

メールで期限付きレビューURLを送りたい担当者向け。件名・パスワードの記載方法から期限管理・再送まで、メール特有のトラブルを防ぐ手順を解説しています。

4分で読める
ハウツー

Notionに共有URLを貼る方法

Notionでレビュー用URLを管理・共有したい担当者向け。埋め込み機能の使い方とページ公開範囲の設定手順を解説し、どの方法を選べばよいか判断できます。

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