HOW TO USE
基本設定
背景の設定
カラーから選ぶもしくはパターンから選ぶで設定してください。
基本設定
フォント表示のルール
フォント表示のルール(優先順位)があります。基本的には英数字は欧文フォントの適用が優先される設定となっています。欧文フォントには日本語が含まれていないため、日本語には欧文フォントがスキップされ、和文フォントが適用されます。以下のテキストを例にいくつか例を挙げてみます。
■サンプルテキスト
- 本文以外のテキスト:Title-01 商品タイトル
- 本文のテキスト:Text-01 本文テキスト
1)本文のみのフォントで設定した場合
- Title-01(本文の欧文)商品タイトル(本文の和文)
- Text-01(本文の欧文)本文テキスト(本文の和文)
2)本文以外(欧文)を「ON」にした場合
- Title-01(本文以外の欧文)商品タイトル(本文の和文)
- Text-01(本文の欧文)本文テキスト(本文の和文)
3)本文以外(和文)を「ON」にした場合
- Title-01 商品タイトル(本文以外の和文)
- Text-01(本文の欧文)本文テキスト(本文の和文)
4)本文以外(欧文)と(和文)を「ON」にした場合
- Title-01(本文以外の欧文)商品タイトル(本文以外の和文)
- Text-01(本文の欧文)本文テキスト(本文の和文)
基本設定
フォントの種類
以下に使用できるフォントを記載しました。見本の文字の画像とGoogle Fontsへのリンクを掲載しております。見本の画像でイメージするのが難しい場合は、実際に使用する文字をGoogle Fontsのサイトで試すこともできますので、そちらでご確認ください。
■本文(欧文)
○Roboto(Sans Serif)
https://fonts.google.com/specimen/Roboto
○Inter(Sans Serif)
https://fonts.google.com/specimen/Inter
○Montserrat(Sans Serif)
https://fonts.google.com/specimen/Montserrat
○Raleway(Sans Serif)
https://fonts.google.com/specimen/Raleway
○Quicksand(Sans Serif)
https://fonts.google.com/specimen/Quicksand
○Lora(Serif)
https://fonts.google.com/specimen/Lora
○Libre Baskerville(Serif)
https://fonts.google.com/specimen/Libre+Baskerville
○Cardo(Serif)
https://fonts.google.com/specimen/Cardo
○Nanum Myeongjo(Serif)
https://fonts.google.com/specimen/Nanum+Myeongjo
○Cormorant Garamond(Serif)
https://fonts.google.com/specimen/Cormorant+Garamond
○Roboto Slab(Slab Serif)
https://fonts.google.com/specimen/Roboto+Slab
○Zilla Slab(Slab Serif)
https://fonts.google.com/specimen/Zilla+Slab
■本文(和文)
○Noto Sans Japanese(ゴシック体)
https://fonts.google.com/noto/specimen/Noto+Sans+JP
○BIZ UDGothic(ゴシック体)
https://fonts.google.com/specimen/BIZ+UDGothic
○Zen Kaku Gothic New(ゴシック体)
https://fonts.google.com/specimen/Zen+Kaku+Gothic+New
○M PLUS Rounded 1c(丸ゴシック体)
https://fonts.google.com/specimen/M+PLUS+Rounded+1c
○Zen Maru Gothic(丸ゴシック体)
https://fonts.google.com/specimen/Zen+Maru+Gothic
○Noto Serif Japanese(明朝体)
https://fonts.google.com/noto/specimen/Noto+Serif+JP
○BIZ UDMincho(明朝体)
https://fonts.google.com/specimen/BIZ+UDMincho
○Shippori Mincho B1(明朝体)
https://fonts.google.com/specimen/Shippori+Mincho+B1
■本文以外(欧文)
使用する場合は「ON」にしてください。
※テキストロゴ、ナビゲーション、見出し、ボタンのフォント
○Roboto Condensed(Sans Serif)
https://fonts.google.com/specimen/Roboto+Condensed
○Fira Sans Condensed(Sans Serif)
https://fonts.google.com/specimen/Fira+Sans+Condensed
○Josefin Sans(Sans Serif)
https://fonts.google.com/specimen/Josefin+Sans
○Josefin Slab(Slab Serif)
https://fonts.google.com/specimen/Josefin+Slab
○Gravitas One(Serif)
https://fonts.google.com/specimen/Gravitas+One
○Rubik Dirt(Display)※太さは1種のみ
※和文と組み合わせた際に、太字設定の時、かすれた文字にならないことがあります。
https://fonts.google.com/specimen/Rubik+Dirt
○Righteous(Display)※太さは1種のみ
https://fonts.google.com/specimen/Righteous
○Rye(Display)※太さは1種のみ
https://fonts.google.com/specimen/Rye
○Chango(Display)※太さは1種のみ
https://fonts.google.com/specimen/Chango
○Averia Serif Libre(Display)
https://fonts.google.com/specimen/Averia+Serif+Libre
○Stardos Stencil(Display)
https://fonts.google.com/specimen/Stardos+Stencil
○Abril Fatface(Display)※太さは1種のみ
https://fonts.google.com/specimen/Abril+Fatface
○Poiret One(Display)※太さは1種のみ
https://fonts.google.com/specimen/Poiret+One
○Limelight(Display)※太さは1種のみ
https://fonts.google.com/specimen/Limelight
○Plaster(Display)※太さは1種のみ
https://fonts.google.com/specimen/Plaster
○Emblema One(Display)※太さは1種のみ
https://fonts.google.com/specimen/Emblema+One
○Dancing Script(Handwriting)
https://fonts.google.com/specimen/Dancing+Script
○Major Mono Display(Monospace)※太さは1種のみ
https://fonts.google.com/specimen/Major+Mono+Display
■本文以外(和文)
使用する場合は「ON」にしてください。
○Noto Serif Japanese(明朝体)
○BIZ UDMincho(明朝体)
○Shippori Mincho B1(明朝体)
※テキストロゴ、ナビゲーション、見出し、ボタンのフォント
※本文はゴシック体、それ以外を明朝体にしたいときにお使いいただけます
※種類は本文と同じのため、詳細は割愛いたします
基本設定
フォントサイズ
「14px、15px、16px」から設定してください。
基本設定
テキスト色(本文)
本文のテキストの色を設定してください。
基本設定
テキストリンク色
テキストリンクの色を設定してください。
基本設定
見出しのフォントサイズ
「XS、S、M、L、XL」から設定してください。
基本設定
見出しのテキストの太さ
「標準、太字」から設定してください。
基本設定
見出しのテキストの色
見出しのテキストの色を設定してください。
基本設定
見出しのテキストの位置
「左揃え、中央揃え」から設定してください。
基本設定
ボタンの種類と形状
○ボタンの種類
「背景色あり、枠線のみ(細線)、枠線のみ(太線)」から設定してください。
○ボタンの形状
「四角、角丸、丸型」から設定してください。

基本設定
ボタンの色
ボタンの色を設定してください。
基本設定
ボタンのテキストの色
ボタンのテキストの色を設定してください。
※ボタンの種類で「背景色あり」を選択した場合のみ
基本設定
ボタンのテキストの太さ
「標準、太字」から設定してください。
基本設定
角丸デザイン
「ON」にすると画像の角が角丸になります。

基本設定
ロゴの設定
表示箇所はヘッダーで、画像もしくはテキストで設定が可能です。
■画像で設定
※推奨サイズ[H40px〜H80px]
※画質が粗くならないようご調整ください
○背景が画像の時
背景が画像(トップページのメインビジュアルや下層ページのヘッダー画像)の時に使用したい色のロゴ画像を登録してください。

○背景がベタ塗りの時
背景がベタ塗り(画像ではない)の時に使用したい色のロゴ画像を登録してください。

○ロゴ画像の大きさ
「XS、S、M、L、XL」から設定してください。
※正方形や縦長のロゴの場合は小さくなり、見えにくくなる可能性がございます
※横に長すぎる場合は、スマートフォンなどで見えにくくなる可能性がございます
■テキストで設定
ショップ名を登録してください。
○背景が画像の時
背景が画像(トップページのメインビジュアルや下層ページのヘッダー画像)の時に使用したい色を設定してください。

○背景がベタ塗りの時
背景がベタ塗り(画像ではない)の時に使用したい色を設定してください。

○テキストロゴの大きさ
「XS、S、M、L、XL」から設定してください。
ナビゲーション
追加リンク
「表示する文言とリンク先」を設定してください。
※リンク先の設定が必要
※省略可
ナビゲーション
カートアイコン
「カート、バッグ」から設定してください。

ナビゲーション
SNSアカウント
アカウントを設定してください。

BASEのヘルプも併せてお読みください。