ハウツー

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

デザインのA/B案をクライアントに確認してもらう際に、URLが2本になると「どちらを見ればよいか」と混乱させてしまいます。同じURLでファイルを差し替える方式を使えば、クライアントの操作を最小限にしつつ確実に各案を見てもらえます。この記事では手順と、差し替え時に起きやすい注意点を詳しく解説します。

準備するもの

A案・B案のHTMLを用意する前に、「両案で共通のアセット(画像・フォント・CSS)はどれか」を整理します。共通アセットをA案フォルダとB案フォルダに個別に含めると差し替え時の依存関係が単純になり、差し替え後にリソースが読み込めないトラブルを防げます。

ギガサイト便で発行する固定URLのアクセス制御を決めておきます。A/Bレビューは通常クライアントのみに見せるため、パスワード認証を設定して第三者がアクセスできない状態にすることをお勧めします。差し替え作業を行う担当者がパスワードを変更しないよう、権限管理も合わせて設定してください。

差し替えスケジュールをカレンダーに登録します。「〇〇日〇時:A案→B案差し替え」のように時刻を決めておくと、差し替え忘れや深夜の慌てた作業を防げます。差し替え後のクライアントへの通知文もあらかじめ作成しておき、差し替えと同時に送れる状態を整えておきましょう。

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

実際の手順

手順①:A案のファイル(HTMLとアセット一式)をZip圧縮し、ギガサイト便にアップロードします。URLを取得したら、シークレットウィンドウで開いてA案が正しく表示されるかを確認してからクライアントに送付します。

手順②:クライアントがA案を確認する時間帯が終わったタイミングで、ギガサイト便の管理画面から「ファイル差し替え」を行い、B案のZipをアップロードします。差し替え完了後にシークレットウィンドウで再確認し、B案が正しく表示されていることを確認します。

手順③:クライアントにB案への切り替えを通知し、キャッシュのクリア方法(Ctrl+Shift+R / Cmd+Shift+R)を案内します。差し替えた時刻をSlackやメールに明記し、「〇〇時以降にアクセスした場合はB案が表示されます」と伝えると混乱を防げます。

失敗しやすい点

差し替えを急ぎすぎて「A案の確認が終わっていないのにB案に切り替えた」という状況が起きることがあります。クライアントから「A案の確認が完了しました」という返信や承認をもらってから差し替えるルールを設けると、確認が中途半端なまま進んでしまう問題を防げます。

B案に差し替えた後、クライアントのブラウザキャッシュによってA案が表示され続け、「B案が見られない」という問い合わせが来るケースは珍しくありません。差し替え後の通知文にキャッシュクリアの手順(操作方法をOSごとに明記)を毎回添付することを、運用ルールとして定着させてください。

テンプレ文面

A案送付時のメッセージ例:「〇〇様 下記URLよりA案のデザインプレビューをご確認いただけます。〇月〇日〇時まで公開していますので、それまでにA案のご感想をお聞かせください。その後B案に切り替えてご案内します。」

B案差し替え時の通知例:「〇〇時にB案へ切り替えました。ページを開いている場合は、キーボードのCtrl+Shift+R(Macの場合はCmd+Shift+R)を押して強制再読み込みをしてからご確認ください。A案・B案両方のご確認が終わりましたら、ご意見をまとめてお聞かせいただけますと幸いです。」

よくある質問

A案とB案のファイルをそれぞれ別のURLで発行せず同じURLにする理由は何ですか?

URLが1本であればクライアントはブックマーク等を管理する必要がなく、混乱を減らせます。また複数のURLを送ると「古い方のURLを見ていた」という誤認が起きやすいため、差し替え方式の方が管理がシンプルになります。

差し替えた直後にクライアントが古い案を見てしまった場合、どう対処すればよいですか?

キャッシュクリアを案内してください(Ctrl+Shift+R / Cmd+Shift+R)。それでも解消しない場合はブラウザのキャッシュを全削除するか、別のブラウザ・デバイスでアクセスするよう案内します。「〇〇時以降にアクセスしていれば新しい案が表示されます」と時刻を基準に説明すると分かりやすいです。

A案・B案以外にもC案がある場合、同じ方式で3案を順番に見せられますか?

可能です。同じURLでC案のファイルをさらに差し替えることができます。ただし案件ごとの確認期間が短くなるため、各案の確認時間を十分に確保したスケジュールを立て、各案の切り替えタイミングと通知を事前に準備してから運用してください。

関連記事

ハウツー

差し替え履歴をメモするときの手順と注意点

静的HTMLページの差し替えを繰り返す担当者向けに、差し替え履歴を記録する手順・バージョン命名のルール・差し替え通知のタイミングと注意点を実務ベースで解説します。

4分で読める
ハウツー

レビュー用URLをSlackで配るときの手順と注意点

Slackでレビュー用URL配布時のミスに悩む担当者向け。送信前チェックから修正版の再送まで、つまずきやすい注意点を段階的に解説。次のレビュー依頼から即実践できます。

4分で読める
ハウツー

レビュー用URLをTeamsで配るときの手順と注意点

TeamsでレビューURL配布時の手順ミスや注意点に悩む担当者向け。チャンネル設定の確認方法から再送時の対応まで、具体的な注意点をステップ順に整理しています。

4分で読める
ハウツー

メールで期限付きURLを送るときの手順と注意点

メール依頼でのレビューが期限内に返ってこない、URLが開けないというトラブルに悩む担当者向け。手順の各ステップで起きやすい問題と対処法を具体的に整理しています。

4分で読める
ハウツー

Notionに共有URLを貼るときの手順と注意点

Notionにレビュー用URLを貼る手順と注意点を実務目線でまとめた記事。「相手が開けない」「情報が漏れた」を防ぎたいWebデザイナーや制作会社の担当者が、確認すべき項目と失敗しやすいポイントをひと通り把握できます。

4分で読める
ハウツー

Googleドキュメントに共有URLを載せるときの手順と注意点

Googleドキュメントに共有プレビューURLを貼る際の具体的な手順と、見落としやすい注意点を解説した記事。クライアントへのデザイン確認依頼を担うWebディレクターや制作担当者が、送付ミスやアクセス不能トラブルを事前に回避するための判断材料が得られます。

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