AI活用

Webflow AIで生成した管理画面モックをレビュー用URLにして共有する方法

Webflow AIで管理画面のモックを作るとビジュアルエディターの強みが生きますが、生成したHTMLを社内のエンジニアや事業部門に見せるにはファイル共有の方法を別途考える必要があります。ギガサイト便ならアップロードから数秒でURL化でき、認証を設定した上でSlackに貼るだけでレビューを開始できます。

何が共有しづらいのか

Webflow AIで生成した管理画面モックには、テーブルやカード型UIのサンプルデータとして架空のユーザー名・売上数値・ステータスが埋め込まれます。このデータが本番に近い見た目をしているため、社外のステークホルダーに見せる前に「これは実データか」と確認が入るケースがあります。

Webflowのプロジェクトリンクはアカウントを持つメンバーにしか共有できない制限がある場合があり、エンジニアや事業部門の確認者全員がWebflowアカウントを持っているとは限りません。HTMLをエクスポートして渡す方法が最も確実ですが、ファイルのやり取りはバージョン管理が煩雑になります。

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

URL化する前の確認点

WebflowエクスポートのHTMLにCMSコレクションのデータが含まれている場合、エクスポート時に静的なHTMLとして書き出されます。動的フィルタリングや検索機能がWebflowのサーバー側処理に依存している場合、エクスポートしたHTMLではその機能が動作しません。レビュアーに「この機能はモックなので動作しません」と事前に説明します。

管理画面モックにダミーのAPIレスポンスを模したJavaScriptが含まれている場合、外部エンドポイントへのfetchが残っていないかブラウザのNetworkタブで確認します。404エラーが大量に出ている状態でレビュアーに渡すと、バグかどうかの判断に時間を使わせてしまいます。

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

認証と期限の決め方

管理画面モックには業務フローや権限設計が表れるため、社内でも閲覧者を限定します。開発チームと製品オーナーだけのレビューなら会社ドメイン認証で十分ですが、外部のデザインエージェンシーを含む場合はメールアドレスの許可リストを使って特定の担当者だけを招待します。

管理画面のレビュー期限はUIの設計フェーズに合わせて設定します。スプリント単位で進行している場合は次のスプリント開始日を期限にして、レビュー完了の確認を次のプランニングで行う運用にすると、期限管理が開発サイクルに自然に組み込まれます。

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

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

管理画面のレビューでは「このダッシュボードで毎朝確認する数値をすぐ見つけられるか」「ステータス変更の操作手順は現在のツールより少なくなっているか」のような具体的な業務タスクを前提にした質問が有効です。抽象的なUIの評価より業務効率改善の観点での回答が得られます。

フィードバックは画面名(例:「ユーザー一覧画面」)とコンポーネント名(例:「検索フィルター」)を基準に分類して収集します。GitHubのIssueやJiraのタスクに1対1で対応させると、修正後の確認がしやすくなります。

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

よくある質問

Webflow AIの管理画面モックでDarkモード切り替えを実装している場合、ギガサイト便のURLでも切り替えは動作しますか?

CSSカスタムプロパティやJavaScriptで実装されたダークモード切り替えはギガサイト便のURL上でも動作します。Webflowの独自変数システムに依存している場合はエクスポート後に切り替えが機能しない可能性があるためローカルで事前確認をします。

管理画面モックのレビューURLを誤って社内の全体Slackチャンネルに貼ってしまった場合はどう対応しますか?

管理画面からURLを即座に無効化してください。会社ドメイン認証を設定している場合は社外への漏洩リスクは限定的ですが、意図しない閲覧を防ぐために速やかに無効化した上で新しいURLを発行し、対象者に再共有します。

複数の画面バリアントを同時にレビューしてもらいたい場合、1つのURLにまとめることはできますか?

index.htmlに各バリアントへのリンク一覧を作成してzipでアップロードすることで、レビュアーが1つのURLから全バリアントにアクセスできる目次ページを作れます。バリアントごとにURLを分ける方法より管理が統一されます。

関連記事

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