画面
画面の商品写真はすべてデモ用に用意したもので、テーマ本体に画像は含まれません。
デザイン雑貨の店のために
線と余白で、写真を主役にする。
罫線で区切る商品一覧
商品写真を隙間のない格子に並べ、1pxの罫線で区切ります。写真の下に「面の色」を敷くので、背景の明るさや色温度が商品ごとに違っていても、一覧が揃って見えます。罫線なしの「余白で区切る」にも切り替えられます。
流れる一行案内
ヘッダーのすぐ下を、1行の文言がゆっくり流れます。「¥10,000以上で送料無料」「新作は毎週金曜日」のような、全員に伝えたい一言を書くだけ。止めたいときはOFFに、動きを減らす設定の端末では自動で静止します。
大きな一文のステートメント
商品一覧のあとに、ブランドの一文を大きな文字で置きます。長い自己紹介ではなく、一文だけ。余白とともに読ませることで、店の姿勢が伝わります。
番号つきのカテゴリ索引と、特集3枚
カテゴリを「01 Tabletop」「02 Textile」のように大きな文字のリストで見せます。写真3枚の「特集」も用意しているので、カテゴリや人気商品への入口を写真で置けます。
写真を縦に並べる商品ページ
パソコンでは商品写真を縦に並べ、右側の商品情報がスクロールについてきます。サムネイルを何度も押さなくても、写真が全部見える。スマートフォンでは横にスワイプし、「1 / 5」のカウンターで枚数がわかります。
素材やサイズが、そのままスペック表に
商品説明に「素材：」「サイズ：」「重さ：」「品番：」と書くだけで、その行が商品ページで罫線の表になります。「配送と返品」「ギフトラッピング」「お手入れ」「手仕事の品について」の4つの共通案内も、全商品ページに表示します。
仕様
- 対応ページ
- 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種。ヘッダーはナビ左・ロゴ中央。スマートフォンは左からのドロワーメニュー、ヘッダー固定のON/OFF
- 見出しの書体
- ゴシック（モダン） / 明朝（クラシック）。英字は Manrope、明朝のときは Instrument Serif。数字は等幅
- 色の設定
- アクセント・面の色・ボタン・ボタン文字の4つ。既定はほぼモノクロ。暗い背景向けの「背景のトーン」切替つき
- 外部ライブラリ
- なし（Google Fonts のみ）。jQuery 非依存
- バージョン
- 1.0.0
購入からの流れ
BASEデザインマーケットで購入
お支払いは BASE のデザインマーケットで行います。MUTO LAB がカード情報などをお預かりすることはありません。
ショップに適用して、6つの設定
ロゴ、背景のトーン、色4つ、メインビジュアル、流れる一行案内の文言、特集3枚。サポートページの手順どおりに進めれば、その日のうちに公開できます。
困ったら、サポートページとお問い合わせ
設定項目の一覧、商品説明の書き方、ラッピングを注文時に選んでもらう方法、よくある質問はサポートページに。解決しないときはフォームからご連絡ください。
よくある質問
TANA とはどう違いますか？
どちらも雑貨の店向けですが、狙う空気が違います。TANA は角丸と丸ゴシックで温かみを出し、手づくり市や贈りものに向く店のためのもの。SEN は角丸のない罫線と細めの英字で、デザインストアやギャラリーのように見せたい店のためのものです。扱う商品というより、「店をどう見せたいか」で選んでください。
写真の背景が商品ごとに違っていても大丈夫ですか？
そのために「面の色」があります。商品写真の下に同じ色を敷き、罫線の格子で区切るので、白背景とグレー背景が混ざっても一覧が落ち着いて見えます。写真の背景を「面の色」に近い無地で撮ると、さらに馴染みます。
色をつけた店にもできますか？
できます。既定はほぼモノクロですが、アクセント・面の色・ボタン・ボタン文字の4色と、背景色・文字色は自由に変えられます。暗い背景にするときは「背景のトーン」を「暗い背景向け」にしてください。
流れる一行案内は止められますか？
ON/OFF できます。文言を空欄にしても消えます。また、端末で「視差効果を減らす」などの設定をしている人には、自動で静止した状態で表示されます。
ラッピングやメッセージカードは、注文時に選んでもらえますか？
選択欄は BASE の「商品オプション App」で作ります。テーマ側は、その案内文と写真を全商品ページに共通で表示します。手順はサポートページにまとめています。
HTMLやCSSの知識は必要ですか？
必要ありません。すべて BASE の「デザイン編集」画面の設定だけで完結します。逆に、HTMLを直接編集すると自動更新が止まるので、おすすめしません。
導入していない App があっても大丈夫ですか？
大丈夫です。導入していない App のメニューや機能は自動で非表示になり、見出しや余白も残りません。
購入前に試せますか？
BASE デザインマーケットでは、購入前にテーマのプレビューを確認できます。デモショップの公開準備が整い次第、このページにもリンクを載せます。「自分の店に合うか」の判断に迷ったら、お問い合わせフォームからご相談ください。
アップデートはありますか？
BASE の仕様変更への追従と不具合の修正は、購入後も無償で提供します。更新内容はサポートページの更新履歴に記載します。