金額入力UIの設計：通貨・小数点・確認する値をそろえる

金額の入力欄では、入力した人が意図する数値、その通貨、アプリケーションが保存する値を一致させる必要があります。通貨と数値の形式を明示し、重要な操作の前に、どう解釈されたかを確認できるようにします。表示を整える処理で、金額自体を黙って変えてはいけません。

まずフォーム全体の項目要件を決め、その上で金額専用のルールを設けます。カンマが小数点になる場合、貼り付けた見積額に通貨コードが含まれる場合、通貨によって許す小数桁が変わる場合には、「数値を受け付ける」だけでは足りません。

金額欄で記録するものを、具体的に決める

購買アプリケーションで、社員が発注書を作る前に、仕入先の見積総額を登録するとします。例の見積額はUSD 1,234.50です。この項目は見積総額を記録するもので、税の計算、通貨換算、支払いの実行は行いません。

この設計例では、USD、EUR、JPYの正の見積総額を受け付けます。USDとEURは小数第2位まで、JPYは整数とします。これは例のアプリケーションのルールです。同じ製品内でも、単価、為替レート、会計上の調整額では、必要な精度や負数の扱いが異なる場合があります。

見積もりの通貨と、利用者の表示設定を分けます。英語の画面でもユーロの見積もりは入力でき、ドイツ式の数値形式でも米ドルの金額は表示できます。USDを選んだだけで言語を変えたり、入力中の文字列の解釈を黙って変えたりしないようにします。

金額欄には「見積総額」、通貨の選択部品には別のラベルを付けます。選択肢では「USD — 米ドル」のように名称を示し、金額の近くにもコードを残します。複数通貨を扱うフォームでは、ドル記号だけでは説明が不足します。

入力文字列、解釈した金額、確認表示を区別する

入力中の値は、まだ完成していない文字列かもしれません。空欄、「1234.」、小数部分を選んで置き換えている途中の値は、受け付けた金額とは異なります。確認画面の書式付き表示も、同じ金額を読むための別の表現です。

この例では、入力欄が「1234.50」、受け付けた値がUSDの1234.50、確認表示が「USD 1,234.50」になります。三つの意味を一致させます。一度有効だった値を編集し、画面上では未解決の入力になっているのに、以前の値を隠して送信できる状態にしてはいけません。

Unicode CLDRの通貨パターン（英語）は、記号の位置や桁区切りなどの書式を説明しています。ただし、アプリケーションがあらゆる貼り付け文字列をどう解釈するかまでは決めません。文字列の解析と表示を別々に仕様化し、書式ライブラリだけで入力方針が完成したと考えないようにします。

設計メモには「国際通貨に対応」とだけ書かず、選択中の数値形式、入力文字列、受け付けた金額、通貨、確認表示の組を具体的に記録します。該当する状態の横に置けば、画面自体を複雑にせず、開発には正確な条件を渡せます。

貼り付けた区切り記号を、どう解釈するか決める

他のアプリケーションからコピーした見積額は、別の形式かもしれません。米国式の「1,234.50」とドイツ式の「1.234,50」は、同じ数値を表します。小数点と桁区切りの役割を区別する必要があり、カンマやピリオドをすべて消すだけでは適切に解釈できません。

CLDRの数値記号の説明（英語）は、小数点と桁区切り、地域の設定を区別しています。入力では、画面で明示した、またはすでに確立している形式設定を使います。句読点の使い方から、見積もりの通貨を推測しないでください。

この例では、意図的に解釈できる形式を限定しています。別の貼り付け形式も確実に区別でき、解釈した金額を示せるなら、対応を広げられます。大切なのは、二通りの意味が残ったときにどうするかです。

受け付けられない貼り付けには、「小数点にはピリオドを使ってください。例：1234.50」のように直し方を示します。製品が形式設定の変更を提供するなら、その操作も案内します。元の文字列は残し、社員が見積書と比較できるようにします。

USDを選択中に「USD 1,234.50」を貼り付けた場合、認識したUSD表記を取り除いても意味は変わりません。一方、「EUR 1,234.50」なら通貨の不一致を解決する必要があります。EURを黙って消すと、見た目の整った誤った金額になります。

編集を妨げないタイミングで書式を整える

この発注フォームでは、フォーカス中は編集しやすい値を保ち、入力が完成して妥当と判断できる状態でフォーカスが外れたら書式を整えます。「1234」と入力している途中の「1」を「1.00」へ変えたり、途中の数字を置き換えたときにカーソルを末尾へ飛ばしたりしません。

入力しながら書式を整える方式も設計できますが、カーソル位置、選択、削除、貼り付け、文字の変換中の状態を丁寧に扱う必要があります。例えばPegaの通貨入力部品（英語）は入力中の書式調整を説明しています。これはその部品の動作であり、すべての金額欄が従う規則ではありません。

実際の編集を試して方式を選びます。「1234.50」の「34」を置き換える、小数部分を消す、全体へ貼り付ける、変更を元に戻す、といった操作をしてもらいます。通常の編集が難しいなら、初期表示が美しいだけでは補えません。

スマートフォンでは、小数入力向けのキーボードを促す設定が役立ちます。HTMLのinputmodeの定義（英語）は小数を入力する仕組みを説明しますが、金額の妥当性を検証するものではありません。想定する端末で、フォームが求める区切り記号を入力できるかも試します。

受け付けない小数桁を、黙って丸めない

社員がUSD 1,234.567と入力した場合、この見積総額の仕様では小数第3位を受け付けません。値を残して「USDは小数第2位まで入力してください」と説明します。1,234.57を黙って保存すると、見積書と異なる総額を記録することになります。

計算結果を意図的に丸める製品なら、丸め方と、丸めた結果をどこで示すかを定めます。これは、対応しない入力を収めるために勝手に丸めることとは別です。切り捨ても同様で、小数第3位を見えなくしても、意味を適切に処理したことにはなりません。

入力の精度は、その先の処理とも合っている必要があります。Stripeの通貨ドキュメント（英語）は、その一例です。金額APIは最小通貨単位を使い、10 USDを1000、10 JPYを10で表し、通貨ごとの例外もあります。これはStripeの規則であり、すべてのアプリケーションで金額を100倍する指示ではありません。

この購買アプリケーションでは、正確な十進数の表現を開発側と合意し、確認表示を一致させます。0を許すか、負の調整額をこの操作で扱うか、上限を設けるかは別に決めます。必須の空欄は、人が入力するまで空欄のままです。プレースホルダーの「0.00」を、本当の総額0に変えてはいけません。

通貨の変更を、換算したように見せない

「1234.50」が残っている状態で、社員がUSDをJPYへ変えたとします。通貨の表示だけを置き換えると意味が変わり、「.50」を落とすと数値も変わります。どちらも通貨換算ではありません。

この設計では、入力した数字を未解決の下書きとして残し、「この項目のJPYは整数です。JPYの見積総額を入力してください」と表示します。以前のUSDの確認は無効にします。USDへ戻して前の下書きを復元するか、該当する見積書のJPY総額を入力し、改めて確認できます。

USDからEURへ変える場合は、小数桁の条件を満たしていても、金額の意味は異なります。数字を表示したままにしても、発注書を作成する前に「EUR 1,234.50」を再確認する必要があると伝えます。小数のエラーが出なくても、通貨コードの変更は重要な変更です。

換算機能を提供する製品なら、別の操作として設け、元の金額、換算後の金額、レートの条件、該当する手数料や丸め方を、承認前に示します。この例には換算機能がないため、為替レートの行を飾りとして置くと誤解を招きます。

保存する金額と通貨の組を確認する

発注内容の確認では、仕入先と見積番号の横に、通貨コードを伴う見積総額を示します。「編集」から金額欄へ戻れるようにします。数字か通貨を変えたら、以前の確認を無効にし、古い値へ承認済みの印を残さないようにします。

通貨の文脈は、見える接頭辞以外でも伝えます。GOV.UKのテキスト入力の説明（英語）は、接頭辞や接尾辞だけに頼らないよう求めています。意味のあるラベルと必要な説明を実際の入力部品へ関連付け、支援技術を使う人にも同じ金額の文脈を提供します。

保存後は、保存が確認された金額と通貨を示します。明確に失敗した場合は、確認した組を修正や再試行のために残し、発注書を保存できなかったと説明します。結果が不明なら、もう一度作成するよう促す前に、発注書の状態を照合します。入力欄が緑でも、発注書の作成完了を意味するわけではありません。

Pixsoで、通貨の切り替えと確認表示を並べて試す

Pixsoのキャンバスに、この見積入力の仕事を作ります。USDの編集状態と「USD 1,234.50」の確認表示を並べ、続けて、JPYへ変えても「1234.50」が残り、整数の入力を求める状態を用意します。金額欄を再利用できる部品にし、状態ごとのラベル、通貨の位置、メッセージの間隔を比較します。

通貨変更と「編集」の操作を対応するフレームへつなぎ、経路をプレビューします。Auto Layoutで、長いエラーメッセージが下の見積番号やボタンに与える影響も確認します。Pixsoの画面接続とレビュー機能（英語）は、この確認に使えます。文字列の解析と金額の規則は、アプリケーションの仕様として実装します。

レビュー担当者に見積額を登録し、小数部分を置き換え、通貨を一度変更してもらいます。各確認画面で、発注書にどの金額が入るかを尋ねます。答えが分かれたら、そのフレームの近くにコメントを残します。区切り記号の意味を推測したり、換算されたと思い込んだりしないと答えられないなら、入力ルールをさらに明確にする必要があります。