企画から最初のページを作る

制作に使える入力を用意する

この手順は、企画からページを作る場合に使います。対象のプロファイルを確認し、企画を新規作成するか既存の企画を開きます。「基本情報」でペルソナ、製品、チャネル、目標のアセットを各1件以上選び、必要なブランド条件や素材を補足してください。選択方法は基本情報の設定を参照します。

Figma、Webページ、HTML ZIPから始める場合は、それぞれの取り込み入口を使います。企画を先に作る必要はありません。

ワイヤーで読む順番を確認する

1. 基本情報で「構成へ進む」を押し、生成された見出し、説明、ボタン文言を確認します。必要な修正を確定し、構成を3ブロック以上にします。
2. 「ワイヤーフレームへ進む」を押し、生成完了を待ちます。
3. 構成と照合し、見出し順、根拠、CTA、条件の漏れを確認します。PCとモバイルの両方で見てください。

仮画像と確定素材を区別します。構造や文章の問題はこの段階で直し、内容が未確認のまま見た目だけで完成としないでください。

ワイヤーから編集画面を開く

1. ワイヤーフレームが3セクション以上あり、生成・同期が完了していることを確認します。
2. 画面下部の「エディターを開く」を押し、ページの準備が終わるまで待ちます。
3. 開いた編集画面でページ名と内容を確認します。ワイヤーフレームのHTMLがページの下書きになり、ここから画像や見た目を調整できます。

同じ企画からすでにページを作っている場合、再度の引き継ぎはその関連ページの下書きを更新することがあります。毎回別ページができる操作とは考えず、編集画面で加えた変更がある場合は、引き継ぎ前にその内容と更新先を確認してください。

開けない場合と、開いた後の確認

「エディターを開く」が無効なら、セクション数、生成・同期の状態、表示されている確認事項を見ます。保存や復元の途中は完了を待ってください。エラーが出たら文面を残し、生成・引き継ぎのトラブル解決で現在の段階を確認します。

ページが開いたら、原稿、仮画像、ボタン、順序を見直します。編集画面が開いたことは公開完了ではありません。未確認の価格や保証を残さず、操作部品も別途テストしてください。

影響の大きい問題から直す

事実の誤り、遷移先、条件の欠落を先に直し、次に文字のはみ出し、モバイル表示、見た目を調整します。対象セクションや要素と、残す内容を明示し、隣接部分への影響も確認します。

動作が必要な箇所では、設定できる部品が使われているかを確認します。静的な要素を再利用可能なコンポーネントにする作業は別の工程です。全体の再生成だけで解決すると考えないでください。

例えば対象の区画を選び、AI編集で「申込条件とリンク先は維持し、余白だけを小さくする」と伝えます。適用前後を比較し、文字とレイアウトの編集に沿って確認・保存します。

プレビューと実際のアクセスで確認する

別のメンバーに、説明を読む、ボタンを押す、入力する、戻って読むという目的の操作を試してもらいます。「きれいか」だけでなく、どこで迷ったかを記録しましょう。公開前の確認を終えたら公開URLを確認し、その後の反応を次の企画に生かします。生成の速さだけで品質を判断しないことが大切です。