準備するもの
共有前に、レビュアーがパスワードや会員登録なしでURLを開けるか確認します。ギガサイト便などの認証付き共有サービスを使う場合は、招待メールが届いているかテスト送信しておくと当日のトラブルを防げます。
PCとスマートフォンの両方で表示を1回ずつ確認してください。外部リンクを`pointer-events:none`で無効化するCSSは、モバイルのタップ操作でも機能しますが、iOSのSafariでは長押しメニューが出る場合があるため、実機確認が必須です。
HTML内に個人情報（氏名・メールアドレスなど）や社内APIキーがソースコードに埋め込まれていないか、ブラウザの開発者ツールでソースを表示してチェックします。外部リンクを無効化しても、ソース内の情報は閲覧者がコピーできます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
実際の手順
外部リンクをクリック不可にするには、`<head>`内に`<style>a[href^='http']{pointer-events:none;cursor:default;opacity:0.5;}</style>`を追記します。`opacity:0.5`を加えると視覚的にも「押せない」とわかりやすくなり、レビュアーの混乱を防げます。
次に、変更したHTMLファイルをギガサイト便にドラッグ＆ドロップしてアップロードします。アップロード後に発行されるプレビューURLを自分のブラウザで開き、外部リンクのホバー時にカーソルが矢印のままになっているか、クリックしても遷移しないかを確認してからクライアントに送付します。
差し替えが発生した場合は、修正済みのHTMLを同じプロジェクトに再アップロードするだけでURLは変わらずに内容が更新されます。クライアントにURLの再送が不要なため、レビューサイクルがスムーズになります。
失敗しやすい点
最も多い失敗は、`href`が相対パスで書かれた内部リンクまで一緒に無効化してしまうケースです。`a[href^='http']`のセレクタは絶対URLのみを対象にしますが、`href='//example.com'`のようなプロトコル相対URLは除外されるため、別途`a[href^='//']`も追記する必要があります。
もう一つの落とし穴は、JavaScriptで動的に生成されるリンクです。フレームワーク製のSPAをHTMLとして書き出した場合、CSSだけでは制御しきれないことがあります。その場合はJSで`document.querySelectorAll('a[href]')`を取得し、`e.preventDefault()`を追加するアプローチを検討してください。
テンプレ文面
「お疲れ様です。デザインレビュー用のプレビューURLをご共有します。ページ内のリンクはレビュー用に無効化しておりますので、クリックしても別ページには遷移しません。確認期限は〇月〇日です。ご意見はこのメールへの返信でお知らせください。」
期限を明記することで、リンクを停止するタイミングをあらかじめ合意できます。また「リンクが動かない」という問い合わせを防ぐために、意図的に無効化している旨を一文加えるのがポイントです。修正版を差し替えた場合は「URLは同じです」と一言添えると親切です。
よくある質問
外部リンクを無効化したまま印刷させることはできますか？
印刷CSSで`@media print{a[href^='http']::after{content:none;}}`を追記すれば、印刷時にURLが表示されなくなります。pointer-eventsは印刷には影響しないため、視覚的な装飾だけ別途調整してください。
スマホのSafariで長押しメニューが出てしまうのを防ぐには？
CSSに`-webkit-touch-callout:none;`と`user-select:none;`をリンク要素へ追加すると、長押しによるコンテキストメニューをほぼ抑止できます。ただしアクセシビリティへの影響があるため、レビュー専用URLにのみ適用してください。
プレビューURLを送ったあとにリンクを有効に戻せますか？
CSSのpointer-events指定を削除したHTMLを再アップロードするだけで即時反映されます。URLを変えずに内容を差し替えられるサービスであれば、クライアントへの再通知は不要です。