複数のシナリオを1ページにまとめる(タブ切替)
「振袖」「袴」「留袖・訪問着」など複数の試着シナリオを、1枚のページにまとめて表示できます。ページ上部に切替ボタン(タブ)が並び、お客様がボタンを押すと同じ枠の中で試着シナリオが切り替わります。シナリオごとにページを何枚も作る必要はありません。
仕組みはシンプルで、1つの埋込タグ(1トークン)で複数シナリオを出し分けます。ページの追加・管理がラクになり、お客様も1ページの中で目的の着物を選べます。
どんなときに使うか
- 振袖・袴・留袖など、取り扱いが複数あり、まとめて見せたいとき。
- シナリオごとにページを分けると管理が大変に感じるとき。
- お客様に1ページで選んでもらいたいとき(回遊しやすく離脱が減ります)。
逆に、SEOや広告の着地先として「振袖専用ページ」を独立させたい場合は、シナリオごとにページを分ける従来の方法も併用できます(両方同時に運用しても問題ありません)。
まとめタグを発行する手順
- 管理画面の左メニューから「埋込タグ」を開きます。
- 右上の「新規発行」を押します。
- 「含めるシナリオ」でまとめたいシナリオを複数チェックします(例: 振袖・袴・留袖訪問着)。複数選ぶと、1つのタグで1ページにまとめられます。
- 「発行する」を押します。
- 発行後の画面で埋込タイプを選びます。
- タブ式(常時表示): ページ上部に各シナリオの切替ボタンが並び、下に試着画面が表示されます。最初は先頭のシナリオが開きます。
- FAB式(チャット風): 画面右下の浮動ボタンを押すと、ポップアップ内でシナリオを切り替えられます(ページを試着で占有したくないときに便利)。
- 表示されたまとめ用タグを「コピー」で控えます。
※ まとめタグは「特定のシナリオに固定していないトークン」を使います。すでに「振袖専用」などシナリオを固定して発行したトークンでは切替できないため、まとめ用には新しく発行してください。
自社サイト(WordPress)に貼る手順
- WordPressの管理画面で、まとめページにしたい固定ページの「編集」を開きます(新規ページでもOK)。
- 「ブロックを追加」から「カスタムHTML」を選びます。
- コピーしたまとめタグを貼り付けて「更新」を押します。
- ページを開き、上部のタブ(振袖/袴/留袖訪問着など)を押して切り替わることを確認します。
スマホで小さく表示されてしまうとき
まれに、貼り付けたページで試着画面がスマホだけ極端に小さく表示されることがあります。これは文字サイズの問題ではなく、そのページに画面幅の設定(viewport)が無いことが原因です。AI STUDIOのまとめタグ(タブ式・FAB式)には自動で画面幅を補正する仕組みが入っているため通常は起きませんが、もし小さいままの場合は、ページのHTMLの先頭に次の1行を追加してください。
<meta name="viewport" content="width=device-width, initial-scale=1">
通常の固定ページ(テーマ標準のページ)にはこの設定が最初から入っているので、追加は不要です。専用テンプレートや特殊な作りのページのときだけ確認してください。
うまくいかないときの確認
- タブを押しても切り替わらない: シナリオ固定のトークンを使っていないか確認してください。まとめ用は「シナリオ未固定」で発行したトークンが必要です。
- タブが1つしか出ない: 発行時に複数シナリオをチェックできているか確認してください。
- 枠の高さが足りない/余る: 発行時のサイズ(大・中・小)を変えて再発行できます。
困ったときは
解決しない場合は、ヘルプ右下のAIチャットにご相談いただくか、サポートまでお問い合わせください。どのページに・どのシナリオをまとめたいかをお伝えいただくと、最適な設置方法をご案内できます。