カルーセル・FAQ・動的コンポーネントを作る
対象を整理して動作を指定し、生成カードとフォームの記録範囲を確認します。
標準部品か再利用コンポーネントかを選ぶ
まず、標準の部品を使うか、AIで作るかを決めます。Figma取り込みページの標準部品は、上部の「＋」からインタラクティブ部品の分類を開き、カルーセル、FAQ、タブ、フォームなどを選んで追加します。追加後に選択し、表示される設定項目とプレビューで動作を確認します。
以下では、既存の文章や画像を使って再利用可能なAIコンポーネントを作る手順を説明します。必要な動作、初期状態、後から変えたい項目を先に決めてください。見た目だけで機能が完成したと判断しないことが大切です。
ページ種別と高さの変化に合わせて選択範囲を整える
- 置き換えたい内容がある場合は、そのまとまりをキャンバスで選択します。FAQなら見出しだけでなく質問と回答、カルーセルなら必要な画像と操作要素が含まれているか確認します。
- Web取り込みページで内側の要素しか選べない場合は、選択ツールバーから親要素へ移り、対象全体を1つの範囲として選びます。複数の離れた範囲をまとめて置き換える前提にしないでください。
- 新しい内容を追加する場合は、既存部分の置換を指定せずに作成し、結果カードから挿入します。Figma取り込みページに空白の区画を用意する場合は、上部の「＋」のレイアウト分類から空白セクションを追加できます。
FAQの展開で高さが変わる場合は、後続の内容と重ならない場所を選びます。作成前の選択と生成後の操作によって挿入・置換が変わるため、適用後に位置と元の内容を必ず確認します。
件数と初期状態を明示する
- 編集画面のAI対話を開き、選択範囲の表示を確認します。新規追加なら、追加したい内容と場所を明記します。
- 「再利用可能なコンポーネントとして作成」と伝え、動作を指定します。FAQなら質問・回答、初期状態、複数展開の可否、カルーセルなら全画像、矢印・ドット、自動再生、ループを具体的に書きます。
- 後から変えたい文字や画像は、設定項目として用意するよう依頼し、送信します。
例：「この3件の質問と回答をすべて残し、最初は閉じたFAQにする。1件だけ開ける動作にし、各質問と回答を設定から変えられる再利用可能なコンポーネントにする」。生成中は完了またはエラーの表示を待ちます。
生成カードを確認して適用する
- 結果カードのプレビューで、件数、初期状態、動作、設定項目を確認します。
- 元の範囲を変更する場合は置換を選びます。ライブラリにも残す場合は、保存して置換、または保存して挿入を選びます。
- 置換が表示されなければ、元の選択範囲が残っているかを確認し、利用できる挿入操作を使います。新しい部品が正しく追加されたことを確認してから、重複した旧内容を整理します。
- ページのプレビューでFAQの開閉やカルーセルの切り替えを試し、配置と後続部分への影響を確認して保存します。
カードができただけではページへの適用は完了していません。ライブラリ保存だけ成功し、挿入が失敗した場合も、カードの案内から挿入をやり直してキャンバスを確認してください。
生成中の停止と適用後の取り消しを使い分ける
生成を中断する場合は、その生成画面の停止操作を使い、止まった状態とキャンバスの内容を確認します。結果カードから適用する方式と、生成しながら表示が変わる方式では見え方が異なるため、途中結果が保存済みとは判断しないでください。
適用した変更を戻す場合は編集画面の取り消しを使い、対象の変更が戻ったことを確認します。必要な段階で止め、以前の編集までまとめて戻さないようにしてください。再生成前に、現在残っている内容と次の指示を確かめます。
フォームの見た目と記録は別
フォームが表示され、送信ボタンを押せるだけでは、送信内容が記録されるとは限りません。標準フォーム、取り込んだHTMLフォーム、AIで作成した部品では、設定する箇所や送信先が異なります。見た目の生成だけで記録機能や外部システム連携まで完成したと考えないでください。
Figma取り込みページで標準フォームを使う場合は、上部の「＋」からインタラクティブ部品のフォームを追加し、項目と送信時の動作を設定します。ページチェックのフォーム項目で対象を確認し、公開後にテスト送信して、必要な項目が所定の保存先に届くかを確かめます。プレビューの操作だけでは記録を確認したことになりません。
分割入力、回答に応じた分岐、採点、診断結果は別々の要件です。必要な動作を列挙し、実際の送信先と合わせて確認してください。
操作して完了を確認する
PCとモバイルで、各操作、キーボード、長い回答、最後の画像、入力エラーを試します。複数ステップのフォームは編集画面では全ステップが見える場合があるため、操作の流れはプレビューで確認します。再利用はライブラリのガイドを参照し、文章だけの返信なら新版のカードを出すよう依頼してください。