UTSUWA サポート
テーマの設定手順と、よくある質問をまとめています。ここで解決しないことは、ページ末尾のお問い合わせからお知らせください。
初期設定の6ステップ
BASE 管理画面の「デザイン」→「デザイン編集」から行います。上から順に進めれば、その日のうちに公開できます。
ロゴ
「基本設定」でロゴ画像かロゴテキストを設定します。ロゴはヘッダーの中央、ナビの上に置かれます。画像は高さ 48px に収まるよう縮小されるので、横長の画像がきれいに出ます。テキストは明朝で表示され、長い店名は3行まで折り返します。
背景のトーン
「基本設定」の背景色を決めたら、「テーマ別設定」の「背景のトーン」を合わせます。既定の背景は白ですが、生成り（#FAF7F2 前後）にすると土の色との相性がよくなります。暗い背景にしたのに罫線が見えないときは、ここが「明るい背景向け」のままです。
色を4つ
アクセント・土の色・ボタン・ボタンの文字色。既定はアクセントが呉須の藍（#3D5A73）、土の色が粉引の灰白（#EFE8DC）、ボタンが焦げ茶（#2F2A26）です。アクセントは小見出し・対応表の「可」・予約や抽選のラベルに使われます。土の色は商品写真の下・窯出しのパネル・ドロワーメニューの面になります（下の「土の色の選び方」参照）。
メインビジュアル
横 2000px 以上の横長の写真を1枚。小見出し（英字推奨）、見出し、説明文、ボタンの文言とリンク先を書き換えます。「全幅の写真に文字を重ねる」「文章と写真を横に並べる」「文字だけ」の3レイアウトから選べます。重ねるときは、写真の左下に文字が入るので、その位置が暗めの写真を選ぶと読みやすくなります。
次回の窯出し
小見出し、日付、見出し、本文、ボタンの文言とリンク先、画像を設定します。リンク先には予約販売や抽選販売の商品ページ、またはそのカテゴリページの URL を入れます（下の「用途から探す・窯出し」参照）。窯出しの予定がないときは見出しを空欄にすると、パネルごと消えます。
シリーズ3枚
縦長（4:5）の写真3枚と、名前、リンク先を設定します。粉引・黒釉・呉須のように釉薬やシリーズ別のカテゴリページへの入口に。名前が空欄のシリーズは消え、3つとも空欄なら見出しごと消えます。
デザイン設定の一覧
「テーマ別設定」に並ぶ項目です。すべて初期値のままでも動きますが、店に合わせて書き換えると印象が大きく変わります。画像の初期値はすべて空欄です。
全体
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| アクセントカラー | 色 | #3D5A73（呉須の藍。小見出し・対応表の「可」・強調色） |
| 土の色 | 色 | #EFE8DC（商品写真の下・ドロワーメニュー・パネルの背景色。背景色より少し濃い色） |
| ボタンの色 | 色 | #2F2A26 |
| ボタンの文字色 | 色 | #FFFFFF |
| 背景のトーン | 選択 | 明るい背景向け / 暗い背景向け |
| 見出しの書体 | 選択 | 明朝（楷書の趣） / ゴシック（すっきり） |
| 商品一覧の列数 | 選択 | 3列 / 4列 / 2列 |
| 商品画像の比率 | 選択 | 正方形 1:1 / やや縦長 4:5 / 縦長 3:4 |
| 商品カードの様式 | 選択 | 土の色を敷く / 写真のみ |
| ヘッダーを固定する | ON/OFF | ON |
| 残り1点に「残り1点」を表示 | ON/OFF | ON |
トップページ
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| メインビジュアルを表示 | ON/OFF | ON |
| メインビジュアルのレイアウト | 選択 | 全幅の写真に文字を重ねる / 文章と写真を横に並べる / 文字だけ |
| メインビジュアルの画像 | 画像 | 横 2000 × 縦 1200px を推奨 |
| 小見出し・見出し・説明・ボタンの文言とリンク先 | 文章 | 初期値あり。小見出しは英字推奨。ボタン文言が空欄ならボタン非表示 |
| 次回の窯出しを表示 | ON/OFF | ON |
| 窯出しの小見出し・日付・見出し・本文・ボタン・画像 | 文章 / 画像 | 初期値あり。見出しが空欄なら欄ごと非表示。画像は横 1200 × 縦 800px を推奨、空欄なら文字だけ |
| 用途から探すを表示・見出し | ON/OFF / 文章 | ON（商品検索App利用時）。見出しの初期値は「用途から探す」 |
| 用途1〜6の名前 | 文章 | 飯碗 / 皿 / 鉢 / カップ / 花器 / 酒器。空欄の用途は非表示 |
| カテゴリ索引を表示 | ON/OFF | ON（カテゴリ管理App利用時） |
| シリーズを表示・シリーズの見出し | ON/OFF / 文章 | ON。見出しの初期値は Series |
| シリーズ1〜3の画像・名前・リンク先 | 画像 / 文章 | 名前の初期値: 粉引 / 黒釉 / 呉須。画像は縦長 4:5（横 1200 × 縦 1500px）を推奨。名前が空欄のシリーズは非表示 |
| ステートメントを表示・小見出し・一文 | ON/OFF / 文章 | ON。初期値あり。一文が空欄なら非表示 |
| うつわの扱い方を表示・見出し | ON/OFF / 文章 | ON。見出しの初期値は「うつわの扱い方」 |
| ステップ1〜3のタイトルと説明 | 文章 | 初期値あり（目止め / ふだんの使い方 / 洗い方と保管）。タイトルが空欄のステップは非表示 |
| ストーリーを表示 | ON/OFF | ON |
| ストーリーの画像・見出し・本文 | 画像 / 文章 | 初期値あり。画像は横 1200 × 縦 900px を推奨 |
| 陶器市・展示の予定を表示・見出し | ON/OFF / 文章 | ON。見出しの初期値は Schedule |
| 予定1〜3の日付・名前・場所・補足 | 文章 | 初期値あり。日付が空欄の行は非表示 |
| サービス案内を表示 | ON/OFF | ON |
| 案内1〜3のタイトルと説明 | 文章 | 初期値あり（配送と梱包 / ギフト / 受注制作）。タイトルが空欄の列は非表示 |
| Instagram の案内を表示 | ON/OFF | ON（SNS設定時） |
| メールマガジンの案内文 | 文章 | 初期値あり（メールマガジンApp利用時） |
About
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| About ページの画像 | 画像 | 横 1200px 以上の横長を推奨 |
商品ページ
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| 商品説明から対応表とスペック表を自動生成 | ON/OFF | ON |
| 手仕事のうつわについて（見出し・本文） | 文章 | 初期値あり（貫入・鉄粉・ピンホール・釉薬の流れは不良ではない旨）。見出しが空欄なら非表示 |
| 使いはじめとお手入れ（見出し・本文） | 文章 | 初期値あり（目止め・水にくぐらせる・急な温度差の注意） |
| 配送と梱包（見出し・本文） | 文章 | 初期値あり（紙と緩衝材で梱包・発送日数・輸送中の破損の対応） |
| ギフトラッピング（見出し・本文・画像） | 文章 / 画像 | 初期値あり |
| 受注制作と納期（見出し・本文） | 文章 | 初期値あり（次の窯出しに合わせて制作、1〜2か月） |
その他
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| フッターの一言 | 文章 | 空欄 |
商品説明の書き方
商品説明の中に次のような行を書くと、対応表とスペック表が商品ページに作られ、その行は本文から消えます。行の順番は自由で、無い行は出ません。
土：信楽の赤土 釉薬：粉引（化粧土 + 透明釉） 口径：11.5cm 高さ：6cm 容量：約 250ml 重さ：約 180g 電子レンジ：可 / 食洗機：可 / オーブン：不可 / 直火：不可 注意：貫入から色が染みることがあります。目止めをおすすめします
対応表になる行
機器名と可否の組を含む行が対応表になります。次のどの書き方でも読み取ります。
電子レンジ：可 / 食洗機：不可 / オーブン：不可 / 直火：不可電子レンジ可 食洗機可 オーブン不可電子レンジ・食洗機：可（複数の機器に同じ可否）対応：電子レンジ○ 食洗機× 直火×（先頭の「対応：」「使用：」「注意：」は無視されます）IH：不可（IH も表に入ります）
機器名：電子レンジ / レンジ / 食洗機 / 食器洗浄機 / オーブン / 直火 / IH 可：可 / OK / ○ / ◯ / ◎ / 対応 / 使用可 不可：不可 / NG / × / ✕ / 非対応 / 使用不可
機器名と可否以外の言葉が同じ行にあると（例：「電子レンジは短時間なら可」）、本文のまま残ります。表にしたい行は、機器名と可否だけで書いてください。
スペック表になる見出し語
素材 / 土 / 陶土 / 磁土 / 釉薬 / 釉 / 技法 / 焼成 / 窯 / サイズ / 寸法 / 口径 / 高台径 / 直径 / 径 / 高さ / 幅 / 奥行 / 長さ / 深さ / 重さ / 重量 / 容量 / 色 / カラー / 仕上げ / 仕様 / セット内容 / 内容 / 品番 / 産地 / 制作 / 製作 / 納期 / 発送 / お手入れ / 注意 / 使用方法 / ラッピング
全角・半角のコロン（：と :）どちらでも構いません。表にしたくない行は、見出し語の後にコロンを置かなければそのまま本文として表示されます。1行が80文字を超える行は本文のまま残ります。
用途から探す・次回の窯出し
用途から探す
「飯碗」「皿」などの用途名は、商品検索 App の検索語として使われます。押すと、商品名か商品説明にその言葉を含む商品が並びます。「飯碗」で探してほしい商品には、商品名か商品説明に「飯碗」と書いておいてください（「茶碗」だけでは出ません）。用途名は6つまで自由に変えられ、空欄にすると消えます。商品検索 App を導入していないときは、この欄ごと表示されません。
次回の窯出し
- 予約販売 App または抽選販売 App で、窯出し分の商品を登録します。商品一覧には自動で「予約商品」「抽選販売」のラベルが付きます。
- カテゴリ管理 App で「2026年秋の窯出し」のようなカテゴリを作り、その商品を入れます。ショップの画面でそのカテゴリを開き、アドレスバーの URL をコピーします（例：https://ショップID.base.shop/categories/1234567）。商品が1点なら商品ページの URL でも構いません。
- テーマ別設定の「窯出し欄のボタンのリンク先URL」に貼り付け、日付・見出し・本文を書きます。
- 窯出しが終わったら、見出しを空欄にするか「次回の窯出しを表示」を OFF にします。
「シリーズ」のリンク先も同じ方法でカテゴリページの URL を入れます。「https://ショップID.base.shop/search?q=粉引」のように検索結果の URL を使うこともできます。
ラッピングやメッセージカードを注文時に選んでもらう
テーマの「ギフトラッピング」の案内は文章と写真だけです。お客さまに注文時に選んでもらうには、BASE の「商品オプション App」を導入して、次のようなオプションを作ります。
- 商品オプション App を導入し、「選択式」のオプションを作成。名前を「ギフトラッピング」、選択肢を「なし」「クラフト箱 + 和紙（無料）」「桐箱（+800円）」のように登録します。
- 「文字入れ式」のオプションを作成。名前を「メッセージカード」、文字数上限を 30 文字などに設定します。
- オプションを対象の商品に適用します。商品ページの数量の下に選択欄が表示されます。
テーマの「ギフトラッピング」の本文は、この手順に合わせて「ご注文時にオプションをお選びください」のように書き換えてください。
土の色の選び方
「土の色」は商品一覧と商品ページの写真の下、シリーズの写真の下、次回の窯出しのパネル、ドロワーメニュー、カテゴリのドロップダウンに使われます。「土の色を敷く」では写真が少し内側に置かれ、その周りにこの色が見えます。
- 明るい背景のとき：背景色より少し濃い生成り〜灰白（例：背景 #FAF7F2 なら土の色 #EFE8DC）。白い布で撮った写真が多い店は、もう少し白に近い #F4F0E8 でも合います。
- 暗い背景のとき：背景より少し明るいこげ茶（例：背景 #201C19 なら土の色 #2E2925）。「背景のトーン」も「暗い背景向け」にしてください。アクセントは明るい藍（#8FB0C8 前後）にすると、対応表の「可」が読みやすくなります。
- ドロワーメニューと窯出しのパネルもこの色の面になるので、文字色と近い色は避けてください。
写真の撮り方
UTSUWA は文字が少ないぶん、写真で印象が決まります。プロの機材は要りませんが、次の3点を揃えると一覧がぐっと整います。
- 背景は無地の布か板に：生成りのリネンや白木の板の上で撮ると、「土の色」に馴染みます。柄のある背景は、ストーリーや窯出しの写真に回してください。
- 1枚目はうつわを大きめに：「土の色を敷く」では写真が少し内側に置かれるので、うつわを画面いっぱい近くまで大きく写すとちょうどよくなります。商品一覧は 1:1（設定で 4:5 / 3:4 に変更可）に切り抜かれるので、うつわを中央に。
- 2枚目以降は釉薬の寄りと使う場面：パソコンの商品ページでは写真が縦に並びます。全体 → 釉薬の景色の寄り → 高台・裏 → 料理を盛った場面、の順に並べると、そのまま読み物になります。
よくある質問
対応表が出ません
「商品説明から対応表とスペック表を自動生成」が ON になっているか、機器名と可否が同じ行にあるかを確認してください。「電子レンジは短時間なら可」のように機器名と可否以外の言葉が同じ行にあると、本文のまま残ります。可否の言葉は 可 / OK / ○ / ◎ / 不可 / NG / × です。
スペック表が出ません
見出し語の直後にコロン（：または :）があるかを確認してください。見出し語は上の一覧にあるものだけが対象です。1行が80文字を超えると本文のまま残ります。
ロゴ画像の推奨サイズは？
高さ 48px に縮小して表示されます。横長なら高さ 96px（Retina対応）以上を用意してください。背景が透明な PNG がきれいに出ます。ロゴはヘッダーの中央に置かれるので、横幅は 400px 程度までが目安です。
暗い背景にしたら罫線や文字が見えなくなりました
「テーマ別設定」→「背景のトーン」を「暗い背景向け」にしてください。背景色と文字色は「基本設定」で、罫線や薄い色はこのトーンで決まります。「土の色」も背景より少し明るいこげ茶に、「ボタンの色」は明るい色に、「ボタンの文字色」は暗い色に、「アクセント」は明るい藍に変えてください。
陶器と磁器で「使いはじめとお手入れ」の内容が違います
共通の案内は全商品に同じ文が出るので、既定文のように「陶器は目止めを、磁器は不要です」と両方に触れる書き方にしてください。商品ごとに変えたいことは、商品説明に「お手入れ：」「注意：」の行で書くと、その商品のスペック表に入ります。
「残り1点」のラベルを消したい
「残り1点の商品に『残り1点』ラベルを表示する」を OFF にしてください。一点ものが多い店では、在庫を 1 にした商品すべてに付くので、定番品の在庫管理と合わせてお使いください。
商品ページの写真が縦に並ぶのをやめたい
パソコン表示の縦並びは UTSUWA の基本の見せ方で、切替はありません。写真の枚数が多いと長くなるので、商品ページに載せる写真は 3〜6 枚が目安です。スマートフォンでは横にスワイプする形になります。
受注制作の商品だけ納期を変えたい
共通の「受注制作と納期」はテーマ別設定の1か所で管理します。商品ごとの制作期間は、商品説明に「納期：次の窯出し後、11月上旬から発送」と書くと、その商品のスペック表に入ります。
メインビジュアルの見出しが変なところで改行されます
見出しは読点「、」と句点「。」の位置で折り返します。「毎日の食卓に、手のあとが残るうつわを。」のように、切れてほしい位置に読点を入れてください。句読点を使いたくないときは、切りたい位置に縦棒「|」（全角の「｜」でも可）を入れると、その位置で必ず改行します。「|」は画面には表示されません。
陶器市の期間中に発送を止めたい
「お知らせバナー App」を導入すると、全ページの上部に「○日までのご注文は○日以降の発送になります」のような帯を出せます。トップページの「陶器市・展示の予定」の補足文にも書けます。
HTML を直接編集してもいいですか？
編集はできますが、その時点でテーマの自動更新が止まり、以後の修正が反映されなくなります。設定画面で対応できることは設定画面で行うことをおすすめします。
App を入れていないのにメニューが出ています／出ません
Blog・カテゴリ・コミュニティ・メンバーシップ・検索・メールマガジン・言語切替のメニューと、「用途から探す」「カテゴリ索引」は、対応する App を導入したときだけ表示されます。導入直後に反映されない場合は、ページを再読み込みしてください。
商品が25件以上あるとき、一覧はどうなりますか？
トップページには最初 24 件を表示し、「もっと見る」を押すと続きが追加されます。商品を開いて戻ったときは、追加読み込み済みの状態とスクロール位置に戻ります。
更新履歴
- 1.0.0
- 初版。BASE デザインマーケットへ申請準備中。