決済ソリューション / デザインガイドライン
  ドキュメントに戻る

決済ソリューション

デザインガイドライン

決済方法を選択する際、エクソーラのロゴとボタンが正しく表示されるよう、以下のガイドラインに従ってください。

使用事例

有色のロゴ

白黒のロゴ(ブラック)

白黒のロゴ(ホワイト)

ロゴをダウンロード

制限

以下の操作は行えません
ロゴを伸ばします。
古いまたは非公式のエクソーラロゴを使用します。
ロゴの色を変更すること — 下表に示す公式カラーを使用します。
有色の背景にロゴを表示すること - 代わりに白い背景を使用してください。

決済UIのテーマによって、エクソーラのロゴは以下の色になります:

テーマロゴカラーロゴ
ライト(有色のロゴ)マゼンタ:
  • Hex: #ff05b
  • RGB: 255 0 91
  • CMYK: 0 100 55 0
Color logo
ライト(白黒のロゴ)ブラック:
  • Hex: #18171c
  • RGB: 24 23 28
  • CMYK: 50 50 50 100
Black logo
ダーク(白黒のロゴ)ホワイト:
  • Hex: #ffffff
  • RGB: 255 255 255
  • CMYK: 0 0 0 0
White logo
 

ボタン

ニーズに応じた決済方法のリスト表示を実装できます。一貫性を維持するために、ユーザーをエクソーラの決済UIにリダイレクトするボタンのデザインについては、以下のガイドラインに従ってください。

有色のロゴ

白黒のロゴ(ブラック)

白黒のロゴ(ホワイト)

比例

ボタンにテキストを表示する際のガイドライン:
  • 垂直方向と水平方向の中央揃え
  • ボタンの高さ40%

コーナー半径

ボタンコーナー半径を調整できます。

ボタンに影を追加できます。

決済方法リストに表示する例

この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
最終更新日: 2024年7月2日

誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!