誰でも簡単にECサイト構築ができるECプラットフォームのShopify（ショッピファイ）では、サイトのコンセプトに合わせて自由にデザインを変更できます。
この記事では、デザインの参考となるサイトや無料のおすすめのテーマなどを解説します。コードあり、コードなしでの編集方法も解説するため、ぜひ参考にしてください。
ShopipyでのEC構築のコツや、制作会社への依頼のコツをまとめています。こちらもあわせてご覧ください。
Shopifyの構造
Shopifyは、ノーコードでデザインの変更が可能です。ECプラットフォームとして有名なWordPressと近しい構造で、簡単にECサイト構築ができます。
テーマと呼ばれるテンプレートのデザインを最初に選びますが、無料・有料ともに豊富なデザインがあるので、変更したり複数のテーマを同時に管理できたりするのも特徴です。
また、デザインと商品ページなどのコンテンツが分離しており、編集は別々に行います。そのため、色々なデザインを作成し、それぞれに商品を反映させて見比べるのも容易です。コンテンツをどのページでも表示させられる他、SNSなどと商品データを同期すれば、Shopifyで構築したECサイト以外でも販売できるようになります。
Shopifyをもっと使いこなせる、EC担当者必見の売上向上施策はこちらの資料をご覧ください。
Shopifyのデザイン参考サイト12選
今では多くのECサイト構築でShopifyが使われており、各々ブランドやショップのコンセプトにマッチしたデザインになっています。ここからは、デザインを参考にする際におすすめできる12のサイトを紹介します。
アパレル
HUMAN MADE
NIGO®が手がける“The Future Is In The Past”をコンセプトにした、海外にも人気があるライフスタイルブランドのECサイトです。BiNDecによって構築しており、シンプルかつ操作性の高いデザインが特徴です。
自動翻訳にも対応しているため、欲しいアイテムをスムーズに見つけられます。また、アイテムとしても使われているキャラクターの画像が画面を横切るように設定されており、オリジナリティの高いデザインです。
HUMAN MADEのECサイトは、Shopify Plusパートナーである株式会社ウェブライフのEC構築、運用支援サービス「BiNDec」が手がけており、限定販売などアクセスが集中した際の高負荷にも耐えられるShopify Plusプランを導入しています。
CENO.jp
アパレル企業「CENO」の公式ECサイト。BiNDecによってパッケージシステムのECからShopifyへリニューアルし、全ブランドのECをShopifyで統一しました。
ブランドやトレンドごとにわかりやすいコンテンツページとシンプルな商品表示で、欲しい商品をすぐに見つけられる使いやすいデザインが特徴です。後払いペイディや自動翻訳に対応しており、ユーザビリティのあるサイトデザインとなっています。
Office Kiko
女優・モデルの水原希子さんのオフィシャルグッズを販売するECサイト。商品のコンセプト別にカテゴリーを挿入し、写真を並べたアーティスティックなデザインです。
爽やかな背景にカラフルな写真を使用し、マウスポインターも個性的にすることで、訪れたユーザーがわくわくするような仕様になっています。
メインターゲットである女性客にマッチしたUI設計やデザインなどを、BiNDecによって構築しています。
ミキハウス
人気子供服ブランドのECサイトです。子供の年齢やシーンなど、シリーズごとに特集を組んでユーザーが選びやすいように工夫されています。
ブランドカラーの赤をアクセントに使ったシンプルな配色が特徴です。商品写真を多く挿入し、売れ筋ランキングなども目に留まりやすい位置に配置することで購入意欲を高めています。
BiNDecによって、自社サーバーを設けず大規模なECサイトも運用可能なShopify Plusを導入し、運用コストを抑えることができています。
ミキハウスのEC施策について、詳しくは下記の記事をご覧ください。
KIT
ヨガウェアを販売するブランドのECサイトで、写真を大胆に使うレイアウトが特徴的です。清潔感のある配色で、白とモノトーンを効果的に活かしています。購入までの動線がシンプルで、ユーザーが商品を探しやすいように設計されています。
Shopifyをもっと使いこなせる、EC担当者必見の売上向上施策はこちらの資料をご覧ください。
ライフスタイル雑貨
Our Place
キッチン用品を販売する海外ブランドのECサイトです。落ち着いた配色で訪問者に安心感を与える仕様となっています。
「調理器具」「食器」「キッチンツール」などカテゴリーをわかりやすく表示しており、世界中の人が買い物を楽しめる作りです。スタイリッシュ性を重視しており、使用している写真やアイコンにもこだわっています。
FORNE
子育て中のママや子供が楽しめるグッズを展開するブランドのECサイトです。ブランドイメージに沿って暖かい色味が使われ、シンプルな構成で見やすいミニマルデザインが特徴。
商品のアイコンにマウスオンすると画像が変わるユニークな設定も魅力的です。商品を強調できるように商品を全面に表示させ、背景と商品画像の背景を同色にする工夫もされています。
KANAGU STORE
金属雑貨やインテリアを販売するブランドのECサイトで、ブランドイメージにマッチするデザインとなっています。スクロールすることで背景の写真が切り替わる仕掛けが個性的です。
トップページから個別ページに飛べるコンパクトな設定や、ヘッダーのわかりやすい配置など、初めて訪れたユーザーにも親切なデザインといえます。
Shopifyをもっと使いこなせる、EC担当者必見の売上向上施策はこちらの資料をご覧ください。
飲食
ゴーゴーカレー
有名カレー店のECサイトです。レトルトパッケージと同じコーポレートカラーを背景に使用し、ロゴや商品が大きく配置されていることで、インパクトのあるデザインになっています。
さまざまな層のユーザーに利用してもらえるように、複数の決済手段に対応しています。メニューもシンプルにまとめられており、見やすい作りです。
ぬま田海苔
最高級の初摘み海苔専門店のECサイトです。ブランド性を全面に押し出すために、高級感が丁寧に演出されています。
おいしい食べ方を提案するチャット対応、トップページを表示する際のメルマガ案内など、顧客のファン化を狙いやすいデザインも特徴のひとつです。電話での問合せもできるように工夫がされています。
コスメティクス
john masters organics
アメリカ発のオーガニックコスメのブランドの日本語サイトです。コスメのブランドらしくカラフルで、画像に目がいくデザインが魅力的です。
売れ筋やギフトなど、わかりやすく整列されていてユーザーが使いやすいデザインとなっています。BiNDecによって構築されており、顧客UI/UXを考慮した購入体験の改善や、チャットによるサポートも導入し、お問い合わせ対応を効率化しています。
むぎごころ
オーガニックのヘアケアやスキンケア、コスメなどを販売するブランドのECサイトです。ナチュラルなデザインを採用し、高級感と柔らかさを感じさせる配色となっています。
サイト右側に商品一覧を表示し、目的の商品にたどり着きやすいのも特徴的です。大き目の写真を多く使用し、商品をわかりやすく紹介しています。
Shopifyをもっと使いこなせる、EC担当者必見の売上向上施策はこちらの資料をご覧ください。
デザイン性の高いサイトを作成できるShopifyテーマ
Shopifyテーマストアでは、画像や商品情報を入力するだけでECサイトが完成する「テーマ」とよばれるテンプレートが用意されています。無料で使えるシンプルなデザインのものから、デザインや機能にこだわった有料のものまで様々なテーマが利用できます。
Shopifyの豊富なテーマからおすすめをまとめました。ぜひこちらもご覧ください。
Shopifyのおすすめテーマ3選
Shopifyで構築したECサイトのデザインを簡単に設定できる「テーマ」は、選びきれないほど多くの数がリリースされています。ここでは無料で使えるおすすめのテーマを3つ紹介します。
Dawn
Dawnは、細かいテキストやボタンもカスタマイズ可能になったOnline Store2.0対応の、一番最初のテーマです。JavaScriptの使用を必要最小限に絞り、高パフォーマンスを追求しています。現在、ECサイトを新規で作成した際のデフォルトのテーマとなっているため最も利用率が高く、機能が更新された際にもすぐに反映されます。
デザインはレディースバッグ・シューズのブランドを想定されていますが、ディティールやフォントはシンプルなものを採用したミニマルデザインなのでカスタマイズしやすく、写真で商品の魅力を伝えやすいのが特徴です。
Refresh
インパクトのある見出しが特徴的なテーマで、シンプルな配色により、商品やブランドカラーを効果的に際立たせています。メンズコスメのブランドを想定しており、レビューや成分などの商品に関する細かい情報も見やすく掲載することができます。
サンプルは青系のマニッシュなイメージですが、全体的に角丸デザインになっているので配色をカスタマイズすることで、フェミニンな雰囲気や明るくポップなイメージのサイトにアレンジできます。
Sense
明るい色合いとグラデーションが印象的な、コスメ・ヘルスケアブランドを想定したテーマ。商品画像に動画を使ったり、アコーディオンで商品情報をコンパクトにまとめたり、インタラクティブな仕掛けで構築されています。
Refreshと同じく角丸デザインになっていますが、こちらは枠線をなくすことで、やさしく親しみやすいイメージが打ち出せるようになっています。
Shopifyをもっと使いこなせる、EC担当者必見の売上向上施策はこちらの資料をご覧ください。
Shopifyのデザインをカスタマイズする方法
Shopifyでは、無料・有料にかかわらず、テーマを独自にカスタマイズできます。Shopifyテーマをカスタマイズする方法をコードの有無に分けて解説します。
コード編集「なし」でカスタマイズする方法
Shopifyのデザインは、トップページの配置や購入ボタンの色、商品ページの表示内容などをコード入力なしでカスタマイズできます。管理画面のテーマエディタから操作するだけなので、コードの専門知識などは必要ありません。手順は以下の通りです。
- 管理画面の左側にあるメニューの「オンラインストア」>「テーマ」の順に押下する
- カスタマイズしたいテーマの「カスタマイズ」を押下して編集する
- 編集が終わったら「保存」を押下する
コード編集「あり」でカスタマイズする方法
コードの知識がある人材がいるなら、コード編集でよりデザインのオリジナリティを高めることも可能です。コード編集も難易度が低く、HTMLやCSS、Liquidの基本知識があればカスタマイズできます。コード編集する場合は以下の手順で編集します。
- 管理画面の左側にあるメニューの「オンラインストア」>「テーマ」の順に押下する
- 「アクション」内の「コード編集する」を押下して、コードを編集する
- 編集したい箇所の対象ファイルを選択し、編集する
サイトをより見やすくしたい場合は、CSSで調整するのもおすすめです。
Shopifyをもっと使いこなせる、EC担当者必見の売上向上施策はこちらの資料をご覧ください。
Shopifyのデザインをカスタマイズする際の注意点
テーマごとにサポートの有無や内容が異なるため、カスタマイズ前に確認しておきましょう。無料テーマは、ベーシックプラン以上で最大60分のサポートが付いており、その後も有料でサポートが受けられます。一方、有料テーマの場合は開発者によって対応が異なるため、前もって開発者への確認かサポートドキュメントの確認が必要です。
また、カスタマイズに失敗した場合に備えて、テーマの複製とバックアップの作成をしておくと安心です。画像をアップロードする際は、ファイルサイズやファイル形式について要件や規定を確認しておく必要もあります。
Shopify PlusパートナーによるEC構築サービスBiNDec
Shopifyで構築するECサイトのデザインは、豊富なテーマの利用やカスタマイズ次第でさまざまなスタイルに変えることができます。自社のコンセプトに合わせたECサイトを構築したいと考えている企業には、コードの知識なしでもカスタマイズ可能で自由度が高いShopifyがおすすめです。
株式会社ウェブライフでは、Shopifyを利用したECサイト構築から運用までサポートする「BiNDec」を提供しています。
豊富な導入実績とハイレベルな技術力・知識量を認められたShopify Plusパートナーとして、中小規模から大規模のストアに向けた最適な運用戦略の提案も可能です。
ShopifyでのEC構築や運用に関してお悩みの方は、気軽にお問合せください。
