【Shopify.dev和訳】Apps/Best practices/Design
この記事について
この記事は、Apps/Best practices/Designの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Shopify アプリのデザインのベストプラクティス
マーチャントのオンラインストアにシームレスに統合されるアプリをデザインすることで、ユーザーエクスペリエンス（UX）はより親しみやすく魅力的に、ユーザーインターフェース（UI）はより直感的になります。
アプリに取り入れるデザイン原則は、ユーザーのブランドを表すだけでなく、その価値観も表します。アプリがより使いやすく、親しみやすいものであればあるほど、お客様の満足度が高まり、定着率も高くなるでしょう。
アプリをデザインする際には、以下のベストプラクティスを確認してください。
Polaris で UI コンポーネントを構築する
Polarisは Shopify のオープンソースのデザインシステムで、マーチャントのストアにシームレスに統合するアプリをデザイン・構築するために、社内およびサードパーティの開発者によって使用されています。Polaris は、デザインプロセスのスピードアップに役立ち、ウェブアクセシビリティの基準に準拠しながら、ユーザーに馴染みのあるアプリ体験を実現します。
Polaris コンポーネントは、アプリ全体で使用可能なインターフェース要素のコレクションです。それらには、以下のものが含まれます。
情報アーキテクチャ(IA)を定義する
情報アーキテクチャ（IA）とは、ユーザーが必要な情報を見つけ、効率的にタスクをこなせるようにすることを目的とした、すべてのコンテンツの整理、構造、ラベル付けの方法です。
効果的な情報アーキテクチャは、以下のことを実現します。
- 複雑さを緩和する
情報は可能な限りシンプルな方法で構造化され、管理されるべきである。 - スケーラビリティをサポートする
製品が成長したり変更されたりするたびに、以前の作業をやり直すことを避けるために、優れた IA を実践する。 - 親しみやすさの創出
マーチャントがどのように Shopify にアクセスするかに関わらず、同じ製品のように感じられるべきです。
アプリを整理してわかりやすくしておけば、特にアプリが複雑になったときに、ユーザーの混乱を防ぐことができます。IA のベストプラクティスについての詳細は、Polaris foundations for information architectureをご覧ください。
## 一貫性のあるインターフェースコンテンツを書く
考え抜かれた一貫性のあるインターフェースコンテンツは、優れたデザインの UX の中核となる要素です。
平易な言葉を使って、コンセプトをできるだけ効率的に伝えましょう。ベンチマークとして、Shopify は平易な言葉を米国のグレード 7 の読解レベルとみなしています。グレードのリーディングレベルは、HemingwayやReadableなどのアプリを使ってチェックできます。
アプリのコンテンツ基準についての詳細は、製品コンテンツのためのPolaris foundationsを参照してください。
クロスプラットフォームに対応したデザイン
多くのチームはウェブ用にデザインし、モバイルに適応させることがあります。このような場合、モバイルは、より高品質でパーソナライズされた体験ではなく、ウェブの適応で終わってしまいます。アプリをデザインする際には、常にウェブとモバイルのネイティブに同時にアプローチしましょう。
以下の要素を考慮してください。
- ウェブ、モバイル、アプリ間の情報の流れ方
- マーチャントが各プラットフォームで行うこと
- 一貫性があり、作り込まれているかどうか
- パスワードマネージャー、通知機能、触覚フィードバックなど、活用できる組み込み技術があるかどうか
詳しくは、Polaris ガイドラインのモバイル版をご覧ください。
国際化への対応
ユーザーが世界のどこにいても機能するインターフェイスを構築することは、グローバル市場への参入を促進するだけでなく、全体的に優れた UX を実現します。
以下の要素を考慮してください。
- 文化の違い
アイコンから画像、コンテンツに至るまで、アプリをローカライズすることは、現地の言語に翻訳するだけでなく、地域の違いに適応し、混乱を招いたり不快感を与えたりする可能性のあるコンテンツに注意を払うことを意味します。 - テキストの拡大
アプリのテキストを翻訳すると、テキストが拡張されてスペースが大きくなるため、言語によって大きく異なる言語固有の書式に対応できる柔軟性をインターフェースに組み込む必要があります。 - 語順の変更
そのため、UI コンポーネントを使用して文章を作成することは避け、連結された文字列は慎重に使用するか、まったく使用しないことをお勧めします。
あらゆる場所で機能するインターフェースの構築についての詳細は、国際化のための Polaris の基礎を参照してください。
良い第一印象を与える
優れた設計のオンボーディングフローは、アプリへのエンゲージメントを高めます。フローは効率的で、明確に定義された目標と利益のあるタスクをマーチャントに徐々に紹介します。
アプリでオンボーディングフローを設計する際は、以下のベストプラクティスを考慮してください。
- やる気を起こさせるプロンプトと価値提案の約束を実現する。
- 製品や機能でできることを、空虚な状態で実行する。
- できるだけ早く邪魔をしない。
詳しくは、Polaris guidelines for designing onboarding flowをご覧ください。
次のステップ
Shopify 用アプリのデザインに関する Polaris のガイドラインを確認してください。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion