AI活用

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

Claude Appsで生成した社内ツール風プロトタイプは、「動く画面」として素早く作れる強みがある一方、関係者に見せる方法が限られる。Claudeのセッションを共有できないし、HTMLファイルのままでは環境依存で崩れる。ギガサイト便なら生成したHTMLをそのまま貼り付けるだけで、社内メンバー限定のプレビューURLが発行でき、プロダクトレビューのサイクルを一気に短縮できる。

何が共有しづらいのか

Claude Appsのセッションは1対1であるため、生成したプロトタイプを他のメンバーに「同じ状態で」見せることができない。スクリーンショットを撮って送っても、画面遷移やホバーエフェクトが伝わらない。「動く状態」でレビューしてもらうためには、生成したHTMLをURLとして公開する手順が必ず必要になる。

社内ツールのプロトタイプには「部門ごとの権限表示」や「仮の組織図」が含まれることが多く、社外に見せるべき情報ではない。Googleドライブで共有しても「誰がいつ開いたか」が分かりにくく、リンクを転送された場合のリスクも高い。メール認証や会社ドメイン認証で閲覧者を絞り込むことで、情報のコントロールを手放さずにレビューを進められる。

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

URL化する前の確認点

Claude Appsが生成する社内ツールプロトタイプには、`setTimeout`や`setInterval`を使ったダミーのポーリング処理が含まれることがある。ブラウザのデベロッパーツールを開いてConsoleタブを確認し、エラーが大量に出ている場合はその処理を削除するかコメントアウトしてからアップロードする。エラーがあってもプロトタイプの見た目には影響しないことが多いが、開発者がURLを開いたときに「壊れている」と思われるリスクがある。

プロトタイプのHTMLに`localStorage.setItem()`の呼び出しがある場合、レビュアーが操作するとそのブラウザにデータが残り続ける。複数回レビューする場合にデータが積み重なって表示が変わることがある。アップロード前に`localStorage.clear()`を初期化処理として最初に実行するコードを追加しておくと、毎回クリーンな状態でレビューしてもらえる。

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

認証と期限の決め方

社内ツールプロトタイプのレビューは、社員全員を対象にするかチームだけを対象にするかで認証方法が変わる。全社員に見せる場合は会社ドメイン認証が管理コスト最小で済む。特定チームだけに絞りたい場合は、メール認証で対象者のメールアドレスを個別に指定する方法が確実だ。

ユーザビリティテストの日程が決まっている場合は、テスト実施日を有効期限の基準にする。テスト開始の2日前にURLを発行してファシリテーターに送り、テスト翌日に期限が切れるよう設定する。テスト後は結果の整理が終わったタイミングで次バージョンのURLを発行するリズムを作ると、プロトタイプの進化と期限管理が連動する。

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

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

社内ツールプロトタイプへのフィードバック収集では、「このプロトタイプで何の業務を完了できますか」という課題設定が最も効果的だ。例えば「月次の売上レポートを作成して上長に共有するまでの操作を試してください」という課題を設定すると、UI上の詰まりポイントや「この操作の順番が逆ではないか」という構造的な問題が自然に浮かぶ。

フィードバックを集め終えたら「対応済み・次フェーズ・対応しない」の3分類でまとめ、Notionやスプレッドシートにログを残す。「対応しない」と判断した指摘には理由を書いておくことが重要で、同じ指摘が次のレビューで再び出たときに「前回このような理由で見送りました」とすぐに回答できる状態を作る。

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

よくある質問

Claude Appsで生成した社内ツールプロトタイプに複数タブ(ダッシュボード・設定・ユーザー管理)が含まれています。タブ切り替えもURLで正常に動作しますか?

JavaScriptでタブ切り替えを実装していれば動作します。`display: none`の切り替えでも、クラス名の付け替えでも通常のホスティング環境で問題ありません。タブごとに直接リンクしたい場合はアンカーリンク(`#tab-name`)を活用してください。

プロトタイプを見た上長から「このまま開発を進めてよい」という承認をもらいたいのですが、URLのスクリーンショットを記録として残せますか?

URLのスクリーンショットとあわせて、承認日時・承認者名・プロトタイプのバージョンをドキュメントに記録しておくことをお勧めします。URLは期限が来ると無効になるため、承認の証拠は別途保管する必要があります。

同じプロトタイプをユーザーインタビューで10名に見てもらいます。全員に同じURLとパスワードを共有してよいですか?

問題ありません。パスワードを知っている10名が同時にアクセスしても動作します。インタビュー終了後にパスワードを変更するだけで全員のアクセスを止められます。インタビュー後に「誰が・いつ・何分間アクセスしたか」のログも確認できます。

関連記事

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