画面から画面リファレンスサイト設定・管理対象: プラットフォーム管理者外部サービス連携

デザインスタジオ（ページビルダー）

トップページ・商品詳細・ヘッダー・フッターの4面を編集する、デザインスタジオのページビルダーです。

最終更新日: 2026年8月21日

ページビルダーでセクションを追加し公開確認する流れ — ページ構築の流れ。対象ページを選び、セクションを追加・並び替え・内容調整し、プレビューで確認して下書き保存・公開します。

トップページ・商品詳細・共通部分を構築する画面

ページビルダーは、トップページと商品詳細のレイアウト、および全ページ共通のヘッダーとフッターを編集する画面です。トップページと商品詳細ではセクションを組み合わせ、ドラッグ操作で並び替えながら、設定パネルで画像・文言・リンク先などを調整します。

トップページの特集更新、商品詳細の情報配置の見直し、共通ナビゲーションやフッターの変更時に使います。

管理者向けページビルダーの編集画面 — ページビルダー画面。キャンバス（プレビュー）・セクション・設定パネルとツールバーで構成されます。

画面への導線

サイドバーの「サイト設定・管理」グループから「デザインスタジオ」を開き、編集するテーマの「デザインを調整する」を選びます。編集画面上部の「ページビルダー」タブを開き、「編集する面」からトップページ・商品詳細・ヘッダー・フッターを切り替えます。

編集対象	扱う画面
トップページ	トップページ全体の構成。
商品詳細	商品詳細ページの構成。
ヘッダー	全ページ共通のヘッダーの構成。
フッター	全ページ共通のフッターの構成。

場面別の運営フロー

場面	運営の動き
対象ページを開く	「編集する面」から、トップページ・商品詳細・ヘッダー・フッターのいずれかを選びます。
セクションの編集	セクションを追加・並び替え・削除し、選択したセクションの設定パネルで画像・文言・リンクなどの内容を調整します。
表示確認	ツールバーの端末切り替え（PC / タブレット / モバイル）でレイアウトを確認します。
下書き保存・公開	変更から2秒後に自動保存が始まります。［保存中］が［保存済］へ変わったことを確認し、［このテーマを公開］の確認ダイアログで影響内容を読んでから本番へ反映します。

この画面で行うこと

目的	運営で見る内容
編集する面の選択	トップページ・商品詳細・ヘッダー・フッターから編集対象を開きます。
セクションの追加・編集	セクションを追加・並び替えし、設定パネルで内容を調整します。
端末別の確認	PC・タブレット・モバイルで見え方を確認します。
下書き保存・公開	下書きで保存し、確認後に公開して本番反映します。
ページ設定・SEO	トップページまたは商品詳細のページ設定パネルで、背景やSEOなどを調整します。

画面項目と運営上の見方

キャンバス（プレビュー）

現在の構成が実画面に近い形でプレビューされます。セクションをクリックすると設定パネルにその内容が表示されます。

セクションの追加・並び替え・削除

トップページと商品詳細では、セクションを追加し、ドラッグで並び替え、不要なものを削除できます。扱えるセクションは2つの面で異なります。ヘッダーとフッターは、それぞれの専用設定で表示項目やリンクを調整します。

設定パネル

トップページまたは商品詳細では、選択中のセクションの画像・文言・リンク先などを編集します。ページ全体の背景・SEOなどはページ設定パネルで調整します。ヘッダーとフッターを選んだときは、それぞれの共通部分に対応する項目が表示されます。

ツールバー（端末切り替え・保存・公開）

操作	内容
端末プレビュー	PC / タブレット / モバイルで表示を切り替えて確認します。
下書き保存	編集内容を下書きとして保存します（本番には未反映）。
公開	保存した内容を本番に反映します。

自動保存ステータスと復旧

上部の ［下書きあり］、［保存中］、［保存済］、［エラー］で保存状態を確認します。［エラー］の場合は ［下書き保存］を選び直し、［保存済］になるまで公開しません。保存済み設定を読み取れない場合は ［公開を 1 世代戻す］で復旧するか、ページ末尾のサポート窓口を確認します。

このテーマを公開

公開操作は1面だけでなく、選択中テーマのトップページ・ヘッダー・フッター・スタイルの保存済み内容をまとめて公開し、サイトへ適用します。［このテーマを公開しますか？］の影響欄を確認してから実行します。

モバイル幅の表示

幅768px未満では編集画面を表示せず、［デザインスタジオはPCで操作してください］を表示します。PCまたはタブレットの横向き表示で開き直します。

判断と次の行動

観察した状況	取るべき行動
プレビューと本番が一致しない	公開を実行したか確認します。下書きのままだと本番には反映されません。
モバイルで崩れる	端末プレビューをモバイルに切り替えてセクションを調整します。
セクションに出す商品を変えたい	設定パネルで対象を変更し、必要なら商品管理側の公開状態も確認します。
サイト共通部分を直したい	「編集する面」でヘッダーまたはフッターへ切り替えます。

次に見る管理画面

確認したいこと	開く管理画面
全体の配色・スタイル	同じデザインスタジオの「スタイルエディタ」タブ
セクションに表示する商品	商品管理
セクションの文言・呼称	文言管理

読み込み状態・エラー状態・空状態の見方

表示	見方
読み込み中	キャンバスの骨組みだけが表示されます。
下書き保存完了 / 公開完了	保存・公開の操作が成功したときに通知されます。
セクションがない	トップページまたは商品詳細に最初のセクションを追加します。
エラー	自動保存に失敗しています。下書き保存を選び、保存済みを確認します。
保存されている設定を読み取れませんでした。	公開を1世代戻すか、ページ末尾のサポート窓口を確認します。
デザインスタジオはPCで操作してください	画面幅が768px未満です。PCまたは横向きタブレットで開き直します。