MUTO LAB

AKARI サポート

テーマの設定手順と、よくある質問をまとめています。ここで解決しないことは、ページ末尾のお問い合わせからお知らせください。

BASE 管理画面の「デザイン」→「デザイン編集」から行います。上から順に進めれば、その日のうちに公開できます。

ロゴ

「基本設定」でロゴ画像かロゴテキストを設定します。画像は高さ 44px に収まるよう縮小されるので、縦長でも横長でも構いません。

背景のトーン

「基本設定」の背景色を決めたら、「テーマ別設定」の「背景のトーン」を合わせます。暗い背景にしたのに罫線が見えないときは、ここが「明るい背景向け」のままです。暗い背景では商品カードの光が「夜の灯り」の表情になります。

色を4つ

アクセント(炎の色)・灯りの色・ボタン・ボタンの文字色。灯りの色は背景色より少し濃い暖色にすると、商品写真がやわらかく浮かびます(下の「灯りの色の選び方」参照)。ボタンを薄い色にするときは文字色を濃くしてください。

メインビジュアル

横 1600px 以上の写真を1枚。小見出し(英字推奨)、見出し、説明文、ボタンの文言とリンク先を書き換えます。「写真と文章を横に並べる」「写真の上に文章を重ねる」の2レイアウトから選べます。写真を入れなくても、文字だけで成立するようにしてあります。

香りの系統名

「香りから選ぶ」の6つの系統名を、店で扱う香りに合わせて書き換えます(初期値: ウッディ / フローラル / シトラス / ハーバル / スイート / 無香料)。使わない枠は空欄にすると消えます。商品検索 App の導入が必要です。

季節のコレクション

横長の写真と見出し・本文、リンク先(カテゴリページなど)を設定します。限定の香りがないときは「季節のコレクションを表示」をOFFに。

「テーマ別設定」に並ぶ項目です。すべて初期値のままでも動きますが、店に合わせて書き換えると印象が大きく変わります。画像の初期値はすべて空欄です。

全体

項目種類初期値・推奨
アクセントカラー(炎の色)#C97B3A(見出しの飾り・ラベル・リンクの下線)
灯りの色#F5E6CF(商品カードや囲みのグラデーション。背景色より少し濃い暖色)
ボタンの色#2E2A28
ボタンの文字色#FFFFFF
背景のトーン選択明るい背景向け / 暗い背景向け(夜の灯り)
見出しの書体選択明朝(上品) / ゴシック(すっきり)
商品一覧の列数選択3列 / 4列 / 2列
商品画像の比率選択正方形 1:1 / やや縦長 4:5 / 縦長 3:4
商品カードの見せ方選択灯りを敷く / 写真のみ
ヘッダーを固定するON/OFFON
残り1点に LAST 1 を表示ON/OFFON

トップページ

項目種類初期値・推奨
メインビジュアルを表示ON/OFFON
メインビジュアルのレイアウト選択写真と文章を横に並べる / 写真の上に文章を重ねる
メインビジュアルの画像画像横 1600 × 縦 1200px を推奨
小見出し・見出し・説明・ボタンの文言とリンク先文章初期値あり。小見出しは英字推奨(空欄で非表示)
香りから選ぶを表示ON/OFFON(商品検索App利用時)
香りから選ぶの見出し文章香りから選ぶ
香り1〜6の系統名文章ウッディ / フローラル / シトラス / ハーバル / スイート / 無香料(空欄で非表示)
カテゴリ一覧を表示ON/OFFON(カテゴリ管理App利用時)
季節のコレクションを表示ON/OFFON
コレクションの画像・小見出し・見出し・本文・ボタン文言・リンク先画像 / 文章初期値あり。画像は横 1600 × 縦 1000px を推奨。見出しが空欄ならバナーごと非表示
キャンドルの灯し方を表示ON/OFFON
灯し方の見出し・ステップ1〜3のタイトルと説明文章初期値あり(芯を5mmに / 初回は表面全体が溶けるまで / 消すときは芯を倒して)
ストーリーを表示ON/OFFON
ストーリーの画像・見出し・本文画像 / 文章初期値あり。画像は横 1200 × 縦 900px を推奨
ワークショップ・出店予定を表示ON/OFFON
予定の見出し・予定1〜3の日付・名前・場所・補足文章初期値あり。日付が空欄の行は非表示
ギフト案内を表示ON/OFFON
ギフト案内の画像・見出し・本文画像 / 文章初期値あり。画像は横長を推奨
Instagram の案内を表示ON/OFFON(SNS設定時)
メールマガジンの案内文文章初期値あり(メールマガジンApp利用時)

About

項目種類初期値・推奨
About ページの画像画像横 1200px 以上の横長を推奨

商品ページ

項目種類初期値・推奨
商品説明からスペック表・香りのノートを自動生成ON/OFFON
安全にお使いいただくために(見出し・本文)文章初期値あり(一般的な注意事項)。見出しが空欄なら非表示
はじめて灯す前に(見出し・本文)文章初期値あり
ギフトラッピング(見出し・本文・画像)文章 / 画像初期値あり
配送について(見出し・本文)文章初期値あり(納期と夏季のクール便の案内)
ハンドメイドキャンドルについて(見出し・本文)文章初期値あり(個体差・フロスト・気泡の説明)

その他

項目種類初期値・推奨
フッターの一言文章空欄

商品説明の中に、次のように「見出し語:内容」の行を書くと、その行が商品ページで「香りのノート」と表になります。行の順番は自由で、無い行は出ません。

トップノート:ベルガモット、ブラックペッパー
ミドルノート:シダーウッド、サンダルウッド
ラストノート:アンバー、バニラ
香り:ウッディ / アンバー
ワックス:ソイワックス100%
芯:コットン芯
燃焼時間:約40時間
サイズ:直径 7.5cm × 高さ 8.5cm

香りのノートになる見出し語:トップ / トップノート / ミドル / ミドルノート / ハートノート / ラスト / ラストノート / ベース / ベースノート。3段のうち書いた段だけが表示されます。

表になる見出し語:香り / 香りの系統 / 香りの強さ / 燃焼時間 / 燃焼時間目安 / サイズ / 寸法 / 重さ / 重量 / 容量 / ワックス / 素材 / 材質 / 芯 / 容器 / 色 / カラー / セット内容 / 内容 / 製作 / 納期 / 発送 / 使い方 / お手入れ / 注意 / ラッピング

全角・半角のコロン(:と :)どちらでも構いません。表にしたくない行は、見出し語の後にコロンを置かなければそのまま本文として表示されます。「香りの強さ:★★★☆☆」のように記号を使うこともできます。

商品検索 App を導入していると、トップページに香りの系統のボタンが並びます。ボタンを押すと、その系統名(例:ウッディ)で商品を検索します。商品説明に「香り:ウッディ / アンバー」のように系統名を書いておくと、そのボタンからその商品が見つかります。

系統名は「テーマ別設定」の「香り1〜6の系統名」で変えられます。店で扱わない系統は空欄にすると消え、6つ全部を空欄にすると見出しごと消えます。

テーマの「ギフトラッピング」の案内は文章だけです。お客さまに注文時に選んでもらうには、BASE の「商品オプション App」を導入して、次のようなオプションを作ります。

  1. 商品オプション App を導入し、「選択式」のオプションを作成。名前を「ギフトラッピング」、選択肢を「なし」「クラフト紙 + リボン(無料)」「ギフトボックス + マッチ(+400円)」のように登録します。
  2. 「文字入れ式」のオプションを作成。名前を「メッセージカード」、文字数上限を 30 文字などに設定します。
  3. オプションを対象の商品に適用します。商品ページの数量の下に選択欄が表示されます。

テーマの「ギフトラッピングの案内」の本文は、この手順に合わせて「ご注文時にオプションをお選びください」のように書き換えてください。

「灯りの色」は商品カードの背景、商品ページの画像の背景、季節のコレクションやギフト案内の囲み、ドロワーメニュー、カテゴリの一覧に使われます。

  • 明るい背景のとき:背景色より少し濃い生成り〜薄いベージュ(例:背景 #FCF9F4 なら灯りの色 #F5E6CF)。
  • 暗い背景のとき:背景より少し明るいこげ茶やアンバー(例:背景 #1C1816 なら灯りの色 #342A22)。「背景のトーン」を「暗い背景向け」にすると、光が夜の灯りのように見えます。
  • ドロワーメニューとカテゴリの一覧もこの色の面になるので、文字色と近い色は避けてください。
ロゴ画像の推奨サイズは?

高さ 44px に縮小して表示されます。横長なら高さ 88px(Retina対応)以上、縦長でも同じ高さに収まります。背景が透明な PNG がきれいに出ます。

暗い背景にしたら罫線や文字が見えなくなりました

「テーマ別設定」→「背景のトーン」を「暗い背景向け」にしてください。背景色と文字色は「基本設定」で、罫線や薄い色はこのトーンで決まります。「灯りの色」も背景より少し明るい暗めの色に変えてください。

香りのノートやスペック表が出ません

「商品説明からスペック表・香りのノートを自動生成」が ON になっているか、見出し語の直後にコロン(:または :)があるかを確認してください。見出し語は上の一覧にあるものだけが対象です。1行が80文字を超えると本文のまま残ります。

安全の案内を商品ごとに変えたい

共通の案内はテーマ別設定の1か所で管理します。商品ごとに補足したい注意(木芯の音、花材の位置など)は、商品説明に「注意:〜」と書くとその商品のスペック表に入ります。

夏の配送でキャンドルが溶けるのが心配です

「配送について」の本文に、気温の高い時期はクール便でお届けする旨を既定で入れています。クール便の料金設定は BASE の「送料詳細設定 App」で行ってください。出店中など一時的な発送停止は「お知らせバナー App」で全ページに表示できます。

HTML を直接編集してもいいですか?

編集はできますが、その時点でテーマの自動更新が止まり、以後の修正が反映されなくなります。設定画面で対応できることは設定画面で行うことをおすすめします。

App を入れていないのにメニューが出ています/出ません

Blog・カテゴリ・コミュニティ・メンバーシップ・検索・香りから選ぶ・メールマガジン・言語切替のメニューは、対応する App を導入したときだけ表示されます。導入直後に反映されない場合は、ページを再読み込みしてください。

商品が25件以上あるとき、一覧はどうなりますか?

トップページには最初 24 件を表示し、「もっと見る」を押すと続きが追加されます。商品を開いて戻ったときは、追加読み込み済みの状態とスクロール位置に戻ります。

1.0.0
初版。BASE デザインマーケットへ申請準備中。

お問い合わせフォームからお知らせください。

ショップのURL、お使いのブラウザ、起きていることを書いていただけると、早くお返事できます。

お問い合わせフォームへ