今日からはじめる、Mofuru。

はじめに・導入の流れ

Mofuruは、犬や猫との暮らしを伝えるBASE専用テーマです。商品情報とご注文はBASEで管理し、テーマ別設定で見た目を整えます。

1. BASEのデザイン画面でMofuruを適用します。最初にショップのロゴ、背景、商品、カテゴリーを登録してください。
2. テーマ別設定の「展示用サンプル商品を表示」をOFFにすると、ショップに登録した実商品とロゴを表示します。販売を始める前に必ずOFFにします。
3. メインビジュアル、カテゴリー、商品一覧の順に設定します。使わないホームのモジュールはOFFにしてください。
4. プレビューでパソコンとスマートフォンを確認し、商品名、価格、バリエーション、購入ボタン、送料表示、各リンクを確認してからショップへ反映します。

テーマの変更は商品、送料、決済方法、販売期間の設定を変更しません。必要なAppsはBASE側で別途設定します。

ホームの組み立て方

メインビジュアル、カテゴリー、新着商品、ピックアップ、サイズガイド、おすすめ、フリースペース、暮らしの写真、キャンペーン、News、Blog、FAQ、商品一覧を組み合わせます。

1. 各モジュールの表示をONにし、必要な画像と文章を入力します。空の写真や未入力の記事は表示しません。
2. 「順序」は小さい数字から表示します。1、2、3のように半角の整数を入力してください。同じ数字では登録順になります。
3. 最初は主役になる写真と商品一覧を中心に、3〜5つのモジュールを選ぶと整理しやすくなります。
4. 商品一覧のホーム表示をOFFにしても、検索・カテゴリー・絞り込み結果では商品一覧を表示します。

おすすめは店主が指定した順番です。売上の自動集計ランキングではありません。

画像・色・書体

写真の比率と余白をそろえると、商品が見やすくなります。

1. メインビジュアルにはPC用とスマートフォン用の画像を別々に設定できます。PCは横長、スマートフォンは縦長がおすすめです。顔や大切な部分は画像の中央に置き、端に文字を焼き込まないでください。
2. 商品画像比率は正方形・縦長・横長から選べます。商品画像は変形させず、全体が入るように表示します。
3. 本文色、アクセント色、フッター背景、本文書体、ボタン形状を変更できます。極端に読みにくい組み合わせは自動調整しますが、設定後は実際の画面も確認してください。
4. ショップ全体の背景はBASEの基本設定を使います。画像ロゴは縦横比を保って表示します。

画像は軽量なJPEG・PNG・WebPなどを使い、不要に大きい画像を避けてください。展示用のAI画像を実際の商品写真として使用しないでください。

ナビゲーションとメガメニュー

7つの可変リンクと商品を探すメニューを編集できます。

1. 各ナビゲーションの表示、文字、URL、順序を設定します。URLはショップ内のページURLまたはhttps://から始まる外部URLを指定してください。
2. メガメニューはカテゴリー・ブランド・シーン・スタイル・価格・ショップ案内の6グループです。グループ名と順序も変更できます。
3. リンクごとの文字、URL、表示、順序を設定します。空のグループは表示されません。
4. 使わないホームモジュールへ向かうナビゲーションリンクは自動で整理します。独自に追加したリンクのリンク先も、必ず開いて確認してください。

Blog App未導入時にはBASEのBlog入口を表示しません。フッターのプライバシーポリシー・特定商取引法・お問い合わせはBASEの正式ページにつながります。

カテゴリーと商品を探す機能

BASEカテゴリー管理Appまたはテーマ独自のカテゴリー枠を使えます。

1. 実店舗では「データ元」をBASEカテゴリー管理Appにすると、登録済みの親子カテゴリーを使用します。カテゴリー数を12枠に制限しません。
2. 独自カテゴリーは1〜12枠。枠数・表示・名前・英字・画像・URLを設定します。子カテゴリーは「名前 | URL」を1行に1件ずつ入力してください。
3. 新着商品のカテゴリーTabはその分類の商品へ切り替わります。BASEでは実際の分類ページから商品を取得します。通信失敗時は再操作するか分類ページを開いてください。
4. テーマ独自のブランド・シーン・スタイルの絞り込みは、商品説明にBrand:、Purpose:、Style:、Category:を1項目1行で入力して使います。表記は商品間でそろえてください。
5. 価格・キーワード・各条件の絞り込みと価格順は、画面に読み込み済みの商品を対象にします。「もっと見る」で商品を追加できます。全店のキーワード検索には商品検索Appを使います。

Brand: MOFURU
Purpose: おさんぽ
Style: ナチュラル
Category: おさんぽ

テーマの独自カテゴリーや説明内の項目は、BASEの商品カテゴリーを自動作成・変更しません。検索結果0件と未読み込みの商品を混同しないよう、画面に対象範囲を表示します。

商品別サイズ表・サイズ候補

服、ハーネス、首輪などに、商品ごとのサイズ範囲を表示できます。数値は店主が確認した情報を入力してください。

1. 「商品別サイズ表を表示」をONにします。商品説明に「Size: サイズ名 | 首まわり最小-最大 | 胴まわり最小-最大 | 背丈最小-最大」を1サイズ1行で追記します。単位はcmです。
2. 登録するのは着用できるペットの体の寸法範囲です。製品の仕上がり寸法をそのまま入力しないでください。製品の寸法はDimensions:へ記載します。
3. 測らなくてよい部位は半角ハイフン「-」にします。例のハーネスは背丈を使いません。首輪なら首まわりだけにできます。
4. 購入者が実測値を入力すると、すべての必要部位が範囲内に入るサイズを候補として表示します。重なる範囲では複数候補を表示します。自動で購入サイズを選択しません。
5. 不正な行、重複したサイズ名、最小値が最大値より大きい行は表示しません。保存後に表と入力結果を確認してください。
6. ホームの測り方モジュールは独立してON/OFF可能です。基本の測り方ダイアログは商品ページからも開けます。

Size: S | 22-28 | 30-38 | -
Size: M | 28-35 | 38-46 | -
Size: L | 35-43 | 46-56 | -

サイズ候補は登録された数値による目安です。犬種・猫種・体重から適合を推測しません。必要なゆとり、毛量、素材の伸び、体型差などは商品説明で案内してください。

対象・素材・お手入れ・名入れ

商品説明に補足行を入力すると、商品ページの見やすい位置に整理して表示します。

1. Pet: に対象、Material: に素材、Dimensions: に製品の寸法、Care: にお手入れ方法を入力します。各項目は1行です。
2. 「商品別素材・お手入れを表示」をONにすると、入力のある項目だけをアコーディオンに表示します。
3. Custom: を入力した商品では、名入れ・カスタマイズの案内を表示できます。共通の補足文はテーマ別設定で変更します。
4. 実際の文字入力、追加料金、必須選択には商品オプションAppを使います。Custom:の説明だけでは注文オプションは追加されません。
5. 商品オプションAppはBASEの組み合わせ制限があります。定期便・デジタルコンテンツ・抽選商品との併用条件はBASEの最新案内を確認してください。

Pet: 犬用
Material: 綿100%
Dimensions: 幅20×長さ30cm
Care: 中性洗剤で手洗い後、形を整えて陰干し。
Custom: 英字8文字まで。制作日数は約7営業日。

例の寸法・納期は入力方法の説明です。実店舗の商品の情報に必ず書き換えてください。

商品ページ・画像・在庫

商品名、価格、バリエーション、数量、購入ボタンはBASEの商品情報を使用します。

1. BASEに登録した商品画像を最大20枚表示します。左右の矢印、サムネイル、スワイプで切り替え、画像を選ぶと拡大できます。拡大画面でも左右切り替えとキーボード操作が使えます。
2. 残数表示は実在庫が閾値以下の場合だけ表示します。不明な在庫から残数を推測しません。表示をOFFにすることもできます。
3. SALE価格や割引率はBASEのセール機能を使います。定期便の初回価格が設定された商品では、2回目以降の価格も表示します。
4. 配送・返品・共通バナーは設定を一度変更すると全商品に反映します。個別の発送予定、送料、予約や抽選の情報はBASE側の正式な出力を併せて表示します。
5. 関連商品が登録されている場合はBASEの関連商品を表示します。最近見た商品は、このブラウザの閲覧履歴から表示します。

矢印の半透明表示を採用しています。タッチの縦スクロールや端末の拡大操作を妨げないようにし、1枚だけの場合は不要な切り替え操作を隠します。

お気に入り・最近見た商品

気になる商品をこのブラウザに保存できます。

1. カードまたは商品詳細のハートを選ぶと、お気に入りを追加・削除できます。ヘッダーの件数はスマートフォンでも表示します。
2. ヘッダーのハートから保存した商品を確認できます。最大60件、最近見た商品は履歴を最大20件保持し、画面には現在の商品を除いた直近4件を表示します。
3. ブラウザのデータを削除すると保存内容も消えます。別の端末やアカウントとの同期はありません。
4. 保存が使えない環境では、一時的な操作に切り替わります。ショップ非公開時には保存済み商品を表示しません。

お気に入りは在庫確保ではありません。購入前には商品ページの最新情報を確認してください。

おすすめ・バナー・イベント

ショップのおすすめや期間のお知らせを、必要なときだけ表示できます。

1. おすすめの商品IDをカンマ区切りで入力します。順番に最大12件を表示し、重複・無効なIDは除きます。先頭ページにない商品も取得を試みます。空欄は先頭4商品です。
2. ピックアップは2枠あり、写真、タイトル、説明、リンクを別々に設定できます。
3. カウントダウンはキャンペーンとカウントダウンを両方ONにし、日時を「2026-12-01T18:00:00」の形式で入力します。時差を付けない場合は設定したタイムゾーンを使います。
4. 日時が空・不正の場合は数字を表示しません。期限後は終了文を表示します。
5. フローティングバナーは閉じることができ、閉じたブラウザでは24時間表示を控えます。スマートフォンの商品詳細では購入操作を優先し表示しません。

バナーやカウントダウンは実際のクーポン、値引き、販売開始・終了、送料無料条件を変更しません。BASE側で別途設定してください。

写真・FAQ・Blog・ABOUT

商品以外のコンテンツで、ショップの考え方と使う場面を伝えます。

1. 暮らしの写真は3枠。写真、見出し、説明、表示を設定します。掲載許諾のある着用写真を使い、必要に応じて体の寸法や着用サイズを説明へ添えてください。
2. FAQは質問と回答を4組入力できます。質問が空欄の項目は表示しません。
3. Free Spaceは文章・画像・信頼できるHTMLに対応します。外部のコードを貼る場合は、提供元と動作を確認してください。
4. BlogはBlog Appの記事を使います。未導入や空の記事一覧ではサンプル記事を表示しません。Newsは手動で最大3件のお知らせを登録できます。
5. ABOUTはテーマ独自の本文を入力でき、空欄ならBASEのショップ紹介を表示します。会社名、住所、営業時間、アクセス、連絡先は必要な項目だけ入力してください。
6. 地図は住所入力と地図ONの両方が必要です。SNSはBASEのショップ情報に登録したアカウントを使用します。

実際の所在地や電話番号がない場合は空欄にしてください。商品写真や着用例に、提供していない機能・効果を示す説明を付けないでください。

公開後の確認とサポート

設定変更後は、変更箇所と購入経路をひと通り確認してください。

1. 画像やリンクを更新したら、ホーム・商品・ABOUTを開き、スマートフォン幅でも確認します。
2. 商品数が多い場合は「もっと見る」で末尾まで追加できること、商品から戻ったときに一覧の状態が戻ることを確認します。
3. Appsの追加やBASE側の仕様変更後は、価格、購入ボタン、送料案内、モーダル、固定要素の重なりを確認します。
4. トラブルの際は、ショップURL、対象商品URL、端末・ブラウザ、再現手順、画面画像を添えてKM Studioまでご連絡ください。パスワードや決済情報は送らないでください。

サポート：ll.heal@gmail.com。テーマの外部CSS・JavaScriptは専用の配信先を使用します。サービス側の制約や仕様は変更される場合があります。