Apple Payボタンの使用
このシステムは、アプリやウェブサイトで使用できるいくつかのApple Payボタンの種類とスタイルを提供します。Apple Payボタンとは対照的に、Apple Payマークを使用して、支払いオプションとしてApple Payの可用性を伝えます。
独自のApple Payボタンデザインを作成したり、システムが提供するボタンデザインを模倣したりしないでください。
開発者のガイダンスについては、PKPaymentとPKPayment(iOSとmacOS)、WKInterface(watchOS)、Apple Pay on the Web(web)を参照してください。
ボタンの種類
Appleはいくつかのタイプのボタンを提供しているので、購入や支払いの経験の用語や流れに最も適したボタンの種類を選択できます。
Appleが提供するAPIを使用して、Apple Payボタンを作成します。システムが提供するAPIを使用すると、次のようになります。
- Appleが承認したキャプション、フォント、色、スタイルを使用することが保証されているボタン
- サイズを変更すると、ボタンの内容が理想的なプロポーションを維持することを保証する
- ボタンのキャプションをデバイスに設定されている言語に自動的に翻訳する
- UIのスタイルに合わせてボタンのコーナー半径を設定するためのサポート
- VoiceOverがボタンを記述できるようにする、システム提供の代替テキストラベル
| 支払いボタンの種類 | 使用例 |
|---|---|
 | 製品詳細ページやショッピングカートページなど、人々が購入できるアプリやウェブサイトのエリア。 |
 | ケーブルや電気などのユーティリティや、配管や車の修理などのサービスなど、請求書や請求書や請求書を支払うことができるアプリやウェブサイト。 |
 | チェックアウトというテキストで始まる他の支払いボタンを含む、ショッピングカートまたは購入体験を提供するアプリまたはウェブサイト。 |
 | 続行のテキストで始まる他の支払いボタンを含む、ショッピングカートまたは購入体験を提供するアプリまたはウェブサイト。 |
 | 人々がフライト、旅行、またはその他の体験を予約するのに役立つアプリまたはウェブサイト。 |
 | 人々が寄付をすることを可能にする承認された非営利団体のためのアプリまたはウェブサイト。 |
 | ジムのメンバーシップや食事キットの配達サービスなど、サブスクリプションを購入できるアプリやウェブサイト。 |
 | トランジットやプリペイド電話プランなどのサービスに関連するカード、アカウント、または支払いシステムにお金を追加するのを助けるために、用語リロードを使用するアプリまたはウェブサイト。 |
 | 交通やプリペイド電話プランなどのサービスに関連するカード、アカウント、または支払いシステムにお金を追加するのを助けるために、add moneyという用語を使用するアプリまたはウェブサイト。 |
 | 乗り継ぎやプリペイド電話プランなどのサービスに関連するカード、アカウント、または支払いシステムにお金を追加するのを助けるためにトップアップという用語を使用するアプリまたはウェブサイト。 |
 | 食事や花などのアイテムを注文できるアプリやウェブサイト。 |
 | 人々が車やスクーターなどのアイテムをレンタルできるアプリやウェブサイト。 |
 | 人々がプロジェクト、原因、組織、その他のエンティティにお金を与えるのを助けるために用語サポートを使用するアプリまたはウェブサイト。 |
 | 貢献という用語を使用して、人々がプロジェクト、原因、組織、その他のエンティティにお金を寄付するのを支援するアプリまたはウェブサイト。 |
 | 人々が商品やサービスにチップを渡すことができるアプリやウェブサイト。 |
 | 最小幅を小さくすることができる、または行動を促すフレーズを指定していないボタンを使用する文体的な理由があるアプリまたはウェブサイト。アプリやウェブサイトが実行されているオペレーティングシステムのバージョンでサポートされていない支払いボタンの種類を選択すると、システムはこのボタンに置き換えることができます。 |
デバイスがApple Payをサポートしているが、まだ設定されていない場合は、Apple Payの設定ボタンを使用して、Apple Payが受け入れられていることを表示し、人々にそれを設定する明示的な機会を与えることができます。
設定ページ、ユーザープロフィール画面、インタースティシャルページなどのページに、Apple Payの設定ボタンを表示できます。これらの場所のいずれかでボタンをタップすると、カードを追加するプロセスを開始する必要があります。
ボタンスタイル
自動スタイルを使用して、現在のシステムの外観がアプリのApple Payボタンの外観を決定できるようにすることができます(開発者のガイダンスについては、PKPayment.automaticを参照してください)。ボタンの外観を自分で制御したい場合は、次のいずれかのオプションを使用できます。ウェブ開発者のガイダンスについては、Appleを参照してください。
Black
十分なコントラストを提供する白または明るい色の背景に使用します。黒や暗い背景には使用しないでください。
White with outline
十分なコントラストを提供しない白または明るい色の背景に使用してください。暗い背景や飽和した背景に置かないでください。
White
十分なコントラストを提供する暗い色の背景に使用します。
Button size and position
Apple Payボタンを目立つように表示します。Apple Payボタンを他の支払いボタンよりも小さくないようにし、人々がスクロールして見ないようにしてください。
カートに追加ボタンに関連して、Apple Payボタンを正しく配置してください。横並びのレイアウトで、Add to Cartボタンの右側にApple Payボタンを置きます。
積み重ねられたレイアウトで、カートに追加ボタンの上にApple Payボタンを置きます。
他のボタンの外観に合わせてコーナー半径を調整します。デフォルトでは、Apple Payボタンは角が丸みを帯びています。角の半径を変更して、四角のボタンや錠剤型のボタンを作成できます。開発者のガイダンスについては、cornerを参照してください。
ボタンの周りの最小ボタンサイズと余白を維持します。ボタンのタイトルは、ロケールによって長さが異なる場合があることに注意してください。
注意
指定したサイズが、使用している支払いボタンの種類の翻訳されたタイトルに合わない場合、システムは自動的に左側の以下のプレーンなApple Payボタンに置き換えます。Apple Payの設定ボタンの自動交換はありません。
Use the following values for guidance.
| Button | Minimum width | Minimum height | Minimum margins |
|---|---|---|---|
| Apple Pay | 100pt (100px @1x, 200px @2x) | 30pt (30px @1x, 60px @2x) | 1/10 of the button’s height |
| Book with Apple Pay | 140pt (140px @1x, 280px @2x) | 30pt (30px @1x, 60px @2x) | 1/10 of the button’s height |
| Buy with Apple Pay | |||
| Check out with Apple Pay | |||
| Donate with Apple Pay | |||
| Set up Apple Pay | |||
| Subscribe with Apple Pay |
Apple Pay mark
Apple Payマークのグラフィックを使用して、同様の方法で他の支払いオプションを表示するときに、Apple Payが利用可能な支払いオプションであることを示します。Apple Payマークはボタンではありません。Apple Payボタンが必要な場合は、ボタンの種類に記載されているボタンのいずれかを選択してください。Apple Payを支払いオプションとして表示することに関する設計ガイダンスについては、Apple Payの提供を参照してください。
Appleが提供するアートワークのみを使用し、高さ以外に変更はありません。Apple Payマークの高さを指定できますが、使用する高さが支払いフローで他の支払いブランドマークと同等かそれ以上であることを確認してください。アートワークの幅、角の半径、またはアスペクト比を調整しないでください。商標記号やその他のコンテンツを追加しないでください。境界線を削除しないでください。影、輝き、反射などの視覚効果をマークに追加しないでください。Apple Payマークを反転、回転、またはアニメーション化しないでください。
その高さの1/10のマークの周りに最小のクリアスペースを維持します。Apple Payマークが周囲の境界線を別のグラフィックやボタンと共有させないでください。
Apple Payマークのグラフィックと完全な使用ガイドラインはこちらからダウンロードしてください。
コメント