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

デザインスタジオ（スタイルエディタ）

デザインスタジオのスタイルエディタで、プラットフォーム全体の配色・書体・ボタン・カード・画像・コンテンツ幅を調整する画面です。

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

スタイルエディタの変更が公開画面に影響する範囲 — テーマ変更の影響範囲。カラー・フォント・余白を変更する前に、公開画面と主要な管理画面で確認する箇所を把握します。

プラットフォームのスタイルを調整する画面

スタイルエディタは、プラットフォーム全体の視覚デザインを調整する画面です。配色・書体と密度・ボタン・カード・画像・コンテンツ幅のインスペクタに分かれており、変更は右側のプレビューへすぐに反映されます。

リブランディング、季節キャンペーンに合わせた配色変更、書体や余白の見直しなどに使います。変更は下書きとして保存し、プレビューで確認してから公開します。

管理者向けデザインスタジオのスタイルエディタ画面 — スタイルエディタ画面。配色・書体と密度・ボタン・カード・画像・コンテンツ幅から調整項目を開き、右側のプレビューで変更を確認できます。

画面への導線

サイドバーの「サイト設定・管理」グループから「デザインスタジオ」を開き、調整するテーマの「デザインを調整する」を選びます。編集画面上部の「スタイルエディタ」タブを開き、左側から配色などのインスペクタを選びます。

場面	入り方
配色の調整	サイト設定・管理 → デザインスタジオ → 対象テーマの「デザインを調整する」→「スタイルエディタ」→「配色」
その他のスタイル調整	「スタイルエディタ」で書体・密度、ボタン、カード、画像、コンテンツ幅の対象項目を開く

場面別の運営フロー

場面	運営の動き
配色候補の適用	「スタイルエディタ」の「配色」で配色候補を選びます。選択した配色は右側のプレビューへすぐに反映されます。
色のカスタマイズ	「配色」の「カラーのカスタマイズ」で、Primary・Accent・Surface・Text の各カラーを調整します。配色候補の初期値に戻すときは「プリセット既定に戻す」を使います。
その他のスタイル調整	「スタイルエディタ」で、書体・密度、ボタン、カード、画像、コンテンツ幅の対象項目を開いて調整します。
下書き保存・公開	変更から2秒後に自動保存が始まります。上部の［保存中］が［保存済］へ変わったことを確認し、プレビュー後に［このテーマを公開］を選びます。［このテーマを公開しますか？］の影響内容を確認して実行します。

この画面で行うこと

目的	運営で見る内容
配色候補の適用	「スタイルエディタ」の「配色」で配色候補を選びます。
色の調整	Primary・Accent・Surface・Text の各カラーを調整します。
スタイルの微調整	書体・密度、ボタン、カード、画像、コンテンツ幅の対象項目を開いて調整します。
保存・公開・復帰	下書き保存・公開を行い、状況に応じて保存前の操作取り消し、下書き破棄、1世代前の公開状態への復帰を使い分けます。

画面項目と運営上の見方

タブ切り替え

編集画面上部で「ページビルダー」と「スタイルエディタ」を切り替えます。プラットフォーム全体の見た目を調整するときは「スタイルエディタ」を選びます。

配色（配色候補とカラーのカスタマイズ）

用意された配色候補から選択できます。「カラーのカスタマイズ」では、Primary・Accent・Surface・Text の各カラーを指定します。「プリセット既定に戻す」で、選択中の配色候補の初期値へ戻せます。

書体・密度、ボタン、カード、画像、コンテンツ幅

スタイルエディタの各項目を開き、書体と余白の密度、ボタンの形状とシャドウ、カードや画像の角丸・スタイル、サイト本文の最大幅を調整します。

プレビュー

「プレビュー」で、変更を保存・公開する前に見え方を確認できます。関係者に確認してから保存・公開します。

下書き保存・公開・以前の状態へ戻す操作

操作	内容
下書き保存	編集中の内容を下書きとして保存します。
公開	保存した内容をプラットフォームに反映します。
元に戻す	保存前の直前の操作を取り消します。
この面の下書きを破棄	「その他の操作」から、編集中の下書き変更を破棄します。この操作は元に戻せません。
この面の公開を取り消す（1 世代前に戻す）	「その他の操作」から、1 世代前の公開状態に戻します。編集中の下書きも破棄されます。

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

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

テーマ公開の影響

［このテーマを公開］は、選択中テーマをサイトへ適用し、トップページ・ヘッダー・フッター・スタイルの保存済み内容をまとめて公開します。現在の公開テーマは保持され、後からテーマ一覧で再編集できます。

モバイル幅の表示

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

判断と次の行動

観察した状況	取るべき行動
まず方向性を決めたい	「スタイルエディタ」の「配色」で配色候補を選び、プレビューで確認します。
コントラストが不足している	「カラーのカスタマイズ」で配色を調整し、プレビューで読みやすさを確認します。
配色候補の初期値に戻したい	「配色」の「プリセット既定に戻す」を使います。
以前に戻したい	まだ保存していない直前の操作は「元に戻す」、編集中の下書き全体は「その他の操作」→「この面の下書きを破棄」、公開済みの内容は「その他の操作」→「この面の公開を取り消す（1 世代前に戻す）」を使います。

次に見る管理画面

確認したいこと	開く管理画面
トップページ・商品詳細・ヘッダー・フッターの構成	同じデザインスタジオの「ページビルダー」タブ
画面文言・呼称の調整	文言管理

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

表示	見方
読み込み中	タブの骨組みだけが表示されます。
保存していない変更があります	編集後に保存していない場合の警告です。保存または公開してから画面を離れます。
エラー	自動保存に失敗しています。下書き保存を実行し、保存済みになったことを確認します。
保存されている設定を読み取れませんでした。	公開を1世代戻すか、ページ末尾のサポート窓口を確認します。
デザインスタジオはPCで操作してください	画面幅が768px未満です。PCまたは横向きタブレットで開き直します。
読み込み失敗	時間をおいて再読み込みします。続く場合は運営チームに共有します。