目的に合うページ制作の入口を選ぶ

手元にある成果物から選ぶ

最初に、手元にあるのが事業のアイデア、構成案、完成デザイン、公開中のページのどれかを確認します。入口によって引き継がれる内容と編集方法が異なります。同じ資料を何度も取り込む前に、目的に合う方法を選びましょう。

対象者や訴求、読む順番が未定なら企画から始めます。確定したデザインがあるなら、AIに方向を考え直させる必要はありません。完成済みのものと残りの作業を分けて整理してください。

企画から編集できるページへ

基本情報を設定し、構成とワイヤーを確認してから編集画面へ進みます。前提、完成原稿、必要素材が入力となり、生成後はブランド、内容、操作を確認します。ワイヤーの仮画像や画像の説明文は、完成した製品画像ではありません。

成稿がある場合は局所編集から進められます。小さな修正を全体の作り直しにせず、範囲を指定してください。流れは最初のページを作るを参照します。

Figmaのデザインを取り込む

Figma取り込みは、確認済みのデザインをページにする方法です。ルート直下のレイヤー構造がセクションの分割に関わり、PCとMobileの対応も確認が必要です。見た目の部品が、すべて動くフォームやカルーセルになるわけではありません。

ページ全体の取り込みは新規ページを作成します。後から一部だけ直す場合はセクション取り込みを検討し、Figmaの構造と取り込みを確認してください。

既存ページやHTMLから複製する

Webページの取り込みやHTML ZIPは、既存ページをもとに独立した複製を作る方法です。元サイトは書き換わらず、バックエンド、カート、ログイン機能が自動で引き継がれるわけでもありません。外部スクリプトや画像、ログイン中に見えている情報を確認します。

取り込んだページでは文字・画像・リンクの直接編集と、選択箇所へのAI編集を使えます。動的な効果や外部サービスが動くかは個別に確認してください。入口と確認方法はWebページ・HTMLの取り込みを参照します。

見た目と動作を分けて確認する

文字、画像、配置が合っていても、動作まで確認済みとは限りません。FAQの開閉、ボタンの遷移、フォームの記録は別にテストします。標準部品とAI生成コンポーネントでは対応範囲が異なり、外部システムの操作には連携が必要です。

入力欄が見えるだけで送信できると判断しないでください。記録が必要なら、標準フォームか見た目だけの部品かを確認し、公開後の動作も確かめます。

最後に公開・引き継ぎを選ぶ

編集後はPC、モバイル、リンク、フォント、フォーム、計測、共有情報を確認します。設定済みドメインでの公開や、開発担当へのHTML引き継ぎを選べます。書き出し、プレビュー、公開は別の状態です。プレビューと公開前の確認を行い、最後に実際のURLを開いて確かめてください。