AI活用

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

Framer AIで社内ツール風のプロトタイプを作ると、実装前に画面の使い勝手を確認する機会が生まれます。しかしそのHTMLを開発チームや事業部門に届ける手段が決まっていないと、レビューサイクルが遅れます。ギガサイト便を利用すればアップロードから3秒でURL化でき、Slackに貼るだけで社内レビューを開始できます。

何が共有しづらいのか

Framer AIで作る社内ツール風プロトタイプはサイドバー・テーブル・モーダルなど複数のUIコンポーネントが組み合わさることが多く、ローカルで動かすにはフォルダ構成を保ったまま渡す必要があります。メールでの圧縮ファイル送付では、解凍手順を説明するコストが生じます。

開発中の社内ツールの画面はビジネスプロセスや組織の意思決定フローが読み取れるため、社外はもちろん社内でも関係者以外には見せたくない情報です。フォルダをそのまま共有ドライブに置いてURLを送るだけでは、アクセス権の管理が属人化し、レビュー終了後も誰でも見られる状態が続く可能性があります。

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

URL化する前の確認点

Framer AIが生成したプロトタイプのJavaScriptファイルに、社内システムのAPI URLや認証情報が含まれていないか確認します。開発中に接続テストで使ったエンドポイントが残っている場合、ブラウザの開発者ツールのNetworkタブでページ読み込み時のリクエスト先を確認するのが確実です。

iframeを使って他のプロトタイプや外部サービスを埋め込んでいる場合、そのURLが認証を要求する可能性があります。レビュアーがiframe内でログインを求められると体験が中断するため、埋め込み先の認証なしのアクセス可否を確認するか、iframeをスクリーンショット画像に差し替えてから公開します。

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

認証と期限の決め方

社内の開発チームと事業部門が共同でレビューする場合は、会社ドメイン認証を使うと参加者の増減に関係なく管理が楽です。レビューが始まる前に「このURLにアクセスできない」という問い合わせを防ぐため、URLを送付する前に自分のアカウントで動作確認をしておきます。

社外ベンダーとのジョイントレビューでは、メールアドレスの許可リストを使って特定の担当者だけを招待します。プロトタイプのレビュー期間はスプリントのリズムに合わせて1週間程度に設定し、次のイテレーションに移行したら前の版のURLを無効化する習慣をつけます。

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

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

社内ツールのプロトタイプレビューでは「実際の業務でこの画面を毎日使うと想像できるか」「一番よく使う操作に素早くたどり着けるか」「エラー時のメッセージは意味が取れるか」を具体的な質問として送ると、業務ユーザーの視点での回答が集まりやすいです。

レビュー後の修正は小さな単位で繰り返すため、同一URLに上書きしながら変更履歴をNotionやJiraのチケットにメモしておく運用が管理しやすいです。URL自体は変わらないため、Slackの以前のメッセージからたどったレビュアーも常に最新版を確認できます。

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

よくある質問

Framer AIのプロトタイプで画面遷移を再現している場合、複数ページが正しくリンクされた状態でURLを共有できますか?

全HTMLファイルとアセットをzipにまとめてアップロードすることで、ページ間リンクが機能した状態で共有できます。index.htmlから遷移先のHTMLへの相対パスが正しいかをローカルでも確認してからアップロードします。

レビュー用URLを使った後、同じプロトタイプを開発者がローカルで再現する際に参考にしたいのですが、HTMLのダウンロードは可能ですか?

ギガサイト便の管理者権限を持つアカウントからは元のファイルをダウンロードできます。閲覧者権限のレビュアーにはダウンロード機能は提供されないため、ソースの不用意な流出を防げます。

プロトタイプのレビューURLをJiraチケットに貼り付けて管理することはできますか?

URLはJiraチケットの説明欄やコメントに貼り付けるだけで機能します。認証が設定されている場合はJiraにアクセスできる社員全員が自動で閲覧権限を持つわけではないため、認証の種類をチケット内に明記しておくとスムーズです。

関連記事

AI活用

Framer AIで生成したHTMLスライドをレビュー用URLにして共有する方法

発表直前に「スライドが開けない」と言われると困る。Framer AIで作ったアニメーション入りHTMLスライドは環境依存が大きく、ファイル送付ではレビューが成立しにくい。ギガサイト便でURLを発行すれば、上司や同僚がそのままブラウザで確認できる。

4分で読める
「AI活用」の記事をもっと見る →