ROAST サポート
テーマの設定手順と、よくある質問をまとめています。ここで解決しないことは、ページ末尾のお問い合わせからお知らせください。
初期設定の6ステップ
BASE 管理画面の「デザイン」→「デザイン編集」から行います。上から順に進めれば、その日のうちに公開できます。
ロゴ
「基本設定」でロゴ画像かロゴテキストを設定します。ロゴはヘッダーの左、ナビは右に置かれます。画像は高さ 44px に収まるよう縮小されるので、横長の画像がきれいに出ます。長い店名は 3 行まで折り返します。
背景のトーン
「基本設定」の背景色を決めたら、「テーマ別設定」の「背景のトーン」を合わせます。既定の背景は白ですが、生成り（#FBF8F3 前後）にすると紙の色との相性がよくなります。暗い背景にしたのに罫線が見えないときは、ここが「明るい背景向け」のままです。
色を4つ
アクセント・紙の色・ボタン・ボタンの文字色。既定はアクセントが焙煎色の赤茶（#8C4A2F）、紙の色がクラフト紙の生成り（#F1EAE0）、ボタンがエスプレッソ色（#2B211C）です。アクセントは焙煎度のバー・メーター・小見出し・カートの数字に使われます。紙の色は商品写真の下・定期便のプラン・焙煎日のパネル・ドロワーメニューの面になります（下の「紙の色の選び方」参照）。
メインビジュアル
横 2000px 以上の横長の写真を1枚。小見出し（英字推奨）、見出し、説明文、ボタンの文言とリンク先を書き換えます。「全幅の写真に文字を重ねる」「文章と写真を横に並べる」「文字だけ」の3レイアウトから選べます。見出しは読点「、」の位置で折り返すので、「焙煎したての豆を、いちばんおいしい日に。」のように読点を入れると、きれいに 2 行になります。句読点を使わずに改行したいときは、切りたい位置に縦棒「|」を入れてください（例：「丘の上の|小さな焙煎所」）。「|」は表示されません。
定期便のプラン
プラン 3 つの名前・頻度・価格の文言・説明・ボタンの文言・リンク先を設定します。リンク先には定期便 App で作った商品ページの URL を入れます（下の「定期便・焙煎度から選ぶ」参照）。定期便をしていない店は「定期便のプランを表示する」を OFF にします。
焙煎日と発送の案内
「毎週 火曜・金曜 に焙煎、翌日に発送します」のような見出しと本文、写真、ボタンを設定します。ボタンのリンク先には Blog の記事や About ページの URL を。案内が要らないときは見出しを空欄にすると、パネルごと消えます。
デザイン設定の一覧
「テーマ別設定」に並ぶ項目です。すべて初期値のままでも動きますが、店に合わせて書き換えると印象が大きく変わります。画像の初期値はすべて空欄です。
全体
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| アクセントカラー | 色 | #8C4A2F（焙煎度のバー・メーター・小見出しの強調色） |
| 紙の色 | 色 | #F1EAE0（商品写真の下・ドロワーメニュー・パネルの背景色。背景色より少し濃い色） |
| ボタンの色 | 色 | #2B211C |
| ボタンの文字色 | 色 | #FFFFFF |
| 背景のトーン | 選択 | 明るい背景向け / 暗い背景向け |
| 見出しの書体 | 選択 | ゴシック（すっきり） / 明朝（クラシック） |
| 商品一覧の列数 | 選択 | 3列 / 4列 / 2列 |
| 商品画像の比率 | 選択 | 正方形 1:1 / やや縦長 4:5 / 縦長 3:4 |
| 商品カードの様式 | 選択 | 紙の色を敷く / 写真のみ |
| ヘッダーを固定する | ON/OFF | ON |
| 残り1点に「残り1点」を表示 | ON/OFF | ON |
トップページ
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| メインビジュアルを表示・レイアウト・画像・文言 | ON/OFF / 選択 / 画像 / 文章 | ON。全幅の写真に文字を重ねる / 横に並べる / 文字だけ。画像は横 2000 × 縦 1200px を推奨。ボタン文言が空欄ならボタン非表示 |
| 焙煎度から選ぶを表示・見出し | ON/OFF / 文章 | ON（商品検索App利用時）。見出しの初期値は「焙煎度・タイプから選ぶ」 |
| 選択肢1〜6の名前 | 文章 | 浅煎り / 中煎り / 深煎り / ブレンド / デカフェ / ドリップバッグ。1〜3 には焙煎度のマークが付きます。空欄の選択肢は非表示 |
| 定期便のプランを表示・見出し・説明文 | ON/OFF / 文章 | ON。見出しの初期値は「定期便」 |
| プラン1〜3の名前・頻度・価格の文言・説明・ボタンの文言・リンク先 | 文章 | 初期値あり（おまかせ 200g / 飲みくらべ 100g × 2 / たっぷり 400g）。名前が空欄のプランは非表示、全部空欄なら見出しごと非表示 |
| カテゴリの一覧を表示 | ON/OFF | ON（カテゴリ管理App利用時） |
| 淹れ方を表示・見出し | ON/OFF / 文章 | ON。見出しの初期値は「おいしい淹れ方」 |
| ステップ1〜3のタイトルと説明 | 文章 | 初期値あり（挽く / 湯温 / 蒸らして注ぐ）。タイトルが空欄のステップは非表示 |
| 焙煎日と発送の案内を表示 | ON/OFF | ON |
| 案内の小見出し・見出し・本文・ボタン・画像 | 文章 / 画像 | 初期値あり。見出しが空欄なら欄ごと非表示。画像は横 1200 × 縦 800px を推奨 |
| ストーリーを表示・画像・見出し・本文 | ON/OFF / 画像 / 文章 | ON。初期値あり。画像は横 1200 × 縦 900px を推奨 |
| 出店とワークショップの予定を表示・見出し | ON/OFF / 文章 | ON。見出しの初期値は Events |
| 予定1〜3の日付・名前・場所・補足 | 文章 | 初期値あり。日付が空欄の行は非表示 |
| サービス案内を表示・案内1〜3のタイトルと説明 | ON/OFF / 文章 | ON。初期値あり（配送 / ギフト / 定期便）。タイトルが空欄の列は非表示 |
| Instagram の案内を表示 | ON/OFF | ON（SNS設定時） |
| メールマガジンの案内文 | 文章 | 初期値あり（メールマガジンApp利用時） |
About
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| About ページの画像 | 画像 | 横 1200px 以上の横長を推奨 |
商品ページ
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| 商品説明からテイスティング・レシピ・表を自動生成 | ON/OFF | ON |
| 挽き方について（見出し・本文） | 文章 | 初期値あり（豆のままが基本、オプションで選択、挽いた豆は 2 週間以内に）。見出しが空欄なら非表示 |
| 焙煎日と鮮度・保存方法（見出し・本文） | 文章 | 初期値あり（3 日〜3 週間、常温保存、冷凍のしかた） |
| 配送について（見出し・本文） | 文章 | 初期値あり（焙煎日と発送日、ポスト投函と宅配便、食品のため返品不可） |
| ギフトラッピング（見出し・本文・画像） | 文章 / 画像 | 初期値あり |
| 定期便について（見出し・本文） | 文章 | 初期値あり（自動お届け、焙煎日に合わせて発送、マイページから解約） |
その他
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| フッターの一言 | 文章 | 空欄 |
商品説明の書き方
商品説明の中に次のような行を書くと、テイスティング・レシピ・スペック表が商品ページに作られ、その行は本文から消えます。行の順番は自由で、無い行は出ません。
産地：エチオピア / イルガチェフェ 品種：エアルーム 精製：ナチュラル 標高：1,900〜2,100m 焙煎度：浅煎り フレーバー：ベリー、ジャスミン、紅茶 酸味：4 甘み：4 コク：2 苦味：1 豆：15g 湯：240ml 湯温：93℃ 時間：2:30 挽き目：中細挽き 内容量：200g 焙煎日：ご注文後の火曜または金曜
テイスティングになる行
- 焙煎度：浅煎り / 中浅煎り / 中煎り / 中深煎り / 深煎り、または ライト / シナモン / ミディアム / ハイ / シティ / フルシティ / フレンチ / イタリアン、または 1〜5 の数字。5 段階のバーと表記になります
- フレーバー：「ベリー、ジャスミン、紅茶」のように読点・カンマ・スラッシュ・中点で区切ると、ひとつずつチップになります。見出し語は フレーバー / フレーバーノート / テイスティングノート / 香りの印象 / 風味
- 酸味 / 甘み / コク / 苦味 / 香り / ボディ / 渋み / 旨み / 余韻：1〜5 の数字、「3/5」、「★★★☆☆」「●●●○○」。5 点のメーターになります
レシピになる行
- 1 行ずつ：豆 / 粉 / 茶葉（例：15g）、湯 / 湯量（240ml）、湯温 / 温度（93℃）、抽出時間 / 時間（2:30 または 2分30秒）、挽き目 / 挽き方（中細挽き）、蒸らし（30秒）。書いた見出し語がそのままタイルのラベルになるので、お茶は「茶葉：6g」と書きます
- 1 行にまとめて：「レシピ：豆 16g / 湯 240ml / 88℃ / 3:00 / 中挽き」。g・ml・℃・時間・挽き目を自動で拾います
スペック表になる見出し語
産地 / 生産国 / 国 / 地域 / 農園 / 生産者 / 品種 / 標高 / 精製 / プロセス / 焙煎日 / 内容量 / 容量 / 重さ / 賞味期限 / 保存方法 / 保存 / 茶種 / 茶園 / 収穫 / 収穫時期 / 製法 / 水色 / 原材料 / 産年 / 等級 / 認証 / セット内容 / 内容 / 納期 / 発送 / 注意 / ラッピング
全角・半角のコロン（：と :）どちらでも構いません。表にしたくない行は、見出し語の後にコロンを置かなければそのまま本文として表示されます。1行が80文字を超える行は本文のまま残ります。
定期便・焙煎度から選ぶ
定期便のプラン
- BASE の「定期便 App」を導入し、プランごとに商品を作ります（お届けの間隔・継続回数・初回価格は App 側で設定）。
- ショップの画面でその商品を開き、アドレスバーの URL をコピーします。
- テーマ別設定の「プラン1: リンク先URL」に貼り付け、名前・頻度・価格の文言・説明を App の設定と揃えて書きます。プランが 2 つなら 3 つ目の名前を空欄に。
定期便の商品ページでは、初回価格と 2 回目以降の価格が自動で並びます。商品一覧には初回価格が表示されます。
焙煎度・タイプから選ぶ
「浅煎り」「デカフェ」などの選択肢は、商品検索 App の検索語として使われます。押すと、商品名か商品説明にその言葉を含む商品が並びます。「浅煎り」で出てほしい商品には、商品説明に「焙煎度：浅煎り」と書いておけば、テイスティングのバーと検索の両方に効きます。選択肢は 6 つまで自由に変えられ、空欄にすると消えます。1〜3 番目には浅・中・深を表す丸いマークが付くので、焙煎度はこの順に置いてください。
挽き方やラッピングを注文時に選んでもらう
テーマの「挽き方について」の案内は文章だけです。お客さまに注文時に選んでもらうには、BASE の「商品オプション App」を導入して、次のようなオプションを作ります。
- 商品オプション App を導入し、「選択式」のオプションを作成。名前を「挽き方」、選択肢を「豆のまま」「中細挽き（ペーパードリップ）」「粗挽き（フレンチプレス）」「極細挽き（エスプレッソ）」のように登録します。
- ギフト用に「選択式」の「ギフトラッピング」（なし / クラフト箱 + 麻ひも（無料））と、「文字入れ式」の「メッセージカード」（30 文字など）も作れます。
- オプションを対象の商品に適用します。商品ページの数量の下に選択欄が表示されます。
テーマの「挽き方について」の本文は、この手順に合わせて「ご注文時に『挽き方』のオプションからお選びください」のように書き換えてください。既定文はそうなっています。
紙の色の選び方
「紙の色」は商品一覧と商品ページの写真の下、定期便のプランカード、焙煎日のパネル、テイスティングの枠、ドロワーメニュー、カテゴリのドロップダウンに使われます。
- 明るい背景のとき：背景色より少し濃い生成り（例：背景 #FBF8F3 なら紙の色 #F1EAE0）。白い袋の写真が多い店は、もう少し白に近い #F5F0E8 でも合います。
- 暗い背景のとき：背景より少し明るいこげ茶（例：背景 #1E1613 なら紙の色 #2C2320）。「背景のトーン」も「暗い背景向け」にしてください。アクセントは明るい焙煎色（#D9905F 前後）にすると、焙煎度のバーとメーターが読みやすくなります。
- ドロワーメニューとプランカードもこの色の面になるので、文字色と近い色は避けてください。
写真の撮り方
- 1枚目は袋を正面から：無地の紙や布の上で、袋やラベルを正面から。商品一覧は 1:1（設定で 4:5 / 3:4 に変更可）に切り抜かれるので、袋を中央に置いて周りに少し余白を。
- 2枚目以降は豆と抽出：パソコンの商品ページでは写真が縦に並びます。袋 → 豆のアップ → 抽出している場面、の順に並べると、そのまま読み物になります。
- 焙煎度は豆の色で伝える：浅煎りと深煎りを同じ光で撮ると、一覧で焙煎度の違いが伝わります。
よくある質問
テイスティングが出ません
「商品説明からテイスティング・レシピ・表を自動生成」が ON になっているか、見出し語の直後にコロン（：または :）があるかを確認してください。メーターの値は 1〜5 の数字か ★☆ の記号です。「酸味：やや強め」のような文章は本文のまま残ります。
焙煎度のバーが違う段になります
「中深煎り」は 4 段目、「深煎り」は 5 段目です。「シティロースト」は 4、「フルシティ」は 5 になります。意図した段にならないときは、「焙煎度：4」のように数字で書いてください。
お茶には焙煎度を書かなくてよいですか？
書かなくて構いません。焙煎度の行がなければバーは出ず、メーターとレシピ、スペック表だけが表示されます。ほうじ茶や和紅茶で焙煎・発酵の度合いを見せたいときは「焙煎度：深煎り」のように書けます。
レシピの「豆」を「粉」や「茶葉」にしたい
見出し語がそのままラベルになります。「粉：15g」「茶葉：6g」と書いてください。1 行にまとめた「レシピ：」の書き方では「豆」になります。
ロゴ画像の推奨サイズは？
高さ 44px に縮小して表示されます。横長なら高さ 88px（Retina対応）以上を用意してください。背景が透明な PNG がきれいに出ます。ロゴはヘッダーの左に置かれるので、横幅は 360px 程度までが目安です。
暗い背景にしたら罫線や文字が見えなくなりました
「テーマ別設定」→「背景のトーン」を「暗い背景向け」にしてください。「紙の色」は背景より少し明るいこげ茶に、「ボタンの色」は明るい色に、「ボタンの文字色」は暗い色に、「アクセント」は明るい焙煎色に変えてください。
メインビジュアルの見出しが変なところで改行されます
見出しは読点「、」と句点「。」の位置で折り返します。「焙煎したての豆を、いちばんおいしい日に。」のように、切れてほしい位置に読点を入れてください。句読点を使いたくないときは、切りたい位置に縦棒「|」（全角の「｜」でも可）を入れると、その位置で必ず改行します。「|」は画面には表示されません。
出店の日に焙煎を休みたい
「お知らせバナー App」を導入すると、全ページの上部に「○日はマルシェ出店のため焙煎をお休みします」のような帯を出せます。トップページの「出店とワークショップの予定」の補足文にも書けます。
HTML を直接編集してもいいですか？
編集はできますが、その時点でテーマの自動更新が止まり、以後の修正が反映されなくなります。設定画面で対応できることは設定画面で行うことをおすすめします。
商品が25件以上あるとき、一覧はどうなりますか？
トップページには最初 24 件を表示し、「もっと見る」を押すと続きが追加されます。商品を開いて戻ったときは、追加読み込み済みの状態とスクロール位置に戻ります。
更新履歴
- 1.0.0
- 初版。BASE デザインマーケットへ申請準備中。