🌐

【Shopify.dev和訳】Apps/Online store/Extensions/UX guidelines

2021/09/11に公開

この記事について

この記事は、Apps/Online store/Theme app extensions/UX guidelinesの記事を和訳したものです。

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

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

テーマアプリ拡張機能の UX ガイドライン

優れた顧客対応と販売者のユーザー体験(UX)は、販売者の成功にとって重要です。以下は、テーマアプリの拡張機能の UX ガイドラインです。


アプリブロックの主要原則

以下は、アプリブロックをデザインするための重要な原則です。

  • アプリブロックは、追加されたセクションのサイズに応じて反応します。

  • アプリブロックは、タイポグラフィや色など、テーマのスタイリングプロパティを継承します。

  • アプリブロックは、autofillリソース設定を使用して、自動的に動的なソースを指定し、コンテンツが親セクションと同期するようにすることができます。


販売者のカスタマイズ

販売者は、テーマエディタを使用してアプリブロックとアプリ埋め込みブロックを簡単にカスタマイズできる必要があります。

テーマエディタには、設定可能な設定を詰め込まないようにしましょう。可能であれば、これらは視覚的な設定に限定してください。これは、アプリの埋め込みブロックで特に重要です。すべてのアプリの埋め込みブロックは同じパネルに表示され、個々のアプリの埋め込みブロックに多くの構成可能な設定があると、パネルがすぐに散らかってしまいます。

テーマエディタのAppsセクションから、販売者に以下のことをさせてみましょう。

  • アプリの個別アプリブロックを追加、削除、または再配置する

  • アプリの個々のアプリブロックの設定を編集する。

  • 変更を保存して公開する前に、編集内容をプレビューする

テーマエディタのApp embedsセクションで販売者に以下のことをさせる。

  • アプリの個別のアプリ埋め込みブロックを有効にしたり無効にしたりする

  • アプリの個別アプリ埋め込みブロックの設定を編集する

  • 変更を保存して公開する前に編集内容をプレビューする


公開アプリの説明

Shopify App Storeで販売されているアプリの説明では、アプリに Online Store 2.0 のテーマが必要かどうかを示す必要があります。これにより、販売者がアプリをインストールした後に、そのアプリがオンラインストアで動作しないことに気づくのを防ぐことができます。


販売者オンボーディング

Shopify 管理画面のアプリオンボーディングページで、販売者にインストール後のオンボーディング手順を明確に伝えてください。効果的なヘルプドキュメントを書くことについての詳細は、Shopify Polaris のHelp documentationを参照してください。

販売者に以下の情報を提供してください。

  • アプリにどのようなアプリブロックとアプリ埋め込みブロックがあり、それらが何をするのか

  • アプリのアプリブロックを追加、削除、並び替えする方法

  • アプリのアプリ埋め込みブロックを有効化および無効化する方法

  • アプリのアプリブロックおよびアプリの埋め込みブロックの機能設定の方法

  • アプリのアプリブロックおよびアプリの埋め込みブロックを追加できるテンプレートの種類

  • 必要に応じて、アプリの埋め込みブロックを有効にしたテーマエディタへのdeep linkを販売者に提供します。deep linking については、以下のガイドラインに従ってください。

    • アプリの埋め込みブロックを有効にしたいテーマを販売者に尋ねる。
    • App Embedsパネルに deep linking する際には、サポートされているテンプレートを販売者に伝え、アプリの埋め込みブロックがどこで有効になるかを知っておいてください。
    • 販売者に、テーマエディタで位置やその他のビジュアル設定をカスタマイズできることを知らせる。
    • deep link のためのアクションボタンを呼び出すPreview in themeを含めます。例えば、以下のようになります。


アプリのアンインストール

販売者がアプリをアンインストールすると、アプリに関連するブロックがオンラインストアのテーマから自動的に完全に削除される必要があります。


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

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