TANA サポート
テーマの設定手順と、よくある質問をまとめています。ここで解決しないことは、ページ末尾のお問い合わせからお知らせください。
初期設定の6ステップ
BASE 管理画面の「デザイン」→「デザイン編集」から行います。上から順に進めれば、その日のうちに公開できます。
ロゴ
「基本設定」でロゴ画像かロゴテキストを設定します。画像は高さ 44px に収まるよう縮小されるので、縦長でも横長でも構いません。
背景のトーン
「基本設定」の背景色を決めたら、「テーマ別設定」の「背景のトーン」を合わせます。暗い背景にしたのに罫線が見えないときは、ここが「明るい背景向け」のままです。
色を4つ
アクセント・棚の色・ボタン・ボタンの文字色。棚の色は背景色より少し濃い色にすると、商品写真が棚に置いたように見えます（下の「棚の色の選び方」参照）。ボタンを薄い色にするときは文字色を濃くしてください。
メインビジュアル
横 1600px 以上の写真を1枚。見出し、説明文、ボタンの文言とリンク先を書き換えます。「写真と文章を横に並べる」「写真の上に文章を重ねる」の2レイアウトから選べます。写真を入れなくても、文字だけで成立するようにしてあります。
おすすめの棚
正方形の写真4枚と、名前、リンク先を設定します。リンク先はカテゴリページや商品ページの URL（下の「おすすめの棚のリンク先」参照）。名前が空欄の棚は消え、4つとも空欄なら見出しごと消えます。
出店・イベント予定
日付・名前・場所を3件まで。日付が空欄の行は消えます。予定がないときは「出店・イベント予定を表示」をOFFに。出店中に発送を止める案内は「お知らせバナー App」が便利です。
デザイン設定の一覧
「テーマ別設定」に並ぶ項目です。すべて初期値のままでも動きますが、店に合わせて書き換えると印象が大きく変わります。画像の初期値はすべて空欄です。
全体
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| アクセントカラー | 色 | #D9704F（見出しの飾り・ラベル・リンクの下線） |
| 棚の色 | 色 | #F3ECE2（商品カードや囲みの背景色。背景色より少し濃い色） |
| ボタンの色 | 色 | #3F3A35 |
| ボタンの文字色 | 色 | #FFFFFF |
| 背景のトーン | 選択 | 明るい背景向け / 暗い背景向け |
| 見出しの書体 | 選択 | 丸ゴシック（やさしい） / ゴシック（すっきり） / 明朝（上品） |
| 商品一覧の列数 | 選択 | 3列 / 4列 / 2列 |
| 商品画像の比率 | 選択 | 正方形 1:1 / やや縦長 4:5 / 横長 4:3 |
| 商品カードの見せ方 | 選択 | 棚に置く（写真を棚の色で囲む） / 写真のみ |
| ヘッダーを固定する | ON/OFF | ON |
| 残り1点に LAST 1 を表示 | ON/OFF | ON |
トップページ
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| メインビジュアルを表示 | ON/OFF | ON |
| メインビジュアルのレイアウト | 選択 | 写真と文章を横に並べる / 写真の上に文章を重ねる |
| メインビジュアルの画像 | 画像 | 横 1600 × 縦 1200px を推奨 |
| 見出し・説明・ボタンの文言とリンク先 | 文章 | 初期値あり。ボタン文言が空欄ならボタン非表示 |
| おすすめの棚を表示 | ON/OFF | ON |
| おすすめの棚の見出し | 文章 | おすすめの棚 |
| 棚1〜4の画像・名前・リンク先 | 画像 / 文章 | 名前の初期値: うつわ / 布もの / 紙もの / ギフト。画像は正方形を推奨。名前が空欄の棚は非表示 |
| カテゴリ一覧を表示 | ON/OFF | ON（カテゴリ管理App利用時） |
| たいせつにしていること（3つの特徴）を表示 | ON/OFF | ON |
| 特徴の見出し・特徴1〜3のタイトルと説明 | 文章 | 初期値あり（ひとつずつ、手作業で / 毎日つかえる素材 / 贈りものにも）。タイトルが空欄の枚は非表示 |
| ストーリーを表示 | ON/OFF | ON |
| ストーリーの画像・見出し・本文 | 画像 / 文章 | 初期値あり。画像は横 1200 × 縦 900px を推奨 |
| 出店・イベント予定を表示 | ON/OFF | ON |
| イベントの見出し・イベント1〜3の日付・名前・場所・補足 | 文章 | 初期値あり。日付が空欄の行は非表示 |
| ギフトラッピングの案内を表示 | ON/OFF | ON |
| ギフト案内の画像・見出し・本文 | 画像 / 文章 | 初期値あり。画像は横長を推奨 |
| Instagram の案内を表示 | ON/OFF | ON（SNS設定時） |
| メールマガジンの案内文 | 文章 | 初期値あり（メールマガジンApp利用時） |
About
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| About ページの画像 | 画像 | 横 1200px 以上の横長を推奨 |
商品ページ
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| 商品説明からスペック表を自動生成 | ON/OFF | ON |
| ギフトラッピング（見出し・本文・画像） | 文章 / 画像 | 初期値あり。見出しが空欄なら非表示 |
| お手入れ方法（見出し・本文） | 文章 | 初期値あり（陶器と布ものの例） |
| ご注文からお届けまで（見出し・本文） | 文章 | 初期値あり（在庫品の発送日数と受注制作の案内） |
| 手仕事の品について（見出し・本文） | 文章 | 初期値あり（色味・寸法・柄の個体差の説明） |
その他
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| フッターの一言 | 文章 | 空欄 |
商品説明の書き方
商品説明の中に、次のように「見出し語：内容」の行を書くと、その行が商品ページで表になり、本文からは消えます。行の順番は自由で、無い行は出ません。
素材：リネン100%（国産） / 内布 コットン サイズ：縦 12cm × 横 18cm × マチ 4cm 柄：手捺染の木の葉柄 お手入れ：中性洗剤で手洗い 納期：ご注文から 5〜7日で発送
表になる見出し語：素材 / 材質 / サイズ / 寸法 / 大きさ / 重さ / 重量 / 容量 / 色 / カラー / 柄 / 仕様 / セット内容 / 内容 / 生産 / 製作 / 製造 / 産地 / 原産国 / 納期 / 発送 / お手入れ / 注意 / 対応 / 使用方法 / ラッピング
全角・半角のコロン（：と :）どちらでも構いません。表にしたくない行は、見出し語の後にコロンを置かなければそのまま本文として表示されます。1行が80文字を超える行は本文のまま残ります。
おすすめの棚のリンク先
棚のリンク先には、ショップ内のどのページの URL でも入れられます。よく使うのは次の3つです。
- カテゴリページ：カテゴリ管理 App を導入し、ショップの画面でそのカテゴリを開いて、アドレスバーの URL をコピーします（例：https://ショップID.base.shop/categories/1234567）。
- 商品ページ：商品を開いて URL をコピーします。人気商品やギフトセットへの導線に。
- 検索結果：「https://ショップID.base.shop/search?q=ギフト」のように、商品検索 App の検索結果を棚にすることもできます。商品説明に同じ言葉が入っている商品が並びます。
棚の写真は正方形に切り抜かれます。商品写真をそのまま使うときは、中央に商品が来る写真を選んでください。
ラッピングやメッセージカードを注文時に選んでもらう
テーマの「ギフトラッピング」の案内は文章と写真だけです。お客さまに注文時に選んでもらうには、BASE の「商品オプション App」を導入して、次のようなオプションを作ります。
- 商品オプション App を導入し、「選択式」のオプションを作成。名前を「ギフトラッピング」、選択肢を「なし」「クラフト紙 + リボン（無料）」「ギフトボックス（+300円）」のように登録します。
- 「文字入れ式」のオプションを作成。名前を「メッセージカード」、文字数上限を 30 文字などに設定します。
- オプションを対象の商品に適用します。商品ページの数量の下に選択欄が表示されます。
テーマの「ギフトラッピングの案内」の本文は、この手順に合わせて「ご注文時にオプションをお選びください」のように書き換えてください。
棚の色の選び方
「棚の色」は商品カードの囲み、商品ページの画像の囲み、おすすめの棚、特徴・イベント・ギフト案内の囲み、アコーディオン、ドロワーメニュー、カテゴリの一覧、フッターに使われます。
- 明るい背景のとき：背景色より少し濃い生成り〜ベージュ（例：背景 #FBF8F3 なら棚の色 #F3ECE2）。白い背景なら薄いグレーベージュでも合います。
- 暗い背景のとき：背景より少し明るいこげ茶やグレー（例：背景 #1E1B19 なら棚の色 #2B2622）。「背景のトーン」も「暗い背景向け」にしてください。
- ドロワーメニューとカテゴリの一覧、フッターもこの色の面になるので、文字色と近い色は避けてください。
よくある質問
ロゴ画像の推奨サイズは？
高さ 44px に縮小して表示されます。横長なら高さ 88px（Retina対応）以上、縦長でも同じ高さに収まります。背景が透明な PNG がきれいに出ます。
暗い背景にしたら罫線や文字が見えなくなりました
「テーマ別設定」→「背景のトーン」を「暗い背景向け」にしてください。背景色と文字色は「基本設定」で、罫線や薄い色はこのトーンで決まります。「棚の色」も背景より少し明るい暗めの色に変えてください。
スペック表が出ません
「商品説明からスペック表を自動生成」が ON になっているか、見出し語の直後にコロン（：または :）があるかを確認してください。見出し語は上の一覧にあるものだけが対象です。1行が80文字を超えると本文のまま残ります。
受注制作の商品だけ納期を変えたい
共通の「ご注文からお届けまで」はテーマ別設定の1か所で管理します。商品ごとの制作期間は、商品説明に「納期：ご注文から2週間ほどで発送」と書くと、その商品のスペック表に入ります。
出店中に発送を止めたい
「お知らせバナー App」を導入すると、全ページの上部に「○日までのご注文は○日以降の発送になります」のような帯を出せます。トップページの「出店・イベント予定」の補足文にも書けます。
HTML を直接編集してもいいですか？
編集はできますが、その時点でテーマの自動更新が止まり、以後の修正が反映されなくなります。設定画面で対応できることは設定画面で行うことをおすすめします。
App を入れていないのにメニューが出ています／出ません
Blog・カテゴリ・コミュニティ・メンバーシップ・検索・メールマガジン・言語切替のメニューは、対応する App を導入したときだけ表示されます。導入直後に反映されない場合は、ページを再読み込みしてください。
商品が25件以上あるとき、一覧はどうなりますか？
トップページには最初 24 件を表示し、「もっと見る」を押すと続きが追加されます。商品を開いて戻ったときは、追加読み込み済みの状態とスクロール位置に戻ります。
更新履歴
- 1.0.0
- 初版。BASE デザインマーケットへ申請準備中。