SAVON サポート
テーマの設定手順と、よくある質問をまとめています。ここで解決しないことは、ページ末尾のお問い合わせからお知らせください。
初期設定の6ステップ
BASE 管理画面の「デザイン」→「デザイン編集」から行います。上から順に進めれば、その日のうちに公開できます。
ロゴ
「基本設定」でロゴ画像かロゴテキストを設定します。ロゴはヘッダーの左、ナビは右に置かれます。画像は高さ 44px に収まるよう縮小されるので、横長の画像がきれいに出ます。テキストは英字（Jost・大文字）で表示され、長い店名は折り返します。
背景のトーン
「基本設定」の背景色を決めたら、「テーマ別設定」の「背景のトーン」を合わせます。既定の背景は白です。暗い背景にしたのに罫線が見えないときは、ここが「明るい背景向け」のままです。
色を4つ
アクセント・紙の色・ボタン・ボタンの文字色。既定はアクセントがくすんだ水色（#6F8FA6）、紙の色が白に近いグレー（#EEF2F1）、ボタンが墨色（#2E3436）です。アクセントは精油チップの点・ノートの見出し・タイプのバッジに使われます。紙の色は商品写真の下・パネル・全成分の枠・ドロワーメニューの面になります。
メインビジュアル
横 2000px 以上の横長の写真を1枚（工房、原料、熟成棚）。小見出し（英字推奨）、見出し、説明文、ボタンの文言とリンク先を書き換えます。3 レイアウトから選べます。見出しは読点「、」の位置で折り返します。句読点を使わずに改行したいときは、切りたい位置に縦棒「|」を入れてください（例：「植物の油と精油で|ひとつずつ作る石けん」）。「|」は表示されません。
季節の限定
小見出し、期間や数量（「10.1 – 11.30 / 100個限定」）、見出し、本文、写真、ボタンの文言とリンク先を設定します。リンク先には限定商品のページか、そのカテゴリページの URL を。限定がない時期は見出しを空欄にすると、パネルごと消えます。
主な原料 3 枚
正方形の写真 3 枚と、原料の名前、説明を設定します。産地や選んだ理由を店の言葉で。名前が空欄のカードは消え、3 つとも空欄なら見出しごと消えます。
デザイン設定の一覧
「テーマ別設定」に並ぶ項目です。すべて初期値のままでも動きますが、店に合わせて書き換えると印象が大きく変わります。画像の初期値はすべて空欄です。
全体
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| アクセントカラー | 色 | #6F8FA6（精油チップの点・ノートの見出し・タイプのバッジ） |
| 紙の色 | 色 | #EEF2F1（商品写真の下・パネル・全成分の枠・ドロワーメニューの背景色） |
| ボタンの色 | 色 | #2E3436 |
| ボタンの文字色 | 色 | #FFFFFF |
| 背景のトーン | 選択 | 明るい背景向け / 暗い背景向け |
| 見出しの書体 | 選択 | ゴシック（既定） / 明朝 |
| 商品一覧の列数 | 選択 | 3列（既定） / 4列 / 2列 |
| 商品画像の比率 | 選択 | 正方形 1:1（既定） / やや縦長 4:5 / 縦長 3:4 |
| 商品カードの様式 | 選択 | 紙の色を敷く（既定） / 写真のみ |
| ヘッダーを固定する | ON/OFF | ON |
| 残り1点に「残り1点」を表示 | ON/OFF | ON |
トップページ
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| メインビジュアルを表示・レイアウト・画像・文言 | ON/OFF / 選択 / 画像 / 文章 | ON。画像は横 2000 × 縦 1200px を推奨 |
| 香りから探すを表示・見出し・香り1〜6の名前 | ON/OFF / 文章 | ON（商品検索App利用時）。ラベンダー / 柑橘 / ハーブ / ウッディ / 無香料 / ギフト。空欄の香りは非表示 |
| 季節の限定を表示・小見出し・期間・見出し・本文・ボタン・画像 | ON/OFF / 文章 / 画像 | ON。初期値あり。見出しが空欄なら欄ごと非表示 |
| カテゴリの一覧を表示 | ON/OFF | ON（カテゴリ管理App利用時） |
| 主な原料を表示・見出し・原料1〜3の写真・名前・説明 | ON/OFF / 画像 / 文章 | ON。初期値は オリーブ油 / シアバター / 精油。名前が空欄のカードは非表示 |
| 石けんができるまでを表示・見出し・ステップ1〜3 | ON/OFF / 文章 | ON。初期値あり。タイトルが空欄のステップは非表示 |
| ストーリーを表示・画像・見出し・本文 | ON/OFF / 画像 / 文章 | ON。初期値あり |
| ワークショップ・出店の予定を表示・見出し・予定1〜3・補足 | ON/OFF / 文章 | ON。初期値あり。日付が空欄の行は非表示 |
| サービス案内を表示・案内1〜3 | ON/OFF / 文章 | ON。初期値あり（使い方と保存 / パッチテスト / 配送とギフト） |
| Instagram の案内を表示 | ON/OFF | ON（SNS設定時） |
| メールマガジンの案内文 | 文章 | 初期値あり（メールマガジンApp利用時） |
About
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| About ページの画像 | 画像 | 横 1200px 以上の横長を推奨 |
商品ページ
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| 商品説明から一覧・チップ・バッジ・表を自動生成 | ON/OFF | ON |
| 手作り石けんについて（見出し・本文） | 文章 | 初期値あり（製法、無添加、色や形の違い、ソーダ灰）。見出しが空欄なら非表示 |
| 使い方と保存（見出し・本文） | 文章 | 初期値あり |
| パッチテストと注意（見出し・本文） | 文章 | 初期値あり（腕の内側で試す、合わないときの交換、妊娠中の方への注意） |
| 配送（見出し・本文） | 文章 | 初期値あり（3営業日、クール便） |
| ギフトラッピング（見出し・本文・画像） | 文章 / 画像 | 初期値あり |
その他
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| フッターの一言 | 文章 | 空欄 |
商品説明の書き方
商品説明の中に次のような行を書くと、タイプのバッジ・精油のチップ・香りのノート・全成分の一覧・スペック表が商品ページに作られ、その行は本文から消えます。行の順番は自由で、無い行は出ません。
タイプ：石けん 精油：ラベンダー、ゼラニウム トップノート：ラベンダー ミドルノート：ゼラニウム ラストノート：ベンゾイン 全成分：オリーブ果実油、ヤシ油、パーム油、水、水酸化Na、シア脂、ヒマシ油、ラベンダー油、ニオイテンジクアオイ油 内容量：約 90g 製法：コールドプロセス 熟成：6週間 使用期限：製造から1年（未開封） 保存：直射日光と高温多湿を避けて
バッジ・チップ・ノート・一覧になる行
- タイプ：12 文字までの値がそのままバッジになります（石けん / バスソルト / バーム / スプレー / 精油 / ギフト など）。見出し語は タイプ / 種類 / 種別。
- 精油：「ラベンダー、ゼラニウム」のように読点・カンマ・スラッシュ・中点で区切ると、ひとつずつチップになります。見出し語は 精油 / エッセンシャルオイル / 香料 / 香り。「香り：無香料」もチップです。16 個まで。
- トップノート：ミドルノート：ラストノート：3 行が Top / Middle / Last の香りのノートになります。見出し語は トップ（ノート）/ ミドル（ノート）/ ハートノート / ラスト（ノート）/ ベース（ノート）。無い段は飛ばします。
- 全成分：読点・カンマ・スラッシュ・中点で区切って書くと、中点でつないだ一覧になります。見出し語は 全成分 / 成分 / 原材料 / 原料。INCI 名（英語）でも同じです。600 文字まで。
スペック表になる見出し語
内容量 / 容量 / 重さ / 重量 / サイズ / 寸法 / 使用期限 / 期限 / 保存 / 保存方法 / 製造日 / 製造 / 製法 / 熟成 / 使い方 / 使用方法 / 対象 / おすすめ / セット内容 / 内容 / 発送 / ラッピング / 注意 / 品番 / 原産 / 産地 / 香りの系統 / 香りの強さ / 持続
全角・半角のコロン（：と :）どちらでも構いません。表にしたくない行は、見出し語の後にコロンを置かなければそのまま本文として表示されます。1行が160文字を超える行は本文のまま残ります。
薬機法の表現の目安
手作り石けんや化粧品類の販売には、薬機法（医薬品医療機器等法）の表現のきまりがあります。テーマは表示を整えるだけで、適法性は保証できません。目安として次の点にご注意ください。詳しくは所轄の薬務課や専門家にご相談を。
- 効能を書かない：「保湿」「美白」「ニキビに」「アトピーに」「肌が整う」「アンチエイジング」などの効果・効能は、化粧品の製造販売業の許可と、化粧品として認められた範囲の表現が必要です。許可のない店は「雑貨」として、効能を書かずに売ります。
- 書けること：原料と産地、製法、香り、泡立ち、色や形、使い方、保存方法、使用期限、注意事項。「オリーブ油をたっぷり使いました」「ラベンダーの精油だけの香りです」のように、事実を書きます。
- お客さまの声にも注意：レビューや Blog で「肌荒れが治った」といった表現を引用すると、店の広告とみなされることがあります。
- 既定の案内文：テーマの「手作り石けんについて」「使い方と保存」「パッチテストと注意」の既定文は、効能を書かない範囲にしてあります。書き換えるときも同じ範囲でお願いします。
香りから探す・季節の限定
香りから探す
香りの名前は、商品検索 App の検索語として使われます。押すと、商品名か商品説明にその言葉を含む商品が並びます。商品説明に「精油：ラベンダー」「香りの系統：柑橘」のように書いておくと、香りから探せるうえ、チップやスペック表にも入ります。香りの名前は 6 つまで自由に変えられ、空欄にすると消えます。
季節の限定
- 限定商品を登録し、在庫数を限定数にします。複数あるならカテゴリ「季節の限定」にまとめます。
- その商品ページかカテゴリページの URL をコピーし、テーマ別設定の「ボタンのリンク先URL」に貼り付けます。
- 期間欄に「10.1 – 11.30 / 100個限定」のように書き、見出しと本文、写真を設定します。
- 終わったら、見出しを空欄にするか「季節の限定を表示」を OFF にします。
メッセージカードを注文時に受ける
テーマの「ギフトラッピング」の案内は文章だけです。お客さまに注文時に選んでもらうには、BASE の「商品オプション App」を導入して、次のようなオプションを作ります。
- 「選択式」のオプションを作成。名前を「ラッピング」、選択肢を「なし」「紙の箱 + 麻紐（無料）」「ギフトボックス（+300円）」のように登録します。
- 「文字入れ式」のオプションを作成。名前を「メッセージカードの文面」、文字数上限を 60 文字などに設定します。
- オプションを対象の商品に適用します。商品ページの数量の下に選択欄が表示されます。
紙の色の選び方
「紙の色」は商品一覧と商品ページの写真の下、季節の限定のパネル、精油の枠、主な原料の写真の下、ドロワーメニュー、カテゴリのドロップダウンに使われます。
- 明るい背景のとき：背景色より少し濃い、白に近いグレー（例：背景 #FFFFFF なら紙の色 #EEF2F1）。生成りの背景なら、紙の色も少し暖かい #F0EEE8 に。
- 暗い背景のとき：背景より少し明るい青みのグレー（例：背景 #1E2426 なら紙の色 #2B3336）。アクセントは明るい水色（#9DB8CB 前後）、ボタンは明るい色、ボタンの文字色は暗い色に。「背景のトーン」も「暗い背景向け」にしてください。
- ドロワーメニューとパネルもこの色の面になるので、文字色と近い色は避けてください。
写真の撮り方
- 白い背景で、寄りすぎずに：白い紙やタイルの上に置き、窓を横にして撮ります。石けんは断面や表面の質感が魅力なので、1枚目は全体、2枚目に寄りを。
- 1枚目は正方形で：商品一覧の既定は正方形です。石けん 1 個を中央に、周りに余白を残して。紙の色を敷くので、背景が少し違っても揃って見えます。
- 2枚目以降は、断面・泡・原料：パソコンの商品ページでは写真が縦に並びます。全体 → 断面や表面の寄り → 泡立てたところ → 原料や包装、の順に並べると、香りと使い心地が想像できます。
よくある質問
全成分の一覧が出ません
「商品説明から一覧・チップ・バッジ・表を自動生成」が ON になっているか、「全成分：」のあとにコロン（：または :）があるかを確認してください。600 文字を超えると本文のまま残ります。
香りのノートが 1 行しか出ません
書いた段だけが表示されます。3 段すべて出すには「トップノート：」「ミドルノート：」「ラストノート：」の 3 行を書いてください。「ベースノート：」は「ラスト」として扱います。
タイプのバッジが出ません
「タイプ：」の値が 12 文字を超えると本文に残ります。「タイプ：コールドプロセス石けん」のような長い値は「製法：コールドプロセス」と分けて書いてください。
夏場のバームの発送はどうすれば？
BASE の「送料詳細設定 App」でクール便の配送方法を作り、商品ごとに割り当てます。テーマの「配送」の案内文に、夏場はクール便を選べることを書いておきます。既定文はそうなっています。
ロゴ画像の推奨サイズは？
高さ 44px に縮小して表示されます。横長なら高さ 88px（Retina対応）以上を用意してください。背景が透明な PNG がきれいに出ます。
暗い背景にしたら罫線や文字が見えなくなりました
「テーマ別設定」→「背景のトーン」を「暗い背景向け」にしてください。「紙の色」は背景より少し明るい青みのグレーに、「ボタンの色」は明るい色に、「ボタンの文字色」は暗い色に、「アクセント」は明るい水色に変えてください。
メインビジュアルの見出しが変なところで改行されます
見出しは読点「、」と句点「。」の位置で折り返します。「植物の油と精油で、ひとつずつ作る石けん。」のように、切れてほしい位置に読点を入れてください。句読点を使いたくないときは、切りたい位置に縦棒「|」（全角の「｜」でも可）を入れると、その位置で必ず改行します。「|」は画面には表示されません。
HTML を直接編集してもいいですか？
編集はできますが、その時点でテーマの自動更新が止まり、以後の修正が反映されなくなります。設定画面で対応できることは設定画面で行うことをおすすめします。
商品が25件以上あるとき、一覧はどうなりますか？
トップページには最初 24 件を表示し、「もっと見る」を押すと続きが追加されます。商品を開いて戻ったときは、追加読み込み済みの状態とスクロール位置に戻ります。
更新履歴
- 1.0.0
- 初版。BASE デザインマーケットへ申請準備中。