何が共有しづらいのか
社内ツールのプロトタイプはデータ操作を模したJavaScriptを含むことが多く、`localStorage`や`sessionStorage`にダミーデータを書き込む処理が動いている場合がある。URLで共有するとレビュアーが操作したデータが自分のブラウザに残り続けるため、「ストレージをクリアしてから試してください」という案内が必要になる。
Builder.io Visual CopilotはFigmaコンポーネントと紐づいた出力を行うため、Figmaのアクセス権がないメンバーにはソースを共有できない問題がある。プロトタイプのHTMLをスタンドアロンで切り出してURL化することで、Figmaアカウントを持たない営業担当や経営層にも画面イメージを届けられる。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
社内ツールプロトタイプに含まれるJavaScriptの`fetch()`呼び出しを検索し、本番APIのエンドポイントURLが埋まっていないか確認する。ステージングのURLであっても、認証なしでアクセスできる状態なら外部URLからリクエストが飛んでしまう。モックデータはJSオブジェクトとしてHTML内に直接定義し、API呼び出しを完全に削除した状態でアップロードする。
権限ロールによって表示内容が変わる画面(管理者ビュー・一般ユーザービュー)が混在する場合は、ロールごとに別のHTMLを用意する方が分かりやすい。1つのHTMLにロール切り替えボタンを実装する方法もあるが、プロトタイプレビューでは「どのロールを見ているか」が分からなくなりやすいため注意が必要だ。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
社内ツールプロトタイプのレビューは、社員全員が会社ドメインのメールを持っているなら会社ドメイン認証が最もシンプルだ。招待リストを管理する手間がなく、入社時点からアクセス可能になる。業務委託メンバーが別ドメインのメールを使っている場合は、個別にメール認証を追加する。
スプリント単位で開発しているなら、スプリント終了日の23:59を期限に設定するリズムが分かりやすい。次スプリントで更新版をアップロードしたら、前スプリントのURLを無効化することで「古いプロトタイプへのコメント」と「新しいプロトタイプへのコメント」が混在するのを防げる。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
社内ツールのプロトタイプレビューでは「実際の業務フローに当てはめて操作してみてください」という依頼の仕方が有効だ。例えば「受注から請求書発行までの操作を5分でやってみてください」という課題を設定すると、UI上のつまずきポイントが自然と浮かび上がる。抽象的な「使いやすいですか」という質問よりずっと具体的な回答が得られる。
フィードバックを受けた後は「対応する・しない・次フェーズに持ち越す」の3択で仕分けして返答する。全指摘に対応しようとするとプロトタイプのスコープが広がり続けるため、レビュー段階で確認すべき範囲(画面遷移・ラベル・カラム構成など)を事前に定義しておくとよい。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
プロトタイプに複数画面の遷移が含まれています。1つのHTMLにまとまっていないとURLで共有できませんか?
複数HTMLをzipにまとめてアップロードすることで対応できます。index.htmlをエントリーポイントにして、画面間のリンクを相対パスで記述しておけば、ZIP展開後に遷移が機能します。ただし全ページを1つのSPA的なHTMLにまとめる方が管理は楽です。
Builder.io Visual CopilotはTailwind CSSを前提にした出力をします。PostCSSなしで動きますか?
Tailwind CSSのCDN版(play.tailwindcss.com経由のCDNリンク)を使えばPostCSSなしでも動作します。ただしCDN版はパフォーマンス最適化がされていないため、プロトタイプ確認用途に限定し、本番では適切にビルドする必要があります。
社内ツールプロトタイプを役員会議で見せたいのですが、会議室のWi-Fiが不安定です。オフラインで表示できますか?
ギガサイト便のURLはオンライン接続が必要です。オフライン対応が必要な場合は、HTMLとアセットをローカルに保存しておき、ブラウザでファイルを直接開く形で発表することをお勧めします。会議前日にPDFスクリーンショットをバックアップとして用意するとより安心です。