HANA サポート
テーマの設定手順と、よくある質問をまとめています。ここで解決しないことは、ページ末尾のお問い合わせからお知らせください。
初期設定の6ステップ
BASE 管理画面の「デザイン」→「デザイン編集」から行います。上から順に進めれば、その日のうちに公開できます。
ロゴ
「基本設定」でロゴ画像かロゴテキストを設定します。ロゴはヘッダーの左、ナビは右に置かれます。画像は高さ 44px に収まるよう縮小されるので、横長の画像がきれいに出ます。テキストは明朝で表示され、長い店名は 3 行まで折り返します。
背景のトーン
「基本設定」の背景色を決めたら、「テーマ別設定」の「背景のトーン」を合わせます。既定の背景は白ですが、生成り（#FBF8F4 前後）にすると紙の色との相性がよくなります。暗い背景にしたのに罫線が見えないときは、ここが「明るい背景向け」のままです。
色を4つ
アクセント・紙の色・ボタン・ボタンの文字色。既定はアクセントがセージグリーン（#6E8B74）、紙の色が生成り（#F3EEE6）、ボタンが墨色（#3C3835）です。アクセントは花材のチップの点・小見出し・タイプのバッジに使われます。紙の色は商品写真の下・季節のご予約のパネル・花材の枠・ドロワーメニューの面になります（下の「紙の色の選び方」参照）。
メインビジュアル
横 2000px 以上の横長の写真を1枚。小見出し（英字推奨）、見出し、説明文、ボタンの文言とリンク先を書き換えます。「全幅の写真に文字を重ねる」「文章と写真を横に並べる」「文字だけ」の3レイアウトから選べます。見出しは読点「、」の位置で折り返します。句読点を使わずに改行したいときは、切りたい位置に縦棒「|」を入れてください（例：「季節の花を|ゆっくり枯れる姿まで」）。「|」は表示されません。
季節のご予約
小見出し、日付（受付期限とお届け日）、見出し、本文、写真、ボタンの文言とリンク先を設定します。リンク先には予約販売 App で作った商品ページか、そのカテゴリページの URL を（下の「季節のご予約・シーン」参照）。予約がない時期は見出しを空欄にすると、パネルごと消えます。
花のはなし3枚
正方形の写真 3 枚と、花の名前、花言葉や説明を設定します。よく使う花材を紹介する場所です。名前が空欄のカードは消え、3 つとも空欄なら見出しごと消えます。
デザイン設定の一覧
「テーマ別設定」に並ぶ項目です。すべて初期値のままでも動きますが、店に合わせて書き換えると印象が大きく変わります。画像の初期値はすべて空欄です。
全体
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| アクセントカラー | 色 | #6E8B74（花材のチップ・小見出し・強調色） |
| 紙の色 | 色 | #F3EEE6（商品写真の下・ドロワーメニュー・パネルの背景色。背景色より少し濃い色） |
| ボタンの色 | 色 | #3C3835 |
| ボタンの文字色 | 色 | #FFFFFF |
| 背景のトーン | 選択 | 明るい背景向け / 暗い背景向け |
| 見出しの書体 | 選択 | 明朝（しずか） / ゴシック（すっきり） |
| 商品一覧の列数 | 選択 | 3列 / 4列 / 2列 |
| 商品画像の比率 | 選択 | やや縦長 4:5（既定） / 正方形 1:1 / 縦長 3:4 |
| 商品カードの様式 | 選択 | 紙の色を敷く / 写真のみ |
| ヘッダーを固定する | ON/OFF | ON |
| 残り1点に「残り1点」を表示 | ON/OFF | ON |
トップページ
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| メインビジュアルを表示・レイアウト・画像・文言 | ON/OFF / 選択 / 画像 / 文章 | ON。全幅の写真に文字を重ねる（既定） / 横に並べる / 文字だけ。画像は横 2000 × 縦 1200px を推奨 |
| シーンから探すを表示・見出し | ON/OFF / 文章 | ON（商品検索App利用時）。見出しの初期値は「贈るシーンから探す」 |
| シーン1〜6の名前 | 文章 | 誕生日 / 結婚祝い / 開店祝い / 新築祝い / お供え / 自分のために。空欄のシーンは非表示 |
| 季節のご予約を表示・小見出し・日付・見出し・本文・ボタン・画像 | ON/OFF / 文章 / 画像 | ON。初期値あり。見出しが空欄なら欄ごと非表示。画像は横 1200 × 縦 800px を推奨 |
| カテゴリの一覧を表示 | ON/OFF | ON（カテゴリ管理App利用時） |
| 花のはなしを表示・見出し | ON/OFF / 文章 | ON。見出しの初期値は「花のはなし」 |
| 花1〜3の写真・名前・花言葉 | 画像 / 文章 | 初期値あり（ユーカリ / ラベンダー / ミモザ）。写真は正方形 800px を推奨。名前が空欄のカードは非表示 |
| 飾り方とお手入れを表示・見出し・ステップ1〜3 | ON/OFF / 文章 | ON。初期値あり。タイトルが空欄のステップは非表示 |
| ストーリーを表示・画像・見出し・本文 | ON/OFF / 画像 / 文章 | ON。初期値あり。画像は横 1200 × 縦 900px を推奨 |
| 展示・イベントの予定を表示・見出し・予定1〜3・補足 | ON/OFF / 文章 | ON。初期値あり。日付が空欄の行は非表示 |
| サービス案内を表示・案内1〜3 | ON/OFF / 文章 | ON。初期値あり（配送と梱包 / ギフトとメッセージカード / 受注制作） |
| Instagram の案内を表示 | ON/OFF | ON（SNS設定時） |
| メールマガジンの案内文 | 文章 | 初期値あり（メールマガジンApp利用時） |
About
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| About ページの画像 | 画像 | 横 1200px 以上の横長を推奨 |
商品ページ
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| 商品説明からチップ・バッジ・表を自動生成 | ON/OFF | ON |
| ドライフラワーについて（見出し・本文） | 文章 | 初期値あり（色の変化、落ちる花材、写真との違い）。見出しが空欄なら非表示 |
| お手入れと飾り方（見出し・本文） | 文章 | 初期値あり（直射日光と湿気、ほこり、目安の期間） |
| 配送と梱包（見出し・本文） | 文章 | 初期値あり（箱に固定、発送日数、輸送中の崩れへの対応、返品不可） |
| ギフトラッピングとメッセージカード（見出し・本文・画像） | 文章 / 画像 | 初期値あり |
| お届け日の指定と受注制作（見出し・本文） | 文章 | 初期値あり（4日目以降の指定、受注制作は2〜3週間） |
その他
| 項目 | 種類 | 初期値・推奨 |
|---|---|---|
| フッターの一言 | 文章 | 空欄 |
商品説明の書き方
商品説明の中に次のような行を書くと、タイプのバッジ・花材のチップ・色のチップ・スペック表が商品ページに作られ、その行は本文から消えます。行の順番は自由で、無い行は出ません。
タイプ：ドライ 花材：ユーカリ、ラベンダー、小麦、スターチス、リューカデンドロン 色：グリーン、パープル、生成り 全長：約 45cm 幅：約 20cm リボン：リネン 日持ち：半年〜1年（色の変化を楽しめます） 用途：新築祝い、誕生日 制作：一点もの
バッジとチップになる行
- タイプ：ドライ / プリザーブド / 生花（フレッシュ） / アーティフィシャル（造花）。見出し語は タイプ / 種類 / 種別。商品名の上のバッジになります。生花は赤系の色です。
- 花材：「ユーカリ、ラベンダー、スターチス」のように読点・カンマ・スラッシュ・中点で区切ると、ひとつずつチップになります。見出し語は 花材 / 使用花材 / 花。かっこの中の読点でも区切られるので、補足は「ユーカリ（季節により変わります）」のように読点を使わずに書いてください。
- 色：「くすみピンク、生成り」のように区切ると、色の点つきの小さなチップになります。見出し語は 色 / カラー / 色味。ピンク・白・黄・緑・青・紫・赤・茶・グレー・オレンジ の言葉（英語のカラー名も）に点の色が付き、それ以外は白い点になります。
スペック表になる見出し語
サイズ / 寸法 / 全長 / 長さ / 幅 / 直径 / 高さ / 奥行 / 器 / 花器 / 花瓶 / 素材 / 資材 / リボン / 制作 / 製作 / 納期 / お届け / お届け日 / 発送 / 日持ち / 持ち / 保存 / お手入れ / 注意 / 用途 / ラッピング / メッセージカード / 品番
全角・半角のコロン（：と :）どちらでも構いません。表にしたくない行は、見出し語の後にコロンを置かなければそのまま本文として表示されます。1行が120文字を超える行は本文のまま残ります。
季節のご予約・贈るシーンから探す
季節のご予約
- BASE の「予約販売 App」を導入し、母の日やクリスマスの商品を作ります（お届け予定日は App 側で設定）。
- ショップの画面でその商品を開き、アドレスバーの URL をコピーします。複数あるならカテゴリを作り、そのカテゴリページの URL を。
- テーマ別設定の「ボタンのリンク先URL」に貼り付け、日付欄に「受付 4.20 まで / お届け 5.9 – 5.11」のように受付期限とお届け日を書きます。
- 受付が終わったら、見出しを空欄にするか「季節のご予約を表示」を OFF にします。
贈るシーンから探す
シーンの名前は、商品検索 App の検索語として使われます。押すと、商品名か商品説明にその言葉を含む商品が並びます。商品説明に「用途：新築祝い、誕生日」と書いておくと、シーンから探せるうえ、スペック表にも「用途」として並びます。シーン名は 6 つまで自由に変えられ、空欄にすると消えます。
メッセージカードとお届け日を注文時に受ける
テーマの「ギフトラッピングとメッセージカード」「お届け日の指定と受注制作」の案内は文章だけです。お客さまに注文時に選んでもらうには、BASE の「商品オプション App」を導入して、次のようなオプションを作ります。
- 「選択式」のオプションを作成。名前を「ラッピング」、選択肢を「なし」「クラフト箱 + リボン（無料）」「ギフトボックス（+500円）」のように登録します。
- 「文字入れ式」のオプションを作成。名前を「メッセージカードの文面」、文字数上限を 60 文字などに設定します。
- お届け日は、注文時の備考欄で受けるか、「文字入れ式」の「お届け希望日」オプション（例：5月10日）を作ります。
- オプションを対象の商品に適用します。商品ページの数量の下に選択欄が表示されます。
テーマの案内文は、この手順に合わせて「ご注文時にオプションをお選びください」のように書き換えてください。既定文はそうなっています。
紙の色の選び方
「紙の色」は商品一覧と商品ページの写真の下、季節のご予約のパネル、花材の枠、花のはなしの写真の下、ドロワーメニュー、カテゴリのドロップダウンに使われます。
- 明るい背景のとき：背景色より少し濃い生成り（例：背景 #FBF8F4 なら紙の色 #F3EEE6）。白い壁の前で撮った写真が多い店は、もう少し白に近い #F7F3EC でも合います。
- 暗い背景のとき：背景より少し明るいこげ茶〜グレー（例：背景 #262220 なら紙の色 #343029）。「背景のトーン」も「暗い背景向け」にしてください。アクセントは明るいセージ（#A9C2AC 前後）にすると、チップの点と小見出しが読みやすくなります。
- ドロワーメニューとパネルもこの色の面になるので、文字色と近い色は避けてください。
写真の撮り方
- 無地の壁や布の前で：生成りや白の背景が紙の色に馴染みます。逆光は花が暗く写るので、窓を横にして撮ってください。
- 1枚目は全体を縦長で：商品一覧の既定は 4:5 の縦長です。スワッグやブーケは縦に長いので、全体が入るよう周りに少し余白を残して。
- 2枚目以降は寄りと飾った場面：パソコンの商品ページでは写真が縦に並びます。全体 → 花材の寄り → 壁に飾った場面、の順に並べると、大きさと雰囲気が伝わります。
よくある質問
花材のチップが出ません
「商品説明からチップ・バッジ・表を自動生成」が ON になっているか、「花材：」のあとにコロン（：または :）があるかを確認してください。1 行が 160 文字を超えると本文のまま残ります。
色の点が白いままです
色の言葉に ピンク・白・黄・緑・青・紫・赤・茶・グレー・オレンジ（またはその英語）が含まれるときだけ点に色が付きます。「くすみピンク」「ダスティブルー」のように、その言葉を含めて書いてください。
ドライと生花が混ざる店の書き方は？
商品ごとに「タイプ：ドライ」「タイプ：生花」と書けば、バッジが変わります。生花には「お届け日：」「日持ち：」の行を書き、共通の「配送と梱包」に生花の発送曜日を書いておくと安心です。生花の予約は予約販売 App と「季節のご予約」の組み合わせがおすすめです。
ロゴ画像の推奨サイズは？
高さ 44px に縮小して表示されます。横長なら高さ 88px（Retina対応）以上を用意してください。背景が透明な PNG がきれいに出ます。
暗い背景にしたら罫線や文字が見えなくなりました
「テーマ別設定」→「背景のトーン」を「暗い背景向け」にしてください。「紙の色」は背景より少し明るいこげ茶に、「ボタンの色」は明るい色に、「ボタンの文字色」は暗い色に、「アクセント」は明るいセージに変えてください。
メインビジュアルの見出しが変なところで改行されます
見出しは読点「、」と句点「。」の位置で折り返します。「季節の花を、ゆっくり枯れる姿まで。」のように、切れてほしい位置に読点を入れてください。句読点を使いたくないときは、切りたい位置に縦棒「|」（全角の「｜」でも可）を入れると、その位置で必ず改行します。「|」は画面には表示されません。
マルシェの週に発送を止めたい
「お知らせバナー App」を導入すると、全ページの上部に「○日〜○日は出店のため、発送は○日以降になります」のような帯を出せます。トップページの「展示・イベントの予定」の補足文にも書けます。
HTML を直接編集してもいいですか？
編集はできますが、その時点でテーマの自動更新が止まり、以後の修正が反映されなくなります。設定画面で対応できることは設定画面で行うことをおすすめします。
商品が25件以上あるとき、一覧はどうなりますか？
トップページには最初 24 件を表示し、「もっと見る」を押すと続きが追加されます。商品を開いて戻ったときは、追加読み込み済みの状態とスクロール位置に戻ります。
更新履歴
- 1.0.0
- 初版。BASE デザインマーケットへ申請準備中。