何が共有しづらいのか
管理画面モックには「ユーザー一覧」「売上サマリー」など、それらしいダミー数値が含まれやすい。Canva Codeが生成したHTMLをそのまま社外のレビュアーに送ると、数値がダミーであることが伝わらずスクリーンショットが流出するリスクがある。公開前に「このデータは架空です」と明記した注釈バナーをHTML内に追加しておくと誤解を防げる。
ローカルファイルをメールに添付する方法では、相手がファイルをダブルクリックしてもブラウザのセキュリティ制限でJavaScriptが動かず、タブ切り替えやモーダルなどのインタラクションが確認できない。URLとして配信することでこの問題が解消され、実際のブラウザ挙動をレビュアーが体験できる。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
Canva Codeが生成した管理画面HTMLには、グラフや地図を描画するためのCDN経由のスクリプトタグが埋め込まれていることがある。たとえば `<script src="https://cdn.example.com/chart.js">` のような外部依存は、ネットワーク環境によって読み込み失敗する。ローカルでは動いていても本番URLで表示が崩れる典型的な原因なので、公開前にオフライン状態でも確認する。
管理画面モックは認証フォームを模したUIが含まれることが多い。`<form action="https://...">`のaction属性に実在するAPIエンドポイントが誤って残っていると、レビュアーが誤送信した場合に実データに触れてしまう。action属性は `#` か `javascript:void(0)` に置き換えてから共有するのが鉄則だ。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
管理画面モックは機密性が高い成果物に分類されることが多いため、パスワード認証を最低ラインとして設定するのが無難だ。レビュアーが社外のデザイン会社やフリーランサーであれば、パスワードをSlackのDMで別途送付する。社外アクセスが一切不要な場合は、会社ドメイン認証（`@company.co.jp` でのみ閲覧可能）を選ぶと管理コストが下がる。
短期レビューを想定したモックには3〜7日の有効期限を設定し、期限切れ後はURLが無効化されるようにする。「古いモックのURLが社内に残り続けて混乱する」という事態を防ぐため、Slackに貼ったURLには期限をメッセージ本文に明記する習慣をつけるとよい。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
管理画面モックのレビューでは「全体の色味」「ナビゲーション構造」「テーブルの列順」など観点が分散しやすい。あらかじめ「今回は画面遷移の順序とボタン配置だけ確認してほしい」と観点を絞ったメッセージを添えることで、レビュアーが迷わず焦点を当てた意見を返せる。
修正後に差し替えを行う場合、同じURLのまま更新できるサービスを使っているかを事前に確認しておく。URLが変わると以前のSlackスレッドのリンクが旧版を指し続け、新旧どちらを見ているか不明になる。ギガサイト便では同一スラッグで再アップロードすれば同じURLのまま内容が差し替わる。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
Canva Codeの管理画面モックにダミー数値が入っているが、検索エンジンにインデックスされる心配はあるか？
ギガサイト便で共有する場合、URLにはデフォルトで認証が設定されるためクローラーがアクセスできない。加えてHTTPレスポンスにnoindexヘッダーを付与する設定も可能なので、二重に検索除外できる。
管理画面モックを複数バージョン管理したい場合、どうすればよいか？
スラッグにバージョン番号を含める（例：`admin-mock-v2`）か、別URLを発行する。最終承認版と比較検討中の案を同時に公開し、それぞれのURLをレビュースレッドに貼ると混乱が起きにくい。
レビュアーがモバイルで開いたとき管理画面のレイアウトが崩れた。共有URL側で対処できるか？
レイアウト崩れはHTML側の問題なので、Canva Codeで再生成またはCSSを修正してから再アップロードする。共有URL側でビューポートを自動調整する機能はないが、再アップロードで即座に差し替えられる。