# アプリのデザイン デザインツール、ガイドライン、指針を使用して開始します。 Stripe Apps を使用して、Stripe のプラットフォームをベースとする独自のアプリを構築できます。[UI 拡張機能を作成](https://docs.stripe.com/stripe-apps/build-ui.md)することで、Stripe ダッシュボード内のユーザーインターフェイスでアプリを使用できます。アプリ用のユーザーインターフェイスを作成する場合は、提供されたツールとガイドラインを使用して設計プロセスを簡略化します。 ## 使用可能なツール Stripe Appsは[UIコンポーネントと一般的なデザインパターン](https://docs.stripe.com/stripe-apps/design.md#components-and-patterns)を提供します。 ## ブランドの表現とカスタムスタイリング ### カスタムのスタイリング UI 要素のカスタムスタイリングの制限には意味があります。これは、コア UI 要素とプラットフォームの一貫性を維持し、バーへのアクセスを容易にするためです。特に、カラーコントラストはアクセスしやすい UI の重要な要素であるため、使用できるカラーが制限されています。 ### ブランディング要素 アプリを視覚的に目立たせるには、アプリの上部にある「アプリインジケーター」、カラーバー、アイコンを使用します。これにより、ユーザーは自分が使用中のアプリを簡単に識別できます。他の UI 要素とは異なり、アプリインジケーターには任意のカラーを選択できます。 ブランドの主要カラーとそれと調和するシンプルなアイコンやロゴを選択します。アプリの [ContextView](https://docs.stripe.com/stripe-apps/components/contextview.md) コンポーネントの `brandIcon` および `brandColor` プロパティを使用して、カラーとアイコンを指定します。 ![カラースキームとアイコンが異なる 5 つのサンプルアプリ](https://b.stripecdn.com/docs-statics-srv/assets/branding.a28aed3191edfeb83ac39ca45f6638bc.png) ブランドカラーと選択したアイコンのユーザーへの表示 ## コンポーネントとパターン Stripe Apps には、組み合わせて複雑な UI を作成できるさまざまな [UI コンポーネント](https://docs.stripe.com/stripe-apps/components.md)が用意されています。 [パターン](https://docs.stripe.com/stripe-apps/patterns.md)は、最新の UI コンポーネントを効果的に使用する方法を示すコンポーネントで構成されています。推奨されるパターンを使用することで、高品質で一貫性のある使用感のアプリを最短で作成できます。また、アプリの審査プロセスに要する時間も短縮されます。 ## UI コンポーネント Stripe ユーザーは、Stripe ダッシュボード全体で一貫したデザインを期待しており、Stripe アプリはその作成に役立つ UI コンポーネントを提供します。これらのコンポーネントは、ダッシュボードで Stripe アプリの展開可能なドロワーに表示されます。 ![](https://b.stripecdn.com/docs-statics-srv/assets/user-experience.f17e6a3c8a23fcc4cb78f414c6c2d066.png) お客様のアプリの UI 拡張機能は、ユーザーに対し Stripe ダッシュボードに表示されます ユーザーが UI 拡張機能を使用するアプリをインストールすると、アプリがドックに表示されます。ユーザーがドックをクリックすると、ドロワーが開き、アプリとユーザーが実行できるアクションの詳細が表示されます。 ## 使用可能な画面 アプリドロワーは、ユーザーがインストールしたすべてのアプリのエントリーポイントとして機能し、複数の画面で表示できます。「画面」とは、Stripe ダッシュボードのページに対応するビューポートです。 ### 詳細ページ 詳細ページには、特定の Stripe オブジェクトに関する詳細が表示されます。たとえば、単一の支払い、請求書、サブスクリプション、顧客、商品などの詳細ページがあります。詳細ページでアプリは、 [UI Extensions SDK](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md) を使用して現在のオブジェクトに関する情報にアクセスできます (セキュリティ上の理由により、これには権限が必要です。詳細については、[権限](https://docs.stripe.com/stripe-apps/reference/permissions.md)をご覧ください)。 自社の商品に最適な Stripe オブジェクトを検討して、各オブジェクト全体に関連したアプリを構築します。Stripe Apps では、既存のワークフロー内のユーザーに適した状況対応型のアプリを構築することができます。 ### リストページ リストページは、アカウントのアクティビティの概要を提供します。たとえば、[顧客ページ](https://dashboard.stripe.com/customers)にはすべての顧客がリストされ、[支払いページ](https://dashboard.stripe.com/payments)にはすべての支払いがリストされます。 すべてのアプリにリストページのビューが必要になるわけではありません。特定のオブジェクトに関連しない機能を提供する場合にのみ、リストページのビューを構築してください。 ### ホーム Stripe ダッシュボードのホームページでは、ユーザーはビジネスの概要を素早く確認して、コアワークフローに移動できます。お客様の商品と Stripe とのやり取りに関連し、ユーザーのビジネスに適した概要を表示できる場合は、ホーム画面でのアプリ構築を検討してください。 すべてのアプリにホーム画面のビューが必要になるわけではありません。アクセスしたユーザーへの表示に適した概要マテリアルがある場合にのみホームに構築してください。 ## アプリの構造 ![](https://b.stripecdn.com/docs-statics-srv/assets/app-anatomy.c14d4c86a8882de27b023d62302faba6.png) Stripe アプリの各部分 **アプリインジケーター**は、ユーザーが現在どのアプリにいるかを確認できるようにします。アプリを構築したページで状況に応じて表示されます。ユーザーは、表示されるアプリアイコンでアプリを識別し、クリックして呼び出します。 **ヘッダー**には、アプリ名、ビュー名、商品への外部リンクのほか、ユーザーがアプリに対して実行できるいくつかの主要アクションが格納されます。 **コンテンツ**は、アプリの空白のキャンバスです。使用可能な UI コンポーネントのセットを使用して構成することができます。 **App Marketplace エントリーポイント**は、新しいアプリを確認したり、追加したりするためのエントリーポイントです。ユーザーが App Marketplace から新しいアプリを追加すると、ドックが更新され、その新しいアプリのアイコンが表示されます。 **アクティブなアプリアイコン**は、現在選択されているアプリを表すアイコンです。ユーザーが他のアプリをインストールしている場合には、それらのアプリのアイコンはアプリドックの上部または下部に表示されます。アプリのアイコンを設定するには、[アプリマニフェストのリファレンスドキュメント](https://docs.stripe.com/stripe-apps/reference/app-manifest.md)を使用してください。 ## ビューのタイプ アプリは、以下の 3 種類のビュータイプで構築できます。 1. [ContextView](https://docs.stripe.com/stripe-apps/design.md#contextview) 2. [FocusView](https://docs.stripe.com/stripe-apps/design.md#focusview) 3. [SettingsView](https://docs.stripe.com/stripe-apps/design.md#settingsview) ビューは、アプリ操作のさまざまな時点でユーザーに表示される内容を決定します。ビューは、Web サイトの各 HTML ページに似ています。 `ContextView` はアプリのデフォルトビューです。`SettingsView` は、設定ページ用です。これらのビューはいずれも、ビューのルートコンポーネントであり、他のコンポーネントが読み込まれるベースコンテナとして機能します。コンポーネントのすべてに、ビューのルートコンポーネントが必要です。 #### `ContextView` ![](https://b.stripecdn.com/docs-statics-srv/assets/views-contextview.be48c893f02a6e6be989ec659ddd29a7.png) ContextView の外観 アプリの最初のビューは、[ContextView](https://docs.stripe.com/stripe-apps/components/contextview.md) にする必要があります。 `ContextView` を使用すると、ドロワーでアプリを Stripe のコンテンツの横に表示できるため、ユーザーには、アプリが横に並んで表示され、アプリと Stripe のコンテンツでコンテキストを共有することができます。 これらのコンテキスト内のモジュールにより、アプリは既存のワークフローでユーザーと対話して、コンテキストに応じた情報とアクションでワークフローを補強できます。 アプリとユーザーの対話は常に `ContextView` で開始されます。各アプリに (ビューポートごとに) 少なくとも 1 つの `ContextView` が必要で、読み込み時のデフォルトのビューとして機能します (ウェブサイトの `index.html` に似ています)。 #### `FocusView` ![](https://b.stripecdn.com/docs-statics-srv/assets/views-focusview.3e3f40d737518fc2f2e083cc6395710c.png) FocusView の外観 [FocusView](https://docs.stripe.com/stripe-apps/components/focusview.md) は、詳細なワークフローや長いワークフローのためのもので、`ContextView` からトリガーされます。 `FocusView` では、ユーザーの注意を現在のビューに集中させるために、ブロッキングバックドロップがページの残りの部分に適用され、開始から終了まで集中すべきタスクの目的を強調します。 バックドロップを使用した場合、ユーザーはドロワーの背後にあるページのコンテンツとは対話できません。 `FocusView` は、以下の場合に選択します。 - ユーザーが、Stripe ページの即時のコンテキストを必要とせず、また容易に中断すべきではないフォームに入力しているか、ワークフローを実行している場合 - さらに複雑なビューを表示する (サポートチケットなどの外部オブジェクトをプレビューする場合など) には、キャンバスの幅を広くする必要があります。 > #### どのビューを使用するか不明な場合 > > `ContextView` と `FocusView` から選択する際のデフォルトは `ContextView` です。このビューでは、Stripe のコンテンツとアプリのコンテンツが横並びでユーザーに表示されます。 > > ユーザーが開始から終了まで集中する必要があるタスクを完了することが重要な場合、またはさらに複雑なビューを表示するためにキャンバスの幅を広げる必要がある場合は、`FocusView` を選択します。 #### `SettingsView` ![](https://b.stripecdn.com/docs-statics-srv/assets/views-settings.b878b0d4b8240d7f3f2cdb89d5fc7626.png) SettingsView の外観 アプリの設定ページに表示される [SettingsView](https://docs.stripe.com/stripe-apps/components/settingsview.md) では、アプリのカスタム設定を指定できます。[アプリの設定ページを追加](https://docs.stripe.com/stripe-apps/app-settings.md)する方法をご覧ください。 ## See also - [拡張 SDK API リファレンス](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md) - [Stripe Apps UI コンポーネント](https://docs.stripe.com/stripe-apps/components.md) - [UI を構築する](https://docs.stripe.com/stripe-apps/build-ui.md)