KOMUGI サポート
テーマの設定手順と、よくある質問をまとめています。ここで解決しないことは、ページ末尾のお問い合わせからお知らせください。
初期設定の6ステップ
BASE 管理画面の「デザイン」→「デザイン編集」から行います。上から順に進めれば、その日のうちに公開できます。
ロゴ
「基本設定」でロゴ画像かロゴテキストを設定します。ロゴはヘッダーの左、ナビは右に置かれます。画像は高さ 44px に収まるよう縮小されるので、横長の画像がきれいに出ます。長い店名は 3 行まで折り返します。
背景のトーン
「基本設定」の背景色を決めたら、「テーマ別設定」の「背景のトーン」を合わせます。既定の背景は白ですが、生成り（#FFFAF2 前後）にすると小麦色との相性がよくなります。暗い背景にしたのに罫線が見えないときは、ここが「明るい背景向け」のままです。
色を4つ
アクセント・小麦色・ボタン・ボタンの文字色。既定はアクセントが焼き色（#C4763A）、小麦色が #F6EBD8、ボタンがこげ茶（#3A2A1E）です。アクセントはアレルゲンの印・発送日の丸・小見出しに使われます。小麦色は商品写真の下・季節のお菓子のパネル・アレルゲン表の枠・ドロワーメニューの面になります（下の「小麦色の選び方」参照）。
メインビジュアル
既定は「文章と写真を横に並べる」で、写真は横 1600 × 縦 1200px（4:3）を推奨。「全幅の写真に文字を重ねる」「文字だけ」にも切り替えられます。見出しは読点「、」の位置で折り返すので、「焼きたてを、いちばんおいしいうちに。」のように読点を入れると、きれいに 2 行になります。句読点を使わずに改行したいときは、切りたい位置に縦棒「|」を入れてください（例：「森のおやつ工房|こむぎのお菓子」）。「|」は表示されません。
発送日
月〜日のうち発送する曜日を ON にします。補足には「前日の正午までのご注文分をお届け」のような締切と、クール便の案内を。発送日を決めていない店は「発送日の一覧を表示する」を OFF にします。
季節のお菓子
限定品の見出し・本文・写真・ボタンを設定します。ボタンのリンク先には、予約販売 App で作った商品ページか、季節限定のカテゴリページの URL を。限定品がない時期は見出しを空欄にすると、パネルごと消えます。
デザイン設定の一覧
「テーマ別設定」に並ぶ項目です。すべて初期値のままでも動きますが、店に合わせて書き換えると印象が大きく変わります。画像の初期値はすべて空欄です。
全体
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| アクセントカラー | 色 | #C4763A（アレルゲンの印・小見出し・強調色） |
| 小麦色 | 色 | #F6EBD8（商品写真の下・ドロワーメニュー・パネルの背景色。背景色より少し濃い色） |
| ボタンの色 | 色 | #3A2A1E |
| ボタンの文字色 | 色 | #FFFFFF |
| 背景のトーン | 選択 | 明るい背景向け / 暗い背景向け |
| 見出しの書体 | 選択 | 丸ゴシック（やわらかい） / 明朝（クラシック） |
| 商品一覧の列数 | 選択 | 3列 / 4列 / 2列 |
| 商品画像の比率 | 選択 | 正方形 1:1 / やや縦長 4:5 / 縦長 3:4 |
| 商品カードの様式 | 選択 | 小麦色を敷く / 写真のみ |
| ヘッダーを固定する | ON/OFF | ON |
| 残り1点に「残り1点」を表示 | ON/OFF | ON |
トップページ
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| メインビジュアルを表示・レイアウト・画像・文言 | ON/OFF / 選択 / 画像 / 文章 | ON。横に並べる（既定） / 全幅の写真に文字を重ねる / 文字だけ。画像は横 1600 × 縦 1200px を推奨 |
| 種類から探すを表示・見出し | ON/OFF / 文章 | ON（商品検索App利用時） |
| 種類1〜6の名前 | 文章 | 焼き菓子 / パン / ジャム / ギフト / 冷凍 / 詰め合わせ。空欄の種類は非表示 |
| 季節のお菓子を表示・小見出し・見出し・本文・ボタン・画像 | ON/OFF / 文章 / 画像 | ON。初期値あり。見出しが空欄なら欄ごと非表示。画像は横 1200 × 縦 800px を推奨 |
| カテゴリの一覧を表示 | ON/OFF | ON（カテゴリ管理App利用時） |
| 発送日の一覧を表示・見出し | ON/OFF / 文章 | ON。見出しの初期値は「発送日」 |
| 月曜〜日曜に発送する | ON/OFF × 7 | 初期値は火・木・土が ON。全部 OFF なら欄ごと非表示 |
| 発送日の補足 | 文章 | 初期値あり（締切とクール便の案内）。空欄で非表示 |
| 召し上がり方を表示・見出し・ステップ1〜3 | ON/OFF / 文章 | ON。初期値あり（冷蔵庫へ / 温める / 早めに）。タイトルが空欄のステップは非表示 |
| ストーリーを表示・画像・見出し・本文 | ON/OFF / 画像 / 文章 | ON。初期値あり。画像は横 1200 × 縦 900px を推奨 |
| マルシェ・イベントの予定を表示・見出し・予定1〜3・補足 | ON/OFF / 文章 | ON。初期値あり。日付が空欄の行は非表示 |
| サービス案内を表示・案内1〜3 | ON/OFF / 文章 | ON。初期値あり（配送 / ギフト・のし / 製造） |
| Instagram の案内を表示 | ON/OFF | ON（SNS設定時） |
| メールマガジンの案内文 | 文章 | 初期値あり（メールマガジンApp利用時） |
About
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| About ページの画像 | 画像 | 横 1200px 以上の横長を推奨 |
商品ページ
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| 商品説明からアレルゲン表・配送バッジ・表を自動生成 | ON/OFF | ON |
| 原材料とアレルギーについて（見出し・本文） | 文章 | 初期値あり（同じ工房で製造、微量混入の可能性）。見出しが空欄なら非表示 |
| 賞味期限と保存方法（見出し・本文） | 文章 | 初期値あり（保存料不使用、期限の目安、開封後） |
| 配送について（見出し・本文） | 文章 | 初期値あり（発送日の朝に製造、常温とクール便、夏季、食品のため返品不可） |
| ギフト・のし（見出し・本文・画像） | 文章 / 画像 | 初期値あり |
| つくり手と製造について（見出し・本文） | 文章 | 初期値あり（菓子製造業の許可、個体差、保存料不使用） |
その他
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| フッターの一言 | 文章 | 空欄 |
商品説明の書き方
商品説明の中に次のような行を書くと、アレルゲン表・配送バッジ・スペック表が商品ページに作られ、その行は本文から消えます。行の順番は自由で、無い行は出ません。
原材料：小麦粉（国産）、発酵バター、砂糖、卵、塩 アレルゲン：小麦、卵、乳 内容量：12枚 賞味期限：製造日から14日 保存方法：直射日光・高温多湿を避けて常温で 配送：常温 製造者：森のおやつ工房 こむぎ
アレルゲン表になる行
- 見出し語：アレルゲン / 特定原材料 / アレルギー物質 / アレルギー。「アレルゲン：小麦、卵、乳」のように書きます。
- 8 品目：えび / かに / くるみ / 小麦 / そば / 卵 / 乳 / 落花生。ピーナッツ → 落花生、バター・牛乳・チーズ・生クリーム・ヨーグルト → 乳、薄力粉・強力粉 → 小麦 のように言い換えも判定します。
- 使っていないとき：「アレルゲン：なし」「アレルゲン：不使用」と書くと、8 品目が薄く並び「特定原材料 8 品目は使用していません」と表示されます。
- 書き忘れたとき：「原材料：」の行から 8 品目を判定し、「※原材料名から判定しています」を添えます。正確を期すため、アレルゲンの行を書くことをおすすめします。
配送バッジになる行
「配送：常温」「配送：冷蔵」「配送：冷凍」。見出し語は 配送 / 配送区分 / 温度帯 / お届け / 発送方法 も使えます。本文に「冷凍便でお届けします」「クール便（冷蔵）」と書いてあるだけでも読み取ります（その行は本文に残ります）。
スペック表になる見出し語
原材料 / 原材料名 / 内容量 / 個数 / 入数 / サイズ / 賞味期限 / 消費期限 / 保存方法 / 保存 / 添加物 / 製造者 / 製造 / 製造日 / 発送 / 発送日 / 納期 / 栄養成分 / カロリー / 熱量 / 召し上がり方 / 食べ方 / 温め方 / セット内容 / 内容 / 注意 / のし / ラッピング
全角・半角のコロン（：と :）どちらでも構いません。表にしたくない行は、見出し語の後にコロンを置かなければそのまま本文として表示されます。1行が120文字を超える行は本文のまま残ります。
食品表示について：テーマの表示は商品ページの案内で、商品に貼るラベル（食品表示）の代わりにはなりません。名称・原材料名・添加物・内容量・期限・保存方法・製造者などの表示は、食品表示法にしたがって作成してください。
発送日・季節のお菓子
発送日
「月曜に発送する」〜「日曜に発送する」の 7 つを ON/OFF するだけです。ON の曜日が焼き色の丸、OFF の曜日は点線の丸になります。補足には締切（「前日の正午までのご注文分」など）と、クール便の案内を書いてください。週によって変わるときは、基本の曜日を ON にしておき、変わる週は「お知らせバナー App」で全ページの上部に案内を出します。
季節のお菓子
- 限定品を予約販売 App で作るか、「季節限定」のカテゴリを作って商品を入れます。
- ショップの画面でその商品かカテゴリを開き、アドレスバーの URL をコピーします。
- 「季節のお菓子のボタンのリンク先URL」に貼り付け、見出し・本文・写真を設定します。
- 終わったら、見出しを空欄にするか「季節のお菓子を表示」を OFF にします。
「種類から探す」の各チップは、商品検索 App の検索語として使われます。「冷凍」で出てほしい商品には、商品名か商品説明に「冷凍」と書いておいてください（「配送：冷凍」の行があれば含まれます）。
のし・ラッピングを注文時に選んでもらう
テーマの「ギフト・のし」の案内は文章と写真だけです。お客さまに注文時に選んでもらうには、BASE の「商品オプション App」を導入して、次のようなオプションを作ります。
- 商品オプション App を導入し、「選択式」のオプションを作成。名前を「のし・ラッピング」、選択肢を「なし」「ラッピング（無料）」「のし『内祝』」「のし『御礼』」のように登録します。
- 「文字入れ式」のオプションを作成。名前を「メッセージカード」や「のしの名入れ」、文字数上限を 30 文字などに設定します。
- オプションを対象の商品に適用します。商品ページの数量の下に選択欄が表示されます。
テーマの「ギフト・のし」の本文は、この手順に合わせて「ご注文時にオプションをお選びください」のように書き換えてください。既定文はそうなっています。
小麦色の選び方
「小麦色」は商品一覧と商品ページの写真の下、季節のお菓子のパネル、アレルゲン表の枠、ドロワーメニュー、カテゴリのドロップダウンに使われます。
- 明るい背景のとき：背景色より少し濃いクリーム色（例：背景 #FFFAF2 なら小麦色 #F6EBD8）。白い布で撮った写真が多い店は、もう少し白に近い #FAF2E6 でも合います。
- 暗い背景のとき：背景より少し明るいこげ茶（例：背景 #261C14 なら小麦色 #352A20）。「背景のトーン」も「暗い背景向け」にしてください。アクセントは明るい焼き色（#E4A464 前後）にすると、アレルゲンの印と発送日の丸が読みやすくなります。
- ドロワーメニューとパネルもこの色の面になるので、文字色と近い色は避けてください。
写真の撮り方
- 白い布か紙の上で：小麦色に馴染みます。焼き色は斜めからの自然光で撮ると、いちばんおいしそうに写ります。
- 1枚目は全体を中央に：商品一覧は 1:1（設定で 4:5 / 3:4 に変更可）に切り抜かれるので、お菓子を中央に置いて周りに少し余白を。
- 2枚目以降は断面と包装：パソコンの商品ページでは写真が縦に並びます。全体 → 断面 → 箱や袋に入った状態、の順に並べると、贈りものを選ぶ人にも伝わります。
よくある質問
アレルゲン表が出ません
「商品説明からアレルゲン表・配送バッジ・表を自動生成」が ON になっているか、「アレルゲン：」か「原材料：」の行があるかを確認してください。見出し語の直後にコロン（：または :）が必要です。
「原材料名から判定」の注記を消したい
「アレルゲン：小麦、卵、乳」のように書くと、その内容が優先されて注記は消えます。特定原材料を使っていない商品は「アレルゲン：なし」と書いてください。
配送バッジが出ません／違う区分になります
「配送：冷凍」のように 1 行で書いてください。本文中の「冷凍便」「クール便」も読み取りますが、1 つの商品説明に複数の言葉があるときは最初に見つかったものになります。迷ったら「配送：」の行を先頭近くに書いてください。
ロゴ画像の推奨サイズは？
高さ 44px に縮小して表示されます。横長なら高さ 88px（Retina対応）以上を用意してください。背景が透明な PNG がきれいに出ます。
暗い背景にしたら罫線や文字が見えなくなりました
「テーマ別設定」→「背景のトーン」を「暗い背景向け」にしてください。「小麦色」は背景より少し明るいこげ茶に、「ボタンの色」は明るい色に、「ボタンの文字色」は暗い色に、「アクセント」は明るい焼き色に変えてください。
メインビジュアルの見出しが変なところで改行されます
見出しは読点「、」と句点「。」の位置で折り返します。「焼きたてを、いちばんおいしいうちに。」のように、切れてほしい位置に読点を入れてください。句読点を使いたくないときは、切りたい位置に縦棒「|」（全角の「｜」でも可）を入れると、その位置で必ず改行します。「|」は画面には表示されません。
夏だけ冷蔵便にしたい
商品説明の「配送：」を夏の間だけ「冷蔵」に書き換えるか、「配送：常温（6〜9月は冷蔵）」のように書いてください（この場合はバッジが「常温」になり、本文にも残ります）。共通の「配送について」にも夏季の案内を書いておくと安心です。
HTML を直接編集してもいいですか？
編集はできますが、その時点でテーマの自動更新が止まり、以後の修正が反映されなくなります。設定画面で対応できることは設定画面で行うことをおすすめします。
商品が25件以上あるとき、一覧はどうなりますか？
トップページには最初 24 件を表示し、「もっと見る」を押すと続きが追加されます。商品を開いて戻ったときは、追加読み込み済みの状態とスクロール位置に戻ります。
更新履歴
- 1.0.0
- 初版。BASE デザインマーケットへ申請準備中。