ROASTロースト
自家焙煎のコーヒー豆を売る小さなロースター、お茶を自園・自製で売る茶園のための BASE テーマです。 クラフト紙の色の面と焙煎色のアクセント、揃った数字。豆の写真を主役にしたレイアウトに、豆を売る店で毎回書いていること、毎回聞かれることを、最初から組み込みました。 浅煎りか深煎りか、どんな味か、どう淹れるか、焙煎日はいつか。その答えを、テーマが代わりに出します。
¥5,800税込
サポートページ購入は BASE デザインマーケットで行います。公開され次第、このページからご案内します。
画面
画面の商品写真はすべてデモ用に用意したもので、テーマ本体に画像は含まれません。
コーヒーとお茶の店のために
味と淹れ方を、数字と図で。
テイスティング：焙煎度・フレーバー・味のメーター
商品説明に「焙煎度：中煎り」「フレーバー：柑橘、チョコレート」「酸味：3 / 甘み：4 / コク：2 / 苦味：3」と書くだけで、商品ページの購入ボタンの下に 5 段階の焙煎度バー、フレーバーのチップ、5 点のメーターが出ます。★★★☆☆ や 3/5 の書き方でも読み取り、お茶の「香り / 旨み / 渋み」にも対応します。
レシピ：豆・湯・湯温・時間・挽き目
「豆：15g / 湯：240ml / 湯温：93℃ / 時間：2:30 / 挽き目：中細挽き」と書くと、5 つのタイルになります。「レシピ：豆 16g / 湯 240ml / 88℃ / 3:00」の 1 行書きや「2分45秒」も読み取ります。お茶なら「茶葉：6g」のラベルで出ます。
産地・品種・精製・焙煎日が、そのままスペック表に
「産地：エチオピア」「品種：エアルーム」「精製：ナチュラル」「標高：1,900m」「内容量：200g」「焙煎日：ご注文後の火曜または金曜」と書いた行が、商品ページで表になり、本文からは消えます。茶園・茶種・収穫・製法・水色にも対応しています。
定期便のプラン 3 つ
トップページに、頻度・名前・価格・説明・ボタンのプランカードを 3 枚置けます。BASE の定期便 App で作った商品へ、ここから誘導します。商品ページでは初回価格と 2 回目以降の価格を並べて表示します。
焙煎度・タイプから選ぶ
浅煎り / 中煎り / 深煎り / ブレンド / デカフェ / ドリップバッグ の 6 つの入口。浅・中・深には焙煎度を表す丸いマークが付きます。商品検索 App でその言葉を含む商品を並べるので、産地別のカテゴリのままで、味の好みから探せます。
焙煎日と発送の案内、淹れ方、出店の予定
「毎週火曜・金曜に焙煎、翌日に発送」のようなパネルをトップページに。「おいしい淹れ方」の 3 ステップ、焙煎士のストーリー、マルシェやワークショップの予定も置けます。「挽き方について」「焙煎日と鮮度・保存方法」「配送について」「ギフトラッピング」「定期便について」の 5 つの案内は、全商品ページに共通で表示します。
仕様
- 対応ページ
- TOP / 商品詳細 / About / Contact / プライバシーポリシー / 特定商取引法 / 検索結果 / カテゴリ / Blog / コミュニティ / メンバーシップ
- 対応Apps（24種）
- 商品検索 / カテゴリ管理 / ラベル / Blog / セール / 英語・外貨対応 / BASEロゴ非表示 / デジタルコンテンツ / レビュー / 販売期間設定 / 予約販売 / メッセージ / 送料詳細設定 / 商品説明カスタム / 抽選販売 / 定期便 / テイクアウト / 商品オプション / コミュニティ / 再入荷自動通知 / 年齢制限 / お知らせバナー / メールマガジン / メンバーシップ
- 対応環境
- Windows（Edge / Chrome / Firefox）、Mac（Safari / Chrome / Firefox）、iOS Safari / Chrome、Android Chrome の各最新版
- レイアウト
- 商品一覧はPC 2〜4列、画像比率 1:1 / 4:5 / 3:4、商品カードは「紙の色を敷く」「写真のみ」を選択。メインビジュアルは「全幅の写真に文字を重ねる」「文章と写真を横に並べる」「文字だけ」の3種。ヘッダーはロゴ左・ナビ右。商品ページはPCで写真を縦に並べ、情報を右に固定。スマートフォンはドロワーメニュー、ヘッダー固定のON/OFF
- 見出しの書体
- ゴシック（Zen Kaku Gothic New）+ 英字 Sora、数字と価格は IBM Plex Mono / 明朝（Zen Old Mincho）に切替可
- 色の設定
- アクセント・紙の色・ボタン・ボタン文字の4つ。既定は焙煎色の赤茶とクラフト紙の生成り。暗い背景向けの「背景のトーン」切替つき
- 外部ライブラリ
- なし（Google Fonts のみ）。jQuery 非依存
- バージョン
- 1.0.0
購入からの流れ
BASEデザインマーケットで購入
お支払いは BASE のデザインマーケットで行います。MUTO LAB がカード情報などをお預かりすることはありません。
ショップに適用して、6つの設定
ロゴ、背景のトーン、色4つ、メインビジュアル、定期便プランのリンク先、焙煎日の案内の文言。サポートページの手順どおりに進めれば、その日のうちに公開できます。
商品説明に、味と淹れ方を書く
「焙煎度：中煎り」「酸味：3」「豆：15g / 湯：240ml」のように書くだけで、テイスティングとレシピができます。書き方の一覧はサポートページに。解決しないときはフォームからご連絡ください。
よくある質問
テイスティングは、どんな書き方なら読み取れますか？
焙煎度は「焙煎度：浅煎り / 中浅煎り / 中煎り / 中深煎り / 深煎り」、または「ライト / シナモン / ミディアム / ハイ / シティ / フルシティ / フレンチ / イタリアン」、または 1〜5 の数字。味は「酸味：3」「甘み：★★★★☆」「コク：4/5」のように、酸味 / 甘み / コク / 苦味 / 香り / ボディ / 渋み / 旨み / 余韻 の見出し語と 1〜5 の値。フレーバーは「フレーバー：ベリー、ジャスミン」のように読点で区切ります。書かれていない項目は出ません。
お茶の店でも使えますか？
使えます。焙煎度を書かなければバーは出ず、「香り：4 / 旨み：4 / 渋み：2」のメーターと、「茶葉：6g / 湯：180ml / 湯温：70℃ / 時間：1:00」のレシピ、「茶園：」「茶種：」「収穫：」「製法：」「水色：」のスペック表が使えます。ほうじ茶なら「焙煎度：深煎り」と書いてバーを出すこともできます。デモの商品にもお茶を 3 種類入れています。
定期便は、テーマで設定するのですか？
定期便そのものは BASE の「定期便 App」で商品として作ります。テーマは、トップページのプランカードからその商品へ誘導することと、商品ページで初回価格と 2 回目以降の価格を並べて表示することを担当します。プランカードの頻度や価格はテーマ側の文章なので、App の設定と揃えてください。
挽き方は、注文時に選んでもらえますか？
選択欄は BASE の「商品オプション App」で作ります（豆のまま / 中細挽き / 粗挽き / 極細挽き など）。テーマ側は「挽き方について」の案内文を全商品ページに共通で表示します。手順はサポートページにまとめています。
写真の背景が商品ごとに違っていても大丈夫ですか？
そのために「紙の色」があります。商品写真を少し内側に置き、その周りにクラフト紙の色を敷くので、白い袋と黒い袋、豆の写真が混ざっても一覧が落ち着いて見えます。写真を全面に出したいときは「写真のみ」に切り替えられます。
HTMLやCSSの知識は必要ですか？
必要ありません。すべて BASE の「デザイン編集」画面の設定だけで完結します。逆に、HTMLを直接編集すると自動更新が止まるので、おすすめしません。
導入していない App があっても大丈夫ですか？
大丈夫です。導入していない App のメニューや機能は自動で非表示になり、見出しや余白も残りません。「焙煎度・タイプから選ぶ」は商品検索 App、カテゴリの一覧はカテゴリ管理 App を導入したときだけ表示されます。
購入前に試せますか？
BASE デザインマーケットでは、購入前にテーマのプレビューを確認できます。デモショップの公開準備が整い次第、このページにもリンクを載せます。「自分の店に合うか」の判断に迷ったら、お問い合わせフォームからご相談ください。
アップデートはありますか？
BASE の仕様変更への追従と不具合の修正は、購入後も無償で提供します。更新内容はサポートページの更新履歴に記載します。
ご相談
自分の店に合うのかどうか、迷ったら。
扱っている豆やお茶の種類、いま使っているテーマで困っていることを教えてください。ほかのテーマのほうが合う場合は、そのようにお伝えします。
お問い合わせフォームへ