【Polaris和訳】Foundations/Designing apps for Shopify
この記事について
この記事は、Polaris/Foundations/Designing apps for Shopifyの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Shopify 用のアプリをデザインする
Polaris は、マーチャントが信頼し、最初から使用方法を理解できる Shopify アプリを簡単に構築できるように設計されています。
しかし、成功する機能やフローを作成するには、Polaris コンポーネント以上のものが必要です。このガイドは、あなたがより良い Shopify アプリを設計するのに役立ちます。
Polaris があなたのアプリに適しているかを決める
Shopify アプリは、Shopify 管理画面内に組み込むことも、管理画面の外で操作することもできます。両方のタイプのアプリに Polaris を使用する方法があります。
埋め込み型のアプリは、注文や商品のような単なる目的地として Shopify の管理画面に存在します。埋め込み型アプリ。
- シームレスなマーチャントエクスペリエンスを確保するために Polaris を使用することが推奨されます。
- Shopify の他のメインセクションやリソースと一緒に表示されます。
- Shopify モバイルと POS アプリ内でネイティブに開くことができます。
- Shopify App Bridge (旧 EASDK)に React コンポーネントを介してアクセスできます。
アプリは組み込みである必要はありません。埋め込まれていないアプリは、管理者とは別のウェブサイトとして存在します。
一貫性のあるエクスペリエンスの実現
一貫したエクスペリエンスを維持するために、Polaris を他のユーザーインターフェース（UI）スタイルや、異なるルック＆フィールのコンポーネントと組み合わせないでください。これには、マーケティングウェブサイトで使用しているスタイルも含まれます。
アプリの一部のページで Polaris を使用し、他のページでは使用しないようにしてください。
Shopify 管理者からのイラストを使用しないでください。
あなた自身のコンポーネントを構築する場合。
- 太字や暗い背景色は避けてください。Polaris は、主要ボタンやグローバルトップバーなど、インターフェイスの非常に重要な部分に注意を促すためにのみ、暗い背景に明るいテキストを使用しています。
- アイコンは、標準的な 20px のサイズでのみ使用してください。これにより、一貫性が保たれ、ぼやけたアイコンを避けることができます。
- 独自のコンポーネントを作成する場合は、他のデザインガイドラインに従ってください。
- 使い慣れたページレイアウトを使用する。
- イラストは控えめにしましょう。イラストを使用するタイミングについては、こちらをご覧ください。
アプリの始まりと終わりを明確にする
Polaris アプリはマーチャントのためにシームレスな体験を提供しますが、マーチャントが体験のどの部分があなたのアプリに属し、何がそうでないかを理解することが重要です。
管理者の中で、マーチャントとコミュニケーションをとる際には、常にアプリであることを明示してください。これは、不確実性がある場合に特に当てはまります。例えば、ライブチャットでは、アプリや開発者の名前を繰り返し表示します。質問に答えるサポートスタッフは、アプリの名前をもう一度言うべきです。
Shopify の管理画面で作成されたコンテンツを再表示する際には、透明性を保ちましょう。例えば、マーチャントの商品を表示するときは、あなたのアプリの商品リストを作成するために必要なデータと明確に区別してください。
あなたのスタンドアロンアプリを視覚的に区別する
Polaris はマーチャント向けのスタンドアロンアプリを構築するために使用することができますが、マーチャントがいつあなたのアプリを使用しているのか、いつ Shopify を使用しているのかを知ることが重要です。マーチャントを混乱させてはいけないのです。また、これはあなたのアプリが独自のブランドを確立するのに役立ち、マーチャントがサポートのために誰に連絡すればよいかを理解するのに役立ちます。
マーチャントのビジネスに焦点を当てた体験を提供してください。
マーチャントのワークフローの中で他のアプリを宣伝してはいけません、マーチャントの集中力を削いでしまいます。代わりに、マーチャントに役立つ他のアプリについて知ることができるセクションを明確に示します。
必要なパーミッションだけを求める
未発表の機能のために必要となるマーチャント情報へのアクセス許可を求めたくなることがあります。しかし、このような行為は、マーチャントの製品に対する信頼を低下させる可能性があります。また、より多くのマーチャントデータの管理、保管、そして最終的な削除に責任を負うことになります。したがって、アプリが現在のタスクを達成するために必要なものだけを要求してください。
ナビゲーションを明確に定義する
アプリのナビゲーションを構成する際には、マーチャントのニーズとメンタルモデルに沿って構築してください。
メニュー項目は以下の通りです。
- 可能な限り少ないカテゴリーでアプリの機能を表現する。
- それぞれが短く、スキャン可能であること
- 名詞を使う
モバイルで使えるようにする
ますます多くのマーチャントが携帯電話で Shopify を使用しています。多くのマーチャントがモバイルデバイスで新規登録をしています。つまり、マーチャントがあなたのアプリを初めて使うのはスマートフォンかもしれません。
主にコンピュータを使用していても、マーチャントは夜や週末にスマホで Shopify を使用する傾向があります。マーチャントのビジネスは常にフルタイムで行われており、あなたのアプリはすべてのデバイスで素晴らしい体験を提供する必要があります。
Polaris コンポーネントを使用すると、アプリが複数のスクリーンサイズをサポートすることができます。カスタムコンポーネントも同じように動作するように構築する必要があります。特に、全幅のテーブル、多くのテキストやデータを表示するページ、ボタンの配置などには注意してください。開発中に、少なくとも 1 台の iOS デバイスと 1 台の Android デバイスでアプリをテストしてください。
言葉を忘れてはいけない
言葉はアプリのユーザーエクスペリエンスを左右します。Polaris には、マーチャントとのコミュニケーションから推測を取り除くための実用的なガイドラインがあります。以下の項目を含む製品コンテンツの概要をご覧ください。
- 文法や仕組み、ボタンのラベルや見出し、日付や時間などの書き方を解説。
- 語彙：「フルフィルメント」や「チャネル」などの用語、「ログイン」と「Login」の違いを含む。
- 個々のコンポーネントページの中には、コンテンツガイドラインがあります。このガイドラインには、そのコンポーネントのコンテンツをどのように構成し、フォーマットするかという具体的な指示と、使用する用語についてのアドバイスが記載されています。
- ヘルプドキュメントのガイドラインは、マーチャントがアプリを理解するのに役立つドキュメントを書くのに役立ちます。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion