【重要】2025年7月7日(月)22時をもちまして、新規メンバー登録の受付を停止いたしました。 詳しくは→ 新規メンバー登録の受付停止について

【連載】ブランドをプロデュースしたい!BASEのテーマとデザイン設定!

販売基盤

記事内のリンクには広告が含まれています

ブックマークする
ログインしてください Close

前回は、ブランドの立ち上げに必要な

「ブランドアイデンティティ」

を設計しました。

ジュエリーアクセサリー販売における「ブランドアイデンティティ」とは
ジュエリーやアクセサリーを作って、ブランドを立ち上げたい!という個人作家さんは多いと思います。ブランドの立ち上げにあたって大切なのが「ブランドアイデンティティ」です。「ブランドアイデンティティ」とは、ブランドの特徴や個性を明確にし、共通した...

ブランドアイデンティティを元に、今回はBASEを使ったECサイトのショップデザインを行ってまいります。

テーマを選択して、ブランドアイデンティティで設定したデザインを反映させていく流れとなります。

なお、画像については次回、商品画像及びイメージ画像を設定していきます。

 

テーマを選択する

BASEには、様々なテーマが用意されています。

テーマとは、ECサイトのデザインの事で、BASEでは無料・有料のテーマが用意されています。

有料のテーマにはお洒落なデザインが揃っていて魅力的なものが多く存在しますが、まずは無料のテーマで慣れていきたいと思います。

画面下部の「テーマ」を選択します。

画面下部の「テーマ」を選択

表示されている「選択中のテーマ」をタップすると、テーマ選択画面になります。

テーマ選択画面

各テーマをタップすると、プレビューが表示されます。

プレビュー

プレビュー

 

テーマ選定のコツ

デザインのテーマを選ぶポイントは、

  • トップページのファーストビュー
  • パーツやレイアウト

です。

ECサイトにアクセスした際、最初に目に飛び込んでくる画面をファーストビューと言います。

シンプルにブランドロゴだけ見えるものや写真のインパクトで魅せるデザインなどがあります。

ファーストビュー以外のレイアウトやパーツなどは、後からでも変更可能ですが、気に入ったレイアウトがあればそのまま使用します。

 

テーマの種類と注意点

ファーストビューはテーマごとに固定されており、変更するには専門的な知識が必要です。

トップページのファーストビューのタイプは大きく次の3つに分かれますので、この時点で選択します。

なお、配色や壁紙のパターンは後から変更可能です。

 

シンプル

シンプルに、ショップロゴとナビゲーション(メインメニュー)を表示するデザイン

左側にナビゲーションを配置できるテーマもあります。

 

縦型(レフトナビゲーション)

PCで見た時に、左側にショップロゴとナビゲーションが表示される

また、ナビゲーションだけ配置して、ショップロゴは右側に表示できるテーマもあります。

 

ビジュアル

インパクトのある画像が大きく表示されるデザイン

画像の上に文字を重ねる場合は視認性に注意が必要です。

視認性とは、”目で見たときの見やすさのこと”です。

例えば、暗めの写真に黒の文字では見にくいので”視認性が低い”ので、白い文字を乗せて”視認性を高く”します。

BASEのテーマ特徴一覧表

テーマ名 ファーストビュー見え方
タイプ PC表示 スマホ表示
SIMPLE シンプル ショップロゴ
ナビゲーション
ショップロゴ
COOL シンプル ナビゲーション
ショップロゴ
ショップロゴ
FEATURE シンプル ショップロゴ
ナビゲーション
ショップロゴ
STANDARD シンプル ショップロゴ(左寄せ)
ナビゲーション(左寄せ)
ショップロゴ
CARD シンプル ショップロゴ(左寄せ)
ナビゲーション(左寄せ)
ショップロゴ
YUMMY シンプル ショップロゴ
ナビゲーション
ショップロゴ
WA-MODERN 縦型 ショップロゴ
ナビゲーション
ショップロゴ
STUDIO 縦型 ショップロゴ
ナビゲーション
ショップロゴ
CLASSIC 縦型 ショップロゴ
ナビゲーション
ショップロゴ
IMPACT ビジュアル ショップロゴ
ナビゲーション
ショップロゴ
PANORAMA ビジュアル ショップロゴ
ナビゲーション(左寄せ)
ショップロゴ
CATALOG 縦型 ナビゲーション ショップロゴ ショップロゴ
ORGANIC シンプル ショップロゴ(左寄せ)
ナビゲーション(左寄せ)
ショップロゴ
イメージ画像
LUXURY ビジュアル ショップロゴ
ナビゲーション
ショップロゴ
MARKET 縦型&シンプル ショップロゴ
ナビゲーション 検索窓
SHELF シンプル ショップロゴ(左寄せ)
ナビゲーション(左寄せ)  検索窓
ショップロゴ
VISION ビジュアル ナビゲーション
ショップロゴ
ショップロゴ

ちなみに、今回、私は「VISION」というテーマを選択しました。

「VISION」というテーマ

 

デザインの変更

テーマが選択できたら、ブランドアイデンティティに合わせて、デザインを変更していきます。

メインメニューから「デザイン」を選択します。

メインメニューから「デザイン」を選択

 

ショップロゴ

ブランドアイデンティティで設定したロゴを登録します。

ロゴを登録

画像を使用するにチェックを入れて、ロゴ画像をアップロードします。

ロゴ画像をアップロード

 

スタイルを設定する

次に、ブランドアイデンティティからスタイル(フォントとカラー)を設定していきます。

フォント

BASEでは4パターンしかありませんので、ブランドアイデンティティになるべく近いものを選択します。

スタイル(フォント)を設定

 

カラー

次にカラーを変更します。

 

カラーを変更2

ブランドアイデンティティで設定したカラーセットから、次のように入力します。

○BASEスタイル設定(カラー)

BASEのスタイル ブランドアイデンティティ
ナビゲーションカラー メインカラー
テキストカラー 基本文字
ボタンカラー メインカラー
アクセントカラー アクセントカラー

 

背景を変更する

ブランドアイデンティティのカラーセット「ベースカラー」を背景にします。

背景設定

ブランドアイデンティティのHEX値を設定します。

「ベースカラー」を背景に

 

BASEのテーマとデザイン設定まとめ

今回は、BASEの無料テーマを選択し、ブランドアイデンティティで設定した内容で、デザインの変更を行いました。

  • テーマはファーストビューを重視して選択する
  • ブランドアイデンティティで設定したデザインを反映させる

ひと通り、設定が完了したら、一度公開テストしてみましょう。

画像がないのでイメージしにくいとは思いますが、なんとなく、ブランドアイデンティティで設定した通りの配色になったでしょうか?

次回は、いよいよ画像を入れていきますが、ショップは忘れずに非公開にしておきます。

閲覧履歴

販売基盤

【連載】ブランドをプロデュースしたい!BASEのテーマとデザイン設定!

自分のブランドをプロデュースするのに最適なBASEを利用して、ECサイトを構築する方法を、画像を交えてわかりやすく解説しています。ECサイトのデザインにあたり必要なテーマ選定のコツ、オリジナル性を高めるためのデザイン設定や注意点などをご紹介。
部材やパーツ

線引盤で丸線を引く!必要な材料や工具、線引きのやり方!

彫金によるジュエリー制作では、丸線も好きな太さで作る事が可能です。必要な材料は、シルバー・金・プラチナなど、作りたい丸線よりも太い丸線や各線を用意します。工具は「線引盤」「エンマやっとこ」または「プライヤー」など。線引き機があれば、簡単に引けます。
売上アップ

「安売り」と「値下げ」の違い!上手な値引きのテクニックとは?

「安売り」と「値下げ」、これらの言葉は似ているようで、実際の意味や効果は大きく異なります。安易に商品の価格を下げる「安売り」は、短期的な売上向上をもたらすかもしれませんが、長期的にはブランド価値の低下や理想的な顧客層の喪失を招く恐れがありま...
地金素材

金と金合金によるジュエリー制作のゴールド素材について

金は、割金(わりがね)や純度によって素材の種類が、全貴金属中、最も多い貴金属です。純金では柔らかすぎて、キズがつきやすいため、他の金属を混ぜて合金とします。ここでは、金と金合金・ゴールド素材について解説します。金の純度純金の事を貴金属業界で...
ロストワックス製法

初心者でもできるワックスモデリング入門!盛りワックスで作る指輪の作り方

今回は、シートワックスとインジェクションワックスを組み合わせて作る「盛りワックスの指輪」の制作工程をご紹介します。初心者の方でも取り組みやすく、金属を削ったり、バーナーの炎を使わずに原型づくりができるのがワックスモデリングの魅力。ご自宅でも...
新規登録
ログイン