参考にしたいShopifyのECデザイン|人気テーマとインストール方法も解説

誰でも簡単にECサイト構築ができるECプラットフォームのShopify(ショッピファイ)では、サイトのコンセプトに合わせて自由にデザインを変更できます。
この記事では、デザインの参考となるサイトや無料のおすすめのテーマなどを解説します。コードあり、コードなしでの編集方法も解説するため、ぜひ参考にしてください。

→豊富なEC構築実績を持つ、Shopify PlusパートナーBiNDecがご相談を承ります。

Shopifyの構造

Shopifyは、ノーコードでデザインの変更が可能です。ECプラットフォームとして有名なWordPressと近しい構造で、簡単にECサイト構築ができます。

テーマと呼ばれるテンプレートのデザインを最初に選びますが、無料・有料ともに豊富なデザインがあるので、変更したり複数のテーマを同時に管理できたりするのも特徴です。

また、デザインと商品ページなどのコンテンツが分離しており、編集は別々に行います。そのため、色々なデザインを作成し、それぞれに商品を反映させて見比べるのも容易です。コンテンツをどのページでも表示させられる他、SNSなどと商品データを同期すれば、Shopifyで構築したECサイト以外でも販売できるようになります。

→豊富なEC構築実績を持つ、Shopify PlusパートナーBiNDecがご相談を承ります。

Shopifyのデザイン参考サイト12選

今では多くのECサイト構築でShopifyが使われており、各々ブランドやショップのコンセプトにマッチしたデザインになっています。ここからは、デザインを参考にする際におすすめできる12のサイトを紹介します。

アパレル

HUMAN MADE

NIGO®が手がける“The Future Is In The Past”をコンセプトにした、海外にも人気があるライフスタイルブランドのECサイトです。BiNDecによって構築しており、シンプルかつ操作性の高いデザインが特徴です。

自動翻訳にも対応しているため、欲しいアイテムをスムーズに見つけられます。また、アイテムとしても使われているキャラクターの画像が画面を横切るように設定されており、オリジナリティの高いデザインです。
HUMAN MADE|“The Future Is In The Past”をコンセプトにしたアパレルブランド

HUMAN MADEのECサイトは、Shopify Plusパートナーである株式会社ウェブライフのEC構築、運用支援サービス「BiNDec」が手がけており、限定販売などアクセスが集中した際の高負荷にも耐えられるShopify Plusプランを導入しています。

CENO.jp

アパレル企業「CENO」の公式ECサイト。BiNDecによってパッケージシステムのECからShopifyへリニューアルし、全ブランドのECをShopifyで統一しました。

ブランドやトレンドごとにわかりやすいコンテンツページとシンプルな商品表示で、欲しい商品をすぐに見つけられる使いやすいデザインが特徴です。後払いペイディや自動翻訳に対応しており、ユーザビリティのあるサイトデザインとなっています。
CENO.jp|アパレルメーカーである「株式会社せーの」の公式ECサイト

Office Kiko

女優・モデルの水原希子さんのオフィシャルグッズを販売するECサイト。商品のコンセプト別にカテゴリーを挿入し、写真を並べたアーティスティックなデザインです。

爽やかな背景にカラフルな写真を使用し、マウスポインターも個性的にすることで、訪れたユーザーがわくわくするような仕様になっています。
メインターゲットである女性客にマッチしたUI設計やデザインなどを、BiNDecによって構築しています。
Office Kiko|モデル、女優の水原希子さんがプロデュースするアパレル、雑貨のECサイト

ミキハウス

人気子供服ブランドのECサイトです。子供の年齢やシーンなど、シリーズごとに特集を組んでユーザーが選びやすいように工夫されています。

ブランドカラーの赤をアクセントに使ったシンプルな配色が特徴です。商品写真を多く挿入し、売れ筋ランキングなども目に留まりやすい位置に配置することで購入意欲を高めています。
BiNDecによって、自社サーバーを設けず大規模なECサイトも運用可能なShopify Plusを導入し、運用コストを抑えることができています。
ミキハウス|子供服メーカーの株式会社MIKI HOUSEの日本語公式ECサイト

KIT

ヨガウェアを販売するブランドのECサイトで、写真を大胆に使うレイアウトが特徴的です。清潔感のある配色で、白とモノトーンを効果的に活かしています。購入までの動線がシンプルで、ユーザーが商品を探しやすいように設計されています。
KIT|海外ヨガ&アクティブウェアのセレクトショップのECサイト
→豊富なEC構築実績を持つ、Shopify PlusパートナーBiNDecがご相談を承ります。

ライフスタイル雑貨

Our Place

キッチン用品を販売する海外ブランドのECサイトです。落ち着いた配色で訪問者に安心感を与える仕様となっています。

「調理器具」「食器」「キッチンツール」などカテゴリーをわかりやすく表示しており、世界中の人が買い物を楽しめる作りです。スタイリッシュ性を重視しており、使用している写真やアイコンにもこだわっています。
Our Place|アメリカ、カナダ、イギリスで販売されているキッチンウェアブランドのECサイト

FORNE

子育て中のママや子供が楽しめるグッズを展開するブランドのECサイトです。ブランドイメージに沿って暖かい色味が使われ、シンプルな構成で見やすいミニマルデザインが特徴。

商品のアイコンにマウスオンすると画像が変わるユニークな設定も魅力的です。商品を強調できるように商品を全面に表示させ、背景と商品画像の背景を同色にする工夫もされています。
FÖRNE|子どもと大人が一緒に楽しめる知育雑貨ブランドのECサイト

KANAGU STORE

金属雑貨やインテリアを販売するブランドのECサイトで、ブランドイメージにマッチするデザインとなっています。スクロールすることで背景の写真が切り替わる仕掛けが個性的です。

トップページから個別ページに飛べるコンパクトな設定や、ヘッダーのわかりやすい配置など、初めて訪れたユーザーにも親切なデザインといえます。
KANAGU STORE|職人のこだわりがつまった逸品のセレクトショップのECサイト
→豊富なEC構築実績を持つ、Shopify PlusパートナーBiNDecがご相談を承ります。

飲食

ゴーゴーカレー

有名カレー店のECサイトです。レトルトパッケージと同じコーポレートカラーを背景に使用し、ロゴや商品が大きく配置されていることで、インパクトのあるデザインになっています。

さまざまな層のユーザーに利用してもらえるように、複数の決済手段に対応しています。メニューもシンプルにまとめられており、見やすい作りです。
ゴーゴーカレー|大手カレーチェーンのレトルト食品等を販売するECさいと

ぬま田海苔

最高級の初摘み海苔専門店のECサイトです。ブランド性を全面に押し出すために、高級感が丁寧に演出されています。

おいしい食べ方を提案するチャット対応、トップページを表示する際のメルマガ案内など、顧客のファン化を狙いやすいデザインも特徴のひとつです。電話での問合せもできるように工夫がされています。
ぬま田海苔|老舗の初摘み海苔専門ブランドのECサイト
→豊富なEC構築実績を持つ、Shopify PlusパートナーBiNDecがご相談を承ります。

コスメティクス

john masters organics

アメリカ発のオーガニックコスメのブランドの日本語サイトです。コスメのブランドらしくカラフルで、画像に目がいくデザインが魅力的です。

売れ筋やギフトなど、わかりやすく整列されていてユーザーが使いやすいデザインとなっています。BiNDecによって構築されており、顧客UI/UXを考慮した購入体験の改善や、チャットによるサポートも導入し、お問い合わせ対応を効率化しています。
john masters organics|アメリカ発の人気オーガニックコスメブランドのECサイト

むぎごころ

オーガニックのヘアケアやスキンケア、コスメなどを販売するブランドのECサイトです。ナチュラルなデザインを採用し、高級感と柔らかさを感じさせる配色となっています。

サイト右側に商品一覧を表示し、目的の商品にたどり着きやすいのも特徴的です。大き目の写真を多く使用し、商品をわかりやすく紹介しています。
むぎごころ|オーガニックコスメのほか、ナチュラル食品を販売するブランドのECサイト
→豊富なEC構築実績を持つ、Shopify PlusパートナーBiNDecがご相談を承ります。

デザイン性の高いサイトを作成できるShopifyテーマ

Shopifyテーマストアでは、画像や商品情報を入力するだけでECサイトが完成する「テーマ」とよばれるテンプレートが用意されています。無料で使えるシンプルなデザインのものから、デザインや機能にこだわった有料のものまで様々なテーマが利用できます。
Shopifyテーマ|ShopifyのECサイトが簡単に作成できるデザインテンプレート

Shopifyのおすすめテーマ3選

Shopifyで構築したECサイトのデザインを簡単に設定できる「テーマ」は、選びきれないほど多くの数がリリースされています。ここでは無料で使えるおすすめのテーマを3つ紹介します。

Dawn

Dawnは、細かいテキストやボタンもカスタマイズ可能になったOnline Store2.0対応の、一番最初のテーマです。JavaScriptの使用を必要最小限に絞り、高パフォーマンスを追求しています。現在、ECサイトを新規で作成した際のデフォルトのテーマとなっているため最も利用率が高く、機能が更新された際にもすぐに反映されます。

デザインはレディースバッグ・シューズのブランドを想定されていますが、ディティールやフォントはシンプルなものを採用したミニマルデザインなのでカスタマイズしやすく、写真で商品の魅力を伝えやすいのが特徴です。
Shopifyテーマ「Dawn」のサンプルサイト

Refresh

インパクトのある見出しが特徴的なテーマで、シンプルな配色により、商品やブランドカラーを効果的に際立たせています。メンズコスメのブランドを想定しており、レビューや成分などの商品に関する細かい情報も見やすく掲載することができます。

サンプルは青系のマニッシュなイメージですが、全体的に角丸デザインになっているので配色をカスタマイズすることで、フェミニンな雰囲気や明るくポップなイメージのサイトにSenseできます。
Shopifyテーマ「Refresh」のサンプルサイト

Sense

明るい色合いとグラデーションが印象的な、コスメ・ヘルスケアブランドを想定したテーマ。商品画像に動画を使ったり、アコーディオンで商品情報をコンパクトにまとめたり、インタラクティブな仕掛けで構築されています。

Refreshと同じく角丸デザインになっていますが、こちらは枠線をなくすことで、やさしく親しみやすいイメージが打ち出せるようになっています。
Shopifyテーマ「Sense」のサンプルサイト
→豊富なEC構築実績を持つ、Shopify PlusパートナーBiNDecがご相談を承ります。

Shopifyのデザインをカスタマイズする方法

Shopifyでは、無料・有料にかかわらず、テーマを独自にカスタマイズできます。Shopifyテーマをカスタマイズする方法をコードの有無に分けて解説します。

コード編集「なし」でカスタマイズする方法

Shopifyのデザインは、トップページの配置や購入ボタンの色、商品ページの表示内容などをコード入力なしでカスタマイズできます。管理画面のテーマエディタから操作するだけなので、コードの専門知識などは必要ありません。手順は以下の通りです。

  1. 管理画面の左側にあるメニューの「オンラインストア」>「テーマ」の順に押下する
  2. カスタマイズしたいテーマの「カスタマイズ」を押下して編集する
  3. 編集が終わったら「保存」を押下する

コード編集「あり」でカスタマイズする方法

コードの知識がある人材がいるなら、コード編集でよりデザインのオリジナリティを高めることも可能です。コード編集も難易度が低く、HTMLやCSS、Liquidの基本知識があればカスタマイズできます。コード編集する場合は以下の手順で編集します。

  1. 管理画面の左側にあるメニューの「オンラインストア」>「テーマ」の順に押下する
  2. 「アクション」内の「コード編集する」を押下して、コードを編集する
  3. 編集したい箇所の対象ファイルを選択し、編集する

サイトをより見やすくしたい場合は、CSSで調整するのもおすすめです。

→豊富なEC構築実績を持つ、Shopify PlusパートナーBiNDecがご相談を承ります。

Shopifyのデザインをカスタマイズする際の注意点

テーマごとにサポートの有無や内容が異なるため、カスタマイズ前に確認しておきましょう。無料テーマは、ベーシックプラン以上で最大60分のサポートが付いており、その後も有料でサポートが受けられます。一方、有料テーマの場合は開発者によって対応が異なるため、前もって開発者への確認かサポートドキュメントの確認が必要です。

また、カスタマイズに失敗した場合に備えて、テーマの複製とバックアップの作成をしておくと安心です。画像をアップロードする際は、ファイルサイズやファイル形式について要件や規定を確認しておく必要もあります。

まとめ

Shopifyで構築するECサイトのデザインは、豊富なテーマの利用やカスタマイズ次第でさまざまなスタイルに変えることができます。自社のコンセプトに合わせたECサイトを構築したいと考えている企業には、コードの知識なしでもカスタマイズ可能で自由度が高いShopifyがおすすめです。

BiNDecでは、ShopifyでのECサイトの運用・集客・販売・コスト削減について、結果をもたらす最適な仕組みをご提案しています。ポイントサービスなどのさまざまな機能を追加できる自社開発アプリ「BiNDec App」や、高性能なサードパーティ製アプリの導入支援などにより、お客様のビジネススタイルに適したECサイトを構築いたします。

Shopifyでのサイト構築をご検討の方は、ぜひオンライン相談フォームからお問合せください。
BiNDec(バインド・イーシー)| Shopify PlusパートナーによるEC構築・運用支援
BiNDecのオンライン相談会に申込む