Shopifyで個性的なサイトを作るには？デザインのポイントやおすすめサイト13選を解説！

「ShopifyでECサイトを作りたいけど、どんなデザインにすればいいんだろう？」
「実際にShopifyで作ったECサイトが見たい！」

ShopifyでECサイトを制作する上で、上記のように考えている方もいるのではないでしょうか。

Shopifyは初心者でもデザインを直感的にカスタマイズできる点が魅力です。プラグインを活用し、自社に適したデザインにも編集できます。

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

• 個性的なデザインを制作する際のポイント
• ECサイトに掲載すべきコンテンツ
• ShopifyでデザインされたECサイトの参考事例13選

販売商品によってECサイトの雰囲気が異なります。類似商品を販売しているECサイトのデザインを参考にし、ShopifyでECサイトを制作しましょう。

Shopifyで個性的なデザインを制作する際の3つのポイント

Shopifyでは、工夫次第で個性的なデザインを制作できます。

次の3つのポイントを押さえ、ショップの個性が溢れるECサイトを制作しましょう。

• 購入者目線の導線設計を意識する
• 顧客が直感的に操作できるデザインにする
• プラグインを導入する

ここでは、それぞれのポイントを詳しく解説します。

①購入者目線の導線設計を意識する

顧客がスムーズに商品を購入できるような導線を意識しデザインを考えましょう。

「ショッピングカートはどこか」「購入履歴はどこから閲覧できるか」など顧客が商品を購入する際に探しそうなコンテンツはコンバージョンに直結するため、次のような工夫を取り入れて顧客の行動を促してあげることが重要です。

• トップページには顧客の興味を惹くような要素を配置する
• 購入後のイメージをしやすい商品画像を掲載する

トップページには顧客の興味を惹くような要素を配置する

ユーザーは3秒以内にサイトに興味を感じられない場合、すぐにサイトから離脱してしまうといわれているので、最初に表示されるコンテンツはユーザーの興味を惹く上でとても重要な要素となります。

• 目玉商品の写真
• セール情報
• クーポン情報
• イベント情報

などの顧客に対してメリットとなる情報を目に付く場所に配置してあげることで興味を惹くことができ、その先までサイト内を見てもらえるきっかけになります。また、トップページでお店の雰囲気や取り扱っている商品がわかりやすいようなデザイン構成にすることで、適切にお店の内容を訴求することができるようになるため、トップページには顧客の興味を惹くような要素を効果的に配置していきましょう。

購入後のイメージができる商品画像を掲載する

ECサイトは顧客が商品を直接見ることができないため、画像を用いて購入後の体験を想像させることで購買意欲を掻き立てることに繋がります。例えば、ファッションアイテムを販売している場合はモデルの着用画像をコーディネート別に複数用意したり、家電の販売サイトであれば使用画像や他のインテリアと一緒に家に設置してある画像を掲載したりするなど、さまざまな画像を用意することで、顧客は購入後の姿をよりイメージしやすくなります。

②顧客が直感的に操作できるデザインにする

操作が難しくなるとユーザーが目的の情報に辿り着けず、購入前にサイトから離脱される確率が上がるため、誰でも直感的に操作ができるデザインを意識しましょう。例えば、注目してもらいたい要素の文字サイズを大きくすると見つけてもらいやすくなり、ボタンに影をつけるとクリックできる場所であることが直感的に伝わるようになります。

Shopifyでは難しいコードを使用せずとも、以下のような部分はテーマの編集画面から操作をすることができるため、誰でも簡単にデザインの編集が可能なのでわかりやすいデザインになるように調整を行いましょう。

• ロゴ画像の設定
• 背景・テキスト・ボタンなどの色の指定
• 見出しや本文のフォントやフォントサイズの指定
• 要素の表示・非表示の設定

また、商品選びから購入完了までの導線がわかりやすいとユーザーはストレスなく買い物ができるようになります。気になった商品があればすぐに商品詳細ページに移動することができ、その後のカート追加や決済画面への推移もスムーズに行えると最後までストレスなく買い物を楽しめますよね。

他にも、わかりやすいカテゴリー設定や商品一覧ページの整理を行うなどの工夫で商品を閲覧しやすくなるためユーザビリティの向上に繋がります。「気持ちよく買い物ができたお店」という印象を与えられればリピーターになる確率も上がるため、ユーザーが直感的に操作できるわかりやすいデザインを心がけましょう。

③プラグインを導入する

ECサイトのデザイン制作に行き詰ってしまった場合はプラグインを導入しましょう。Shopifyにはデザインを簡単に編集できるプラグインがあります。その中から、次の3つのプラグインに焦点を当てて解説していきます。

PageFly

PageFlyはコード編集なしで細部までデザインを編集できるプラグインです。マウスを使って要素を動かすだけで編集できるため、初心者でも簡単に操作できます。PageFlyでは以下のような編集が可能です。

• スライドショーやアニメーションを挿入
• レビューや評価を表示
• SNSを追加

日本語に対応しているため、デザイン編集の操作で迷った場合はすぐに確認できる点は魅力の1つです。

Socialwidget

Socialwidgetはコードを使用せずにインスタグラムの投稿をECサイトに掲載できるプラグインです。事業者が投稿した写真だけでなく、顧客がインスタグラムに投稿したものを掲載できます。購入者が商品を使用している実際の写真をECサイトに掲載することで、商品への信頼性を高めることができるでしょう。

Fontify

FontifyはWebフォントを簡単に追加できるプラグインです。利用にあたって専門知識は必要ありません。Shopifyでは編集できないGoogle Fontsやカスタムフォントを追加できます。カスタムフォントを追加する場合は15書体まで無料で利用できる点が魅力です。

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

ECサイトはインターネットを介し顧客に商品を販売することが目的です。顧客が安心して商品を購入できるようなコンテンツを掲載しなければなりません。次のような項目を掲載しましょう。

メールや電話などの連絡先をはじめ、事業所や営業所がある場合は住所も掲載しましょう。購入を決めてもらうには信頼感を得ることも大切です。

返品の方法や費用、条件など詳しく記載したページも作成しましょう。ECサイトでは顧客は実際に商品を触れません。そのため「実際に商品が届いたけど、イメージと違ったから返品したい」というケースも想定されます。そういった場合に返品方法が掲載されていれば、説明の手間を楽にするだけでなく返品時のトラブルも避けられるでしょう。

ShopifyでデザインされたECサイト13選

ここからは、ShopifyでデザインされたECサイトを紹介します。販売商品によって、デザインの工夫が異なる点がポイントです。出来るだけ自社と類似商品を販売しているECサイトを参考にしてみましょう。

Mr.CHEESECAKE

出典：Mr.CHEESECAKE

画面いっぱいに広がるチーズケーキの画像が食欲を掻き立てるECサイトとなっています。白を基調とした清潔感あふれるデザインです。商品紹介ページでは、おいしい食べ方やアレンジ方法を写真や画像とともに細かく記載していることから、顧客が商品を想像しやすくなるため、リピート客の獲得や購買意欲の向上につながります。

PIPSNACKS

出典：PIPSNACKS

トップページに、スナック菓子の商品パッケージと実物の写真が並んでおり、顧客が商品のイメージをつかみやすいデザインに設計されているといえるでしょう。クラフト紙に描かれたポスターのようなデザインで親しみやすい印象を与えています。かわいらしく動きのあるイラストを散りばめ、暖かさや安心感のあるデザインが特徴です。

メインビジュアルのすぐ下に4つの商品を掲載しています。商品の写真と値段だけでなくレビューの数も確認できるため、人気商品が一目でわかる構造です。

Clare

出典：Clare

白をベースとした色遣いで、信頼感と清潔感を与えるECサイトとなっています。メインビジュアルのすぐ下には人気色の商品が紹介されているため、一目で最近の流行色を把握できるでしょう。

商品一覧は販売商品であるペンキを並べ、真っ白なパレットに乗せているかのようなデザインです。ペンキの持つ色味が分かりやすい工夫となっています。マウスカーソルを各商品の上に乗せると実際に塗った壁のサンプルが表示されるため、顧客は使用イメージを想像しやすくなる点ににも注目です。

VENROY

出典：VENROY

シンプルなデザインで商品を探しやすい点が魅力的なECサイトです。商品一覧ではモデルが服を着用している写真を掲載しています。背景の色とモデルが統一されているため、商品を画像だけでも判断しやすい工夫が施されています。商品の詳細ページまで行くと着用時の写真が複数枚掲載されているため、顧客は購入後のイメージをしやすいでしょう。

MASTER＆DYNAMIC

出典：MASTER&DYNAMIC

ハイクオリティな写真を掲載したトップページで大胆に商品を魅せ、一気に顧客を引き込めるような仕上がりとなっています。全体的にカクカクとしたスクエアタイプのフォントを使用し、モダンでスマートな印象を与えます。黒を基調とし、商品の画像がより際立つように工夫している点は参考にしたいポイントです。

Pretend Store

出典：Pretend Store

白と赤をベースとした色で、洗練された印象を与えます。セール品はリンク先をトップページ上部にわかりやすく配置され、まとめて掲載されています。アクセスしてくる顧客に合わせた工夫だといえるでしょう。写真は、商品に適した背景で撮影されているため、ひとつひとつの商品がより際立つように工夫されている点も注目ポイントです。

SafeSleeve

出典：SafeSleeve

白と黒を基調とし、高級感･信頼感のあるECサイトに仕上がっています。スマートフォンのアクセサリーショップで機種ごとに検索できるため、求めている商品をすぐ探すことが可能です。
商品の落下試験の情報を詳細に掲載していることから、顧客に対して信頼感を与えられるでしょう。

返金や保証についてのサポートも受けられることもわかりやすく掲載されている点から、安心感を与えるサイト構成だといえます。

SivanaSpirit

出典：SivanaSpirit

ベージュをベースに文字はブラウンを使用し、女性らしく柔らかな雰囲気を与えるECサイトです。服のジャンルは部位やサイズだけでなく、色でも検索ができるため、顧客のスタイルに合わせて服を探せるようになっています。トップページ上部にはウィッシュリストが配置されています。カートに入れる商品以外にも欲しい商品を保存できるため、購入の幅を広げられる点がポイントです。

日本茶屋ハトハ オンライン

出典：日本茶屋ハトハ オンライン

白ベースの背景で茶葉の画像が美しく際立ちます。画像と画像の間に十分な余白を作ることで、スマートで洗練された印象を与えます。文字のサイズを変えて情報にはっきりと強弱をつけている点に注目しましょう。顧客目線の誘導や情報の整理を意識したECサイトであることがわかります。

haus

出典：haus

家具やインテリアを取り揃えているショップです。そういったショップのECサイトは情報量が非常に多く煩雑になってしまう傾向にあります。しかし、本サイトは情報や画像をきれいに整理し、全体的にクオリティの高いサイトに仕上げています。商品画像にはシンプルな背景を使用し、自然に家具に注目が集まるようなデザインです。

49th Parallel Roasters

出典：49th Parallel Roasters

白とグレーを背景色に、青と緑を混ぜた深みのある色をアクセントカラーに使用しているため、全体的に落ち着きを感じられるECサイトです。シンプルで可愛らしいイラストが散りばめられており、落ち着いた印象を与えながらも華やかさもあるデザインとなっています。コーヒー豆の味の種類や雰囲気で商品を絞り込めるようになっています。豆に詳しくない顧客でも簡単に検索できるでしょう。

BIKO

出典：BIKO

白と黒の色味に合うような画像がスライドショーで表示される印象的なトップページです。商品画像の背景はアクセサリーが映えるようにすべて白色になっています。アクセサリーに集中して目線が行きやすい写真を撮影する際に参考になるでしょう。アクセサリーの画像にマウスカーソルを重ねると、着用時の写真に変化します。着用イメージも確認可能です。

Studio Neat

出典：Studio Neat

深みのあるグレートベージュを混ぜた背景色で柔らかな印象を与えます。商品画像には「手に持ったとき」「置いたとき」などシーンに合わせた写真を複数枚掲載しています。購入時の商品イメージを想像しやすいでしょう。商品によって使用例や商品説明の動画も掲載しています。商品が気になっている顧客の離脱を防ぐような工夫に注目しましょう。

まとめ

本記事では、

• 個性的なデザインを制作する際のポイント
• ECサイトに掲載すべきコンテンツ
• ShopifyでデザインされたECサイトの参考事例13選

について解説しました。

ECサイトは商品画像一つひとつのクオリティだけでなく、顧客のことを考えて運営しているかが重要です。ECサイトを訪れた顧客にも運営側の意図は伝わります。そのため、ショップや商品のイメージをしっかりと引き出すデザインにすることが大切です。ターゲットユーザーのことを考え、ショップの世界観を全面に出したデザインを作成しましょう。