ABOUT YOHAKU
余白を、ブランドの輪郭に。
Yohakuは、商品と写真を主役にしながら、ショップごとの世界観を組み立てられるBASE用オリジナルテーマです。
COLOR CLUBVIVID / GOTHICito to hanaSIMPLE / CRAFTLUMIÈREELEGANT / JEWELRYVOLT / ORANGEDARK / GADGET 余白と整った情報設計を共通の土台に、色、書体、写真、コピーの向き、セクションの背景や並び順を調整できます。静かな工芸店から、上品なアクセサリー、鮮やかな雑貨、暗色のガジェットショップまで、同じテーマから異なる表情をつくれます。
デザインを固定するのではなく、商品に合う見せ方を選べること。公開後もHTMLを触らず、テーマ設定から写真や色、文章を更新できること。この二つをYohakuの基本にしています。
- 写真を活かすメイン、ABOUT、商品を大きく見せる
- 言葉に表情をつける明朝・ゴシック、縦書き・横書きに対応
- 必要な構成を選ぶ各エリアの表示、順番、背景色を調整
- 運営を続けやすくテーマ設定とBASEの標準機能で更新
GETTING STARTED
はじめて設定する方へ
すべてを一度に埋める必要はありません。
写真と文章を用意して、大きな部分から整えましょう。
- 商品と素材を用意商品名・価格・在庫・写真・ロゴ・紹介文
- 全体の見た目を設定書体 → ロゴとナビ → メイン画像とコピー
- 必要なエリアを設定表示切替 → 写真と文章 → 配色とサイズ
- 確認して保存PC・スマホ・リンク先・入力内容をチェック
このマニュアルの読み方Yohaku v3.62を設置したショップ向けの設定マニュアルです。掲載画像は設定画面とショップの表示例です。BASEの画面更新やテーマのバージョン、設定内容により、実際の表示と異なる場合があります。「初期値」はテーマの標準設定で、お客様が変更・保存した値とは異なる場合があります。
各章の「設定項目を確認」を開くと、設定画面順の項目名・初期値・選択肢を確認できます。左の検索はこの設定項目を検索します。画像は別タブで開いて拡大できます。
BASE管理画面｜左メニューの「デザイン」から設定へ
画像を拡大する ↗BASEとYohakuの役割BASE：商品情報・ブログ記事・各Appの内容を登録。
Yohaku：書体・色・画像配置・表示切替など、ショップの見た目を調整。
変更前の設定を控え、プレビューで確認してから保存してください。HTML編集やテーマの入替えは、日々の設定変更とは別の作業です。
HTML編集テーマを使うときの注意HTML編集 Appで作成したカスタムテーマには、BASEによる新機能追加や不具合修正が自動で反映されない場合があります。変更前のHTMLと配布ZIPを保管し、BASEの仕様変更時は表示と購入動作を再確認してください。
カスタムテーマではデザインパーツ、ページ追加 App、海外販売代行 Appを利用できません。また、WebショップのテーマデザインはPAY IDアプリには反映されません。CONTACT、特定商取引法に基づく表記、プライバシーポリシーのページ本体もHTML編集の対象外です。
BASE公式｜HTML編集 Appの使い方 ↗
PAGE MAP
トップページの構成
トップページ全体｜Tsuchi iroの表示例
画像を拡大する ↗- お知らせバナー短い告知・Appで内容を設定
- ヘッダー店名・ロゴ・ナビ
- メインビジュアル写真とキャッチコピー
- HOMEのABOUT紹介写真・文章・動画
- BLOGBlog Appの記事
- PICK UPおすすめ商品の紹介
- CATEGORYカテゴリ・外部サイトへの画像リンク
- ITEM登録商品の一覧
- フッター案内リンク・SNS・メルマガ
BLOGからITEMまでの4エリアは並び順を変更できます。画像は一例で、すべてのエリアを表示する必要はありません。
DESIGN SETTINGS 01 設定項目 001—008
全体の書体・レイアウト
まずはショップ全体の雰囲気を決めます。
「フォントスタイル」は全体の書体セットです。明朝・ゴシックそれぞれ3種類から選びます。
「コピー書体」はメインビジュアルとHOMEのABOUTコピーだけを変更します。極太ゴシックはNoto Sans JP・900、太字明朝はNoto Serif JP・700です。本文やナビまで太字にはなりません。
「コンテンツの最大幅」は内容の横幅。「エリア間の余白」は縦方向の間隔です。画面いっぱいのメイン画像や背景写真型ABOUTは、内容幅とは別に表示します。
背景全体を変えるときは各エリアの背景色を使います。共通の「画像・地図の未設定・読込前背景色」は、画像や地図、ブログのサムネイルが未設定または読込中のときに見える補助色です。
BASE標準の背景は、ABOUT・ブログ・お問い合わせ・会員ページ・商品詳細などの独立ページに表示されます。HOME、カテゴリー一覧、検索結果の商品一覧部分には「ITEM｜背景色」が適用されます。
この章の設定項目を確認 8項目・設定画面順
001
フォントスタイル
初期値：明朝｜クラシック
選択肢：明朝｜クラシック ／ 明朝｜やわらか ／ 明朝｜モダン ／ ゴシック｜クリーン ／ ゴシック｜やわらか ／ ゴシック｜モダン
002
コピー書体｜メイン・ABOUTコピーのみ
初期値：全体のフォントに合わせる
選択肢：全体のフォントに合わせる ／ 極太ゴシック｜Noto Sans JP Black（900） ／ 太字明朝｜Noto Serif JP Bold（700）
003
レイアウト｜コンテンツの最大幅
初期値：標準 1120px
選択肢：標準 1120px ／ 狭め 960px ／ 広め 1280px
004
レイアウト｜エリア間の余白
初期値：ゆったり
選択肢：ゆったり ／ コンパクト ／ 広い
005
共通｜補助文字・操作時の強調色
初期値：#957044
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
006
共通｜罫線色
初期値：#d6d7cc
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
007
共通｜画像・地図の未設定・読込前背景色
初期値：#f6f6f0
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
008
共通｜セール価格色
初期値：#ae3636
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
DESIGN SETTINGS 03 設定項目 030—033
HOMEの並び順
BLOG・PICK UP・CATEGORY・ITEMの順番を指定します。
小さい数字が先に表示されます。迷ったら1・2・3・4を重複させずに設定してください。
並び替えの対象はこの4エリアです。メインビジュアル、HOMEのABOUT、フッターを自由な位置へ移動する設定ではありません。
この章の設定項目を確認 4項目・設定画面順
030
並び順｜NEWS（小さい数字が先）
初期値：1
031
並び順｜PICKUP（小さい数字が先）
初期値：2
032
並び順｜CATEGORY（小さい数字が先）
初期値：3
033
並び順｜ITEM（小さい数字が先）
初期値：4
DESIGN SETTINGS 04 設定項目 034—066
メインビジュアル
ショップの第一印象となる写真とコピーです。
「メインビジュアル｜表示」をONにし、「メイン1」の画像を登録します。2・3は必要な場合だけ登録。画像がないスライドは表示しません。
PCのサイズは、標準560px／低め440px／画面に合わせる、から選びます。「画面に合わせる」は画面の高さからお知らせバナーとヘッダーの基準分を引いて表示します。
各スライドのスマホ画像は任意です。登録した場合はスマホだけに使用し、未登録ならPC画像を使います。スマホ画像だけではスライドを表示しないため、PC画像は必ず登録します。
「画像の説明（任意）」は画像のalt属性です。画像が見えない場合や読み上げ時に伝わるよう、写真の内容を簡潔に書きます。PC画像とスマホ画像で共通です。装飾だけの写真なら空欄でも構いません。
各画像にコピー、文字方向、左右の配置、文字サイズと色を設定できます。コピー欄の改行を使って読みやすく区切ります。
写真と文字が重なる場合は配置を変えるか、「写真に重ねる色」と濃さを調整します。0％は透明です。
スマホのサイズは全画面／4:3から選びます。PCとスマホで見える写真の範囲が変わるため、主役と文字が切れていないか両方で確認します。
この章の設定項目を確認 33項目・設定画面順
034
メインビジュアル｜表示
初期値：ON
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
035
メイン｜PCのサイズ
初期値：標準 560px
選択肢：標準 560px ／ 低め 440px ／ 画面に合わせる
036
メイン｜スマホのサイズ
初期値：全画面
選択肢：全画面 ／ 4:3
037
メイン 1｜PC画像（未登録でスライド非表示）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
038
メイン 1｜スマホ画像（任意・未登録はPC画像）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
039
メイン 1｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
040
メイン 1｜コピー（改行可）
初期値：暮らしに寄り添う、
お気に入りのひと品。
041
メイン 1｜文字方向
初期値：縦書き
選択肢：縦書き ／ 横書き
042
メイン 1｜コピー配置
初期値：左寄せ
選択肢：左寄せ ／ 右寄せ
043
メイン 1｜コピーサイズ
初期値：M
選択肢：M ／ S ／ L
044
メイン 1｜コピー色
初期値：#283027
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
045
メイン 1｜写真に重ねる色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
046
メイン 1｜重ねる色の濃さ（0％で透明）
初期値：25%
選択肢：25% ／ 0% ／ 50% ／ 75% ／ 100%
047
メイン 2｜PC画像（未登録でスライド非表示）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
048
メイン 2｜スマホ画像（任意・未登録はPC画像）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
049
メイン 2｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
050
メイン 2｜コピー（改行可）
初期値：未設定
051
メイン 2｜文字方向
初期値：縦書き
選択肢：縦書き ／ 横書き
052
メイン 2｜コピー配置
初期値：左寄せ
選択肢：左寄せ ／ 右寄せ
053
メイン 2｜コピーサイズ
初期値：M
選択肢：M ／ S ／ L
054
メイン 2｜コピー色
初期値：#283027
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
055
メイン 2｜写真に重ねる色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
056
メイン 2｜重ねる色の濃さ（0％で透明）
初期値：25%
選択肢：25% ／ 0% ／ 50% ／ 75% ／ 100%
057
メイン 3｜PC画像（未登録でスライド非表示）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
058
メイン 3｜スマホ画像（任意・未登録はPC画像）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
059
メイン 3｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
060
メイン 3｜コピー（改行可）
初期値：未設定
061
メイン 3｜文字方向
初期値：縦書き
選択肢：縦書き ／ 横書き
062
メイン 3｜コピー配置
初期値：左寄せ
選択肢：左寄せ ／ 右寄せ
063
メイン 3｜コピーサイズ
初期値：M
選択肢：M ／ S ／ L
064
メイン 3｜コピー色
初期値：#283027
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
065
メイン 3｜写真に重ねる色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
066
メイン 3｜重ねる色の濃さ（0％で透明）
初期値：25%
選択肢：25% ／ 0% ／ 50% ／ 75% ／ 100%
DESIGN SETTINGS 05 設定項目 067—093
HOMEのABOUTエリア
ブランドの紹介をトップページに添えます。
「写真と文章を並べる」は画像とテキストを分ける配置。「写真に文章を重ねる」は画面横いっぱいの背景写真の上に文章を置く配置です。
コピーと本文は別のサイズ・色で設定します。縦書きの目安はコピー1行12文字程度、本文1行45文字程度。太字にしたら改行も見直してください。
背景写真に重ねる縦書きは高さに上限があります。長文で列が増えた場合は、PCでは横スクロール、スマホでは横方向のスワイプで続きを読めます。読みやすさのため、できるだけ要点を絞ることをおすすめします。
エリア背景色と写真に重ねる色は別です。写真に重ねる色は「重ねる」配置で使います。背景写真が覆っている箇所では、エリア背景色は見えません。
ボタンは独立したABOUTページへの入口です。動画はABOUTエリアがONのときに直後へ表示します。YouTubeの共有URLを入力してください。
この章の設定項目を確認 27項目・設定画面順
067
ABOUTエリア｜表示
初期値：ON
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
068
ABOUTエリア｜エリア背景色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
069
ABOUTエリア｜表示方法
初期値：写真と文章を並べる
選択肢：写真と文章を並べる ／ 写真に文章を重ねる
070
ABOUTエリア｜写真（重ねる配置では背景）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
071
ABOUTエリア｜写真の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
072
ABOUTエリア｜文字方向
初期値：縦書き
選択肢：縦書き ／ 横書き
073
ABOUTエリア｜文章の位置（写真に重ねる場合）
初期値：左
選択肢：左 ／ 中央 ／ 右
074
ABOUTエリア｜コピー（改行可・縦書きは1行12文字程度）
初期値：ものづくりへの想いを、
ひとつひとつに込めて
お届けします。
075
ABOUTエリア｜コピーサイズ（PC）
初期値：M
選択肢：M ／ S ／ L
076
ABOUTエリア｜コピーサイズ（スマホ）
初期値：M
選択肢：M ／ S ／ L
077
ABOUTエリア｜コピー色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
078
ABOUTエリア｜本文（改行可・縦書きは1行45文字程度）
初期値：毎日の暮らしに、心が動くひと品を。
私たちが大切にしているのは、使う楽しさと、選ぶよろこびです。
いつもの一品にも、大切な方への贈りものにも。暮らしに寄り添うひと品をお届けします。
079
ABOUTエリア｜本文サイズ（PC）
初期値：M
選択肢：M ／ S ／ L
080
ABOUTエリア｜本文サイズ（スマホ）
初期値：M
選択肢：M ／ S ／ L
081
ABOUTエリア｜本文色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
082
ABOUTエリア｜写真に重ねる色（重ねる配置のみ）
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
083
ABOUTエリア｜重ねる色の濃さ（0％で透明）
初期値：25%
選択肢：25% ／ 0% ／ 50% ／ 75% ／ 100%
084
ABOUTエリア｜ボタンを表示
初期値：ON
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
085
ABOUTエリア｜ボタン文言（ABOUTページへ）
初期値：私たちについて
086
ABOUTエリア｜ボタン｜形
初期値：四角
選択肢：四角 ／ 角丸
087
ABOUTエリア｜ボタン｜背景色
初期値：#344638
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
088
ABOUTエリア｜ボタン｜背景
初期値：色を表示
選択肢：色を表示 ／ 透明
「透明」では指定した色を表示しません。「色を表示」に戻すと登録色を使います。
089
ABOUTエリア｜文字色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
090
ABOUTエリア｜枠線色
初期値：#344638
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
091
ABOUTエリア｜ボタン｜枠線
初期値：色を表示
選択肢：色を表示 ／ 透明
「透明」では指定した色を表示しません。「色を表示」に戻すと登録色を使います。
092
ABOUTエリア｜直後に動画を表示（エリアON時）
初期値：OFF
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
093
ABOUTエリア｜YouTube動画URL（共有リンク可）
初期値：未設定
DESIGN SETTINGS 06 設定項目 094—111
BLOG
記事の内容はBlog App、見た目はテーマで設定します。
Blog Appで記事を作成し、BLOG表示をONにします。テーマ設定には記事を直接入力する欄はありません。
エリア背景色を変えても、お知らせ一覧の内側は白背景で読みやすさを保ちます。記事タイトルの色は白にせず、濃い色を選びます。
「記事タイトルのサイズ」はHOMEとブログ一覧。「ブログ記事｜本文サイズ」は記事を開いた先の本文に影響します。
ページ最上部の「お知らせバナー」は別機能です。短い告知はお知らせバナーApp、更新記事はBlog Appで管理します。
この章の設定項目を確認 18項目・設定画面順
094
BLOG｜表示（Blog Appが必要）
初期値：ON
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
095
BLOG｜背景色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
096
BLOG｜見出し
初期値：Blog
097
BLOG｜英語見出し（空欄で非表示）
初期値：BLOG
098
BLOG｜見出しサイズ
初期値：M
選択肢：M ／ S ／ L
099
BLOG｜見出し色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
100
BLOG｜記事タイトルのサイズ（HOME・ブログ一覧）
初期値：M
選択肢：M ／ S ／ L
101
BLOG｜記事タイトルの色
初期値：#796348
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
102
BLOG｜ブログ一覧ボタンの文言
初期値：記事一覧を見る
103
BLOG｜もっと見るボタン｜形
初期値：四角
選択肢：四角 ／ 角丸
104
BLOG｜もっと見るボタン｜背景色
初期値：#344638
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
105
BLOG｜もっと見るボタン｜背景
初期値：色を表示
選択肢：色を表示 ／ 透明
「透明」では指定した色を表示しません。「色を表示」に戻すと登録色を使います。
106
BLOG｜もっと見るボタン｜文字色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
107
BLOG｜もっと見るボタン｜枠線色
初期値：#344638
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
108
BLOG｜もっと見るボタン｜枠線
初期値：色を表示
選択肢：色を表示 ／ 透明
「透明」では指定した色を表示しません。「色を表示」に戻すと登録色を使います。
109
ブログ記事｜タイトルサイズ
初期値：M
選択肢：M ／ S ／ L
110
ブログ記事｜本文サイズ
初期値：M
選択肢：M ／ S ／ L
111
ブログ記事｜一覧へもどるボタンの文言
初期値：記事一覧にもどる
DESIGN SETTINGS 07 設定項目 112—133
PICK UP・おすすめ
ひとつの商品を写真と紹介文で目立たせます。
表示をONにして商品URLを入力します。URLが空欄の場合は枠を表示しません。写真・商品名・紹介文・ボタン文字もこのエリア用に入力します。
商品登録の内容を変更した場合は、ここに入力した紹介文や画像も確認してください。
暗い背景では、見出し・商品名・紹介文・ボタン文字をそれぞれ読める色に設定します。背景色だけ変えて終わりにしないことが大切です。
この章の設定項目を確認 22項目・設定画面順
112
PICK UP｜表示
初期値：ON
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
113
PICK UP｜背景色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
114
PICK UP｜見出し
初期値：おすすめ
115
PICK UP｜英語見出し（空欄で非表示）
初期値：PICK UP
116
PICK UP｜見出しサイズ
初期値：M
選択肢：M ／ S ／ L
117
PICK UP｜見出し色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
118
PICK UP｜商品URL（空欄で枠を非表示）
初期値：未設定
119
PICK UP｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
120
PICK UP｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
121
PICK UP｜商品名
初期値：未設定
122
PICK UP｜商品名サイズ
初期値：M
選択肢：M ／ S ／ L
123
PICK UP｜商品名色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
124
PICK UP｜紹介文
初期値：未設定
125
PICK UP｜紹介文サイズ
初期値：M
選択肢：M ／ S ／ L
126
PICK UP｜紹介文色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
127
PICK UP｜ボタン文字
初期値：VIEW
128
PICK UP｜ボタン｜形
初期値：四角
選択肢：四角 ／ 角丸
129
PICK UP｜ボタン｜背景色
初期値：#344638
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
130
PICK UP｜ボタン｜背景
初期値：色を表示
選択肢：色を表示 ／ 透明
「透明」では指定した色を表示しません。「色を表示」に戻すと登録色を使います。
131
PICK UP｜文字色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
132
PICK UP｜枠線色
初期値：#344638
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
133
PICK UP｜ボタン｜枠線
初期値：色を表示
選択肢：色を表示 ／ 透明
「透明」では指定した色を表示しません。「色を表示」に戻すと登録色を使います。
DESIGN SETTINGS 08 設定項目 134—169
CATEGORY・画像リンク
写真つきの入口を最大6件まで設定します。
各カードへリンク先URL全文・表示名・画像を設定します。URLが空欄のカードは表示しません。商品カテゴリのほか、Instagram、LINE、キャンペーンなどの外部HTTPS URLにもリンクできます。
PCとスマホの列数を別々に選べます。「写真レイヤーを表示」をOFFにすると写真をそのまま見せられます。ONの場合は文字色とレイヤー色の組み合わせを調整し、表示名を読みやすくします。
HOMEの画像カードはカテゴリ管理Appがなくても使えます。ナビに表示するカテゴリ一覧は別機能で、カテゴリ管理Appの内容と連動します。外部リンク用の画像も、商用利用が認められた素材を使用してください。
この章の設定項目を確認 36項目・設定画面順
134
CATEGORY｜表示
初期値：ON
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
135
CATEGORY｜背景色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
136
CATEGORY｜見出し
初期値：カテゴリー
137
CATEGORY｜英語見出し（空欄で非表示）
初期値：CATEGORY
138
CATEGORY｜見出しサイズ
初期値：M
選択肢：M ／ S ／ L
139
CATEGORY｜見出し色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
140
CATEGORY｜PCの列数
初期値：3列
選択肢：3列 ／ 2列 ／ 4列
141
CATEGORY｜スマホの列数
初期値：2列
選択肢：2列 ／ 1列
142
CATEGORY｜写真内のカテゴリ名サイズ
初期値：M
選択肢：M ／ S ／ L
143
CATEGORY｜写真内のカテゴリ名色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
144
CATEGORY｜写真レイヤー色
初期値：#000000
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
145
CATEGORY｜写真レイヤーを表示
初期値：ON
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
146
CATEGORY 1｜リンク先URL（空欄で非表示）
初期値：未設定
147
CATEGORY 1｜表示名
初期値：未設定
148
CATEGORY 1｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
149
CATEGORY 1｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
150
CATEGORY 2｜リンク先URL（空欄で非表示）
初期値：未設定
151
CATEGORY 2｜表示名
初期値：未設定
152
CATEGORY 2｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
153
CATEGORY 2｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
154
CATEGORY 3｜リンク先URL（空欄で非表示）
初期値：未設定
155
CATEGORY 3｜表示名
初期値：未設定
156
CATEGORY 3｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
157
CATEGORY 3｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
158
CATEGORY 4｜リンク先URL（空欄で非表示）
初期値：未設定
159
CATEGORY 4｜表示名
初期値：未設定
160
CATEGORY 4｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
161
CATEGORY 4｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
162
CATEGORY 5｜リンク先URL（空欄で非表示）
初期値：未設定
163
CATEGORY 5｜表示名
初期値：未設定
164
CATEGORY 5｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
165
CATEGORY 5｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
166
CATEGORY 6｜リンク先URL（空欄で非表示）
初期値：未設定
167
CATEGORY 6｜表示名
初期値：未設定
168
CATEGORY 6｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
169
CATEGORY 6｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
DESIGN SETTINGS 09 設定項目 170—193
ITEM・商品一覧
商品情報はBASE、一覧の見せ方はYohakuで整えます。
商品名・価格・説明・在庫・画像はBASEの「商品」から登録します。テーマ側では一覧の列数、写真の収め方、文字サイズ・色などを設定します。
「枠に合わせる」は枠を埋めるため写真の一部が切れる場合があります。「写真全体を表示」は全体を見せるため余白が出る場合があります。
商品名と価格にはPC・スマホ別の文字サイズがあります。長い商品名も入れて、折り返しと価格の読みやすさを確認します。
この章の設定項目を確認 24項目・設定画面順
170
ITEM｜背景色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
171
ITEM｜見出し
初期値：商品一覧
172
ITEM｜英語見出し（空欄で非表示）
初期値：PRODUCTS
173
ITEM｜見出しサイズ
初期値：M
選択肢：M ／ S ／ L
174
ITEM｜見出し色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
175
ITEM｜商品列数（PC）
初期値：3列
選択肢：3列 ／ 2列 ／ 4列 ／ 5列
176
ITEM｜商品列数（スマホ）
初期値：2列
選択肢：2列 ／ 1列
177
ITEM｜商品写真の収め方
初期値：枠に合わせる
選択肢：枠に合わせる ／ 写真全体を表示
178
ITEM｜商品名サイズ（PC）
初期値：M
選択肢：M ／ S ／ L
179
ITEM｜商品名サイズ（スマホ）
初期値：M
選択肢：M ／ S ／ L
180
ITEM一覧｜商品名色
初期値：#957044
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
181
ITEM一覧｜価格サイズ（PC）
初期値：M
選択肢：M ／ S ／ L
182
ITEM一覧｜価格サイズ（スマホ）
初期値：M
選択肢：M ／ S ／ L
183
ITEM一覧｜価格色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
184
ITEM｜「商品を詳しく見る」の文言
初期値：商品を詳しく見る
185
ITEM｜「商品を詳しく見る」サイズ
初期値：M
選択肢：M ／ S ／ L
186
ITEM｜「商品を詳しく見る」色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
187
ITEM｜続きの商品を読み込むボタン文言
初期値：もっと見る
188
ITEM｜追加表示ボタン｜形
初期値：四角
選択肢：四角 ／ 角丸
189
ITEM｜追加表示ボタン｜背景色
初期値：#344638
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
190
ITEM｜追加表示ボタン｜背景
初期値：色を表示
選択肢：色を表示 ／ 透明
「透明」では指定した色を表示しません。「色を表示」に戻すと登録色を使います。
191
ITEM｜追加表示ボタン｜文字色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
192
ITEM｜追加表示ボタン｜枠線色
初期値：#344638
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
193
ITEM｜追加表示ボタン｜枠線
初期値：色を表示
選択肢：色を表示 ／ 透明
「透明」では指定した色を表示しません。「色を表示」に戻すと登録色を使います。
DESIGN SETTINGS 10 設定項目 194—249
独立したABOUTページ
HOMEの紹介とは別に、ブランドや買い物の案内を掲載します。
紹介ブロックは1〜5。各ブロックに写真、タイトル、本文を登録します。HOMEのABOUTエリアとは入力欄が別です。
本文に「http://」または「https://」から始まるURLを書くと、クリックできるリンクとして同じタブで開きます。HTMLタグを入力しても装飾には反映されません。URLの前後には空白または改行を入れてください。
実店舗情報、アクセス、ショッピングガイド、FAQはそれぞれ表示を切り替えます。実店舗がなければ店舗情報やアクセスを無理に掲載する必要はありません。
地図は通常のURLではなく、地図サービスが発行するiframe形式の埋め込みHTMLを指定します。
ショッピングガイドは配送・送料、お支払い方法、返品・交換を縦に並べる構成です。文章は実際のショップ設定と一致させます。決済ロゴはBASE設定に連動します。
FAQは最大5件。質問と回答の両方を入力し、FAQ表示をONにしてください。
この章の設定項目を確認 56項目・設定画面順
194
ABOUTページ｜ページ冒頭のタイトル
初期値：私たちについて
195
ABOUTページ｜大見出しサイズ（冒頭・各案内）
初期値：M
選択肢：M ／ S ／ L
196
ABOUTページ｜大見出し色（冒頭・各案内）
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
197
ABOUTページ｜小見出しサイズ（紹介・ガイド・質問）
初期値：M
選択肢：M ／ S ／ L
198
ABOUTページ｜小見出し色（紹介・ガイド・質問）
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
199
ABOUTページ｜本文サイズ
初期値：M
選択肢：M ／ S ／ L
200
ABOUTページ｜本文色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
201
ブロック1｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
202
ブロック1｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
203
ブロック1｜タイトル
初期値：未設定
204
ブロック1｜本文
初期値：未設定
205
ブロック2｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
206
ブロック2｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
207
ブロック2｜タイトル
初期値：未設定
208
ブロック2｜本文
初期値：未設定
209
ブロック3｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
210
ブロック3｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
211
ブロック3｜タイトル
初期値：未設定
212
ブロック3｜本文
初期値：未設定
213
ブロック4｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
214
ブロック4｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
215
ブロック4｜タイトル
初期値：未設定
216
ブロック4｜本文
初期値：未設定
217
ブロック5｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
218
ブロック5｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
219
ブロック5｜タイトル
初期値：未設定
220
ブロック5｜本文
初期値：未設定
221
実店舗情報｜表示
初期値：OFF
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
222
実店舗情報｜見出し
初期値：実店舗情報
223
実店舗情報｜住所・電話・営業時間など
初期値：未設定
224
実店舗情報｜画像
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
225
実店舗情報｜画像の説明（任意）
初期値：未設定
画像の内容を簡潔に説明します。見出しやコピーを入力する欄ではありません。
226
アクセス｜表示
初期値：OFF
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
227
アクセス｜見出し
初期値：アクセス
228
アクセス｜交通案内
初期値：未設定
229
アクセス｜地図の埋め込みHTML（URLではなくiframe）
初期値：未設定
230
ショッピングガイド｜表示
初期値：OFF
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
231
ショッピングガイド｜見出し
初期値：Shopping Guide
232
ショッピングガイド｜配送・送料の見出し
初期値：配送・送料
233
ショッピングガイド｜配送・送料の本文
初期値：未設定
234
ショッピングガイド｜お支払い方法の見出し
初期値：お支払い方法
235
ショッピングガイド｜決済の補足文（ロゴはBASE設定に連動）
初期値：以下のお支払い方法をご利用いただけます。
236
ショッピングガイド｜返品・交換の見出し
初期値：返品・交換
237
ショッピングガイド｜返品・交換の本文
初期値：未設定
238
FAQ｜表示（質問と回答の両方を入力）
初期値：OFF
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
239
FAQ｜見出し
初期値：FAQ
240
FAQ 1｜質問
初期値：未設定
241
FAQ 1｜回答
初期値：未設定
242
FAQ 2｜質問
初期値：未設定
243
FAQ 2｜回答
初期値：未設定
244
FAQ 3｜質問
初期値：未設定
245
FAQ 3｜回答
初期値：未設定
246
FAQ 4｜質問
初期値：未設定
247
FAQ 4｜回答
初期値：未設定
248
FAQ 5｜質問
初期値：未設定
249
FAQ 5｜回答
初期値：未設定
DESIGN SETTINGS 11 設定項目 250—261
商品詳細ページ
購入前に読むページの文字と購入ボタンを整えます。
商品名・価格の文字サイズはPCとスマホで個別に設定できます。ITEM一覧の文字サイズとは別です。
購入ボタンは形、背景、文字色、枠線を設定します。「透明」を選ぶと登録した背景色や枠線色は見えません。
商品説明や種類・オプションの内容はBASEの商品設定や該当Appで管理します。この欄は内容を登録する場所ではありません。
この章の設定項目を確認 12項目・設定画面順
250
商品ページ｜商品名サイズ（PC）
初期値：M
選択肢：M ／ S ／ L
251
商品ページ｜商品名サイズ（スマホ）
初期値：M
選択肢：M ／ S ／ L
252
商品ページ｜商品名色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
253
商品ページ｜価格サイズ（PC）
初期値：M
選択肢：M ／ S ／ L
254
商品ページ｜価格サイズ（スマホ）
初期値：M
選択肢：M ／ S ／ L
255
商品ページ｜価格色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
256
商品ページ｜購入ボタン｜形
初期値：四角
選択肢：四角 ／ 角丸
257
商品ページ｜購入ボタン｜背景色
初期値：#344638
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
258
商品ページ｜購入ボタン｜背景
初期値：色を表示
選択肢：色を表示 ／ 透明
「透明」では指定した色を表示しません。「色を表示」に戻すと登録色を使います。
259
商品ページ｜購入ボタン｜文字色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
260
商品ページ｜購入ボタン｜枠線色
初期値：#344638
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
261
商品ページ｜購入ボタン｜枠線
初期値：色を表示
選択肢：色を表示 ／ 透明
「透明」では指定した色を表示しません。「色を表示」に戻すと登録色を使います。
DESIGN SETTINGS 12 設定項目 262—281
Apps・SNS
Appが管理する情報と、テーマで変える外観を分けます。
お知らせバナーAppの文章・リンク・配色はBASEのお知らせバナー設定で入力します。Yohakuにはバナーの表示切替があります。
メルマガAppは、見出し・登録案内文に加え、メールアドレス入力欄の背景色・文字色・枠線色と、登録ボタンの背景色・文字色・枠線色を別々に設定できます。入力欄の枠線色は「共通｜罫線色」の影響を受けません。入力欄とボタンの高さは48pxで揃います。App側の導入・設定も必要です。
SNSロゴ画像は透過PNGを推奨します。未登録時は文字表示になります。画像を入れるだけではリンク先は設定されないため、BASE側のSNS情報も確認してください。
この章の設定項目を確認 20項目・設定画面順
262
お知らせバナーApp｜表示
初期値：ON
必要に応じて表示を切り替えます。関連する画像・内容・Appも確認してください。
263
メルマガApp｜見出し
初期値：お店からのお便り
264
メルマガApp｜登録案内文
初期値：メールマガジンを受け取る
265
メルマガApp｜入力欄｜背景色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
266
メルマガApp｜入力欄｜文字色
初期値：#282b25
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
267
メルマガApp｜入力欄｜枠線色
初期値：#d6d7cc
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
268
メルマガApp｜送信ボタン｜形
初期値：四角
選択肢：四角 ／ 角丸
269
メルマガApp｜送信ボタン｜背景色
初期値：#344638
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
270
メルマガApp｜送信ボタン｜背景
初期値：色を表示
選択肢：色を表示 ／ 透明
「透明」では指定した色を表示しません。「色を表示」に戻すと登録色を使います。
271
メルマガApp｜送信ボタン｜文字色
初期値：#ffffff
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
272
メルマガApp｜送信ボタン｜枠線色
初期値：#344638
色を指定します。背景と文字の組み合わせをプレビューで確認してください。
273
メルマガApp｜送信ボタン｜枠線
初期値：色を表示
選択肢：色を表示 ／ 透明
「透明」では指定した色を表示しません。「色を表示」に戻すと登録色を使います。
274
Instagram｜ロゴ画像（透過PNG推奨・未登録は文字表示）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
275
X｜ロゴ画像（透過PNG推奨・未登録は文字表示）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
276
LINE｜ロゴ画像（透過PNG推奨・未登録は文字表示）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
277
Facebook｜ロゴ画像（透過PNG推奨・未登録は文字表示）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
278
YouTube｜ロゴ画像（透過PNG推奨・未登録は文字表示）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
279
TikTok｜ロゴ画像（透過PNG推奨・未登録は文字表示）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
280
note｜ロゴ画像（透過PNG推奨・未登録は文字表示）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
281
Ameba｜ロゴ画像（透過PNG推奨・未登録は文字表示）
初期値：未設定
画像を登録します。画像の説明欄がある場合は、写真の内容を短く添えてください。
STANDARD PAGES
その他の標準ページ
標準機能・Appの内容を反映するページです。
お問い合わせは問い合わせフォーム、メンバーシップは該当Appの設定を確認します。Yohakuのナビ文言は入口の表示を変えるもので、会員特典や規約の本文を作る設定ではありません。
FINAL CHECK
公開前に確認すること
- PCとスマホで、コピーと写真の主役が切れていない
- 濃い背景の見出し・本文・ボタンが読める
- 白いBLOG一覧の文字色が薄すぎない
- 商品価格・在庫・送料と案内文が一致している
- カテゴリ・おすすめ・SNSのリンク先が正しい
- 不要なエリアやナビが非表示になっている
- 商品一覧だけでなく商品詳細・ABOUT・ブログも確認した
よくあるつまずき
表示をONにしたのに出てこない
メインは画像、PICK UPとCATEGORYカードはURL、FAQは質問と回答を確認してください。BLOGとナビのカテゴリ一覧は関連Appの設定も確認します。
色を指定したのに変わらない
ボタンの背景・枠線が「透明」になっていないか確認します。写真に重ねる色は濃さ0％またはレイヤー表示OFFでは見えません。各エリア背景色と共通の補助背景色も別の設定です。
ABOUTを編集したのにトップが変わらない
トップページは「ABOUTエリア」、独立ページは「ABOUTページ」の設定を使用します。編集したい場所に対応する欄を確認してください。
画像が切れる・コピーが読めない
メインはPCとスマホで写真の見える範囲が変わります。主役の位置やコピー配置を見直してください。商品一覧は「写真全体を表示」も試せます。太字コピーに変更したときはサイズと改行を再確認します。
