🥇

【Shopify.dev和訳】Themes/Best practices/Design

2021/09/18に公開約5,800字

この記事について

この記事は、Themes/Best practices/Designの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Shopify テーマのデザイン

適切に設計されたテーマは、商人と顧客の両方に、あなたが彼らのニーズを念頭に置いていることを知らせます。これら 2 つのオーディエンスの要件に取り組むために、このトピックの設計原則は、マーチャントとカスタマーエクスペリエンスの間で分割されています。

テーマのデザインを開始する前に、テーマデザイナーとテーマ開発者の間にフィードバックループがあることを確認してください。考慮すべき要素はいくつかありますが、テーマはデザインを犠牲にしてパフォーマンスを犠牲にするべきではありません。テーマパフォーマンスの詳細については、テーマパフォーマンスのベストプラクティス.を参照してください。

セクションとブロックを使用してテーマをモジュール化およびカスタマイズ可能にすることに関する詳細な考慮事項については、セクションとブロックを使用するためのベストプラクティスを参照してください。


マーチャントエクスペリエンスの設計原則

テーマを作成するときは、マーチャントエクスペリエンスに固有の設計上の考慮事項があります。たとえば、マーチャントの在庫がどのように増加するかを考慮したスケーラブルなテーマを設計したい場合があります。

目的を持って

意図的に設計されたテーマは、次の重要な要素を考慮してバランスを取ります。

  • 会話
  • 購入の決定
  • ブランド表現

目的のあるテーマを作成するには、次の手順を実行します。

  • ターゲットオーディエンスに合わせて調整されたセクションとブロックを設計します。たとえば、アパレルを販売するマーチャント向けに最適化されたテーマは、商品ページテンプレートのメインセクションにサイズチャートブロックを提供できます。
  • テンプレートごとに異なるセクションを作成して、さまざまなカスタマーエクスペリエンスを紹介します。たとえば、テーマには、カートテンプレート用に特別に設計されたアップセルセクションが含まれる場合があります。
  • ターゲットオーディエンス、在庫サイズ、および顧客体験に基づいてセグメントを定義します。それに応じて、テーマ固有の原則を構築します。
  • 強力で意見の分かれるテーマアートディレクションを構築し、それらの設計上の決定と e コマースのベストプラクティスのバランスをとるようにします。
  • 同じ目的を達成する 2 つのコンポーネントを提供するのではなく、同じコンポーネントのバリエーションを作成します。

セットアップが簡単

設定が簡単なテーマは、カスタマイズプロセス中のマーチャントの混乱を回避し、起動前のオーバーヘッドを削減するように構成されています。

設定が簡単なテーマを作成するには、次の手順を実行します。

  • 大多数の商人に力を与えるために必要な最小限のテーマ設定を維持します。ニッチな設定やエッジケースの設定は避けてください。
  • セクションの使いやすさを向上させるためにブロックを検討してください。たとえば、設定をコンポーネントごとにグループ化して、コンテンツの並べ替えやコンテンツの入力を容易にすることができます。
  • 既存のストアデータを活用するテーマの空の状態とプレースホルダーを作成して、可能な限りすぐに起動できるルックアンドフィールを提供します。

壊れにくい

壊れにくいテーマには、堅牢で、あらゆるタイプのコンテンツに合わせて拡張できるように設計されたコンポーネントがあります。

壊れにくいテーマを作成するには、次の手順を実行します。

  • コンポーネントがプロフェッショナルに見えるために完璧なアセットや画像の比率を必要としないことを確認してください。たとえば、商品の画像に一貫性がない場合でも、商品カードはすっきりとまとまりのある外観にする必要があります。
  • テーマコンポーネントにアトミックデザインアプローチを使用します。原子設計システムは、意図的に順序と階層を設定します。テーマを作成するときは、要素のセマンティック順序に注意してください。
  • コンテンツが不足している場合でも、追加されたコンテンツの量に関係なく、堅牢なレイアウトを提供します。
  • 階層がさまざまなシナリオに合わせて拡張される堅牢なフォントシステムを含めます。たとえば、製品カードのラベルには短いテキストを使用し、プロモーションには長いテキストを使用することを検討してください。
  • 一貫性を保つために、すべての見出しを同じフォント設定に関連付けるなど、フォントスタイルが適切な要素に関連付けられていることを確認してください。
  • テーマ全体に一貫して配色を適用して、読みやすさとアクセシビリティに最適なコントラストを常に提供します。
  • チャットアプリや Cookie バナーなど、ページにフローティングコンポーネントを追加するアプリによって、重要なアクションが隠されないようにしてください。

フレキシブル

柔軟なテーマは、マーチャントがブランドを表現し、ストーリーを美しく伝えることが最も重要な場合にのみ柔軟性を提供します。

柔軟なテーマを作成するには、次の手順を実行します。

  • テーマで提供されるすべての柔軟性が予測可能であることを確認してください。商人の行動は期待される結果につながるはずです。商人からコントロールを取り除く魔法の設定は避けてください。
  • SEO、アクセシビリティ、レイアウトの応答性、コンテンツ管理、翻訳とローカリゼーションのベストプラクティスに沿った、テーマ設定の柔軟性を提供します。たとえば、マーチャントがテキスト付きの画像を追加できるように、画像設定とともにテキストフィールドを提供します。
  • プラットフォームの機能をテーマ設定に置き換えることは避けてください。
  • コンテンツの表示と整理以外の回避策を提供することは避けてください。

拡張可能

拡張可能なテーマは、マーチャントが店舗のルックアンドフィールを犠牲にすることなく店舗の機能を拡張するのに役立ちます。

メタフィールド、テーマブロック、アプリブロックを使用して、マーチャントのテーマを拡張できます。たとえば、追加の変換ツールや購入決定要素を階層化するための明確なユースケースがあるセクションにアプリブロックのサポートを追加できます。


カスタマーエクスペリエンスの設計原則

テーマを作成するときは、カスタマーエクスペリエンスに固有の設計上の考慮事項があります。たとえば、マーチャントが顧客とストーリーを共有するのに役立つ表現力豊かなテーマをデザインしたい場合があります。

アクセシブル

テーマを Shopify テーマストアに送信するには、アクセシビリティ基準を満たす必要があります。テーマのアクセシビリティの詳細については、テーマのアクセシビリティのベストプラクティスを参照してください。

アクセシブルなテーマを作成するには、次の手順を実行します。

  • カラーシステム要件を使用して、テーマの堅牢なカラーパレットを作成します。
  • コンポーネントが DOM の順序と要素のタブの順序を尊重するように設計してください。
    Polaris のアクセシビリティに関する考慮事項を使用して、テーマを設計できます。

表現力豊か

表現力豊かなテーマには、マーチャントが自分のストーリーを語ることができるセクションが含まれています。つまり、マーチャントが誰であるか、どのような価値をもたらすか、他のマーチャントとどのように異なるかです。たとえば、ライフスタイルの画像やビデオを表示するセクションや、短いテキストまたは長いテキストを魅力的なレイアウトで表示するセクションを含めることができます。

直感的

直感的なテーマは、製品発見の流れを促進し、顧客をコンバージョンに導きます。

直感的なテーマを作成するには、次の手順を実行します。

  • ターゲットセグメントに合わせて製品発見エクスペリエンスを調整します。たとえば、ファッション業界のインスピレーションを与えるフローを考えてみましょう。これらのフローは、コンバージョンの大部分を占めています(クロスセリングパターン)。
  • 目立つ、発見可能なナビゲーションと直感的なメニュー操作を設計する
  • 注目のコレクションやハイライトされた製品セクションなど、購入検討の目標到達プロセスをさらに下るエントリポイントを含めます。
  • 目立つタイトル、価格、購入ボタンを使用して各製品ページをデザインします。説明と二次情報が簡単に見つけられることを確認してください。
  • 顧客との信頼を築くデザインパターンを選択します。最初に顧客の関心を優先し、長期的な顧客関係を構築し、ダークパターンを回避します。
  • 実際のユーザーでテーマをテストします。テストするときは、ユーザーが完了するための意思決定と購入のシナリオを含めます。

凝集性

一貫性のあるテーマは、顧客が店舗をナビゲートするときに、統一された声でマーチャントブランドを明確に表現します。テーマのスケール、間隔、コンポーネントの重み、レイアウト、およびページは一貫している必要があります。

効率的

効率的なテーマは、チェックアウトへの迅速で明確なパスを提供します。

効率的なテーマを作成するには、次の手順を実行します。

  • 購入に必要なステップ数を制限します。たとえば、デフォルトで動的チェックアウトを有効にして、ステップを減らします。
  • パフォーマンスを感じさせる即時のフィードバックを使用して、ナビゲーションとインタラクションのパターンを設計します。
  • レイアウトを最適化して、強力なモバイルファーストエクスペリエンスを実現します。
  • 理解するために追加の認知的負荷を必要とする要素は避けてください。たとえば、メニューとユーザーアカウントには、標準の確立された図像を使用します。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます