AI活用

AIで作ったHTMLを「生成→共有→レビュー→差し替え」まで一気通貫で回すワークフロー

AIでHTMLを作るのは速くなりましたが、関係者のレビューを挟むと「どの版が最新か」「修正をどう渡すか」で手間が増え、せっかくのスピードが削られます。生成・共有・レビュー・差し替えを同じURLの上で回す全体設計を示し、版の枝分かれを防ぎながらAI制作のスピードを止めない流れを紹介します。外部サービスの仕様は変わるため、本文ではレビュー共有で変わりにくい判断軸を中心に整理します。

AI制作はレビュー工程で詰まりやすい

AIに指示してHTMLを生成するところまでは速く進みます。しかし、できたものを関係者に見せてフィードバックをもらい、それを反映して再度見せる段階で流れが止まりがちです。

メールでファイルを送り合うと、版が枝分かれして「どれが最新か」が分からなくなります。スクリーンショットでは実際の動きが伝わりません。生成からレビュー反映までを一本のフローにし、共有手段を固定することがカギになります。

全体フローを4ステップで設計する

ワークフローは「生成→共有→レビュー→差し替え」の循環で考えます。共有とレビューと差し替えを同じURLの上で行えば、関係者は常に同じリンクを開くだけで済みます。

重要なのは、共有URLを最初に一度発行したら、以降はそのURLの中身を更新していくことです。これにより、最新版が一意に定まり、版管理の混乱がなくなります。

  1. 生成:AIでHTML(必要なら画像・CSS・JSを含むZIP)を作る
  2. 共有:ギガサイト便にドロップして 〇〇.giga-site.com のURLを発行する
  3. レビュー:そのURLを関係者に送り、実際のページでフィードバックを受ける
  4. 差し替え:指摘をAIで反映し、同じURLのままファイルを更新する
  5. 以降はレビューと差し替えを必要な回数だけ繰り返す

AI生成HTMLを共有する前の安全チェック

AIで作ったHTMLを「生成→共有→レビュー→差し替え」まで一気通貫で回すワークフローでは、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。

ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。

  • 外部送信: form action、fetch、script src、iframeの向き先を確認する
  • 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
  • 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
  • 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める

共有URLを固定して最新版を一本化する

このフローの中心は、同じURLのままファイルを差し替えられる点です。修正のたびに新しいリンクを送らずに済むため、関係者は「いつも同じURL」を見ればよく、最新版を見失いません。

公開URLは 〇〇.giga-site.com 形式のサブドメインで、HTTPSは自動、CDNのエッジ配信で表示が速いので、レビューのたびに快適に開けます。カスタムスラッグを設定しておけば、プロジェクト名が入った覚えやすいURLにできます。

レビューを集めやすくする工夫

レビューを依頼するときは、見てほしい範囲や確認ポイントを添えると、的を絞ったフィードバックが返ってきます。誰がいつ見たかをアクセスログで確認できるので、未確認の人にだけリマインドできます。

社外も含めて回す場合は、URLのみ・パスワード・メール認証・会社ドメイン認証から認証方式を選べます。公開前の内容なら認証を付け、関係者だけがレビューできるようにします。

完了後の扱いまで決めておく

レビューが完了し本番へ移行したら、確認用ページは不要になります。公開期限を設定しておけば、期限切れで自動的に閲覧できなくなり、古い確認版が残りません。無料プランの公開期限は最長7日です。

なお、これは確認・レビュー・一時共有のためのワークフローです。独自ドメインでの本番Webサイト運用とは役割が異なるので、完成したものは本番環境へ正式に移す前提で運用します。

レビュー完了条件を先に決める

AI生成HTMLのレビューは、見た目の好み、文言、リンク、フォーム、安全確認が混ざりやすく、終わりどころが曖昧になりがちです。共有URLを発行する前に、今回のレビューで決めることと、次回以降に回すことを分けておくと、差し替えの回数を抑えられます。

完了条件は難しく考えず、公開前に必要な確認だけに絞ります。たとえば「スマホ表示で大きな崩れがない」「社外に見せてよい文言になっている」「外部送信や秘密情報がない」のように、判断できる粒度で並べます。

  • 今回決めたい範囲を、デザイン・文言・安全確認に分ける
  • 未確定の仕様は、レビュー対象外として明記する
  • 差し替え後に再確認が必要な項目だけを残す
  • 完了後は期限切れ・非公開化・本番移行のどれにするか決める

レビューコメントをAIに戻す前に整理する

レビュー指摘をそのままAIに投げ返すと、優先度の低い表現修正と、重要な導線・安全面の修正が混ざってしまいます。差し替えを速くするには、指摘を種類ごとに分けてからAIへ渡します。

特にHTML共有では、見た目の修正、文言の修正、スマホ崩れ、外部送信や秘密情報の確認を分けておくと、再生成後のチェックもしやすくなります。

  • 必ず直す: 誤字、リンク切れ、スマホ崩れ、意図しない外部送信
  • できれば直す: 余白、色味、説明の言い換え
  • 保留する: 本番公開前に決める料金・法務・正式文言
  • 確認する: 差し替え後に同じURLで最新版が見えているか

よくある質問

なぜ毎回新しいURLを作らないほうがよいのですか

新しいリンクを送り直すと、関係者の手元に複数のURLが残り「どれが最新か」が分からなくなります。同じURLの中身を差し替える運用なら、最新版が常に一意に定まります。

修正のたびにレビュアーへ連絡が必要ですか

URLは変わらないため、再連絡なしでも最新を見てもらえます。大きな更新時だけ一言添えると親切です。アクセスログで再確認されたかも分かります。

公開前の内容を社外レビュアーに安全に見せられますか

パスワードやメール認証、会社ドメイン認証を選べば、関係者だけが開ける形にできます。一時公開ページにはnoindexも付くため検索結果には出ません。

レビューが終わったページはそのまま残りますか

公開期限を設定しておけば期限切れで自動的に閲覧できなくなります。確認用途のため、本番運用へは正式に移行する前提で扱います。

AIツールで作ったHTMLはそのまま共有しても安全ですか?

そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。

AI生成HTMLのレビュー完了は、どう判断すればよいですか?

見た目、文言、リンク、フォーム、安全確認のうち、今回合意したい項目が確認済みになった時点を完了とします。完了条件を先に書いておくと、細かい改善アイデアと公開前の必須修正を分けて扱えます。

レビュー指摘はそのままAIに貼り付けてもよいですか?

貼り付けても構いませんが、優先度と種類を分けてから渡すほうが修正漏れを減らせます。見た目、文言、スマホ表示、安全確認を分けると、再チェックもしやすくなります。

関連記事

AI活用

AI生成HTMLのアクセシビリティを確認してから共有する方法

AI生成HTMLはコードの見た目が整っていても、alt属性の欠落やコントラスト不足が残りがちです。共有前にアクセシビリティの抜けを自分で確認したいエンジニアやデザイナーに向け、押さえるべき観点と確認URLでのレビュー手順を解説します。

5分で読める
AI活用

Lovableで作ったアプリをURLで共有する方法

Lovableで素早く組み立てたWebアプリを、クライアントや上長にURLで見せたい方向けの記事です。コードを取り出して認証付きURLで共有するまでの手順を、具体的なステップで解説しています。

6分で読める
AI活用

Gensparkで生成したサイトを共有する方法

Gensparkで生成したサイトをそのままURLで送ってよいか迷っている方向けに、安全な共有方法を解説します。生成物を手元に取り出し、ギガサイト便で認証付き限定公開するまでの流れをまとめました。

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