4/13デザイン・テーマ2023年4月13日この記事の要点Shopifyのテーマは「ストア運営に必要な機能が備わっている」「ターゲットユーザーが好感を持てるデザインである」「ストアの取り扱い商品と相性のいいデザインである」がポイントテーマには公式・非公式と有料・無料のものがあるよりユーザーニーズにマッチしたECサイトを目指すならテーマのカスタマイズをしようECストアにとって「見た目」は売り上げを左右する重要な要素です。Shopifyには豊富なテーマが揃っているので、適切に利用すればビジュアル面から多くのユーザーを呼び込めます。今回は、特におすすめのShopifyテーマ10選と、Shopifyテーマのカスタマイズ方法について詳しく解説します。問わず、非常に豊富な種類が提供されています。選択肢が多い中からテーマを選ぶのは非常に難しいですが、ポイントを押さえることで決定しやすくなります。ストア運営に必要な機能が備わっているShopifyテーマはストアの見た目を決定する要素ですが、同時にストア全体を通した操作性を決定づけるものでもあります。見栄えのみならず、機能面から必要なものが備わっているかを確認しましょう。ターゲットユーザーが好感を持てるデザインである自分の気に入ったデザインが、ストアを訪れるユーザーの好みと合っているとは限りません。テーマ選択の際には、ターゲットとなるユーザーの多くに好まれるデザインである必要があります。ストアの取り扱い商品と相性のいいデザインであるストアで取り扱っている商品とShopifyテーマの相性も重要です。商品とストアの雰囲気がちぐはぐにならないデザインのものを選びましょう。豊富にそろっているShopifyテーマのなかから、おすすめのテーマをジャンル別にご紹介します。ストアテーマを選ぶ際の参考にしてみてください。飲食系でおすすめのテーマ3選!飲食系ストアの場合、商品をビジュアル面でアピールすることで商品の魅力が引き出すようなテーマがおすすめです。Crave公式:https://themes.shopify.com/themes/crave/styles/default価格:無料ショッピングに最適化されており、ポップで目を引きやすいECサイト構築を可能にするShopify公式テーマです。必要な機能のみ搭載されたシンプルな構造になっており、表示速度が速い特徴があります。公式テーマなので扱いやすく、テンプレート言語Liquidを使用した画面カスタマイズを簡単に行えます。無料トライアルあり写真を大きく見せることで視覚的に商品を訴求できる有料テーマです。全体の雰囲気はシンプルでスタイリッシュな印象を与え、飲食物をフォーカスすることで魅力的に見せる効果が期待できます。日本語には対応していませんが、販売商品を強く印象付けられる魅力があります。無料トライアルあり公式:https://themes.shopify.com/themes/icon/styles/dolce写真を中心としたコンテンツを作成できる有料テーマです。「アップセル」(顧客単価を向上させるための施策)と「クロスセル」(顧客が商品を購入する際に別の商品と組み合わせて購入を検討してもらう施策)を促進するために最適なデザインになっています。そのほか、色見本を備えたフィルタリング機能も搭載され、操作性も高いテーマです。アパレル系でおすすめのテーマ2選!アパレル系ストアであれば、洗練されたおしゃれなデザインのテーマを選びましょう。無料トライアルありクイックビューやセールスポイント、メタフィールド、サイズと価格のサイドバーフィルター、サブコレクションなど、多様な機能を有している有料テーマです。カスタムプロモーションデザイナーを使用してカスタマイズを行うことで、商品認知度と売り上げを向上させるための強力なプロモーション戦略を立てられます。無料トライアルありモダンで柔軟なデザインを可能にする有料テーマです。多彩な絞り込み機能により、コレクションページのなかで色や種類、サイズなどをフィルタリングする機能を有しています。商品詳細をプレビューモーダルで表示することにより、顧客をシームレスに購入へ促せるほか、チェックアウト機能が常時表示されるためコンバージョンを高める効果が期待できます。美容系でおすすめのテーマ2選!美容系ストアの場合、写真による商品紹介はもちろん、商品を使った際の効果や利用するメリットなどを詳細に説明するアプローチが効果的です。販売商品の詳細説明をレイアウトに組み込んだエネルギッシュで元気が出るイメージの公式テーマです。原材料や使用方法を詳細することにより、顧客が購入した際の効果をイメージしやすくなります。固定ヘッダーが付いており、カテゴリ別に分かりやすく購入へと導く効果が期待できます。無料トライアルありプレミアム商品を販売しているストア向けに開発されている有料テーマです。ハイエンドの美学と洗練されたビジュアルストーリーを魅力的に伝えられるエレガントなデザインを特徴としています。「ショップ・ザ・ルック」セクションを利用することによりピックアップ商品を紹介し、顧客のショッピング体験を向上させる効果が期待できます。アウトドア系でおすすめのテーマ2選!アウトドア系ストアの場合、顧客を外に連れ出せるような開放感のあるオーガニックなデザインがおすすめです。商品数がそれほど多くないストア向けで、広いスペースに商品をゆったりと並べられる公式テーマです。画面に情報を詰め込みすぎないようにすることにより、コンテンツを際立たせる効果があります。ストーリーテリングを組み込むことで商品に厚みをもたせ、ブランドイメージや商品の果たす本来の役割や意味を分かりやすく伝えます。USD商品数が多い大型ストアに対応している有料テーマで、シンプルながら顧客が目的の商品にたどり着きやすいようUXに特化して設計されているのが特徴です。さまざまな機能はカスタマイズ可能で、レビューや在庫数、画像拡大(ズーム)機能、ポップアップ表示などの機能を利用することで、顧客の購入意欲を高める効果が期待できます。最後に、Shopifyのテーマをデザインカスタマイズする方法について見ていきましょう。コード編集がない場合とある場合で手順が異なりますので、注意してください。事前にテーマのバックアップファイルを作成する作業を始める前に、テーマを複製してバックアップファイルを作成しておきましょう。間違ったカスタマイズを行って「もとに戻したい」と思ったときに、すぐに復元できるようにするためです。Shopifyのテーマには、最大20種類のテーマを追加できるようになっています。テーマが20個すべて埋まっている場合には、どれかを削除してください。テーマは一度削除すると復元できないので、作業の際には注意が必要です。バックアップファイル用の空きが確保できたら、現在のテーマの「アクション」>「複製する」メニューで複製ができます。完了すると管理画面の「テーマライブラリ」にコピーが作成されるので、確認しましょう。事前に確認しておくことShopifyでテーマをカスタマイズする際には、以下の2つについて確認が必要です。(公式マニュアル参照:https://help.shopify.com/ja/manual/online-store/themes/customizing-themes)利用可能なサポートのレベル基本的なテーマのカスタマイズの際には、テーマ開発者からのサポートを受けられる仕組みになっています。どこまでがサポート範囲かをあらかじめ確認し、万が一の場合に連絡できるよう備えましょう。画像アップロードの要件とベストプラクティスShopifyでは、会社のロゴや商品画像、スライドショー、バナー、ブログ記事画像などをストアに使用できます。アップロードの際には、画像の形式やサイズを変更しなくても最適のものへ動的に変換できるようになっています。コード編集なしの場合オンラインストアの「テーマ」>「カスタマイズ」を選択すると、テーマエディタが起動します。テーマエディタでは、コンテンツの追加・削除やテキストの変更、配色設定の変更などが簡単に行える専用エディタです。カスタマイズできる内容は、コンテンツやレイアウト、文字の体裁、配色など簡単なものですが、左側にある項目から必要なものを選んでドラッグ&ドロップすれば編集が完了します。コード編集ありの場合ストアの表示をより細かく設定したいのであれば、コード編集によるカスタマイズがいいでしょう。HTML/CSSの知識は必要になりますが、ニーズに沿ったユーザビリティの高いストア構築が実現します。コード編集を行う場合には、オンラインストアから現在のテーマを選択し、「アクション」>「コード編集する」をクリックしてコードエディタを起動します。Shopifyのテーマは役割に応じて構成やファイル名が固定になっているため、役割に応じたファイルを編集するとよいでしょう。まとめECストアの見栄えは、ストアの売上を大きく左右する重要な要素です。Shopifyのテーマには有料・無料を問わず豊富な種類が揃っているので、ストアの魅力を伝えられる最適のものを選ぶとよいでしょう。テーマをカスタマイズすることで、より細かいユーザーニーズにも対応できるようになります。余裕がある人は、是非カスタマイズにも挑戦してくださいね。Naviについて人気急上昇中のEコマースプラットフォームShopifyを使いこなすための情報サイト。Shopifyアプリの活用、APIの組み合わせ方、テーマやレイアウトの構築方法、SEO対策など、Shopifyをフル活用するためのノウハウを紹介します。