準備するもの
URL共有に切り替えるには、まずHTMLファイルが「そのURLにアクセスするだけで完全に表示できる」状態である必要がある。画像やCSSが外部サーバーにあるなら問題ないが、ローカルファイルへの相対パスが残っている場合は事前に修正するか、依存ファイルをまとめてZIP圧縮してギガサイト便に渡す。
レビュアーがどのデバイスで確認するかを事前に把握しておく。スマートフォンで見てほしい場合はその旨をURLと一緒に伝えると確認漏れを防げる。PCとスマホで表示結果が大きく異なるページは、レビュー前に自分でも両方を確認して「〇〇のブレイクポイント以下で崩れないか確認してほしい」と具体的に依頼できる状態にする。
認証方法を決めておく。社内の特定メンバーだけに見せるなら会社ドメイン限定認証、外部のクライアントに見せるならパスワード共有が適している。認証なしの完全公開は検索エンジンにインデックスされるリスクもあるため、レビュー用途では必ず何らかの認証を設定する。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
実際の手順
ギガサイト便のトップページを開き、共有したいHTMLファイルをドラッグ＆ドロップするだけでアップロードが完了する。ZIPファイルも対応しているので、CSS・画像込みのプロジェクトはまとめてZIPにしてアップロードすれば、フォルダ構造を保ったまま公開できる。
アップロード後に認証方法と有効期限を設定してURLを発行する。発行されたURLをそのままSlackやメールに貼り付ければ相手はクリック一発でブラウザに実物が開く。スクリーンショットでは不可能なスクロール・ホバー・フォーム入力の動作確認が相手側で完結する。
URLを送る際は「○○のナビゲーションのレスポンシブ動作を見てほしい」のように確認ポイントを添えると、レビュアーが何を見ればよいか迷わずに済む。漠然と「見てください」とURLだけ送ると「全体的にいいと思います」というフィードバックしか返ってこないことが多い。
失敗しやすい点
画像ファイルをJPEGで圧縮しすぎたまま共有してしまい、「画質が荒い」というフィードバックをもらうケースがある。URLで見せる場合は実際の公開ファイルと同じ品質の素材を使う必要があるため、仮素材・低解像度画像が残っていないか事前に確認する。
フォームのaction属性がテスト環境を向いたまま共有すると、レビュアーがフォームを送信してしまい本番と無関係のデータが登録される事故が起きる。レビュー用共有前にフォームのsubmitを無効化するJavaScriptを1行追加するか、action属性を空にしておくと安全だ。
有効期限を設定せずにURLを発行すると、レビューが終わった後もページが生き続ける。半年後にGoogleのボットが未完成ページをクロールするリスクを避けるためにも、レビュー完了日の数日後を期限として設定する習慣をつけること。
テンプレ文面
以下のURLでレビュー版を共有しています。確認をお願いしたい点は「①スマートフォン幅（375px以下）でのメニュー表示」「②お問い合わせフォームのバリデーションメッセージの文言」の2点です。フィードバックは返信でいただけると助かります。URL：[プレビューURL]（有効期限：〇月〇日）
期限をテキストに明示するのは、相手が「まだ見られる」と思いながら後回しにすることを防ぐためだ。URLのみ送る場合より確認の優先度が上がりやすい。また確認ポイントを2点に絞ることで、漠然とした全体レビューより具体的なフィードバックが返ってくる確率が高い。
よくある質問
ZIPファイルの中にどのファイルを含めれば正しく表示されますか？
index.htmlと、それが参照するCSS・JavaScript・画像をすべて同じフォルダ構造で含めます。外部CDNのURLを参照しているライブラリはZIPに含める必要はありません。
URLを送った相手がログインを求められると言っています。どうすればいいですか？
認証方法の設定によります。パスワード認証ならパスワードを別途伝え、メール認証なら相手のアドレスを許可リストに追加してください。「認証なし」設定にすれば誰でも開けますが、情報漏洩リスクを考慮した上で判断してください。
スクリーンショットとURL共有を使い分ける基準はありますか？
静的な見た目の確認だけならスクリーンショットでも足ります。インタラクション・レスポンシブ・フォーム動作・フォントレンダリングを確認したい場合はURLが必須です。最終承認前は必ずURLで実物確認を求めることをお勧めします。