MUTO LAB

PAW サポート

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

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

ロゴ

「基本設定」でロゴ画像かロゴテキストを設定します。ロゴはヘッダーの左、ナビは右に置かれます。画像は高さ 44px に収まるよう縮小されるので、横長の画像がきれいに出ます。テキストは太めの丸い英字(Fredoka)で表示され、長い店名は折り返します。

背景のトーン

「基本設定」の背景色を決めたら、「テーマ別設定」の「背景のトーン」を合わせます。既定の背景は白ですが、生成り(#FCFAF4 前後)にすると紙の色との相性がよくなります。暗い背景にしたのに罫線が見えないときは、ここが「明るい背景向け」のままです。

色を4つ

アクセント・紙の色・ボタン・ボタンの文字色。既定はアクセントがマスタード(#C79A3B)、紙の色が生成り(#F4EFE4)、ボタンがこげ茶(#3A332B)です。アクセントは名入れのバッジ・素材チップの点・小見出しに使われます。紙の色は商品写真の下・パネル・サイズのタイル・ドロワーメニューの面になります。

メインビジュアル

横 2000px 以上の横長の写真を1枚(工房、生地と金具、並べた首輪)。小見出し(英字推奨)、見出し、説明文、ボタンの文言とリンク先を書き換えます。3 レイアウトから選べます。見出しは読点「、」の位置で折り返します。句読点を使わずに改行したいときは、切りたい位置に縦棒「|」を入れてください(例:「うちの子のサイズに|ぴったりを」)。「|」は表示されません。

名入れ・サイズオーダー

小見出し、目安(「名入れ無料 / サイズオーダー 1〜2週間」)、見出し、本文、写真、ボタンの文言とリンク先を設定します。リンク先にはオーダーの案内を書いた Blog の記事か、首輪のカテゴリページの URL を。オーダーをしない店は、見出しを空欄にすると欄ごと消えます。

サイズの目安 3 枚

S / M / L ごとに、写真と名前、首周り・胴周り・体重の範囲と犬種の例を書きます。店のサイズ展開に合わせて XS や XL に変えても構いません。名前が空欄のカードは消え、3 つとも空欄なら見出しごと消えます。

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

全体

項目種類初期値・推奨
アクセントカラー#C79A3B(名入れのバッジ・素材チップの点・小見出し)
紙の色#F4EFE4(商品写真の下・パネル・サイズのタイル・ドロワーメニューの背景色)
ボタンの色#3A332B
ボタンの文字色#FFFFFF
背景のトーン選択明るい背景向け / 暗い背景向け
見出しの書体選択丸ゴシック(既定) / 明朝
商品一覧の列数選択3列(既定) / 4列 / 2列
商品画像の比率選択正方形 1:1(既定) / やや縦長 4:5 / 縦長 3:4
商品カードの様式選択紙の色を敷く(既定) / 写真のみ
ヘッダーを固定するON/OFFON
残り1点に「残り1点」を表示ON/OFFON

トップページ

項目種類初期値・推奨
メインビジュアルを表示・レイアウト・画像・文言ON/OFF / 選択 / 画像 / 文章ON。画像は横 2000 × 縦 1200px を推奨
サイズ・犬種から探すを表示・見出し・項目1〜6の名前ON/OFF / 文章ON(商品検索App利用時)。小型犬 / 中型犬 / 大型犬 / 猫 / おやつ / ギフト。空欄の項目は非表示
名入れ・サイズオーダーを表示・小見出し・目安・見出し・本文・ボタン・画像ON/OFF / 文章 / 画像ON。初期値あり。見出しが空欄なら欄ごと非表示
カテゴリの一覧を表示ON/OFFON(カテゴリ管理App利用時)
サイズの目安を表示・見出し・目安1〜3の写真・名前・説明ON/OFF / 画像 / 文章ON。初期値は S / M / L。名前が空欄のカードは非表示
サイズの測り方を表示・見出し・ステップ1〜3ON/OFF / 文章ON。初期値は 首周り / 胴周り / 背丈。タイトルが空欄のステップは非表示
ストーリーを表示・画像・見出し・本文ON/OFF / 画像 / 文章ON。初期値あり
イベント・出店の予定を表示・見出し・予定1〜3・補足ON/OFF / 文章ON。初期値あり。日付が空欄の行は非表示
サービス案内を表示・案内1〜3ON/OFF / 文章ON。初期値あり(名入れ・オーダー / 配送とラッピング / おやつの保存)
Instagram の案内を表示ON/OFFON(SNS設定時)
メールマガジンの案内文文章初期値あり(メールマガジンApp利用時)

About

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

商品ページ

項目種類初期値・推奨
商品説明からバッジ・チップ・タイル・一覧・表を自動生成ON/OFFON
素材と安全について(見出し・本文)文章初期値あり(生地と金具、留め具の強度、噛み癖)。見出しが空欄なら非表示
サイズとお直し(見出し・本文)文章初期値あり(測り方、調整範囲、サイズ交換、お直し)
名入れについて(見出し・本文)文章初期値あり(名前と電話番号、返品不可)
おやつの原材料と保存(見出し・本文・画像)文章 / 画像初期値あり(国産、無添加、開封後の保存、少量から)
配送と返品(見出し・本文)文章初期値あり(3営業日、オーダーは1〜2週間、クール便、食品は返品不可)

その他

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

商品説明の中に次のような行を書くと、対象・サイズ・名入れのバッジ、素材のチップ、サイズのタイル、原材料の一覧、スペック表が商品ページに作られ、その行は本文から消えます。行の順番は自由で、無い行は出ません。

対象:小型犬・中型犬
サイズ:M
素材:綿帆布、ナイロンテープ
金具:真鍮
首周り:28〜38cm
幅:2cm
重さ:45g
適応体重:5〜12kg
名入れ:可(無料・お名前と電話番号)
洗濯:手洗い、陰干し
色:マスタード、ネイビー、オリーブ
用途:小型犬、中型犬、ギフト

バッジ・チップ・タイル・一覧になる行

  • 対象:16 文字までの値がそのまま対象のバッジになります(小型犬 / 中型犬 / 猫 / 犬・猫 など)。見出し語は 対象 / 対象犬種 / 犬種 / 対象動物。
  • サイズ:12 文字までの値がサイズのバッジになります(S / M / L / F など)。見出し語は サイズ / サイズ表記。
  • 名入れ:「可」「対応」「無料」「あり」「OK」を含む値はバッジになります(「無料」を含めば「名入れ無料」、それ以外は「名入れ可」)。値の全文はスペック表の先頭行に入ります。「不可」「なし」はバッジにならず表の行だけになります。
  • 素材:「綿帆布、ナイロンテープ」のように読点・カンマ・スラッシュ・中点で区切ると、ひとつずつチップになります。見出し語は 素材 / 生地 / 材質 / 金具 / 中綿 / 詰め物 / 糸。12 個まで。
  • サイズのタイル:見出し語は 首周り / 首回り / 胴周り / 胴回り / 背丈 / 着丈 / 胸囲 / 足周り / 縦 / 横 / 幅 / 高さ / 厚み / 直径 / 長さ / 重さ / 重量 / 体重。数字だけなら数値のタイル(重さは g、体重は kg、それ以外は cm が既定)。「28〜38cm」のような範囲は文字のタイルになります。12 個まで。
  • 原材料:「鶏ささみ、さつまいも」のように区切って書くと、中点でつないだ一覧になります。見出し語は 原材料 / 原材料名 / 成分 / 全成分。600 文字まで。

スペック表になる見出し語

対象年齢 / 適応体重 / 賞味期限 / 消費期限 / 保存 / 保存方法 / 原産国 / 産地 / 栄養成分 / カロリー / 与え方 / 給与量 / 洗濯 / お手入れ / 色 / カラー / 柄 / セット内容 / 内容 / 製作 / 制作 / 納期 / 発送 / ラッピング / 注意 / 品番 / 付属品 / 用途 / 対応 / 安全

全角・半角のコロン(:と :)どちらでも構いません。表にしたくない行は、見出し語の後にコロンを置かなければそのまま本文として表示されます。1行が160文字を超える行は本文のまま残ります。

テーマのバッジと案内文は表示だけです。お客さまに数値や文字を入力してもらうには、BASE の「商品オプション App」を導入して、次のようなオプションを作ります。

  1. 「文字入れ式」のオプションを作成。名前を「首周り(cm)」、説明を「指 2 本分ゆるめて測った数値」に。ハーネスと服には「胴周り(cm)」も。
  2. 「文字入れ式」のオプション「名入れ(名前と電話番号)」を作成。文字数上限を 30 に設定します。
  3. 色を選んでもらうなら、BASE の商品登録の「種類」(バリエーション)で色を登録します。在庫は色ごとに管理できます。
  4. オプションを対象の商品に適用します。商品ページの数量の下に入力欄が表示されます。
  5. 「サイズとお直し」の本文に、測り方と、オーダー品は返品できないことを書いておきます。既定文はそうなっています。
  • 袋のラベル:ペットフード安全法で、名称・原材料名・賞味期限・製造業者(または販売業者)の名称と住所・原産国の表示が必要です。商品ページとは別に、袋に貼るラベルを用意してください。
  • 商品説明:「原材料:鶏ささみ(国産)」「内容:40g」「賞味期限:製造から 3 ヶ月(未開封)」「保存:」「与え方:体重 5kg で 1 日 2〜3 枚」「注意:保存料・着色料不使用。はじめは少量から」を書けば、一覧と表になります。
  • 書かないこと:「病気が治る」「関節にきく」などの効能は書けません。「人が食べられる材料で作っています」は事実なら書けますが、「人用」として売らないでください。
  • 夏場の配送:BASE の「送料詳細設定 App」でクール便を作り、おやつに割り当てます。「配送と返品」の案内文にクール便を選べることを書いておきます。
  • 店のサイズ展開に合わせる:目安カードの名前は S / M / L が初期値ですが、XS〜XL や 首周り 20 / 25 / 30 のように変えられます。商品説明の「サイズ:」と同じ記号にしてください。
  • 数値と犬種の例を両方:「首周り 28〜38cm / 胴周り 42〜58cm / 体重 5〜12kg。柴犬、フレンチブルドッグ」のように、数値で選べる人と、犬種で選びたい人の両方に。
  • 調整範囲の真ん中:測り方の説明に「この数値が調整範囲の真ん中に来るサイズを」と書いておくと、境目のサイズの問い合わせが減ります。

「紙の色」は商品一覧と商品ページの写真の下、名入れ・サイズオーダーのパネル、サイズのタイル、素材の枠、サイズの目安の写真の下、ドロワーメニュー、カテゴリのドロップダウンに使われます。

  • 明るい背景のとき:背景色より少し濃い生成り(例:背景 #FCFAF4 なら紙の色 #F4EFE4)。白い背景で撮った写真が多い店は #F7F3EA でも合います。
  • 暗い背景のとき:背景より少し明るいこげ茶(例:背景 #292521 なら紙の色 #393329)。アクセントは明るいマスタード(#E0B85C 前後)、ボタンは明るい色、ボタンの文字色は暗い色に。「背景のトーン」も「暗い背景向け」にしてください。
  • ドロワーメニューとパネルもこの色の面になるので、文字色と近い色は避けてください。
  • 白や生成りの布の上で、真上から:首輪やハーネスは平置きにして真上から。窓を横にして、金具の反射が強すぎない時間に撮ります。
  • 1枚目は正方形で、商品だけ:商品一覧の既定は正方形です。商品を中央に、周りに余白を残して。着用写真は 2 枚目以降に。
  • 2枚目以降は、金具・着用・大きさの比較:パソコンの商品ページでは写真が縦に並びます。全体 → 金具と縫い目の寄り → 着用写真(犬種とサイズを説明文に) → メジャーと並べた大きさ、の順に。
対象のバッジが出ません

「対象:」の値が 16 文字を超えると本文に残ります。「対象:小型犬・中型犬(〜12kg)」のような補足は「適応体重:」の行に分けて書いてください。

首周りのタイルが文字になります

「首周り:28〜38cm」のように範囲を書くと文字のタイルになります。これは仕様です。数値のタイルにしたいときは「首周り:33」と代表値だけを書いてください。

金具のチップを分けたい

「金具:真鍮」を独立した行に書くと、チップの中に「金具:真鍮」が入ります。素材と分けて表に入れたいときは「付属品:真鍮バックル」のように表の見出し語で書いてください。

おやつの定期便はできますか?

BASE の「定期便 App」で商品を定期便に設定すると、商品ページに初回価格と 2 回目以降の価格が並びます。テーマはその表示に対応しています。

ロゴ画像の推奨サイズは?

高さ 44px に縮小して表示されます。横長なら高さ 88px(Retina対応)以上を用意してください。背景が透明な PNG がきれいに出ます。

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

「テーマ別設定」→「背景のトーン」を「暗い背景向け」にしてください。「紙の色」は背景より少し明るいこげ茶に、「ボタンの色」は明るい色に、「ボタンの文字色」は暗い色に、「アクセント」は明るいマスタード色に変えてください。

メインビジュアルの見出しが変なところで改行されます

見出しは読点「、」と句点「。」の位置で折り返します。「うちの子のサイズに、ぴったりを。」のように、切れてほしい位置に読点を入れてください。句読点を使いたくないときは、切りたい位置に縦棒「|」(全角の「|」でも可)を入れると、その位置で必ず改行します。「|」は画面には表示されません。

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

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

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

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

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

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

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

お問い合わせフォームへ