「Shopifyのデザインをどうしたら良いだろう」「Shopifyはデザインをたくさん選べるので、どれにすべきか迷ってしまう」「Shopifyのおすすめテーマはなんだろう？」これからShopifyでストアを開設しようとしている人は、こんな悩みを持っていることが多いもの。Shopifyには「テーマ」と呼ばれるデザインテンプレートが多数あるため、選ぶのに困ってしまいますよね。
そこで今回は、Shopifyのデザインについて、カスタマイズ方法や重要視する点、そしておすすめのテーマを紹介します。
Contents
Shopify（ショッピファイ）はテーマによってデザインを選べる
Shopify（ショッピファイ）は、テーマによってデザインを選べます。選ぶだけでサイトデザインが決まるため、サイトデザイン構築の知識がない初心者でも安心です。
また、Shopifyには公式のもので100種類以上のテーマがあり、無料で利用できるものも多数あります。
Shopify（ショッピファイ）でデザインをカスタマイズする方法
Shopify（ショッピファイ）でデザインをカスタマイズする方法は、次の流れです。それぞれ詳しく解説していきましょう。
- 管理画面からテーマを選択する
- カスタマイズでテーマエディターを起動する
管理画面からテーマを選択する
まず、管理画面からテーマを選択してください。管理画面から「オンラインストア」をクリックし、「テーマライブラリー」から「テーマ」をクリックします。そして、無料のテーマを選ぶと、管理画面上で無料のテーマを探せます。
気に入ったデザインを選んだら、「テーマライブラリーに追加する」をクリックしてください。
カスタマイズでテーマエディターを起動する
その後、「テーマライブラリー」から「カスタマイズ」を選択してください。テーマエディターが起動するので、ここでコンテンツの追加や設定しましょう。
デザイン性の高いECサイトを制作するポイント
Shopify（ショッピファイ）でストアを開設するなら、デザイン性の高いものにしたいと考える人は多いものです。そこで、ここではデザイン性の高いShopifyストアを制作するポイントについて解説します。
- 規則的に情報を配置する
- サイト色を統一する
- 購入までの導線を明確にする
規則的に情報を配置する
ストア内の情報は、規則的に配置しましょう。情報がバラバラに配置されていると見づらく、顧客が欲しいと思う情報があっても、見落とす可能性もあるからです。
そのため、骨格を最初に設計してから、デザインに落とし込んでください。そして、情報を規則的に配置し、見やすさを重視したデザインにすべきです。
サイト色を統一する
サイトの色も統一しましょう。特に、ブランドのイメージカラーがあるなら、その色に統一すべきです。いろいろな色を使うと、ブランドイメージが崩れるだけでなくサイトも見づらくなります。
色は、サイトのイメージを決める重要な要素です。統一性を出して、ストアイメージを訴求しましょう。
購入までの導線を明確にする
購入までの導線も重要です。導線がわかりづらいと、購入を諦める人も出てしまう可能性があるからです。
そこで、購入までの導線を明確にしましょう。商品をクリックしたら購入ページに行き、そのまま購入できるなどのプロセスがわかりやすければ、売り上げアップにもつながります。
デザイン性の高いおすすめテンプレート：無料版
それでは、Shopify（ショッピファイ）のデザイン性の高いおすすめ無料テーマを紹介していきます。紹介するテーマは、次の4つです。それぞれの特徴や実際におすすめの用途・業種を紹介するので、ぜひ参考にしてみてください。
- Brooklyn
- Simple
- Supply
- Minimal
Brooklyn
画像引用元：Shopify Themes
Brooklynは、トップ画像を大きく表現することができるため、アパレルショップに適したデザインのテーマです。2パターンの展開が可能で、
- 落ち着いたデザインの「Classic」
- ポップな色使いの「Playful」
を選べます。
単一商品のみや商品点数の少ないブランドだけでなく、設計次第では商品数の多いストアでも十分活用できるテーマです。
特徴
Brooklynの特徴として最初に挙げられるのは、ホームページ上部のスライドショーで、商品や画像を複数表示できます。そして、表示している商品点数に応じて、商品のレイアウトを自動的に変更する動的な製品グリッドがあるため、さまざまな商品をアピール可能です。
顧客が今いるページから離れることなく、カートに商品を簡単に追加できるスライドアウトカートも搭載されているため、欲しい商品があればすぐに入れてもらえます。
また、YouTubeなどの動画を表示できるので、文章だけでなく、動画でも商品をアピールできるだけではなく、ブログもトップページに表示できるため、オウンドメディアとしての利用も可能です。
おすすめの用途・業種
Brooklynを使うのにおすすめの業種は、アパレル系が良いでしょう。商品画像を多数表示でき、画像でアピールが可能だからです。
Simple
画像引用元：Shopify Themes
Simpleは、スッキリしたシンプルなデザインなので、あらゆる業種に適していると評判のテーマです。トップページに多くの商品を紹介するのに最適なテーマでもあるため、商品点数が多いストアにもおすすめできます。
Simpleは、3種類の展開が可能で、
- シンプル・イズ・ベストな「Light」
- 赤いラインが上部に入っておしゃれな「Beatuful」
- 少し温かさを与える「Toy」
から選べるので、扱う商品によって選ぶと良いでしょう。
特徴
Simpleの特徴は、サイドバーにメニューを表示できるため、商品を簡単に表示できます。顧客は、欲しい商品のカテゴリから、目当ての商品を見つけられるでしょう。
また、画像のアニメーションや商品画像のズーム機能もあるため、商品の細かい部分まで見たい場合も対応可能です。その他にも、トップ画像をアニメーションで手動と自動で切り替えられるため、商品やブランドを顧客にアピールできます。
おすすめの用途・業種
Simpleはさまざまな業種に利用可能ですが、その中でもアパレルやコスメに向いています。シンプルに商品画像と説明文で見せたい場合は、どの業種もうまくアピールできるでしょう。
Supply
画像引用元：Shopify Themes
Supplyは多くの商品を取り扱うストアに最適です。公式ページにも50点以上の商品、5つ以上のコレクション、そして大型メニューを取り扱うストアにおすすめと記載があります。
Supplyは、
- クラシックな雰囲気な「Blue」
- シンプルで華やかな雰囲気の「Light」
の2つから選択可能です。
特徴
Supplyは、スライド型のトップ画像の下にカテゴリーが表示されており、多くの商品から探せるとてもわかりやすいデザインです。商品が多くても、サイドバーでコレクション絞り込みが可能なので、目的の商品にたどり着きやすい設計となっています。
なお、絞り込みは、ブランドや価格、その他カスタマイズ可能なオプション別にできるため、欲しい商品をすぐ見つけられるでしょう。また、商品やブランドの画像をホームページに複数表示できるスライドショーもあるので、商品もバッチリアピールできます。
おすすめの用途・業種
Supplyがおすすめなのは、コスメやキッチン用品など、商品数が多いストアです。多くの商品をカテゴリごとに表示でき、並べ替えも可能なので、欲しい商品を見つけやすいデザインとなっているからです。
Minimal
画像引用元：Shopify Themes
Minimalは、とてもシンプルなテーマで、商品紹介をメインとしています。シンプルでカスタマイズしやすいことも人気の理由の一つです。
Minimalは、
- Vintage
- Fashion
- Modern
の3種類から選択でき、それぞれ雰囲気も異なるため、ブランドイメージや商品と合うものを選ぶと良いでしょう。
特徴
Minimalの大きな特徴は、ストアトップページに複数の商品画像をスライド表示できることです。商品アピールを画像でしたいストアにはとてもおすすめできます。また、商品画像の上にカーソルを置くと、ズームやスライドもできるため、画像で商品を探しやすいデザインです。
検索機能も充実しており、タイプ別の絞り込み、売れ行き順や価格順による並べ替えも可能なので、目当ての商品にたどり着きやすい設計になっています。そして、商品ページでおすすめ商品を表示できるため、商品を目に留めやすくなっています。
おすすめの用途・業種
Minimalをおすすめしたい業種は、商品点数の多いアパレルや生活雑貨などです。商品点数が多くても、トップページに複数の画像を表示できるからです。
デザイン性の高いおすすめテンプレート：有料版
続いて、デザイン性の高いShopify（ショッピファイ）のおすすめ有料テンプレートを紹介しましょう。紹介するテーマは次の4つです。こちらも、それぞれの特徴や料金、おすすめできるサイトをお伝えしていきます。
- Parallax
- Testament
- Prestige
- District
Parallax
画像引用元：Shopify Themes
Parallaxは、名前の通り「パララックス効果」を取り入れたテーマです。部分ごとに動くスピードや、動く方向に差をつけ奥行き感を出し、目を引くデザインです。
Parallaxは、
- Aspen
- Madrid
- Vienna
- Los Angeles
の4つから選べます。どれも見た目が美しく、デザインとしての評価も高いため、商品のブランドをさらに良く見せてくれるでしょう。
価格
180ドル
特徴
Parallaxの特徴は、ページスクロールに応じて、アニメーションの深度効果を生み出すパララックス効果が、このテーマの特徴を表している一番の特徴と言えるでしょう。また、複数階層のドロップダウンメニューを表示しているため、ストア内を簡単にナビゲートし、目的の商品を見つけやすくしています。
そして、ストアのホームページ上部にプロモーションバナーを表示できるため、たとえば最新のセールやプロモーション、ディスカウントなどの情報を宣伝可能です。その他にも、動画の表示も可能なので、テキストとイメージだけでなくムービーによる商品アピールもできます。
おすすめの用途・業種
Parallaxをおすすめしたいのは、主に20代〜30代をターゲットとしたビジュアル性が求められるアパレル系ストアです。モダンなデザインなので、若い世代に向けた商品が良いでしょう。
Testament
画像引用元：Shopify Themes
Testamentは、使いやすさとカスタマイズのしやすさに定評があります。複数条件での検索、多段階絞り込みといった検索機能も充実しており、商品も探しやすいです。また、売れ筋の商品や新作商品の表示などレイアウトも見やすいデザインとなっています。
Testamentは、
- Genesis
- Exodus
- Rebelation
- Deliverance
の4つから選択可能。どれもトップ画像を大きく表示でき、商品やストアイメージをインパクトのある画像で与えられるため、ストアを印象付けるでしょう。
価格
180ドル
特徴
Testamentの特徴は、商品の詳細をポップアップで表示できる商品クイックビューがあるため、顧客は移動することなく同じページで買い物を継続できます。また、複数列のドロップダウンメニューの表示と、メニューをスクロールしても上部に固定して常時表示によって、顧客は目的のページにすぐ移動も可能です。
そして、商品ページに色の見本を表示できるので、商品が多色展開されていることもアピールできます。同じ商品でも色違いがある場合は有効です。コレクションページの専用サイドバーがあるため、コレクションの詳細も表示できるだけではなく、動画をストア内に表示できるためムービーによる商品アピールも可能です。
おすすめの用途・業種
Testamentをおすすめしたいのは、新規入荷商品などを掲載したいアパレル系です。
Prestige
画像引用元：Shopify Themes
Prestigeは、ストアのデザインをシンプルに抑え、商品を強調するデザインです。Prestigeは、とても人気があり、利用しているストアも多数あります。商品画像を強調してアピールし、訴求効果が高いこともその理由の一つでしょう。
Prestigeには、シックなAllure、シンプルなCouture、ポップなVogueの3つがあり、どれもトップ画像が目に入りやすいデザインです。
価格
180ドル
特徴
Prestigeの特徴は、高解像度の写真掲載をズームでき、商品の質感までしっかりと確認して商品を選べることです。また、高解像度の写真を使えるため、ブランド画像も表示可能なだけではなく、画像にはタグ付けもできるので関連商品を見つけやすくできます。
また、実際に商品画像にマウスをかざすと、商品画像が動くアクションも追加可能なので、複数の画像がある場合は、商品の見せ方を工夫できます。
そのほかにも、メニューリストも表示できるため、多くの商品があっても、顧客は簡単に目的のものを探せるでしょう。そして、スライドアウトカートもあるため、ページを離れなくても購入が可能です。
おすすめの用途・業種
Prestigeは、清潔感があり高級感を感じられるデザインなので、ブランド品などに向いていますね。
District
画像引用元：Shopify Themes
Districtは、PCとスマホで画像を出し分けできるレスポンシブ対応が可能で、PCからだけでなく、スマホからも綺麗に見えるデザインを構築できます。
Districtは、
- District
- Energy
- Coast
の3つのデザインから選択可能です。
価格
180ドル
特徴
Districtの特徴はレスポンシブ対応で、スマホでも適切な画像が表示されるため、どこでも購入できるストアを構築できることです。ページ上部にバナーを表示できるので、プロモーションやディスカウントの情報を掲載できます。
また、プロモーションメッセージを全画面表示できる機能もあるため、訴求したい情報を大きく表示できることも大きな特徴です。画像や動画のスライドショーにも対応しており、顧客を飽きさせない仕組みや商品受け取りの場所をストア内に表示し、その地域の関心を高められます。
そして、サイドバーのあるページを作成できるため、多くの人が見慣れたレイアウトでカテゴリーやタグから商品検索も可能です。ブログ記事の読みやすさもDistrictのメリットとして挙げている人もおり、ストアからのメッセージも伝えやすいという特徴もあります。
おすすめの用途・業種
Districtは、アパレルなど大きな画像で商品をアピールしたいストアにおすすめです。そして、レスポンシブ対応なので、スマホをよく使う若い世代に適した商品も良いでしょう。
まとめ
Shopify（ショッピファイ）のデザインについて解説しました。デザインは、売り上げとブランドイメージに直結する重要なものです。
Shopifyは、テーマを選ぶだけでサイトデザインを構築できます。プログラム言語がなくてもサイトデザインを作れるため、初心者でも安心です。しかし、商品やストアイメージと合わないデザインだと、売り上げが上がらない可能性もあるため、よく考えて選びましょう。
Shopify Guide編集部は、メディア「Shopify Guide」の運営によってShopifyの最新情報やノウハウを常に蓄積してきています。ShopifyでECサイトの新規制作・リニューアル、Web広告などによるプロモーションをお考えの方は、こちらの問い合わせフォームからお気軽にお問い合わせください。
