AI活用

Webflow AIで生成したLP案をレビュー用URLにして共有する方法

Webflow AIでLP案を生成するとHTMLエクスポートまで一気に進めますが、そのHTMLを関係者に届けてレビューを受けるフローは自分で設計する必要があります。ギガサイト便はHTMLをアップロードするだけで認証付きURLを即座に発行でき、クライアントや上司への共有がメールのURLリンク1本で完結します。

何が共有しづらいのか

Webflow AIが出力するHTMLにはWebflowのホスティングサービスを前提としたサイト固有のスクリプトが含まれる場合があります。エクスポートしたHTMLをそのまま別環境に置くと、Webflowのエディター連携に使われるスクリプトが404エラーを返し、コンソールにエラーが出た状態でレビュアーに見せることになります。

Webflowのステージング機能はプランによって使えないケースがあり、月額コストをかけずにドラフトを外部に見せる手段が限られます。添付ファイルでのやり取りはバージョン管理が手作業になり、「最終版.html」「最終版2.html」が乱立する状況になりがちです。

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

URL化する前の確認点

WebflowエクスポートのHTMLにはWebflowのCDNから読み込むCSSやJSが相対パスで書かれていることがあります。単一HTMLファイルとして開くと外部CSSが読み込まれず、ページが崩れます。エクスポート時のフォルダ構成を保ったままzipでアップロードするか、全スタイルをインラインに変換してから公開します。

LPに使っている画像がWebflow上のメディアライブラリに依存している場合、エクスポートHTMLから画像が抜け落ちることがあります。エクスポート後にHTMLを開いてimgタグのsrc属性を確認し、WebflowのCDNドメイン(uploads-ssl.webflow.comなど)を指している画像は手動でダウンロードしてzipに含めます。

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

認証と期限の決め方

マーケティング部門内でのLP案確認であれば、会社ドメイン認証でアクセスを絞るのが管理コスト最小です。LP案は社外に出ると競合に先手を打たれるリスクがあるため、ドメイン認証により社員以外が開けない状態を確保します。

クライアントへの提案の場合はパスワードを設定し、提案書と同じメールでURLとパスワードを同送します。期限は提案から1週間以内に設定し、クライアントが未確認の場合はリマインドと同時に期限を延長する形にすると、古いURLが無期限に存在し続けることを防げます。

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

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

LP案のレビューでは「このLPを見て問い合わせをしたいと思うか」「ファーストビューで何を提供しているかが伝わるか」「フォームに入力するまでの流れは自然か」という転換率に直結する視点で質問します。デザイン的な好みより意思決定に使える観点のフィードバックが集まります。

修正サイクルが複数回に及ぶ場合は、毎回のURL共有メッセージに前回からの変更点サマリーを3行で添えます。レビュアーが毎回全体を見直す手間が省け、指摘済みの箇所だけ確認するという効率的なレビューが可能になります。

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

よくある質問

WebflowエクスポートのHTMLにWebflow.jsが含まれますが、これを削除するとLP表示に影響しますか?

Webflow.jsはインタラクションやSlider、Tab、Dropdown等のコンポーネントに必要です。これらを使用していない静的なLPであれば削除しても表示に影響しませんが、動的コンポーネントを使用している場合は削除すると動作が壊れます。

LP案の特定セクションだけを切り出してレビューしてもらうことはできますか?

対象セクションのHTMLと関連するCSSをコピーして別の最小HTMLを作成し、それをアップロードする方法が現実的です。WebflowのクラスはCSSファイル全体に依存しているため、CSSも一緒に切り出す必要があります。

クライアントがURLを開いたかどうか確認する方法はありますか?

ギガサイト便の管理画面でアクセスログ(閲覧日時・ブラウザ種別など)を確認できます。これにより「URLは送ったが開かれていない」という状況を把握してリマインドのタイミングを判断できます。

関連記事

AI活用

Google Stitchで生成したLP案をレビュー用URLにして共有する方法

Google StitchでLP案を生成したデザイナー・マーケター向け。生成したHTMLをレビュー用URLとして安全に共有するための前処理・認証設定・フィードバック回収の手順を具体的に解説し、どの認証方式が適切か判断できるようにする。

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