ShopifyのデザインのヒントとUXのベストプラクティス

公開: 2022-03-11

Shopifyは、175か国で50万を超えるeコマースビジネスに電力を供給しています。 2012年以来、Shopifyプラットフォームのマーチャントの数は年間平均74％増加しており、Shopifyが今日最も有名で最も使いやすいeコマースプラットフォームの1つである結果、これらのマーチャントは550億ドル以上の売り上げを達成しています。

Shopifyがドメイン、ホスティング、すべてのバックエンド、および一部のフロントエンド機能を処理することで、UXデザインにより多くの時間、お金、およびリソースを費やすことができます。 2021年までに、世界中のeコマースの売上高は4.9兆ドルに達すると予想されており、標準以下のUXデザインが放棄されたチェックアウトの最大の要因の1つであるため、eコマースのベストプラクティスの実装が引き続き非常に効果的であることが証明されることは明らかです。

この記事では、Shopifyの設計に関する重要なヒントについて説明します。

Shopifyにはどのような機能がありますか？

Shopifyには、トップのeコマースプラットフォームに期待されるすべての機能が付属しています。

StripeやPayPalなどの外部支払いゲートウェイとの統合
Shopify Paymentsへのアクセス、外部オプションと比較して手数料なし
ギフトカードまたはストアクレジットによる支払いを許可する機能
カスタマイズ可能なチェックアウトページ（Shopify Plusのお客様のみ）
ユーザーアカウントまたはゲストチェックアウトのオプション
静的ページ（例：プライバシーポリシーまたは利用規約）
プロモーションコンテンツを含むランディングページ
開発中の店舗のパスワードアクセス
さまざまなカスタマイズ可能なオプションを備えた製品バリエーション
製品の分類を自動化するスマートコレクション
製品の発見を支援する検索およびタグ付け機能
製品を投稿に埋め込む機能を備えたブログ機能
開発者が動的なWebサイトとモバイルアプリを構築するのに役立つAPI

eコマース製品の発見を後押し

実店舗が部門ごとに整理されているのと同様に、顧客はスタッフに尋ねて特定の商品を見つけることができます。オンラインショッパーは、探しているものを簡単に見つけられるように、閲覧、フィルタリング、検索する機能が必要です。すぐに。

eコマースの顧客の40％は、読み込みに3秒以上かかるWebサイトを放棄しています。これは、製品の発見に関して、彼らがどれほど焦っているかを示唆しています。幸い、Shopifyには、カスタムナビゲーションの構築、製品とカテゴリの整理、検索機能の実装を容易にする多くの機能があります。

カスタムナビゲーション

顧客にあまりにも多くのオプションを提示すると、分析の麻痺を引き起こす可能性があります（利用可能なオプションが多すぎて意思決定を効果的に行うことができない場合、フラストレーションと放棄につながります）。カスタムナビゲーションを設計することで、最も効果的に変換される製品と「コレクション」に優先順位を付けることができます。たとえば、デスク製品が最も人気がある場合は、「デスク」コレクションを視覚的に表示できます。これらのカスタムナビゲーションは、Shopify CMSで編集して、カジュアルなA/Bテストを有効にすることもできます。

視覚的に言えば、最も変換率の高いShopifyテーマは、コレクションのタイトルを明確に表示し、ユーザーが提供されているすべての製品、コレクション、ページの中から探しているものを簡単に識別できるように十分な空白を使用します。

Shopifyのデザインのヒント：カスタムナビゲーションの使用を検討してください — 最適化されたナビゲーションを利用したGrovemadeのShopifyストア。

コレクション

コレクションは、類似した製品の組織化されたグループです。商品は手動でコレクションに並べ替えることも、一致した基準に基づいて自動的に並べ替えることもできます（たとえば、商品のタイトルに特定のキーワードが含まれている、特定のタグが割り当てられている、特定の価格帯に含まれている場合）。コレクションは一時的（つまり、季節限定または期間限定の販売）にすることもでき、Shopify Webサイトのデザインが常に関連性があり、タイムリーで、何よりもコンバージョン率が高いことを保証します。

これらのコレクションは舞台裏で定義されていますが、eコマースデザイナーがShopify用に設計するときにこの機能を知っておくと便利です。

製品タグ

表示/表示タグは、顧客が類似の製品を見つけるのに役立ちます。また、前述のように、コレクションを作成するために内部的に使用することもできます。ただし、タグの最大の利点は、ファセット検索を作成するためにタグを使用できることです。これにより、顧客は「黄色」などのタグ付き定義属性に基づいて商品をフィルタリングできます。

Shopifyのデザインのヒント：Shopifyタグシステムを使用する — Shopifyプラットフォーム上の製品にタグを割り当てる。

これらのShopifyデザインのヒントを覚えておいてください：

さらに明確にするために、どのフィルターが適用されているかを示してください。
顧客が検索範囲を広げるためにフィルターを削除できるようにします。
フィルタを切り捨てて、最も人気のあるものだけを一目で表示します。

タグと切り捨てられたフィルターを使用したShopifyのWebサイトデザインの改善 — タグを使用した効果的な製品フィルタリング。 PureCyclesによるShopifyストア。

検索

検索機能は、探しているものを正確に知っている顧客にとって便利であり、モバイルデバイスでの操作が自然に厄介であるためにブラウジングやフィルタリングがイライラするモバイルショッパーにとって特に重要です。

検索エクスペリエンスを設計する際に考慮すべきShopifyのベストプラクティスは次のとおりです。

検索ボックスを非表示にしないでください。すぐに利用できるようにすることで摩擦を減らします。
顧客が期待する場所（つまり、右上または一元化）に検索を配置します。
検索アイコンだけでなく、入力ボックス全体を表示します。
オートコンプリート機能を組み込んで、ユーザーがより速く検索できるようにします。
提案された結果とオートコレクトを使用して、ヒューマンエラーを設計します。
販売が行われなかった場合は、ユーザー検索を保存し、フォローアップメールを送信します。

より良い検索エクスペリエンスを設計することにより、Shopifyストアのデザインを改善します — 包括的ですが、SundaySomewhereによる構造化された検索。

製品ページのShopifyのベストプラクティス

Shopifyは、eコマースの買い物客を惹きつけ、ユーザーをスムーズにチェックアウトに導くために必要なすべての機能を提供します。これらの機能をeコマースのベストプラクティスと組み合わせると、放棄されたチェックアウトの数を平均統計よりも少なくすることができます。

魅力的な商品画像を使用する

優れたeコマースWebサイトを作成するのは、ユーザーを感情的に魅了する画像です。そのために、Shopifyでは複数の画像や商品のバリエーションをアップロードできます。それでも、Shopifyのベストプラクティスとして、これらの商品画像の少なくとも1つを縮尺どおりに表示して（つまり、商品の大きさを示すために他のオブジェクトで囲んで）、期待値を設定します。

顧客は、購入する前に製品を徹底的に調査して、すべての製品画像が鮮明で高品質でズーム可能であることを確認したいと考えています。

Shopifyのデザインのヒント：素晴らしい画像を備えたShopifyストアはより適切に変換されます — Hardgraftによる視覚的に魅力的な製品ページ。

明確な製品情報を表示する

衝撃的な（しかし驚くことではない）多くのeコマース顧客は、実際のコストに関する情報が不足しているためにショッピングカートを放棄します。顧客の60％は、カートを放棄した理由として予期しないコスト（送料、税金、手数料など）を挙げており、23％は事前に総コストを計算できません。透明性の欠如は、eコマースWebサイトでコンバージョンを達成するための確実な方法であるため、Shopifyの次のヒントとコツを覚えておいてください。

情報を明確に構成するには、段階的開示手法を使用します。
コストの完全な内訳を前もって表示します。
バリュープロポジションを明示的に伝えます。
今すぐ購入/カートに追加ボタンを視覚的に区別します。

うまく設計されたShopifyストア — Luxy Hairは、慎重な製品プレゼンテーションデザインを使用して、重要な情報を明確にしています。

信頼と安心を築く

Baymard Instituteによると、顧客の19％がチェックアウト時に放棄する理由として信頼の欠如が挙げられています。幸い、すべてのShopifyストアにはデフォルトでSSL（セキュアチェックアウト）が付属していますが、顧客が社会的証明としてレビューを残すこともできます。

社会的証明は、 eコマースWebサイトの信頼を高めることにより、コンバージョンを急増させるための否定できない方法です。 BrightLocalによると、消費者の88％は個人的なおすすめと同じくらいオンラインレビューを信頼しているため、以前の顧客にレビューを残して、カスタマージャーニー内でこれを示すように促すことが不可欠です。ほとんどのShopifyテーマは、スキーママークアップを利用して、これらの評価を検索結果に直接統合します。

Shopifyのベストプラクティスの一部として商品レビューを利用するShopifyストア — 製品レビューの実施。 MVMTウォッチによるShopifyストア。

社会的検証に加えて、Intercom、Zendesk、Drift、Kayakoなどのライブチャットソリューションを実装して、顧客の信頼を築くことを検討してください。 Shopifyでは、アプリストアおよび手動インストールを介してサードパーティのサービスと統合できます。

ショッピング体験のパーソナライズを統合する

OptimizelyによるWebパーソナライズなどの統合とShopifyコレクションおよびタグの組み合わせにより、データ駆動型ビジネスは、関心と以前の購入履歴に基づいてオーディエンスをセグメント化し、それに応じてページコンテンツを変更できます。

予測的なデザイン手法を使用すると、Shopifyストアはより関連性の高いコンテンツを表示できるため、オーディエンスのエンゲージメントを長く維持できるため、セールに転向する可能性が高くなります。パーソナライズは、eコマースビジネスの財務的収益を高めるための鍵です。

チェックアウトの最適化

ゲストチェックアウトと顧客アカウント

Baymard Instituteによると、「サイトが私にアカウントを作成してほしい」というのが、顧客が何も購入せずにチェックアウトを放棄する2番目に多い理由（35％）です。 Shopifyは、ゲストのチェックアウトを許可することをお勧めします（特にモバイルで）。そのために、顧客アカウントを無効にするのがデフォルトのオプションです。

UXの欠陥を特定し、ドロップオフを減らす

堅牢な分析なしで放棄されたチェックアウトを解決しようとすることは、暗い部屋で黒猫を探すのと同じくらい効果的です。ユーザーエクスペリエンスとチェックアウトフローの最適化は、データ駆動型のプロセスである場合に最適に機能します。

Shopifyのデザイナーは、Google AnalyticsをShopifyに接続し、目標到達プロセスを設定できます。これにより、十分なデータが収集された後、顧客が購入を続行したくないと判断した場所が正確に示されます。

Google Analyticsを使用した目標到達プロセスの視覚化により、最もコンバージョン率の高いShopifyテーマを分析します — PatrickHanによるGoogleAnalyticsを使用した目標到達プロセスの視覚化。

最良の結果を得るには、ShopifyをCrazy Egg、Hotjar、FullStoryなどのツールと統合し、ヒートマップと訪問者の記録を使用してこれらの問題領域をより詳細に観察します。

結論

デザイナーがShopifyプラットフォームの利点と機能をよりよく伝え、クライアントに提供できるソリューションと提供できないソリューションを学ぶことができるようにするには、無料のデモストアを開くのが最善です。さらに、トップeコマースデザイナーはShopifyエキスパートとして登録され、ShopifyWebサイトデザイナーとしての履歴書の信頼性を高めることができます。

•••

Toptal Designブログでさらに読む：

Shopifyのヒントとコツについては、Shopifyブログをご覧ください。
eコマースUX–基本的な設計戦略と原則
モバイルエクスペリエンスのためのeコマースUX
UXデザインを通じてeコマースの買い物客を引き付ける方法
レスポンシブデザイン–ベストプラクティスと考慮事項