【重要】2025年7月3日(木)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サイトのデザインにあたり必要なテーマ選定のコツ、オリジナル性を高めるためのデザイン設定や注意点などをご紹介。
成形

シルバー指輪のすり合わせ「ヤットコ」編【動画解説あり】

シルバーリングのロウ付けを行う前に、合わせ目に隙間が出ないよう、すり合わせる方法について、画像と動画を交えて、分かりやすく解説しています。銀地金の棒材を切った状態から、両端を丸め、木台の上で木槌を用いて叩き、合わせていく方法をご紹介。
彫金工具やジュエリー工具

ピンバイスの使い方【動画解説あり】

薄い地金やプラスチック等に穴を開けたり、石留の際にセッティングバーや各種スチールバーをセットして地金を加工したりできるピンバイスについて、その使い方を動画で紹介しています。ハンドドリルやリューターと異なり、細かい精密な作業向けの便利な工具です。
石枠や石留め

【基本の石枠】「オーバルファセットカット用”4本爪”石座」の作り方!

「オーバルファセットカット」用の、4本爪の石枠の作り方を動画を交えてご紹介致します。この基本の石枠に、丸カンをつければペンダントやネックレスに、リングの腕をつければ指輪になります。↓指輪の作り方イメージ今回は、人工石のエメラルドグラスを使用...
スキルアップ

“心に刺さる”メッセージを作るための「5つの伝える技術」

世界のデータ流通量は、1984年の毎月17ギガバイトから、2021年には、約278億ギガバイトになったと言われています。桁が大きすぎて、よくわかりませんが、2021年:278億ギガバイト ÷ 1984年:17ギガバイト= 約16億3400万...
新規登録
ログイン