第3回
ショップのデザイン方法を決めよう
更新日 : 2022/05/10
投稿日 : 2021/12/19

アカウントの作成ができたら、さっそくショップを作っていきます。

BASEでは、ショップのデザイン方法は3つあります。

「BASE」のデザイン機能ってどんなことができるの?選べる3つの選択肢をご紹介

上記の記事でもくわしく解説していますが、まずは3つの選択肢についてかんたんに解説します。

オフィシャルテーマ

オフィシャルテーマは無料で利用することのできる、デザインテンテーマです。

オフィシャルテーマには、「COOL」や「FANCY」「NATURAL」など、趣向の違うデザインが用意されているので、自分のショップに合うテーマを探してみましょう。

テーマを選んでパーツを組み合わせていくだけで、直感的にショップを作れます。

写真の大きさやレイアウトも、自由にカスタマイズできるので、扱う商品をより引き立てることができるでしょう。

詳しいことは下記の記事にも記載があります。

ブランドや商品の魅力を自由に表現!新しい「ショップデザイン機能」のご紹介

デザイナーズテーマ

デザイナーズテーマは、BASEデザインマーケット(https://design.thebase.in/)で購入して使用することができるテーマです。

プロのデザイナーが作ったテーマなので、洗練されたショップをすぐに作れることがメリットです。

「デザインを考えるのは苦手」「デザインにかける時間やリソースがない」という場合に非常におすすめです。70種類以上のテーマがあるので、きっと気に入るものがみつかるはずです。

 

HTML編集

細かいディテールにこだわりたい場合は、HTMLやJavaScriptを編集して作る方法もあります。「HTML編集App」を利用しましょう。

HTMLの知識があれば、自分だけのオリジナルサイトが作れます。ただし、HTMLなどの知識がない場合は、この方法でサイトを作ることはできません。

まとめると、以下の通りです。自分に合った作成方法を検討してみてください。

  • オフィシャルテーマ:直感的な操作で、思いのままにカスタマイズできる
  • デザインテーマ:洗練されたデザインを、あっという間に実現できる
  • HTML編集:細部までカスタマイズできるが、知識が必要

 

ネットショップにおけるショップデザインのポイントとは?

ネットショップをデザインするさいには、以下の3つのポイントを押さえておきましょう。

①商品カテゴリーを事前に整理しておこう
②購入までの動導線を意識しよう
③商品イメージに合ったショップに

①商品カテゴリーを事前に整理しておこう

販売したい商品がたくさんある場合には、事前にカテゴリごとに整理します。さまざまな商品が混在していると、ユーザーはほしいものを見つけにくくなってしまうからです。

BASEでカテゴリ分けするためには「カテゴリ管理 App」が必要になるので、あらかじめインストールしておきましょう。

購入までの導線を意識しよう

商品を探し、購入するまでの導線に迷いがあると、離脱されてしまいます。

TOPページ > 商品ページ > カートページ > 決済ページ > 購入完了

上記の購入までのフローをもとに、「購入完了までたどりつけるか」「離脱を防げるか」を意識しましょう。
ポイントは、下記の5つです。

    • ファーストビューを意識する
    • ファーストビューを定期的に更新する(離脱率防止)
    • 情報が規則的に並べられているか(離脱防止・ユーザーが迷わないように)
    • 商品画像は、使用イメージがしやすいものを
    • 直感的に操作できるサイトを意識する(購入ボタンを目立つ色にする、など)

ユーザーが最初にサイトを見るステップである、「ファーストビュー」

ファーストビューの印象がよくないと、ここで離脱されてしまい、商品を見てもらうこともできません。

そこで、ユーザーが「もっと見たい」と思えるファーストビューを意識して、ページを作ることが大切です。ファーストビューは、定期的に更新し、新規客もリピーターも楽しませられるようにしましょう。

情報を規則的に並べる

離脱を防止するためには、情報を規則的に並べることも欠かせません。

たとえば、「配送のための情報」や「お買い得情報」「おすすめ商品の情報」など、掲載したい情報はいくつもあるでしょう。

これらは、ユーザーにとって有益ですが、バラバラに掲載されていると、ほしい情報がどこにあるのか、わからなくなってしまいます。

ユーザーは、ほしい情報を得るために迷ってしまい、結果として離脱してしまうこともあるでしょう。そのため、情報は種類別にわけて、規則的に並べておくことがポイントです。

たとえば、下記のカテゴリで「りんご」を見つけたいとき、どちらの方がユーザーが見つけやすいでしょうか。

AB
にんじん
バナナ
アボカド
りんご
かぼちゃ
アイス
クッキー
とうもろこし

オレンジ
野菜
 かぼちゃ
 にんじん
 とうもろこし

果物
 アボカド
 オレンジ
 梨
 バナナ
 りんご

お菓子
 アイス
 クッキー

おそらく、大多数の方が、右側のBASEの書き方のほうが「りんご」を見つけやすいと思うのではないでしょうか。
このように、ユーザーが目的にたどりつきやすくするために、情報を規則的に並べてあげることも、重要な要素となります。

商品画像

購入につなげるためには、いかに魅力的な商品画像を掲載するか、にも気を配る必要があります。ユーザーが惹かれるのは、「自分が商品を使用している姿をイメージしやすい」画像です。

たとえば、洋服やアクセサリーならば、モデルが着用している画像。
食器ならば、実際に食事を盛りつけた画像があると、商品を購入したあとのイメージがしやすくなります。

商品ジャンルごとに、求められる画像というのは異なりますので、ほかのショップなどを参考に、必要な写真を考えてみましょう。

あるといい写真の具体例
ファッション服の表・裏画像、着用画像、服のタグ画像、裏地画像、生地・柄がわかる画像、スタイリングイメージなど
食品よりおいしそうに見える画像、実際に届く商品の中身の画像、梱包した状態の画像など
アクセサリーアクセサリー全体の画像、アクセサリーの部分ごとのアップ(チェーン・チャームなど)、アクセサリーの着用画像など
電化製品電化製品全体の画像、部分ごとのアップ(充電端子、ボタンなどの機能性のアピール)、使っているところが想像できる画像(スマホなら、手に持つなど)など
アンティーク商品全体の画像、商品の部分アップ、傷・汚れ部分のアップ、型番・年代のアップ、ロゴのアップなど

直感的に操作できる

そして、購入まで結びつけるためには、直感的に操作できるショップであることもポイントです。

せっかくほしい商品があっても、購入の仕方がわからなければ、ユーザーは離脱してしまいます。
購入ボタンを目立つ色にする、余計な情報を入れすぎない、など「購入しやすいかどうか?」という点を意識しましょう。

 

商品イメージにあったショップにしよう

どんな商品を売るのか、そのイメージに合わせてショップを作成することも大切です。
たとえば、食品を扱うショップとアクセサリーを扱うショップでは、商品イメージが大きく変わります。

売りたい商品のイメージに合ったショップを作るためには、以下の2つのポイントをおさえておきましょう。

  • ターゲットに合わせたデザイン
  • 写真・文章の色合い・雰囲気を統一する

購入するターゲットに合わせてデザインする

扱う商品によって、ターゲットとする客層は、大きく変わります。
このターゲット層に合わせてデザインすることは、集客のための欠かせないポイントです。

ターゲット層が使いやすく馴染みやすいデザインでなければ、せっかく魅力的な商品を扱っていても、そのよさが伝わりにくくなってしまいます

たとえば、20代女性向けにアクセサリーを販売するのならば、トレンドを取り入れた、明るめの色合いのデザイン。

30代男性にラーメンを販売するのならば、食べ応えなどを売りにして、男らしさを感じるようなデザイン

上記は、あくまで一例ですが、このようにターゲット層に合わせつつ、商品イメージにも合ったデザインにすることがポイントです。

写真・文章の色合い・雰囲気を統一する

ショップ内は、全体的に雰囲気が統一されていると、訪れたユーザーにとって居心地がよく、離脱しにくくなります。ターゲット層に合わせたデザインにしたうえで、写真や文字のトーンも統一しましょう。

かわいい雰囲気のデザインにするのならば、文字のフォントや、写真の印象もかわいくして、統一感を出しましょう。

このように、全体の雰囲気を統一することで、サイトに一体感が生まれて、ユーザーにも誰をターゲットにしたサイトかが伝わりやすくなります。

  • 商品のイメージとかけ離れていないか
  • サイト全体のカラー(雰囲気)は統一感があるか
  • 商品のジャンルに沿ったカラーになっているか(和風なら抹茶色、グルメなら暖色など)

上記を意識して、デザインを作成しましょう。

むずかしいと思ったら、デザイナーズテーマも検討しよう

ここまで、ネットショップにおける、デザインのポイントを解説しましたが、少しむずかしいと感じた方もいらっしゃるのではないでしょうか?

そんな場合は、デザイナーズテーマを活用することも、検討してみてください。
少しお金は必要になりますが、プロのデザイナーさんが作成しているため、誰でもかんたんに、洗練されたショップを持つことができます。

ここまでお伝えしてきた、細かなデザインのポイントももちろん反映されていますので、ぜひ検討してみましょう。

デザイナーズテーマはこちら

 

拡張機能についても理解しておこう

BASEには、デザイン時に活用できる、無料の拡張機能も豊富にあります。以下に紹介しますので、積極的に活用してみてください。

解決したいことアプリ名
スライドショーを作成したい商品説明カスタムApp
ロゴを作成したいショップロゴ作成App
ページを追加したいページ追加App
商品ラベルを作成したいラベルApp
カテゴリーを作成したいカテゴリ管理App
商品検索窓商品検索App
年齢制限年齢制限App
英語・外貨対応英語・外貨対応App
BASEロゴ非表示BASEロゴ非表示App
文字入れなど商品オプションを追加したい商品オプションApp
レビューを入れたいレビューApp
セール価格を表示したいセールApp
商品説明ページに動画やスライドショーを入れたい商品説明カスタムApp
まとめ
  • ショップデザインの方法は大きく3つ!
  • 自分でデザインするのが難しい場合は、デザイナーズテーマがおすすめ!
  • 拡張機能も活用しよう!

アクションリストでショップ準備を完了させよう!

アクションリストを使って、0→10ガイドの中にでてきたアクションを完了させよう。

使い方

  1. 下記のボタンからアクションリストをダウンロードしよう
  2. ダウンロードされたZipファイル内のPDFファイルを開こう
  3. アクションリストに従って、ショップ準備を進めよう
  4. 関連URLの列には、参照元の記事や設定先のURLが添付してあるので、適宜参照しよう

アクションリストはこちら

お悩みをお聞かせください
月商10万円を目指す上で
「こんなことに悩んでいる」
「ここが分からない」という、
みなさんのお悩みを募集しています!
※正式回答が必要なお問い合わせはこちらへお願いします

ガイド一覧