UMAブランドガイドライン
UMAブランドはシンプルなデザインであるため、貴社製品に自然に溶け込みます。以下のガイドラインは、UMA製品およびブランド要素の使用基準を概説しています。本ガイドラインは、貴社製品でUMAを使用するお客様に、一貫した信頼できるプロフェッショナルな体験をお約束するためのものです。
UMAのあらゆる製品、資料、コミュニケーションに関する本ガイドラインをご確認ください。UMAブランドアイデンティティの維持に努めていただきますようお願いいたします。
UMAロゴ
UMAロゴは、様々なプラットフォームや他のブランドで広く使用されるため、ブランドの中心的存在です。ユーザーの信頼を得るために、一貫性を保つことが重要です。
ロゴファイルとその他のUMAビジュアルアセットをダウンロードするには、ここをクリックしてください。
余白
UMAロゴの縦の長さで、ロゴ周囲4辺の余白を決めましょう。これは一般的に良いルールとされていますが、UMAロゴを要素の近くに配置することが理にかなっている場合もあります。
UMAロゴとそのアドレスをより関連付けたい場合があるかもしれません。その場合、パディングを減らすことでアドレスを1つの要素のように見せることができます。
最小サイズ
UMAロゴは小さなサイズに縮小できるように設計されているため、項目欄に配置しても読みやすくなります。もっと小さくすることもできますが、高さ12pxを最小サイズとして推奨しています。
コントラスト
読みやすさを維持するため、UMAロゴは常にコントラストの高い背景に配置してください。UMAロゴは通常小さなサイズで表示されるため、これは特に重要です。
UMAに対応
UMAブランドを自社のロゴと一緒に使用する場合は、自社の製品やサービスとの関連性を示すために、自社のロゴの下に横長のロックアップを使用し、スケールを小さくすることをお勧めします。
ロゴの使用
ロゴに手を加えないでください。以下はロゴの注意事項です。
UMA欄と認証
以下のガイドラインでは、ユニバーサルマネーアドレスの入力と表示についてご紹介します。
フォームフィールドでのUMA
貴社製品に一貫性を持たせるために、貴社の既存デザインを活用しましょう。以下は、アドレスを求める際のUMAの組み込み方の例です。
どのUMAも$記号で始まります。顧客がUMAに送信するときはいつでも、認知負荷を軽減することによってユーザー体験をできるだけシームレスにするよう努めましょう。例えば、先行入力機能を使ってアドレスがわかっているときに入力するようにします。最終的に、貴社製品で最高のカスタマーエクスペリエンスを得られるかどうかは、貴社次第です。当社が推奨する提案は以下の通りです。
UMAのみの入力
記号入力をなくすため、デフォルトで入力欄に「$」記号を組み込むことをお勧めします。
Multi-type input
UMA is also meant to live alongside other types of addresses, like a wallet address, phone number, email, or contact. Help customers use UMA in places like placeholder text, and input help text on screens where a customer is inputting a recipient to a transaction.
Form validation
The below illustrates the various stages of entering and validating an UMA. Below is one possible way to place the UMA logo in the vicinity of the form field when the address has been verified.
Position and scale
The UMA logo is designed to scale down to small sizes and still be readable. Below you’ll see some sizing, position and padding recommendations.
Once validated, the UMA logo is best placed on the right of the form field (except for RTL languages, in which case it’s positioned on the left).
Because it’s important to leverage your existing form field design, there are no hard rules for scale and placement of the UMA logo in the validated form field. Here are a few guidelines to consider when adjusting your existing fields to accommodate for UMA.
- It should be small, but legible enough to read. If it’s too big, it overwhelms the field and takes up too much character space for the actual input.
- Align it to the right when it makes sense with appropriate padding around it. This will change based on the size and shape of your fields.
Don’t use or manipulate the UMA logo for any type of form validation. The logo only appears when an address is valid.
Alternate positions
The guidelines below cover displaying a Universal Money Address when positioning the UMA logo outside of a form field.
Position and scale
There may be instances where you want to closely associate the UMA logo with a address to make the complete address look like one element, or place it next to terms like “verified” to help build customers trust in an end-to-end flow. For example, you can add a context line alongside a primary call to action, or associate the logo with an address on a transaction confirmation screen. Here are a couple guidelines to consider.
- Again, it should be small, but legible enough to read. If it’s too big it can add unnecessary tension to the user experience.
- Use a high contrast color.
- Use the UMA logo sparingly. If the logo is repeatedly used on a screen it can lead to a poor user experience.
Examples
Here are a few screens illustrating proper use of the UMA logo. The aim is to make UMA feel at home in your product while maintaining some consistency across the ecosystem.
Questions?
We here to help with any questions you have about integrating UMA into your product. Contact us.