01
動画/画像ヒーロー
YouTube背景動画または画像を使い、上部テキスト、メインコピー、説明文、2つのCTAでファーストビューを構成できます。
BASE DESIGN THEME MANUAL
artisan
特徴と使い方
動画ヒーロー、商品特集、ブランド紹介、品質訴求、スタイリング、購入者の声まで編集できるBASEデザインテンプレートです。実際のテーマ設定に沿って、購入前の確認にも購入後の初期設定にも使える内容を整理しました。
実テーマ設定に準拠
推奨画像サイズ
対応Appsの目安
FEATURES
artisanでできること
base_template.txt と base_template.css の実装に合わせ、トップページ編集、商品導線、Apps連携、商品詳細の特徴を整理しています。
01
02
商品訴求セクション
カテゴリ商品スライダー、PickUp商品、商品一覧の列数/画像比率を組み合わせ、売りたい商品を自然に目立たせます。
03
ブランド編集セクション
ABOUT、FEATURE、QUALITY、STYLING、VOICEをON/OFFしながら、ブランドの背景、品質、着用イメージ、購入者の声を見せられます。
04
Apps連携と商品詳細
カテゴリ、Blog、検索、多言語、レビュー、メルマガ、MembershipなどのBASE Apps導線と、最大20枚の商品画像表示に対応しています。
LIVE DEMO
実デモで確認できること
artisanは、ジャンルが変わっても同じ構成を使ってショップらしさを出せます。アパレルとインテリアの2デモで、写真の見せ方、商品導線、Apps表示を確認してください。
アパレルデモ
wear / accessoryカテゴリ、黒を基調にしたHERO、PickUp、Best Seller、Styling、User Voiceの見え方を確認できます。
デモサイトを開く
インテリアデモ
ソファー、テーブル、チェアカテゴリ、家具写真のHERO、商品一覧、多言語・通貨・検索導線の見え方を確認できます。
デモサイトを開く
HERO
背景画像または動画、黒いオーバーレイ、上部コピー、見出し、説明文、2つのCTA、左固定のNOW ON SALEバナーを確認できます。
ナビゲーション
カテゴリ、HOME/ABOUT/BLOG/CONTACT、検索、多言語、通貨、カート、ドロワーメニューの配置を確認できます。
商品訴求
PickUp、Best Seller、Productsで、商品写真・価格・SALE表示・SOLD OUT表示がどのように見えるか確認できます。
信頼訴求
OUR STORY、FEATURE、QUALITY、STYLING、User Voice、MAIL MAGAZINEを使った、購入前の安心材料の出し方を確認できます。
HOW TO USE
設定方法
BASE管理画面のデザイン設定から、ショップの世界観や運用内容に合わせて各項目を調整します。
SETTING PREVIEW
設定した内容が、実画面のどこに出るかを先に確認。
購入後の初期設定では、項目名だけを見るよりも、実際のショップ画面と対応させる方が迷いにくくなります。
HERO設定
トップの印象を決める設定
動画ID、背景画像、コピー、説明文、CTA、特徴タグを設定すると、ファーストビューからPickUpまでの導線がこのように見えます。
Products設定
商品一覧と販売状態を整える
商品画像比率、列数、SALE、SOLD OUT、価格表示が一覧の印象に直結します。商品数が増える前に比率を決めておくと安定します。
Apps設定
Appsを追加した後の導線を確認する
検索、カテゴリ、レビュー、メルマガなどを追加したときも、ページ全体の流れとして見えるように確認します。
スマホ確認
公開前に小さな画面で確認する
スマートフォンでは画像の見え方、商品カード、スタイリング、購入導線が縦に続くため、公開前の確認が重要です。
はじめに
- BASE管理画面の「デザイン」から購入済みテーマ artisan を選択して適用します。
- 「デフォルトのモバイルテーマを使用」はOFFにし、PCとスマートフォンで同じテーマが表示される状態にします。
- 公開前に、動画/画像ヒーロー、商品一覧、商品詳細、ドロワーメニュー、検索、Apps表示をスマートフォンで確認します。
外観・ナビ設定
- 背景色、見出し/本文/価格/SALE/ボタンの各カラーを設定できます。
- 本文、見出し、ラベルのフォントを個別に選択できます。Noto Sans JP、Zen Kaku Gothic、M PLUS Rounded、Noto Serif JP、Shippori Mincho、Zen Old Minchoなどを想定しています。
- ヘッダーロゴサイズ、ヘッダーメニュー文言、白色アイコン、なめらかスクロールを設定できます。
トップページ設定
- HEROでは、YouTube動画ID、背景画像、コピー、説明文、メイン/サブCTA、左固定セールバナー、特徴タグを設定できます。
- カテゴリ商品、PickUp、Best Seller、ABOUT、FEATURE、Products、Information、QUALITY、STYLING、VOICE、メルマガは表示ON/OFFとテキスト/画像の編集に対応しています。
- PickUpは商品IDを指定して最大5件まで表示できます。PC/モバイルで表示数を分けられます。
商品ページ設定
- 商品一覧は1列3個/4個、画像比率は縦長、正方形、横長から選択できます。
- 商品詳細ページは商品画像1〜20枚、サムネイル、ラベル、予約/抽選/テイクアウト/販売待ち/売り切れ表示、Pay ID あと払いバナーに対応しています。
- 商品説明カスタムApp、年齢確認、コミュニティ限定購入、レビューApp、SNSシェアボタンも想定しています。
IMAGE SPECS
推奨画像サイズ
画像は厳密な固定サイズではありませんが、比率を揃えるほどショップ全体が整って見えます。
HERO
最初に世界観を伝える横長のメインビジュアル。
ABOUT
ブランド紹介や店舗イメージに使う横長写真。
FEATURE
こだわりや特徴を補強する写真。
QUALITY
素材感や品質の信頼感を伝える写真。
STYLING
使用シーンや組み合わせを伝える縦長写真。
MAIL MAGAZINE
登録導線の背景に使う横長写真。
対象
推奨サイズ
補足
HERO 背景画像
1600 x 900px 以上
動画を使わない場合に表示されます。スマホでは中央付近が見えるため、重要な被写体は中央寄せにします。
ABOUTセクション画像
1440 x 600px 推奨
横長の世界観写真に向いています。ブランド紹介や店舗イメージに使います。
FEATURE / QUALITY / STYLING画像
1200 x 800px 以上
セクションごとに写真を差し替えられます。比率を揃えると全体が整います。
商品画像
1200 x 1200px または統一比率
商品一覧の比率は縦長、正方形、横長から選べます。全商品で比率を揃えると見た目が安定します。
メルマガ背景画像
1440 x 520px 推奨
背景画像ありのメールマガジンセクションで使います。文字が重なるため暗め・余白ありの写真が向いています。
ABOUTページ画像
1200 x 600px 推奨
ABOUTページ上部でショップ紹介を補強する画像です。
OGP画像
1200 x 630px
商品ページ以外のSNS共有時に使う画像です。ショップ名と代表商品が伝わる構図にします。
BASE APPS
併用におすすめのApp
実テーマ内で表示が想定されているAppsを中心にまとめています。導入するAppsに応じてメニュー、商品ページ、フッター、登録フォームの表示が変わります。
カテゴリ管理App
ヘッダー、ドロワー、カテゴリページ、フッターでカテゴリ導線を表示できます。
Blog App
固定記事をトップに表示し、Blogページにも対応しています。お知らせや読みもの運用に向いています。
商品検索App
ヘッダー検索とドロワー内検索で、商品数が多いショップでも探しやすくできます。
レビューApp
商品詳細ページ下部にレビューを表示し、購入前の安心材料を増やせます。
商品ラベルApp
商品一覧と商品詳細にラベル画像を表示できます。新作、SALE、残りわずかなどの訴求に使えます。
商品説明カスタムApp
商品詳細ページに追加説明を表示できます。素材、サイズ、配送、注意事項の整理に向いています。
メールマガジンApp
背景画像つきのメルマガ登録セクションに対応しています。
コミュニティ / メンバーシップApp
コミュニティ限定商品、Membershipページ、MYPAGE導線をメニューに表示できます。
多言語 / Information Banner
多言語セレクト、Information Bannerの表示を想定しています。
NOTES
ご利用時の注意事項
- 商品画像は縦横比を統一すると、一覧ページがきれいに表示されます。
- スマートフォンでは画像の端がトリミングされる場合があるため、重要な被写体や文字は中央寄せにしてください。
- HTML/CSSの上級者向け編集を行う場合は、事前に現在の設定を控えてから変更してください。
- BASE Appsの仕様変更により表示が変わる場合があります。公開前に実際のショップで表示確認してください。
FAQ
よくある質問
artisanはどんなショップ向けですか？
アパレル、ライフスタイル雑貨、セレクトショップなど、商品写真、品質、スタイリング、レビューを使ってブランドの魅力を伝えたいショップに向いています。
トップページのセクションはすべて使う必要がありますか？
必要ありません。カテゴリ商品、PickUp、ABOUT、FEATURE、QUALITY、STYLING、VOICE、お知らせ、メルマガは、ショップの内容に合わせて表示ON/OFFできます。
動画を用意しないと使えませんか？
いいえ。HEROはYouTube動画と背景画像の両方に対応しています。動画を使わない場合は背景画像を設定してください。
画像を用意するうえで一番大切なことは何ですか？
比率の統一です。特に商品画像は縦長、正方形、横長のどれで見せるかを決め、全商品で揃えると一覧ページの見た目が安定します。
商品詳細ページはどこまで対応していますか？
商品画像20枚、サムネイル、商品ラベル、Pay ID あと払いバナー、年齢確認、商品説明カスタム、SNSシェア、関連商品、レビューAppを想定しています。
カスタマイズの相談はできますか？
可能です。ショップURL、変更したい箇所、希望イメージを添えてお問い合わせください。
SUPPORT
購入前の確認にも、購入後の初期設定にも。
artisanの導入やカスタマイズについて不明点がある場合は、ショップURLと相談内容を添えてお問い合わせください。