何が共有しづらいのか
社内ツール風プロトタイプには「ユーザー一覧」「案件ステータス」「承認フロー」など業務フローを模した画面が含まれる。WebSimのプロンプトに社内用語をそのまま使って生成したHTMLには、実際の組織名・フロー名・役職名が残っていることが多く、部外者に見せるには不適切なケースが多い。
プロトタイプはボタンを押すと画面が切り替わるなどJavaScriptで状態が管理されているため、HTMLファイルをコピーしてメールで渡しても、依存する他のファイルが欠けていれば動かない。特にVue・React・Svelteのビルド成果物をそのままHTMLとして書き出した場合、チャンクファイルが分離していると単体では起動しない。
相手がログインなしで開ける状態かどうかを確認することは、社内ツールプロトタイプでは特に重要だ。「社内向けだから認証は後でいい」という判断でURLを無制限公開にすると、検索エンジンにインデックスされる可能性がある。ギガサイト便では認証なしでもnoindex設定が可能なので、公開範囲と検索除外は分けて考える。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
プロトタイプ内のAPIリクエストが開発環境のエンドポイントに向いていないか、Network タブで実際に操作しながら確認する。WebSimは fetch で架空のAPIを叩くコードを生成することがあり、その架空URLが偶然社内のドメインと一致するリスクは低くないため必ず確認する。モック段階ではレスポンスをJavaScript内でハードコードしておく方が安全だ。
画像・CSS・JSのパスが公開後も解決できるかを確かめるには、ファイルをzipで圧縮してからブラウザでHTMLを開き直してみる方法が簡単だ。`file://` プロトコルで動いていれば、ギガサイト便にアップした後も基本的に同じパスで解決できる。CDN依存がある場合はオンライン環境でも同様に確認する。
iframe が含まれている場合、埋め込み先のオリジンが公開URLとは異なるため X-Frame-Options エラーが出ることがある。社内のダッシュボードをiframeで表示している設計なら、外部公開後は表示されない前提でiframeをモック画像に差し替えてからアップすることを検討する。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
社内の別チームにプロトタイプをレビューしてもらうなら、会社ドメイン認証が最も管理コストが低い。URLをSlackで流すだけで済み、社員以外はアクセスできないため、わざわざ招待リストを管理する必要がない。退職者が自動的に弾かれる点も運用上のメリットだ。
外部パートナーや経営層など会社ドメインを持たない相手が混在する場合は、メール認証で個別にアドレスを登録する方式が適切だ。「社内ツールのプロトタイプを役員向けに説明する」場面では、@gmail.com であっても登録したアドレス以外はアクセスできない状態を作れる。
プロトタイプのレビューサイクルは1〜2週間が目安なので、期限はそれに合わせて設定する。長期間放置されたプロトタイプのURLが社内Wikiに残り続けるのは混乱の元になる。共有時のSlackメッセージに「〇日までの限定URLです」と明記しておくだけでも、受け手の意識が違う。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
社内ツールプロトタイプのレビューでは「実際の業務フローとの齟齬」を最優先で聞く。例えば「承認ステップが1段階足りない」「この画面は経理が使うのか営業が使うのか不明」といった意見が最も価値が高い。見た目の好みより業務要件の過不足を聞くよう、依頼文に具体的な問いかけを入れる。
修正後も同じURLで確認できる差し替え機能は、プロトタイプレビューで特に便利だ。「修正しました、v3をこちら→」と新URLを送るたびに相手がリンクを開き直す手間がなくなる。最終版と途中版が混ざらないよう、プロトタイプのタイトルエリアに「レビュー版 2024-06-25」のようにバージョンを表示しておくと管理しやすい。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
プロトタイプ内でローカルストレージに保存したデータが、別の人のブラウザに引き継がれることはありますか？
ローカルストレージはブラウザ・オリジンごとに独立しているため、他の人のブラウザに引き継がれることはない。ただし同じPCを複数人で使う環境では前の操作が残るため、デモ開始時にデータをリセットするボタンを設けると安全。
ReactやVueでビルドした成果物をギガサイト便で共有することはできますか？
index.htmlと同じディレクトリにあるchunkファイル・assetsフォルダをまとめてzipにすれば共有できる。ただし環境変数に本番APIキーを含んだままビルドしないよう、必ずデモ用設定でビルドし直してからアップする。
プロトタイプに実在する社員の名前を使ったサンプルデータが入っていた場合、公開後に何か問題が起きますか？
社外に公開した場合、個人情報保護の観点から問題になる可能性がある。公開前に実在の人名・メール・電話番号をすべて架空のものに置き換えるか、ランダム生成ツールで差し替えること。