WA サポート
テーマの設定手順と、よくある質問をまとめています。ここで解決しないことは、ページ末尾のお問い合わせからお知らせください。
初期設定の6ステップ
BASE 管理画面の「デザイン」→「デザイン編集」から行います。上から順に進めれば、その日のうちに公開できます。
ロゴ
「基本設定」でロゴ画像かロゴテキストを設定します。ロゴはヘッダーの左、ナビは右に置かれます。画像は高さ 44px に収まるよう縮小されるので、横長の画像がきれいに出ます。テキストは明朝で字間を広めに表示され、長い店名は折り返します。
背景のトーン
「基本設定」の背景色を決めたら、「テーマ別設定」の「背景のトーン」を合わせます。既定の背景は白ですが、生成り（#FBF9F4 前後）にすると紙の色との相性がよくなります。暗い背景にしたのに罫線が見えないときは、ここが「明るい背景向け」のままです。
色を4つ
アクセント・紙の色・ボタン・ボタンの文字色。既定はアクセントが朱色（#B33E2C）、紙の色が生成り（#F3EFE7）、ボタンが墨（#2B2826）です。アクセントはアレルゲンの点灯・発送日の丸・小見出しに使われます。紙の色は商品写真の下・季節の菓子のパネル・淹れ方のタイル・ドロワーメニューの面になります。
メインビジュアル
横 2000px 以上の横長の写真を1枚（餡を炊く鍋、菓子を並べたところ、茶畑）。小見出しはパソコンで右端に縦書きになるので、「季節の和菓子と日本茶」のような短い言葉を。見出しは読点「、」の位置で折り返します。句読点を使わずに改行したいときは、切りたい位置に縦棒「|」を入れてください（例：「その日の朝に|餡を炊いています」）。「|」は表示されません。
季節の菓子
小見出し、時期（「霜降 10.23 – 11.6」のような節気や販売期間）、見出し、本文、写真、ボタンの文言とリンク先を設定します。リンク先には季節限定の商品ページかカテゴリページの URL を。売り終わったら見出しを空欄にすると、パネルごと消えます。
発送日
作る曜日だけを ON にします。丸が朱色に点灯し、それ以外は点線の丸になります。補足文に「前日の正午までのご注文分をお送りします」「お茶と茶器は毎日発送します」のような条件を書いておくと、問い合わせが減ります。
デザイン設定の一覧
「テーマ別設定」に並ぶ項目です。すべて初期値のままでも動きますが、店に合わせて書き換えると印象が大きく変わります。画像の初期値はすべて空欄です。
全体
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| アクセントカラー | 色 | #B33E2C（アレルゲンの点灯・発送日の丸・小見出し） |
| 紙の色 | 色 | #F3EFE7（商品写真の下・パネル・淹れ方のタイル・ドロワーメニューの背景色） |
| ボタンの色 | 色 | #2B2826 |
| ボタンの文字色 | 色 | #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利用時） |
| 発送日を表示・見出し・曜日7つ・補足 | 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 |
| 原材料とアレルギーについて（見出し・本文） | 文章 | 初期値あり（同じ工房での製造、8品目の記載場所）。見出しが空欄なら非表示 |
| 賞味期限と保存方法（見出し・本文） | 文章 | 初期値あり（生菓子・羊羹・最中・お茶の目安） |
| お茶の淹れ方と保存（見出し・本文） | 文章 | 初期値あり（煎茶・二煎目・ほうじ茶、開封後の保存） |
| 配送について（見出し・本文） | 文章 | 初期値あり（冷蔵便と常温便、送料無料、返品不可） |
| 熨斗と包装（見出し・本文・画像） | 文章 / 画像 | 初期値あり（表書きの種類、名入れ、仏事） |
その他
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| フッターの一言 | 文章 | 空欄 |
商品説明の書き方
商品説明の中に次のような行を書くと、アレルゲンの表・配送のバッジ・淹れ方のタイル・スペック表が商品ページに作られ、その行は本文から消えます。行の順番は自由で、無い行は出ません。
原材料名：小豆（北海道産）、栗（丹波産）、砂糖、小麦粉、葛粉 アレルゲン：小麦 配送：冷蔵 内容量：1 本（約 300g） 賞味期限：製造日から 7 日 保存：冷蔵庫で保存し、食べる 30 分前に常温に 発送日：火曜・金曜 熨斗：対応（掛け紙） 【お茶の場合】 茶種：煎茶 茶葉：5g 湯量：200ml 湯温：70℃ 時間：1分30秒 煎：3 煎
表・バッジ・タイルになる行
- アレルゲン：「小麦、卵」のように書くと、8品目（えび・かに・くるみ・小麦・そば・卵・乳・落花生）のうち該当するものが点灯します。「なし」「不使用」と書けば全部消えて「使用していません」と表示。見出し語は アレルゲン / 特定原材料 / アレルギー物質 / アレルギー。書かないときは「原材料名：」から推定し、注記を添えます。
- 配送：「冷蔵」「冷凍」「常温」を含む値でバッジになります。見出し語は 配送 / 配送区分 / 温度帯 / お届け / 発送方法 / 便。本文の「冷凍便でお届けします」からも読み取ります。
- 淹れ方：「茶葉：5g」「湯量：200ml」「湯温：70℃」「時間：1分30秒」「煎：3 煎」の行が、大きな数字のタイルになります。「淹れ方：茶葉 5g / 湯 200ml / 70℃ / 1:30 / 3 煎」の 1 行書きでも同じです（数字のない「熱湯」などは読み取れないので、湯温の行に分けてください）。
スペック表になる見出し語
原材料名 / 原材料 / 内容量 / 個数 / 入数 / サイズ / 賞味期限 / 消費期限 / 保存方法 / 保存 / 添加物 / 製造者 / 製造日 / 製造 / 発送日 / 発送 / 納期 / 栄養成分 / 熱量 / 召し上がり方 / 食べ方 / セット内容 / 内容 / 注意 / 熨斗 / のし / 包装 / ラッピング / 茶種 / 産地 / 品種 / 収穫 / 収穫時期 / 製法 / 水色 / 素材 / 産年 / 等級 / 茶園
全角・半角のコロン（：と :）どちらでも構いません。表にしたくない行は、見出し語の後にコロンを置かなければそのまま本文として表示されます。1行が160文字を超える行は本文のまま残ります。
食品表示のこと
テーマは商品ページの表示を整えるだけで、法定の表示の代わりにはなりません。次の点にご注意ください。詳しくは保健所や専門家にご相談を。
- ラベルは袋や箱に：名称・原材料名・添加物・内容量・賞味（消費）期限・保存方法・製造者の氏名と住所は、容器包装に表示する必要があります（食品表示法）。アレルゲンは原材料名の中か、まとめて記載します。
- ページには同じ内容を：「原材料名：」「内容量：」「賞味期限：」「保存：」「製造者：」の行を書けば、そのまま表になります。ラベルと食い違わないようにしてください。
- 効能は書かない：「健康にいい」「疲れが取れる」などの表現は避けてください。産地・品種・製法・味わいの説明にとどめます。
- 菓子製造業の許可：自宅で作った菓子をオンラインで売るには、菓子製造業の営業許可が必要です。「製造」の案内文に、許可を受けた工房で作っていることを書いておくと安心されます。
熨斗を注文時に受ける
テーマの「熨斗と包装」の案内は文章だけです。お客さまに選んでもらうには、BASE の「商品オプション App」を導入して、次のようなオプションを作ります。
- 「選択式」のオプションを作成。名前を「熨斗」、選択肢を「なし」「御礼」「内祝」「御供」「御中元」「御歳暮」のように登録します。
- 「文字入れ式」のオプションを作成。名前を「名入れ（熨斗の下段）」、文字数上限を 20 文字などに設定します。
- 風呂敷包みなど有料の包装があれば、選択式で「風呂敷包み（+500円）」を追加します。
- オプションを対象の商品に適用します。商品ページの数量の下に選択欄が表示されます。
- 仏事の掛け紙にも対応するなら、「熨斗と包装」の本文にその旨を書いておきます。既定文はそうなっています。
発送日と催事の運用
- 発送日：作る曜日だけを ON にします。補足文に「前日の正午までのご注文分をお送りします」「お茶と茶器は毎日発送します」のように、締め切りと例外を書いておきます。
- 商品ごとの発送日：商品説明に「発送日：火曜・金曜」と書くとスペック表に入ります。生菓子とお茶で違う店に向いています。
- 催事の週：「催事・イベントの予定」に日付と会場を書き、補足文に「催事の週は、オンラインの発送を金曜のみにします」と。「お知らせバナー App」で全ページの上部に帯を出すと、より確実です。
- 予約販売：季節の菓子を予約で受けるなら「予約販売 App」で発送予定日を設定し、その商品ページを「季節の菓子」のボタンのリンク先にします。
紙の色の選び方
「紙の色」は商品一覧と商品ページの写真の下、季節の菓子のパネル、淹れ方のタイル、アレルゲンの枠、ドロワーメニュー、カテゴリのドロップダウンに使われます。
- 明るい背景のとき：背景色より少し濃い生成り（例：背景 #FBF9F4 なら紙の色 #F3EFE7）。白い背景で撮った写真が多い店は #F6F3EC でも合います。
- 暗い背景のとき：背景より少し明るい墨色（例：背景 #241F1C なら紙の色 #332D28）。アクセントは明るい朱色（#D9705C 前後）、ボタンは明るい色、ボタンの文字色は暗い色に。「背景のトーン」も「暗い背景向け」にしてください。
- ドロワーメニューとパネルもこの色の面になるので、文字色と近い色は避けてください。
写真の撮り方
- 生成りの紙か、木の上で：菓子は白い皿か生成りの紙の上に置き、窓を横にして撮ります。餡の艶が出る角度を探してください。
- 1枚目は正方形で、菓子ひとつ：商品一覧の既定は正方形です。菓子を中央に、周りに余白を残して。紙の色を敷くので、背景が少し違っても揃って見えます。
- 2枚目以降は、断面・箱・お茶と一緒に：パソコンの商品ページでは写真が縦に並びます。全体 → 切った断面（餡と栗が見える） → 箱と掛け紙 → お茶と並べた場面、の順に。
よくある質問
アレルゲンの表が出ません
「商品説明から表・バッジ・タイルを自動生成」が ON になっているか、「アレルゲン：」のあとにコロン（：または :）があるかを確認してください。「原材料名：」だけでも推定で表が出ますが、注記が付きます。
淹れ方のタイルに湯温が出ません
数字が必要です。「湯温：熱湯」は読み取れないので、「湯温：95℃」のように書くか、「熱湯で」は「注意：」の行に書いてください。
8品目以外のアレルギー（大豆・ごまなど）は？
表は8品目のみです。それ以外は「原材料名：」の行に書き、必要なら「注意：大豆・ごまを使用しています」と書いてください。「原材料とアレルギーについて」の案内文にも書き足せます。
定期便（お茶の頒布会）はできますか？
BASE の「定期便 App」で商品を定期便に設定すると、商品ページに初回価格と 2 回目以降の価格が並びます。テーマはその表示に対応しています。
ロゴ画像の推奨サイズは？
高さ 44px に縮小して表示されます。横長なら高さ 88px（Retina対応）以上を用意してください。背景が透明な PNG がきれいに出ます。
暗い背景にしたら罫線や文字が見えなくなりました
「テーマ別設定」→「背景のトーン」を「暗い背景向け」にしてください。「紙の色」は背景より少し明るい墨色に、「ボタンの色」は明るい色に、「ボタンの文字色」は暗い色に、「アクセント」は明るい朱色に変えてください。
メインビジュアルの見出しが変なところで改行されます
見出しは読点「、」と句点「。」の位置で折り返します。「その日の朝に、餡を炊いています。」のように、切れてほしい位置に読点を入れてください。句読点を使いたくないときは、切りたい位置に縦棒「|」（全角の「｜」でも可）を入れると、その位置で必ず改行します。「|」は画面には表示されません。
HTML を直接編集してもいいですか？
編集はできますが、その時点でテーマの自動更新が止まり、以後の修正が反映されなくなります。設定画面で対応できることは設定画面で行うことをおすすめします。
商品が25件以上あるとき、一覧はどうなりますか？
トップページには最初 24 件を表示し、「もっと見る」を押すと続きが追加されます。商品を開いて戻ったときは、追加読み込み済みの状態とスクロール位置に戻ります。
更新履歴
- 1.0.0
- 初版。BASE デザインマーケットへ申請準備中。