BASEでも他店と差別化できる！デザインのポイントやおすすめ事例13選！

「BASEでECサイトを作りたいけど、どんなデザインにしたらいいんだろう？」
「BASEでデザインしたECサイトが見たい！」

BASEで出店を検討しているオーナーの中には、このように考えている方もいるのではないでしょうか。

BASEでは、顧客目線でデザインを考えることができれば、店や商品の魅力を伝えられるECサイトを制作できます。商品の写真やデザインへのこだわりも大切ですが、利便性を考えて載せるべきコンテンツも考えなくてはなりません。

本記事では、以下の項目を解説します。

BASEで他店と差別化するデザイン制作のポイント
BASEでデザインしたECサイトに掲載すべきコンテンツ
BASEでデザインされたECサイトの参考事例

ECサイトのデザイン制作で悩んでいる方は、ぜひ参考にしてみてください。

BASEで他店と差別化するデザイン制作の3つのポイント

BASEで他店との差別化を図るためには、次の3つのポイントを考慮しデザインを制作するとよいでしょう。

シンプルなデザインを心掛ける
キレイな写真で商品をアピールする
オリジナリティのあるショップロゴを作成する

全て顧客を商品購入へ促すためにも重要なポイントとなります。ここでは、それぞれのポイントについて解説していきます。

シンプルなデザインを心掛ける

ECサイトは顧客の求める情報に限定したシンプルなデザインにしましょう。複雑な操作をしなくても、視覚情報だけで簡単に情報にたどり着けるサイトが近年の流行です。

デザインを装飾しすぎてしまうと情報が複雑になってしまい、ECサイトを訪れた人は「どのページを見たらいいのかわからない」「どの情報を伝えたいのかわからない」と混乱してしまう恐れがあります。

ECサイトの目的は顧客の購入意欲と商品の売上をあげることです。無駄な情報はできるだけ排除し、商品の魅力や紹介などに焦点を当てデザインを制作するとよいでしょう。

キレイな写真で商品をアピールする

商品の画像はECサイトの要となります。顧客は商品を直接見ることができません。

商品の画像は顧客が購入する際の重要な判断材料となります。商品の名前や説明だけでなく、魅力が伝わるような写真を多く掲載しましょう。

画質の悪い・商品のイメージがつきづらい写真を掲載してしまうと、購入意欲の低下につながります。

次のようなポイントを意識し、掲載する写真を撮影するとよいでしょう。

全体的に明るく、商品が見やすい
ピントが合っていて、商品をイメージできる
複数の商品を並べず、1点だけ撮影する

例えば、服の場合は「実際に着ている」イメージをしやすいようにモデルが着用している写真を掲載すると、顧客に商品の魅力が伝わります。1つの商品につき1枚ではなく複数枚の写真を掲載すると、より効果的で信頼できるものとなります。

予算に余裕がある場合は、プロのカメラマンに依頼しクオリティの高い写真を撮影してもらう方法も検討しましょう。

オリジナリティのあるショップロゴを作成する

ショップのロゴは印象に残りやすいデザインを作成する必要があります。ブランドロゴは企業の顔ともいえるため、ECサイトにおいて重要性の高いコンテンツです。ロゴによって顧客に企業のイメージを印象づけられます。

人間は文字よりも画像やイラストの方が印象に残りやすい性質を持っています。ロゴを見ることで企業を思い出してもらえたり、認知度が高まりやすくなったりする効果が期待できるでしょう。

拡張機能Apps「ショップロゴ作成」でロゴを作る

BASEでは拡張機能Appsの「ショップロゴ作成」を活用し、オリジナリティのあるショップロゴを作成できます。制限はあるものの、初心者でも簡単にロゴを作成できる点が魅力です。サイズやカラー、フォントの種類などを選び、ロゴを作成できます。

日本語のフォントにも対応可能です。ショップのイメージに合わせたロゴを作成し、他店との差別化を図ることが大切です。

BASEでデザインしたECサイトに掲載すべきコンテンツ

ECサイトに掲載すべきコンテンツは以下のとおりです。

ECサイトに掲載すべきコンテンツ

商品情報
販売者情報
送料
注文の手順
よくある質問

上記のコンテンツは顧客が安心して商品を購入するために必要な情報です。値段や送料、注文方法などをわかりやすく掲載することで、顧客は信頼感を得て商品を購入しやすくなります。よくある質問は、顧客の不安を払拭するために必要なコンテンツです。

「商品をカテゴリ分けする」「検索できるように検索窓を設置する」などの工夫を取り入れると、顧客は商品をより探しやすくなります。リピートユーザーが増えやすい工夫を施しましょう。

BASEでデザインしたECサイト13選

ここからは、BASEでデザインしたECサイトの参考事例をみていきます。どのECサイトも販売している商品に合わせたデザインを取り入れています。また、それぞれのECサイトによって商品写真の撮り方やロゴが大きく異なる点にも注目です。

ラ･コルテ

出典：ラ･コルテ

白を基調とした清潔感あふれるECサイトで、小さめの文字を使用し、繊細かつ洗練されたデザインとなっています。余白がしっかりと取られているため、ECサイト全体に丁寧な印象を与えます。

トップページにある商品の写真に注目しましょう。モデルやマネキンが着用している写真を掲載しているため、顧客は商品のサイズ感をイメージできます。トップページで、店の雰囲気や商品のテイストを顧客に伝えられるサイト構成が特徴的です。

Dahlia

出典：Dahlia

パソコンの画面では画面を半分に分けて使用する「スプリットデザイン」という技法を利用しています。パソコン画面の広さを有効活用したECサイトです。左半分では全体をうつす画像を表示したまま、右半分で商品の紹介やカテゴリを確認できます。

カテゴリはレディースファッション･水着･アクセサリーをはじめ、季節ごとのコレクションに分類されています。季節のファッションを探しやすいサイト構成に注目です。

MyへらSHOP

出典：MyへらSHOP

画像などの要素がキレイに並べられているため、安心感と信頼感を与えます。白とベージュを背景とし、文字やイラストはネイビーカラーを使用している点に注目しましょう。

ネイビーカラーは黒よりも馴染みやすく、柔らかい印象を与えます。ネイビーの反対色であるイエローがアクセントカラーになっており、ECサイト全体の色味のバランスが取れています。安定して調和のとれたサイトカラーです。

かわいらしくシンプルなイラストを要所要所に取り入れることで、ECサイトの目的や意図が伝わりやすくなっている点も魅力の1つです。画面遷移が殆どないため、少ない操作で情報を得られるため、見る人にとってわかりやすいサイト構造となっています。

DUG store

出典：DUG store

ECサイトを開くと画面いっぱいに画像が表示され、閲覧者にインパクトを与えるデザインです。柔らかいノイズの入った画像を使用しているため、味わい深く印象的なECサイトとなっています。

白をベースとした清潔感溢れるデザインで、使用カラーは黒やグレーといったモノトーンカラーです。モダンで洗練された印象を与えるでしょう。商品の色がより際立つため、顧客の目を引く仕掛けとなっています。

youange

出典：youange

白をベースに淡いピンクとグレーを使用した可愛らしいデザインです。女性向けのECサイトであることが一目でわかります。
使用している写真はECサイトの世界観を壊さないようなクオリティの高い写真となっています。ECサイト全体のクオリティが高く、高級感が伝わる見た目になっている点も注目です。

クレンジングや洗顔、美容液・化粧水など商品の使い方の説明が丁寧に書かれており、動画の解説も掲載していることから、顧客に寄り添ったショップであることがわかるでしょう。

Sukima.

出典：Sukima.

白をベースとしたデザインで木を使用したアイテムが上品に際立っています。使用シーンや価格、材質などに応じて販売アイテムをジャンル分けし、ユーザーが迷子になりにくくなっている点が魅力です。

商品紹介には全てクオリティの高い写真を掲載しています。実際に使用している様子やサイズ感が分かるように撮影している点にも注目です。商品に合わせた世界観で撮影されているため、商品写真の撮り方において参考になるECサイトだといえるでしょう。

小西製作所

出典：小西製作所

トップページのピンクや白、黒のカラーでおしゃれな味を出している手描きのイラストが印象的です。一部の人気商品や新作を掲載することで、ショップの雰囲気を伝えています。

電話ではなくメール対応であることを明記していたり、FAQページへの誘導もわかりやすく行うことで業務改善にもつなげています。

CIEL’AIR

出典：CIEL’AIR

白やグレーを基調としたモノトーンな色合いで、商品がより際立つような仕上がりです。服をメインに販売しているため、トップスやボトムス、アウターなどジャンルに分けているのはもちろん、新作は「NEW ARRIVAL」として紹介しています。「春･夏」「秋･冬」と季節ごとのジャンルも切り替えながら運営し、顧客の目に留まるような工夫をしている点に注目です。
1つの商品に対し、様々な角度から撮影した写真を複数掲載しています。購入後のイメージがしやすく、顧客心理としても安心して購入できます。

torc.japan.official

出典：torc.japan.official

トップページを開くとモノクロでノスタルジックな雰囲気が印象的です。すぐ下のアイテムリストには華やかなアイテムがずらりと並んでいます。色彩として、相対的なギャップが印象に残ることで、ECサイト全体の調和をとっているといえるでしょう。

象形文字のような洗練されたシンプルなロゴがショップのイメージをより高級感のあるものにしています。
トップページの商品写真は、商品だけを撮影したものを掲載しており、自然と商品に注目が集まるデザインとなっている点も注目です。

LIROSA

出典：LIROSA

トップページには商品のパッケージカラーに合わせた背景で統一感のある写真を複数使用しています。写真訴求をメインとしており、視覚情報から商品の情報が入ってきやすい仕上がりです。商品は主に白と青を基調とし、清潔感と信頼感のある印象を与えます。
全体的に落ち着きのある洗練されたECサイトです。商品のイメージにマッチしたデザインだといえるでしょう。