【Polaris和訳】Foundations/Formatting local currency
この記事について
この記事は、Polaris/Foundations/Formatting localized currencyの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
ローカライズされた通貨のフォーマット
通貨のフォーマットは、国や言語によって異なります。通貨フォーマットのフレームワークは、以下のようになっています。
- より多くの加盟店がグローバルに販売できるようにする
- 世界各地のマーチャントとカスタマーのために、通貨フォーマットをローカライズする。
- 混在する通貨の表示を統一し、加盟店が複数の通貨を扱う店舗を管理しやすくする
- API によるフォーマットの実装
定義
1 つのストアは、複数の種類の通貨と通貨フォーマットを持つことができます。
ストアの通貨
ストアのメイン通貨で、Shopify のデフォルトです。すべての売上とレポートはストアの通貨で表示されます。
非店舗通貨
その他の種類の通貨は「非店舗通貨」と呼ばれます。非ストア通貨の種類は以下の通りです。
- プレセンテーション通貨。提示通貨：マーチャントの店舗で購入者に提示される通貨の種類です。マルチカレンシーの店舗では、店舗通貨とは異なる場合があります。
- Payout currency（ペイアウトカレンシー）：マーチャントへの支払いに使用される通貨。マーチャントの売上に対する支払いに使用される通貨。マルチカレンシーストアの場合、ストアの通貨とは異なる場合があります。
- 請求通貨。請求通貨：テーマ、アプリの購入、月額プランの請求に使用される通貨です。請求通貨は米ドルのみですが、税務上の理由で現地通貨を含む場合もあります。
ショートフォーマット
通貨記号と通貨価値を含みます。この形式は、マーチャントがよく知っている通貨に使用されます。
例 $12.50; 12,50 €
明示的なフォーマット
通貨記号、通貨価値、ISO コード（例：「USD」、「CAD」）を含みます。商社が馴染みがなく、期待していない通貨に使用するのが最適です。
例 12.50 カナダドル、12.50 ユーロユーロ
グローバルスタンダードとの整合性
Shopify は、通貨、日付、時間、金額のローカリゼーションフォーマットに CLDR（Common Locale Database Repository）を使用しています。
- これは国際的に認められた標準です。
- マーチャントのロケールに基づいて数字や通貨を自動的にフォーマットします。
- リポジトリはサードパーティによって管理されています。
CLDR が決定します。
- 通貨記号が金額の前にあるか後にあるか（例：$250、250 USD、250 $)
- 小数点が使用されているかどうか（例えば、日本円には「セント」はありません）。
- 小数点以下の記号がピリオドなのかカンマなのか（例：37,50 または 37.50
- 数字のグループ化の方法（例：10,000 や 1,0000、スペースを使うなど
CLDR は、異なる文脈で表示される適切な詳細レベルを決定しません。たとえば、通貨記号と値を表示する場合（短い形式）と、通貨記号、値、ISO コードを表示する場合（明示的な形式）を判断できません。
短い形式のほうが効率的ですが、複数の通貨を扱う店舗で慣れない通貨を扱う場合には、わかりやすくすることが重要です。このような場合には、明示的なフォーマットを使用してください。
デザインガイドライン
CLDR のフォーマットには制限があるため、以下のガイドラインを参考にして、複数通貨のコンテキストで表示する通貨の詳細レベルを適切に選択してください。
マーチャント
通貨の保存
非店舗通貨
- 合計金額、ボタン内の金額、または段落内の金額を表示する場合は、明示的なフォーマットを使用してください。
- 合計金額と一緒に非合計金額を表示する場合は、短い形式を使用してください。
この例では、請求通貨が店舗の通貨とは異なる米ドルである場合を示しています。支払状況カードの非合計金額は短い形式で、合計金額は明示的な形式で表示されます。
この例では、ストアの通貨ではない注文を返金するシナリオを示しています。
この例では、データテーブルで非合計金額には短い形式、合計金額には明示的な形式を使用しています。
負の金額の表示
いずれの形式でも、通貨と金額の前には必ずマイナスの記号を置きます。
お客様
- 価格が顧客向けのものであれば、デフォルトで明示的なフォーマットを使用します。単価、項目別価格、分割払い価格には短い形式を使用します。
- お客様がどの通貨を見ているのかを知るための十分な指標があれば、短い形式で十分な場合もあります。短い形式を使用する場合は、カートの合計、チェックアウトの合計、および通知の合計に必ず明示的な形式を使用してください。
この例では、割賦価格に短いフォーマットを使用しています。
この例では、単価に短いフォーマットを使用しています。
この例では、項目別の価格に短いフォーマットを使用しています。
デザインを決定する際の指針となる質問
通貨フォーマットについて決定する際には、以下の質問を参考にしてください。
マーチャントはどの通貨を見ているか知っているか？
- どの通貨が表示されることを期待しているのか？
- マーチャントは、複数の通貨を扱うストアの場合、注文がどの通貨で行われるかを知っているか？
通貨フォーマットは、マーチャントのメインタスクをサポートしていますか？
主なタスクは、スキャン、比較、分析、またはアクション（例：返金）のいずれかですか？
- 十分な情報を得た上で判断するための詳細情報があるか？
情報に基づいた判断をするのに十分な詳細があるか？
- 例えば、彼らは非店舗通貨の注文返金の通貨を知っているか？
- 店舗通貨と支払通貨が異なる場合、売上報告書と支払明細書を区別することができるか？
混乱を招くことなく、UI をシンプルにすることは可能でしょうか？
すべてのタスクで、すべての場所で明示的なフォーマットを表示したくはありません。
- 通貨のフォーマットをシンプルかつ正確にするにはどうしたらいいでしょうか？
デザインのヒント
店舗通貨、決済通貨、支払通貨、請求通貨が異なるシナリオをモックアップしてください。このようなシナリオは、多くのマーチャントがグローバルに販売するようになるにつれ、一般的になってきています。
同じシンボルを持つ通貨を使用して、わかりやすさをテストしてください。
USD、CAD、AUD、HKD、SGD は、同じ記号「$」を共有する数多くの通貨のうちのほんの一部です。
日本円（JPY）を使って、通貨の長さとスペースの制約をテストする
1 米ドルは約 100 円です。日本円の金額を入れるスペースがあれば、他のほとんどの主要通貨にも対応できるはずです。
迷ったときは、ガイド・クエスチョンで判断しましょう
ガイディングクエスチョンは、ユースケースが明確でない場合に、どのフォーマットを使用すべきか、マーチャントに焦点を当てた判断をするためのものです。
主要通貨のローカルフォーマット
以下の表は、一般的に使用されている通貨の短いフォーマットと明示的なフォーマットです。
| 通貨 | ロケール | 短い形式 | 明示的な形式 |
|---|---|---|---|
| 米国ドル（$, USD） | en-US | $12.50 | $12.50 USD |
| カナダドル（$, CAD） | en-CA fr-CA |
$12.50 12,50 $ |
$12.50 CAD 12,50 $ CAD |
| オーストラリア・ドル（$, AUD） | en-AU | $12.50 | $12.50 AUD |
| ユーロ（€、EUR） | de-DE, fr-FR en-IE nl-NL |
12,50 € €12.50 €12.50 |
12,50 € EUR €12.50 EUR €12.50 EUR |
| 英国ポンド（£、GBP） | en-GB | £12.50 | £12.50 GBP |
| 日本円 (¥, JPY) | ja-JP | ¥1250 ¥1250 JPY | |
| ニュージーランド・ドル ($, NZD) | en-NZ | $12.50 | $12.50 NZD |
| 香港ドル（$, HKD） | zh-HK | $12.50 | $12.50 HKD |
| シンガポール・ドル（$、SGD） | zh-SG | 12.50 | $12.50 SGD |
| デンマーククローネ（Kr、DKK） | da-DK | 12,50 kr. | 12,50 kr. DKK |
実装方法
React コンポーネントで通貨をフォーマットするには、Shopify/react-i18n ライブラリの formatCurrency メソッドを使用します。以下のコード例のように、form オプションを設定することで、short または explicit のフォーマットを選択できます。
import { useI18n } from "@shopify/react-i18n"
const [i18n] = useI18n()
i18n.locale = "de-AT"
const eurDeAt = i18n.formatCurrency(price, {
currency: "EUR",
form: "short",
})
const eurDeAtExp = i18n.formatCurrency(price, {
currency: "EUR",
form: "explicit",
})
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion