初心者からプロまで：Shopifyデザイン編集のすべて（OS 2.0）

この記事の所要時間：7分

Shopifyはノーコードで誰でも簡単に素敵なネットショップを構築することができます。

これからShopifyを始める方は、どんなデザインにしようか考えてワクワクしていることでしょう。

ですが、いざShopifyの編集画面を開いてみると、ボタンや機能が多く「何から始めたらいいのかわからない」「どんなデザインが良いのかわからない」と困る方も多くいます。

Shopifyでサイトのデザインを編集するには、まずShopifyの基本構造とあなたのショップに必要な要素を理解する必要があります。

そこで今回は、これからShopifyを始める方のために、Shopifyのデザイン構造をわかりやすく解説し、ネットショップに追加するべき要素をご紹介します。

本記事を読めば、Shopifyのデザイン編集をスムーズに進めることができるので、ぜひ参考にしてください。

Shopifyの構造を理解する

まず最初にShopifyの構造を理解しましょう。Shopifyは他のECプラットフォームと異なる特徴がいくつかあります。

デザインとコンテンツの分離

Shopifyはネットショップのデザインとコンテンツ(商品データなど)が分離しており、それぞれ別の編集画面で編集を行います。

また、ショップのデザインは複数作成して管理することができるので、作成したすべてのデザインにあらかじめ登録した商品データなどのコンテンツを合わせて見比べることができます。

Shopifyに登録したコンテンツは、ネットショップのあらゆるページで表示することができます。

また、Shopifyに登録した商品データは、SNS(Instagramなど)や他のECサービス(楽天など)と同期することで、他のプラットフォーム上でも販売することが可能です。

Shopifyのデザイン構造

次は、先ほど紹介したデザインに焦点を当てて構造を説明します。

Shopifyを始める際、最初に「テーマ」というテンプレートデザインを選択します。

デフォルトでは「Dawn」というテーマが設定されていますが、他のテーマに変更したり複数のテーマを管理することが可能です。

テーマは有料と無料のものがあり、Shopifyのテーマストアにある公式テーマだけでも約100種類あります。

無料テーマの徹底解説と、おすすめ有料テーマについて別の記事でご紹介しているので、合わせて参考にしてください。

テーマによってデザインや雰囲気は異なりますが、どのテーマもすべて「テンプレート」「セクション」「ブロック」という要素が階層構造になって形成されています。

これらの要素はコードを書かずに編集を加えることができます。もちろんコードを書いてより高度な編集を加えることも可能です。

部分的なデザイン編集だけを行ってショップを公開する場合は、好みのテーマを選択してノーコードで各要素を編集することをオススメします。

一方で、全体的にコード編集をしてオリジナルのネットショップを構築する場合は、ベーシックな「Debut」や「Dawn」といったテーマを使用することをオススメします。

Online Store 2.0

年に1度開催されるShopifyのパートナー向けカンファレンス「Shopify Unite」では、毎年大きなアップグレードの発表があります。

そのShopify unite 2021では、オンラインストア2.0(Online store 2.0)という新しくアップグレードされたテーマアーキテクチャが発表されました。

現在は、オンラインストア2.0に対応しているテーマと対応していないテーマがあり、Shopifyのテーマストアでは、オンラインストア2.0に対応しているテーマに「OS 2.0」のラベルがついています。

オンラインストア2.0に対応しているテーマは、従来のものよりも編集の利便性が高くなっており、主に以下の機能を利用することができます。

■Sections everywhere

これまではトップページでのみセクションの追加が可能でしたが、OS 2.0では全ページでセクションを追加することができます。

■Theme app extensions

Shopifyではアプリという拡張機能を追加することができ、これまでは別管理画面から操作を行っていました。

ですが、OS 2.0ではテーマ上でのアプリの配置変更や編集を行うことができます。

■Checkout App Extension

これまでShopifyではチェックアウト画面のカスタマイズがほとんどできませんでしたが、OS 2.0ではチェックアウト画面をアプリで拡張することができます。

チェックアウト画面でサンプル商品の提案など、機能を追加することが可能です。

Shopifyのデザイン編集

ここまでShopifyの構造について解説しました。おそらく概要は理解できたと思います。

次は、Shopifyで構築するネットショップのデザイン編集について説明します。

先ほど解説したとおり、Shopifyは「テンプレート > セクション > ブロック」という要素の階層構造で構築されています。

テンプレートとは、ホームページ(トップ画面)や商品ページなど、Shopifyのページ種類を指しており、編集画面の上部で切り替えることができます。

Shopifyのページ種類は以下のとおりです。マーチャントによって使用するページは異なります。

・ホームページ(トップ画面)
・商品
・コレクション
・コレクションリスト
・ページ(ランディングページ、コンタクト)
・ブログ
・ブログ記事
・カート
・チェックアウト
・その他(404ページ、検索、パスワードなど)

また、最初に選択するテーマによって使用できるテンプレートの内容には多少違いがあります。テンプレートによって使用できるセクションやブロックも異なります。

テンプレートを選択すると、画面左側にセクションとブロックの編集メニューが表示されます。

編集メニューでは、ドラッグ&ドロップでレイアウトを編集することができ、テキストやカラーの編集も簡単に行うことができます。

編集方法について詳しく知りたい方は、以下の記事を参考にしてください。

初心者でもわかるShopifyテーマのカスタマイズ方法を徹底解説

ショップに必要なデザイン要素

これでShopifyのデザイン編集については理解できたと思います。

ですが、最後にあなたのショップに必要なものと不要なものを取捨選択する必要があります。

Shopifyはデザインの自由度が高く、Shopifyアプリを活用することでさらにできることが増えるため、全ての要素を詰め込んでしまうと使いずらいサイトになってしまいます。

ここでは、ユーザーに与えたい体験に対してマッチする機能や要素をご紹介します。

信頼性を高める

ネットでの商品販売は売り手の顔が見えないため、信頼性を担保する何かが重要になります。

信頼性が高いネットショップにするためには、主に以下のような要素が効果的です。

・Aboutページ
・チャット機能や連絡先
・返品条件の表記
・顧客レビュー
・ユーザーインタビュー

Aboutページで最低限のショップ情報は記載する必要があります。マーチャントの写真などがあるとさらに良いと思います。

またネットショッピングでは、商品の配送ミスなど何かトラブルがあった時のことを懸念して購入を躊躇することがあります。

なのでマーチャントの連絡先やチャット機能、返品ポリシーなどの表記も重要です。

ユーザーの声も信頼性を高めることができます。

ネットショップで買い物をする8割のユーザーは、商品を購入する前にレビューをチェックしていると言われています。

それだけユーザーは第三者の客観的な意見を重要視しています。

Shopifyでは、顧客の声を表示するためのセクションやレビュー掲載のアプリがあるので、活用することをオススメします。

ワクワクする体験を与える

ネットショップは、いつでもどこでも買い物ができるただの便利なサイトという時代は終わりつつあります。

ネット販売でもワクワクする購入体験を設計しなければ、なかなか商品を購入してもらえません。

Shopifyでは、リッチな顧客体験をつくるために以下のような取り組みが可能です。

・デザイン
・メルマガ/ブログ
・ウィッシュリスト
・ARを活用した商品の紹介

ユーザーがワクワクする購入体験を作るために、当然ながらデザインは重要です。画像やテキスト、アニメーションなどを駆使して商品をかっこよく見せる必要があります。

いきなり1からデザインを考えるのはとても大変なので、まずはあなたのブランドと対象ユーザーが似ている他サービスを参考にし、デザインを作成してみてください。

また、近年では「コト消費」というように、機能だけではなく、購入することで得られる体験や商品のストーリーを消費する購買行動が増えています。

そのためネットショップの体験設計として、商品の特徴やストーリーを伝えるメルマガの配信やブログ記事の更新などもリッチな顧客体験の一部となります。

その他にもウィッシュリストや、Shopify ARなどの活用によって、ワクワクするサイトを設計することができます。

快適なネットショッピングを実現

多くのネットショップは実店舗ほどシンプルではなく、膨大な情報が階層構造になって一つのサイトにまとめられています。

そのため、ユーザーが求める情報へアクセスしやすい導線設計や、ストレスのない快適なサイトスピードが重要になります。

特に若者をターゲットとしているショップでは、少しでもストレスになる要因があると、すぐに離脱してしまうので注意してください。

ショップのユーザビリティを高めるために、以下のような取り組みが可能です。

・検索機能
・メガメニュー
・クイックビュー
・動的チェックアウトボタン

検索機能とは、ショップ内で商品名や条件で商品を探すことができる機能です。

メガメニューとは、画面の大半を覆うほど大きなモーダルメニューで、ワンクリックで商品に辿り着くことができます。

これらの機能は、商品数が膨大にあるショップでも、簡単に求める商品を見つけることができます。

クイックビューとは、商品詳細をポップアップで表示する機能です。

動的チェックアウトボタンは、チェックアウト画面を経由することなく、数クリックで商品を購入できる購入ボタンです。

これらは、あなたのショップ上でユーザーが取るアクションや時間を大幅に削減することができます。

【最後に】モバイルデザインも重要！

今回はShopifyのデザイン編集について、構造の解説と追加すべき要素を紹介しました。

ですが、その他にもShopifyで気にすべきポイントはいくつかあります。

特に近年ではスマホユーザーが多いため、モバイルデザインが重要です。

Shopifyの編集画面では、プレビューをモバイルとデスクトップで切り替えて確認することができるので、モバイルデザインも意識してデザイン編集を行ってください。