準備するもの
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を別にすることで、どちらに対するフィードバックか明示的に紐づけられます。