MUTO LAB

NUME サポート

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

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

ロゴ

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

背景のトーン

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

色を4つ

アクセント・紙の色・ボタン・ボタンの文字色。既定はアクセントがコニャック色(#A9683A)、紙の色が生成り(#F1EBE2)、ボタンが墨色(#2A2522)です。アクセントは名入れのバッジ・素材チップの見出し語・小見出しに使われます。紙の色はサイズのタイル・素材の枠・パネル・ドロワーメニューの面になります。

メインビジュアル

横 2000px 以上の横長の写真を1枚(工房や道具、革の質感)。小見出し(英字推奨)、見出し、説明文、ボタンの文言とリンク先を書き換えます。3 レイアウトから選べます。見出しは読点「、」の位置で折り返します。句読点を使わずに改行したいときは、切りたい位置に縦棒「|」を入れてください(例:「使うほどに|手に馴染む革を」)。「|」は表示されません。

名入れ・受注制作

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

使っている革 3 枚

写真(横 800 × 縦 600px 推奨)と、革の名前、説明を 3 つ設定します。産地・鞣し・特徴を店の言葉で。名前が空欄のカードは消え、3 つとも空欄なら見出しごと消えます。

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

全体

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

トップページ

項目種類初期値・推奨
メインビジュアルを表示・レイアウト・画像・文言ON/OFF / 選択 / 画像 / 文章ON。画像は横 2000 × 縦 1200px を推奨
名入れ・受注制作を表示・小見出し・目安・見出し・本文・ボタン・画像ON/OFF / 文章 / 画像ON。初期値あり。見出しが空欄なら欄ごと非表示
探すを表示・見出し・リンク1〜6の名前とURLON/OFF / 文章ON。財布 / 名刺入れ / キーケース / バッグ / ベルト / 小物。名前が空欄の行は非表示
カテゴリの一覧を表示ON/OFFON(カテゴリ管理App利用時)
使っている革を表示・見出し・革1〜3の写真・名前・説明ON/OFF / 画像 / 文章ON。初期値は ブッテーロ / ヌメ革 / ブライドルレザー。名前が空欄のカードは非表示
経年変化を表示・見出し・本文・画像・段階1〜3の時期と説明ON/OFF / 文章 / 画像ON。初期値は 1ヶ月 / 半年 / 3年。画像は新品と使用後の比較写真を推奨
ストーリーを表示・画像・見出し・本文ON/OFF / 画像 / 文章ON。初期値あり
出店・受注会の予定を表示・見出し・予定1〜3・補足ON/OFF / 文章ON。初期値あり。日付が空欄の行は非表示
サービス案内を表示・案内1〜3ON/OFF / 文章ON。初期値あり(名入れ / 経年変化と水濡れ / 受注制作と修理)
Instagram の案内を表示ON/OFFON(SNS設定時)
メールマガジンの案内文文章初期値あり(メールマガジンApp利用時)

About

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

商品ページ

項目種類初期値・推奨
商品説明からチップ・バッジ・タイル・表を自動生成ON/OFFON
革と経年変化について(見出し・本文)文章初期値あり。見出しが空欄なら非表示
水濡れとお手入れ(見出し・本文)文章初期値あり
名入れについて(見出し・本文)文章初期値あり(文字の種類、8文字まで、返品不可)
受注制作の納期(見出し・本文)文章初期値あり(2〜3週間)
配送とラッピング(見出し・本文)文章初期値あり

その他

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

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

革:ブッテーロ(イタリア・ワルピエ社)
鞣し:植物タンニン
金具:真鍮
糸:麻糸
色:ネイビー
縦:9.5cm
横:11cm
厚み:2.5cm
重さ:85g
収納:カード×6、札入れ×1、小銭入れ×1
名入れ:可(無料・アルファベット8文字まで)
制作:一点ずつ手縫い

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

  • 素材:見出し語は 革 / レザー / 鞣し / なめし / 金具 / 糸 / 裏地 / 芯材 / 内装 / 染料 / 仕上げ。「革 ブッテーロ」のように見出し語つきのチップになります。10 個まで。
  • 名入れ:「可」「対応」「無料」「あり」「OK」を含む値はバッジになります(「無料」を含めば「名入れ無料」、それ以外は「名入れ可」)。見出し語は 名入れ / 刻印 / イニシャル / ネーム。値の全文はスペック表の先頭行に入ります。「不可」「なし」はバッジにならず表の行だけになります。
  • サイズ:見出し語は 縦 / 横 / 幅 / 高さ / 奥行 / 厚み / 厚さ / マチ / 長さ / 全長 / 内周 / ベルト幅 / 持ち手 / ショルダー / 重さ / 重量。数字だけを書く(「約」「cm」「mm」「g」は付けても可)。単位を書かなければ重さは g、それ以外は cm。数字のあとに言葉が続くと文字のタイルになります。12 個まで。

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

色 / カラー / サイズ / サイズ表記 / 対応 / 対象 / 収納 / 容量 / 制作 / 製作 / 制作期間 / 納期 / 名入れの文字数 / 文字数 / お手入れ / 注意 / 生産 / 経年変化 / ラッピング / 付属品 / 品番 / 発送 / 備考

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

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

  1. 「文字入れ式」のオプションを作成。名前を「名入れ」、説明を「アルファベット大文字・数字で8文字まで」に、文字数上限を 8 に設定します。
  2. 有料にするなら、選択式のオプション「名入れ:なし / あり(+500円)」を先に作り、文字入れ式と組み合わせます。
  3. オプションを対象の商品に適用します。商品ページの数量の下に入力欄が表示されます。
  4. 「名入れについて」の本文に、文字の種類・位置・名入れ後は返品できないことを書いておきます。既定文はそうなっています。
  • 受注制作の商品:在庫数を多め(99 など)にし、商品説明に「制作期間:受注制作・2〜3週間」を書きます。革の色を選んでもらうなら、BASE の「種類」(バリエーション)で「ネイビー / ブラウン / グリーン」を作ります。
  • 受注制作のカテゴリ:カテゴリ管理 App で「受注制作」を作り、「名入れ・受注制作」パネルのボタンのリンク先にそのカテゴリページの URL を入れます。
  • 修理:「受注制作と修理」の案内と、商品ページ共通の「受注制作の納期」に、修理の受付方法(お問い合わせから、送料の負担)を書いておきます。修理を有料商品として登録しておくと、注文として受けられます。
  • 受注会・出店:「出店・受注会の予定」に日付と場所を。その期間の発送を止めるなら「お知らせバナー App」で帯を出します。
  • 同じ商品を、同じ光で並べる:新品と、半年〜数年使ったものを同じ背景・同じ向き・同じ距離で並べて 1 枚に。左が新品、右が使用後、が伝わりやすい並びです。
  • 3 段階の説明は具体的に:「色が深くなる」だけでなく、「角が丸く馴染む」「小銭入れの内側に跡がつく」のように、使う人が自分のものに起きることを想像できる言葉で。
  • Blog にも記録を:お客さまから届いた経年変化の写真を Blog の記事にし、固定記事にすると、トップページのメインビジュアルの下に見出しが出ます。

「紙の色」はサイズのタイル、素材の枠、名入れ・受注制作のパネル、経年変化の写真の下、ドロワーメニュー、カテゴリのドロップダウン、「紙の色を敷く」にしたときの商品写真の下に使われます。

  • 明るい背景のとき:背景色より少し濃い生成り(例:背景 #FAF7F2 なら紙の色 #F1EBE2)。白い背景で撮った写真が多い店は #F4EFE8 でも合います。
  • 暗い背景のとき:背景より少し明るいこげ茶(例:背景 #231F1C なら紙の色 #332C27)。アクセントは明るいコニャック(#D39A66 前後)、ボタンは明るい色、ボタンの文字色は暗い色に。「背景のトーン」も「暗い背景向け」にしてください。
  • ドロワーメニューとパネルもこの色の面になるので、文字色と近い色は避けてください。
  • 同じ背景、同じ向きで:生成りや白の紙の上に置き、窓を横にして撮ります。革は光で色が変わるので、全商品を同じ時間帯に撮ると一覧が揃います。
  • 1枚目は正面か真上から:商品一覧の既定は正方形です。財布は閉じた状態を正面から、バッグは正面から、周りに少し余白を残して。
  • 2枚目以降は、開いた状態・金具・コバ・使用例:パソコンの商品ページでは写真が縦に並びます。閉じた状態 → 開いた状態(収納が分かるようカードを入れて) → 金具とコバの寄り → 手に持った大きさ、の順に。
素材のチップが出ません

「商品説明からチップ・バッジ・タイル・表を自動生成」が ON になっているか、「革:」のあとにコロン(:または :)があるかを確認してください。見出し語は 革 / レザー / 鞣し / なめし / 金具 / 糸 / 裏地 / 芯材 / 内装 / 染料 / 仕上げ です。

名入れのバッジが出ません

値に「可」「対応」「無料」「あり」「OK」のいずれかが含まれている必要があります。「名入れ:8文字まで」のように可否を書かないと、バッジにならず表の行になります。「名入れ:可(無料)」のように書いてください。

重さのタイルが cm になります

見出し語が 重さ / 重量 のときだけ g が既定です。「重さ:85g」のように単位を書けば、そのまま表示します。

色の種類を選んでもらうには?

BASE の商品登録の「種類」(バリエーション)で色を登録すると、購入ボタンの上に選択欄が出ます。在庫は色ごとに管理できます。革の色を写真で見せたいときは、商品画像の 2 枚目以降に色見本を。

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

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

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

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

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

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

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

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

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

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

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

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

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

お問い合わせフォームへ