ギガサイト便
HTMLをURL化
AI活用

Create.xyzで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法

Create.xyzで社内ツール風のプロトタイプを素早く生成できても、それを「安全に」チームや承認者に見せる手段が確立していないと、生成の速さが半減する。メール添付のHTMLは環境依存で崩れ、GitHubPagesはデプロイ設定に時間がかかる。認証付きURLを即発行できるサービスを組み合わせることで、生成から共有までのサイクルを一気に短縮できる。

5分で読める

何が共有しづらいのか

Create.xyzで社内ツールを生成すると、Airtable・Notion・Googleスプレッドシートなどのデータソースと連携するAPIキーを設定することがある。このAPIキーがHTMLのソースコードに直書きされたままURLとして公開されると、ブラウザの開発者ツールから誰でも取得できる状態になる。共有前にAPIキーを削除し、モックデータをHTMLに直接埋め込む形式に変換する。

社内ツールのプロトタイプは「稟議承認」「在庫確認」「シフト管理」など業務に直結したUIを持つため、実際のデータのように見えるダミー値が視覚的にリアルになりがちだ。承認者が「このツールを使えば○○ができる」と判断する前提で動くHTMLである以上、誤解を招かないよう「これはデモです」という表記を全画面の共通ヘッダーやウォーターマークとして入れておくとよい。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

URL化する前の確認点

Create.xyzが生成したコードにLaravelやExpressのAPIエンドポイントへのfetchが含まれている場合、そのエンドポイントが本番サーバーを指していると実際のデータが読み書きされる。HTMLをアップロードする前にfetch呼び出しを全件検索し、本番URLをモックレスポンスを返すコードに置き換えるか、fetch全体をコメントアウトする。

社内ツールのプロトタイプがlocalStorageに設定データを保存する実装になっている場合、複数のレビュアーが同じブラウザを使い回す環境では前の人の設定が残る。アップロード前にページ初期化時にlocalStorageをクリアする処理を追加するか、Cookie/localStorageを使わないシンプルなデモ用HTMLに作り直す方が安全だ。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

認証と期限の決め方

社内ツールのプロトタイプを情報システム部門・経営企画・現場部門の3グループに同時にレビューしてもらう場合、全グループが同じ会社ドメインのメールを持っているはずなので、ドメイン認証1つで全員をカバーできる。グループごとに別のURLやパスワードを管理する手間が省け、共有ミスも起きにくい。

社内ツールのプロトタイプはフィードバックを基に繰り返し修正されるため、レビューURLの期限を「次の定例会議の翌日」に設定するサイクルで運用すると管理しやすい。毎スプリントの終わりに前スプリントのURLを失効させ、次のスプリント向けに新URLを発行する習慣にすると、古いプロトタイプが社内に残り続けることを防げる。

  • 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
  • 特定の相手だけ: パスワードまたはメール認証を使う
  • 会社内だけ: 会社ドメイン認証を検討する
  • 短期レビュー: 期限を設定して古いURLを残さない

共有後のフィードバック回収

社内ツールのフィードバックは現場の業務効率改善に直結するため、「使いにくい」という抽象的な意見ではなく「どのステップで手間取ったか」という具体的な情報が必要だ。レビューURLを送る際に「1分でできるアンケートも添付しました」としてGoogleフォームを併用すると、構造化されたデータで意見を集められる。

同じプロトタイプを複数の部署が別々にレビューすると、部署ごとに求める機能が異なり意見が分散する。フィードバックを集約する担当者を決め、全部署からのコメントを一元管理するスプレッドシートを事前に用意しておくと、矛盾する要件の調整が担当者主導でできるようになる。

  • 確認してほしい観点を3つ以内に絞る
  • 期限と返信先を明記する
  • 修正後も同じURLで見られるか伝える
  • 最終版と途中版が混ざらないようタイトルを付ける

よくある質問

Create.xyzで生成した社内ツールプロトタイプのHTMLに外部APIキーが残っていた場合、どう対処するか？

まずURLを即座に失効させてアクセスを遮断する。次にAPIキー発行元のダッシュボードでそのキーを無効化し、新しいキーを発行する。HTMLからキーを削除した状態で再アップロードし、新しいURLを関係者に共有する。

社内ツールプロトタイプのレビューで『本番に使えるか』という質問が来た場合、どう答えるか？

共有時に「このHTMLはレビュー専用のスタティックモックです。バックエンドとの連携・セキュリティ対策は別途開発が必要です」と明記しておくと、承認者が過剰な期待を持つことを防げる。READMEをHTMLの最上部に注釈として入れておくのも有効だ。

プロトタイプの複数バージョンをA/B比較してレビューしてほしい場合、どう共有するか？

バージョンAとBそれぞれのHTMLを別URLで発行し、共有メッセージに「パターンA（シンプルUI）とパターンB（情報量多め）を比較してください」と説明を添える。レビュアーが両URLをタブで開き並べて比較できる状態を作ると意見が集まりやすい。

関連記事

「AI活用」の記事をもっと見る →