GOODLIFE
¥12,800
※ショップの表示に影響のあるAppsの一覧です。
その他のAppsは全てご利用いただけます。
ーーーーーーーーーーーーーーーーーーーーーーー
ブランド力と販促力を強化し、
商品の世界観を演出できる、
多機能なデザインテーマ。
ーーーーーーーーーーーーーーーーーーーーーーー
デザインテーマ「GOODLIFE」は、自由度が高く、細部までカスタマイズできるのが特徴。スタイリッシュな印象も、柔らかい印象も、お好みの雰囲気を出せる仕様で、どんなジャンルの商品にも対応できる多機能なテーマ。
ブランド力を強化できるエリア、販促に使えるエリアも設け、商品の魅力と個性を最大限引き出しつつ、売り上げアップも狙えます。またユーザビリティにも配慮した設計になっています。
■ 主な特徴
○ 38種類から選べるフォント
○ フォントサイズの選択
○ デザインの選択（画像の角丸、ボタンの形状）
○ 画像比率の選択（3:2、4:3、1:1、3:4）
○ メインビジュアルのスライド3パターン（静止、スライド、フェード）
○ ブランドストーリーを伝えられるコンセプトエリア
○ エリアの並べ替え
○ 特集やキャンペーン向けのバナーエリア
○ おすすめ商品や売れ筋ランキングなどの販促エリア
○ Instagramフィード表示（外部サービスを利用）
○ 下層ページのヘッダー画像の表示
○ ABOUTページの4つのエリア
○ BLOG一覧
・レイアウト（横並び、縦並び）
・本文抜粋の表示設定
○ OGP画像設定
○ CSS追加設定（※上級者向け）
○ あらゆるデバイスに対応したレスポンシブデザイン
ーーーーーーーーーーーーーーーーーーーーーーー
「GOODLIFE」のテーマを使用したデモショップを是非ご覧ください。
■ テーマの説明を兼ねたオールジャンルのお店
［メインビジュアル］
・スライド
https://goodlife1.base.shop
■ 身体にいい無農薬栽培のイチゴ農園
［メインビジュアル］
・フェードのアニメーションON
https://goodlife2.base.shop
■ こだわりのスペシャルティコーヒーのお店
［メインビジュアル］
・フェード
・フェードのアニメーションON
・フェードの画像遷移速度（ゆっくり）ON
・フルスクリーン表示ON
https://goodlife3.base.shop
■ GOODLIFEの設定方法
https://base.leende.jp/goodlife/goodlife-howtouse/
ーーーーーーーーーーーーーーーーーーーーーーー
【38種類から選べるフォント】
豊富に選べるフォントは「GOODLIFE」の特徴のひとつ。選ぶフォントで雰囲気も、世界観も、伝わり方も変わります。 さまざまなジャンルの商品に対応できるよう、Google Fontsから38種類のフォントを厳選しました。
■ 本文で使用できるフォント
［欧文］12種類
Roboto（Sans Serif）/ Inter（Sans Serif）/ Montserrat（Sans Serif）/ Raleway（Sans Serif）/ Quicksand（Sans Serif）/ Lora（Serif）/ Libre Baskerville（Serif）/ Cardo（Serif）/ Nanum Myeongjo（Serif）/ Cormorant Garamond（Serif）/ Roboto Slab（Slab Serif）/ Zilla Slab（Slab Serif）
［和文］8種類
Noto Sans Japanese（ゴシック体）/ BIZ UDGothic（ゴシック体）/ Zen Kaku Gothic New（ゴシック体）/ M PLUS Rounded 1c（丸ゴシック体）/ Zen Maru Gothic（丸ゴシック体）/ Noto Serif Japanese（明朝体）/ BIZ UDMincho（明朝体）/ Shippori Mincho B1（明朝体）
■ テキストロゴ、ナビゲーション、見出し、ボタンで使用できるフォント
［欧文］18種類
Roboto Condensed（Sans Serif）/ Fira Sans Condensed（Sans Serif）/ Josefin Sans（Sans Serif）/ Josefin Slab（Slab Serif）/ Gravitas One（Serif）/ Rubik Dirt（Display）/ Righteous（Display）/ Rye（Display）/ Chango（Display）/ Averia Serif Libre（Display）/ Stardos Stencil（Display）/ Abril Fatface（Display）/ Poiret One（Display）/ Limelight（Display）/ Plaster（Display）/ Emblema One（Display）/ Dancing Script（Handwriting）/ Major Mono Display（Monospace）
［和文］3種類
Noto Serif Japanese（明朝体）/ BIZ UDMincho（明朝体）/ Shippori Mincho B1（明朝体）
ーーーーーーーーーーーーーーーーーーーーーーー
【共通項目】
■ フォント
○ フォントの表示ルール
別ページにて詳細を記載していますので、下記リンクよりご確認ください。
https://base.leende.jp/goodlife/goodlife-howtouse/#anc-font--rule
○ フォントの種類（全38種類）
別ページにて詳細を記載していますので、下記リンクよりご確認ください。
https://base.leende.jp/goodlife/goodlife-howtouse/#anc-font--type
○ フォントサイズ（14px、15px、16px）
■ 本文
○ テキストの色
○ リンクテキストの色
■ ヘッダーとナビゲーション
○ 背景色
メインビジュアルや下層ページにヘッダー画像の表示があるページは、背景色は透明の設定になっています。ヘッダー画像の表示がないページとスクロール後はヘッダーに背景色が付与されます。その際の背景色の設定です。
■ ロゴ画像
○ 画像の変更
※ヘッダー背景色付与後に、色違いなどの画像を変更する場合の設定
○ 画像の大きさの設定（XS、S、M、L、XL）
■ テキストロゴ（ショップロゴで画像を使わない場合）
○ 色の変更
※ヘッダー背景色付与後に、色を変更する場合の設定
○ フォントサイズ（XS、S、M、L、XL）
■ ナビゲーション
○ テキストの色（背景が透明の時）
○ テキストの色（背景付与後）
○ フォントサイズ（15px、16px、17px、18px）
○ テキストの太さ（標準、太字）
○ 文言の変更
・HOME
・CATEGORY
・ABOUT
・BLOG
・COMMUNITY
・COIN
・CONTACT
○ 追加リンク（最大3件）
○ カートアイコンの設定（カート、バッグ）
○ SNSアイコンの背景色
※背景色でアイコンが見えにくい場合
■ フッターナビゲーション
○ 背景色（幅1199px以下の時）
○ テキストの色（幅1199px以下の時）
■ フッターコピーライト
○ 背景色
○ テキストの色
■ デザイン設定
○ 角丸デザイン
※画像などの角が角丸になり、柔らかい印象を演出できます。
■ 見出し
○ フォントサイズ（XS、S、M、L、XL）
○ 太さ（標準、太字）
○ 色
○ 位置
■ ボタン
○ 種類（背景色あり、細枠線、太枠線）
○ 形状（四角、角丸、丸型）
○ ボタンの色
○ テキストの色 ※背景色ありの場合のみ
○ テキストの太さ（標準、太字）
ーーーーーーーーーーーーーーーーーーーーーーー
【メインビジュアルの特徴】
イメージ画像のみでブランディング用に使用したり、商品画像、タイトルテキストやリンクボタンを使用して商品詳細ページへリンクさせたり、自由度が高い仕様になっています。
○ スライドの種類（スライド、フェード、静止）
○ フルスクリーン表示（ON/OFF）
○ フェード選択時のアニメーション設定（ON/OFF）
○ フェード選択時の画像遷移速度（ゆっくり）設定（ON/OFF）
○ スライド画像（最大3枚）
・画像（横）※推奨［W1600×H任意］px
・画像（縦）※推奨［W800×H任意］px
※画面からはみ出した部分は切り取られます
○ タイトル ※省略可
○ リンク先 ※省略可
○ ボタンのテキスト ※リンク先の設定が必要
○ タイトルとボタンの色
○ ボタンのテキストの色 ※背景色ありの場合のみ
ーーーーーーーーーーーーーーーーーーーーーーー
【ブランドストーリーを伝えられるコンセプトエリア】
オーナー様の商品を作ったきっかけや想いをユーザー様に伝えられるエリアを設けました。
○ エリアの表示・非表示設定
○ 背景色
○ 背景の表示方法
・領域を覆う
・横に繰り返し
・縦に繰り返し
・縦横に繰り返し
○ 背景画像（縦・横）
○ 見出しの文言
○ 見出しの色
○ キャッチコピーの文言
○ キャッチコピーのフォントサイズ
○ 本文
○ キャッチコピーと本文の色
○ ボタンのテキストの文言
○ ボタンの色
○ ボタンのテキストの色 ※背景色ありの場合のみ
○ 画像 or 動画（YouTube）
○ 画像の左上の角丸設定
ーーーーーーーーーーーーーーーーーーーーーーー
【エリアの並べ替え】
エリアの順番を入れ替えることが可能です。同じ数字を選んだ場合は上のエリアが優先されます。お好みの位置でコンテンツを発信できます。
○ バナーエリア
○ PICK UPエリア
○ RANKINGエリア
○ BLOGエリア
○ ITEMエリア
ーーーーーーーーーーーーーーーーーーーーーーー
【ITEMエリア】
画像サイズがバラバラでも選択した比率で表示される仕様となっていますので表示崩れが起きません。比率からはみ出した部分は切り取られる仕様です。
○ 見出しの文言変更
○ 商品画像の比率（3:2、4:3、1:1、3:4）
○ 商品価格の文字の太さ（標準、太字）
○ 商品ステータスの色
○ ボタンのテキストの文言変更
ーーーーーーーーーーーーーーーーーーーーーーー
【特集やキャンペーン向けのバナーエリア】
特集やキャンペーンなどに使用できるエリア。最大2件まで登録が可能です。
○ エリアの表示・非表示設定
○ タイトルの文字の太さ
○ 画像
○ リンク先（省略可）
○ タイトルの文言（省略可）
○ 説明文（省略可）
ーーーーーーーーーーーーーーーーーーーーーーー
【おすすめ商品や売れ筋ランキングなどの販促エリア】
■ PICK UPエリア
商品を大きく取り扱うことができるエリア。登録は1件のみ。
○ エリアの表示・非表示設定
○ 見出しの文言
○ ボタンのテキスト
○ 画像の比率（3:2、4:3、1:1、3:4）
○ 画像の登録
○ タイトル
○ 価格
○ 商品ステータス（省略可）
○ 商品説明
○ リンク先
■ RANKINGエリア
売れ筋商品をおすすめできるエリア。最大3件まで登録が可能。画面幅が767pxまでの場合は、2件以上登録するとスライドの自動再生が始まります。
○ エリアの表示・非表示設定
○ 見出しの文言
○ 順位ラベルの表示・非表示設定
○ 順位ラベルの色
○ 画像の登録
○ タイトル
○ 価格
○ 商品ステータス（省略可）
○ 商品説明
○ リンク先
※画像の比率はITEMエリアの画像比率が反映されます。
ーーーーーーーーーーーーーーーーーーーーーーー
【Instagramフィード表示】
外部サービスの Sauce by SNPT (Snapppt) を利用し、Instagramのフィード表示が可能です。
○ エリアの表示・非表示設定
○ 見出しの文言
○ フィード埋め込みコードの登録
○ 表示サイズ（幅1200px以上の時）
・フルサイズ
・他のコンテンツに合わせる
○ ボタン
・リンク先
・ボタンのテキスト
設定方法は下記リンクよりご確認ください。
https://base.leende.jp/sauce-by-snpt-snapppt/
ーーーーーーーーーーーーーーーーーーーーーーー
【下層ページのヘッダー画像の表示】
ショップの魅力を引き出すための仕掛けとして、下層ページのヘッダー画像の表示も「GOODLIFE」の魅力の一つです。画像を利用することで雰囲気を出しやすく、世界観を演出できます。
■ 表示可能なページ
○ ABOUTページ（テーマ設定で登録が必要）
○ CATEGORYページ（カテゴリ管理 Appが必要）
○ BLOG一覧ページ（Blog Appが必要）
○ COMMUNITYページ（コミュニティAppが必要）
こういった仕様の関係で、メインビジュアルや下層ページにヘッダー画像の表示があるページは、背景色は透明の設定になっています。ヘッダー画像の表示がないページとスクロール後はヘッダーに背景色が付与されます。それに対応できるようにヘッダーの背景に合わせてロゴやテキストの色も変更できる仕様です。
ーーーーーーーーーーーーーーーーーーーーーーー
【ABOUTページ】
ABOUTページでは想いを伝えられるエリアを4つまで登録できます。リンク先をBlog記事（Blog App）に設定し、見出し、画像、動画、テキストリンクなどを利用すれば、さらに詳細を伝えることができます。
■ ABOUTエリアで登録できる項目
○ ヘッダー画像
○ 表示・非表示設定
○ 画像（縦横比は自由）
○ サブタイトル（省略可）
・色の設定
・文言の登録
○ キャッチコピー
・フォントサイズ（S、M、L）
・文言の登録
○ 本文
○ リンクボタンの設置（省略可）
ABOUTページでは、その他にもSHOP INFO、SHOPPING GUIDE、FAQエリアも登録できます。ユーザー様への情報提供も強化できる仕様です。
■ SHOP INFOエリアで登録できる項目
○ 表示・非表示設定
○ 見出しの文言
○ SHOP情報
○ SHOP地図（Google Maps）
■ SHOPPING GUIDEエリアで登録できる項目
［全体］
○ 表示・非表示設定
○ 見出しの文言
［配送・配送料］
○ 表示・非表示設定
○ 見出しの文言
○ 送料の条件
○ 送料
○ 送料の色
○ 送料の注意事項
○ テキスト
［お支払い方法］
○ 表示・非表示設定
○ 見出しの文言
○ テキスト
○ BASEかんたん決済7種の表示・非表示設定
［キャンセル・返品・交換］
○ 各エリアの表示・非表示設定
・全体
・キャンセル
・返品・交換
・その他のご利用ガイド
○ 各見出しの文言
○ 各テキスト
■ FAQエリアで登録できる項目
○ 表示・非表示設定
○ 見出しの文言
○ 色の設定
○ Qのテキスト色
○ FAQ01〜05の表示・非表示設定
○ 各質問
○ 各回答
ーーーーーーーーーーーーーーーーーーーーーーー
【Apps（追加機能）】
■ Blog App
レイアウトは横並びと縦並びの2種類から選べます。ブログ本文の抜粋の表示設定もできますので、レイアウト、画像比率と合わせて、自由に設定することが可能です。
○ レイアウトの選択（横並び、縦並び）
○ ブログ本文の抜粋の表示有無
○ 商品画像の比率（3:2、4:3、1:1、3:4）
○ ボタンのテキストの文言変更
■ メールマガジンApp
○ タイトル文字
○ テキスト文字
■ お知らせバナーApp
○ テキストの左揃え
○ 区切り線（上下線）有無
○ 線の色
■ 当デザインテーマで対応しているApps
※下記はショップの表示に影響のあるAppsの一覧です。
※下記以外にもAppsがあり、全てご利用いただけます。
※ページ追加Appはオフィシャルテーマのみが対象のためご利用いただけません。
※Appsの使い方はBASEの公式ヘルプをご確認ください。
「ヘルプ | BASE」→「ショップ向けヘルプ」→「Apps（追加機能）について」
○ 送料詳細設定
○ メッセージ
○ カテゴリ管理
○ 再入荷自動通知
○ BASEロゴ非表示
○ デジタルコンテンツ販売
○ 英語・外貨対応
○ メールマガジン
○ 年齢制限
○ Blog
○ ラベル
○ 商品検索
○ 定期便
○ レビュー
○ セール
○ ショップコイン
○ 販売期間設定
○ 予約販売
○ 抽選販売
○ 商品説明カスタム
○ 商品オプション
○ コミュニティ
○ テイクアウト
○ お知らせバナー
ーーーーーーーーーーーーーーーーーーーーーーー
【OGP画像設定】
ページがSNSでシェアされた際に表示されるサムネイル画像を設定できます。
※商品ページ以外が対象となります
ーーーーーーーーーーーーーーーーーーーーーーー
【CSS追加設定】※上級者向け
CSSの知識をお持ちの方はデザインのカスタマイズが可能です。カスタマイズはHTML編集Appでも可能ですが、HTML編集Appを使用するとテーマのアップデートが行われません。自動アップデートを維持しつつ、CSSでカスタマイズしたい方はこちらをご利用ください。
ーーーーーーーーーーーーーーーーーーーーーーー
【更新情報】
［2023/2/10］
○ スクロール時のメインビジュアルのちらつきの修正
○ ITEMエリアの書き出しサイズの修正
○ トップページの各エリア（コンセプト、バナー、PICK UP、RANKING、BLOG、ITEM）の画像に「loading="lazy"」を追加
○ SNS設定でFacebookアカウントの登録がないとTwitterアイコンが表示されない不具合の修正
［2023/2/4］
○ ブラウザ幅〜1199pxの際に表示される横スクロールバーの修正
○ Instagramフィードのアカウントリンクのテキストの色を修正
○ 裏側で表示されるメインビジュアルの修正
○ カテゴリーナビゲーションの大カテゴリの「+」ボタンと中カテゴリのリストアイコン（-）の修正
［2023/1/21］
○ OGP画像設定の機能追加
○ スライドのフルスクリーン表示の機能追加
○ スライドのフェード選択時のアニメーション設定の機能追加
○ スライドのフェード選択時の画像遷移速度（ゆっくり）設定の機能追加
○ スライドの縦用画像設定の機能追加
○ メッセージAppの表示のタイミングを修正
○ コピーライトの背景色の修正
［2023/1/6］
○ メインコンテンツ内のコンテンツ間の余白の修正
［2022/12/25］
○ 「Josefin Sans」「Josefin Slab」のフォント使用時のナビゲーションの余白の修正
○ Instagramの表示サイズ切替の機能追加（幅1200px以上の時）
［2022/12/20］
○ CONCEPTのボタンの色が全体のボタンの色に影響してしまう不具合の修正
○ CONCEPTエリアの余白を修正
［2022/12/17］
○ Instagramフィード表示機能の追加
○ CSS追加設定機能の追加
○ CONCEPTエリアの見出しとキャッチコピーの間の余白を修正
○ 幅1200px以上で最後のコンテンツとコピーライトの余白の修正
［2022/12/7］
○ 商品オプションAppでセレクトボックスと入力ガイドテキストの文字が重なる不具合の修正
［2022/12/6］
○ SNS設定が一つもない時の余白の修正
［2022/11/18］
○ BASEロゴ非表示App使用時の要素の領域削除の修正
○ 「Josefin Sans」「Josefin Slab」のフォント使用時のグローバルナビゲーションの文字の高さのズレの修正
［2022/11/9］
○ テーマをリリース
○ Windowsでスクロールバーが表示されてしまう箇所の修正
○ 商品ページのステータスの表示崩れの修正
