テキストボックス

[アーティクル]
03/12/2025

手記

このデザインガイドは Windows 7 用に作成されたもので、新しいバージョンの Windows では更新されていません。ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には、現在の設計ガイダンス反映されていません。

テキストボックスを使用すると、ユーザーはテキストまたは数値を表示、入力、または編集できます。

一般的なテキストボックスとラベルする

一般的なテキストボックス。

手記

レイアウト、フォント、および吹き出しに関連するガイドラインは、別の記事で示されています。

これは適切なコントロールですか?

決定するには、次の質問を検討してください。

すべての有効な値を効率的に列挙することは実用的ですか? その場合は、単一選択リスト、リストビュー、ドロップダウンリスト、編集可能なドロップダウンリスト、またはスライダーを検討してください。
有効なデータは完全に制約されていませんか? または、有効なデータは形式 (制約付き長さまたは文字型) によってのみ制約されますか? その場合は、テキストボックスを使用します。
値は、特殊な共通コントロールを持つデータ型を表していますか? たとえば、日付、時刻、IPv4 または IPv6 アドレスなどがあります。その場合は、テキストボックスではなく日付コントロールなどの適切なコントロールを使用します。
データが数値の場合:
- ユーザーは設定を相対的な数量として認識しますか? その場合は、スライダーを使用します。
- ユーザーは、設定の変更の効果に関する即時フィードバックの恩恵を受けますか? その場合は、テキストボックスと共にスライダーを使用します。たとえば、ユーザーは、色相、彩度、明度の値に対する変更の影響をすぐに確認できるため、スライダーを使用して色を簡単に選択できます。

設計の概念

テキストボックスは非常に柔軟であるという利点を持ちますが、制約を最小限に抑えるという欠点があります。編集可能なテキストボックスの制約は次のみです。

必要に応じて、最大文字数を設定できます。
必要に応じて、入力を数値 (0 9) のみに制限できます。
スピンコントロールを使用する場合は、スピンコントロールの選択肢を有効な値に制限できます。

長さとスピンコントロールの省略可能な存在を除いて、テキストボックスには有効な値やその形式を示す視覚的な手掛かりはありません。つまり、ラベルに依存してこの情報をユーザーに伝えます。ユーザーが無効なテキストを入力した場合は、エラーメッセージでエラーを処理する必要があります。

原則として、できる最も制約の多いコントロールを使用する必要があります。テキストボックスなどの制約のないコントロールを最後の手段として使用します。ただし、制約を検討するときは、グローバルユーザーのニーズに留意してください。たとえば、米国の郵便番号に制限されているコントロールはグローバル化されませんが、郵便番号形式を受け入れる制約のないテキストボックスはグローバル化されます。

使用パターン

テキストボックスは、いくつかの使用が可能な柔軟なコントロールです。

ラベル	価値
データ入力短い文字列を入力または編集するために使用される、制約のない 1 行のテキストボックス。	されたテキストボックスのスクリーンショット制約のない 1 行のテキストボックス。
書式設定されたデータ入力特定の形式でデータを入力するために使用される、固定サイズの短い 1 行テキストボックスのセット。	書式設定されたデータ入力に使用されるテキストボックス。注:自動終了機能により、入力フォーカスがテキストボックス間で自動的に進みます。この方法の欠点の 1 つは、データを 1 つの単位としてコピーまたは貼り付けることができないということです。
支援データ入力文字列の入力または編集に使用される制約のない 1 行のテキストボックスと、ユーザーが有効な値を選択するのに役立つコマンドボタンが組み合わされています。	されたテキストボックスのスクリーンショットこの例では、[参照] コマンドを使用すると、ユーザーは有効な値を選択できます。
テキスト入力の長い文字列を入力または編集するために使用される、制約のない複数行のテキストボックス。	[アドレス] テキストボックスする制約のない複数行のテキストボックス。
数値入力の数値の入力または編集に使用される 1 行の数値のみのテキストボックス。マウスベースの入力を容易にするために、省略可能なスピンコントロール。	数値入力に使用されるテキストボックス。テキストボックスとそれに関連付けられているスピンコントロールの組み合わせは、スピンボックスと呼ばれます。
パスワードと PIN 入力パスワードと PIN を安全に入力するために使用される、制約のない 1 行のテキストボックス。	パスワードの入力に使用するテキストボックス。
データ出力 1 行の読み取り専用テキストボックス。常に罫線なしで表示され、短い文字列を表示するために使用されます。	静的テキストとは異なり、テキストボックスを使用して表示されるデータはスクロール (データがコントロールよりも広い場合に便利)、選択してコピーできます。へのパスを示すテキストボックスのスクリーンショットデータの表示に使用される単一行の読み取り専用テキストボックス。
テキスト出力をする長い文字列を表示するために使用される、複数行の読み取り専用テキストボックス。	データの表示に使用される読み取り専用テキストボックス。

ガイドライン

全般

テキストボックスを無効にする場合は、関連付けられているラベル、命令ラベル、スピンコントロール、およびコマンドボタンも無効にします。
オートコンプリートを使用すると、繰り返し使用される可能性が高いデータをユーザーが入力できるようになります。たとえば、ユーザー名、アドレス、ファイル名などがあります。ただし、パスワード、PIN、クレジットカード番号、医療情報などの機密情報を含むテキストボックスにはオートコンプリートを使用しないでください。
ユーザーが不必要にスクロールしないようにします。 データがテキストボックスよりも大きいことが予想され、レイアウトを損なうことなくテキストボックスを簡単に大きくできる場合は、ボックスのサイズを変更してスクロールする必要がなくなります。

不正解:

コンピューター名のテキストボックスの

この例では、テキストボックスのデータを処理するために、はるかに長くする必要があります。
スクロールバー:
- 複数行のテキストボックスに水平スクロールバーを配置しないでください。 代わりに垂直スクロールと折り返しを使用します。
- 1 行のテキストボックスにスクロールバーを配置しないでください。
数値入力では、スピンコントロールを使用できます。 テキスト入力の場合は、代わりにドロップダウンリストまたは編集可能なドロップダウンリストを使用します。
書式設定されたデータ入力を除き、自動終了機能を使用しないでください。 フォーカスの自動シフトは、ユーザーを驚かせる可能性があります。

編集可能なテキストボックス

可能な場合は、入力テキストの長さを制限します。 たとえば、有効な入力が 0 ~ 999 の数値の場合は、3 文字に制限された数値テキストボックスを使用します。書式設定されたデータ入力を使用するテキストボックスのすべての部分には、短い固定長が必要です。
データ形式に柔軟に対応します。 ユーザーがさまざまな形式を使用してテキストを入力する可能性が高い場合は、最も一般的なものをすべて処理してみてください。たとえば、多くの名前、数字、識別子を省略可能なスペースと句読点で入力できます。大文字と小文字は関係ありません。
可能性の高い形式を処理できない場合は、書式設定されたデータ入力を使用して特定の形式を要求するか、ラベルに有効な形式を指定します。

受け入れ可能:

数値入力する

この例では、テキストボックスには特定の形式の入力が必要です。

良い:

書式設定されたデータ入力テキストボックスの

この例では、書式設定されたデータ入力パターンを使用して、特定の形式を要求します。

ベスト:

制約のないテキストボックスの

この例では、テキストボックスがすべての形式を処理します。
最大入力長を選択するときは、書式の柔軟性を考慮してください。たとえば、有効なクレジットカード番号では最大 19 文字を使用できるため、長さを短いものに制限すると、長い形式を使用して数値を入力するのが困難になります。
ユーザーが長く複雑なデータを貼り付ける可能性が高い場合は、書式設定されたデータ入力パターンを使用しないでください。 代わりに、ユーザーがデータを入力する可能性が高い状況に備えて、書式設定されたデータ入力パターンを予約します。

ラベルが付いたテキストボックスの

この例では、ユーザーが IPv6 アドレスを貼り付けることができるように、書式設定されたデータ入力パターンは使用されません。
ユーザーが値全体を再入力する可能性が高い場合は、入力フォーカスのすべてのテキストを選択します。 ユーザーが編集する可能性が高い場合は、キャレットをテキストの末尾に配置します。

パスワードテキストボックスする

この例では、ユーザーは編集よりも置換する可能性が高いので、入力フォーカスで値全体が選択されています。

キーワードを入力するためのテキストボックスのスクリーンショットを

この例では、ユーザーはテキストを置き換えるよりもキーワードを追加する可能性が高いので、キャレットはテキストの末尾に配置されます。
改行文字が有効な入力である場合は、常に複数行のテキストボックスを使用します。
テキストボックスがファイルまたはパス用の場合は、常に [参照] ボタンを指定します。

数値テキストボックス

最も便利な単位を選択し、単位にラベルを付けます。 たとえば、リットル (またはその逆) の代わりにミリターを使用し、直接値ではなくパーセンテージ (またはその逆) を使用することを検討します。

正解:

単位スクリーンショット

この例では、単位にラベルが付けられますが、ユーザーは 10 進数を入力する必要があります。

良い:

単位する

この例では、テキストボックスはより便利な単位を使用します。
スピンコントロールは、役に立つたびに使用します。 ただし、ユーザーが多数の大きな数値を入力する必要がある場合など、スピンコントロールが実用的でない場合があります。スピンコントロールは、次の場合に使用します。
- 入力は、通常は 100 以下の小さな数値である可能性があります。
- ユーザーは、既存の数値に小さな変更を加える可能性があります。
- ユーザーは、キーボードよりもマウスを使用する可能性が高くなります。
常に数値テキストを右揃えに する:
- 複数の数値テキストボックスがあります。
- テキストボックスは垂直方向に配置されます。
- ユーザーは値を追加または比較する可能性があります。
正解:

この例では、数値テキストを右揃えにして、値を簡単に比較できます。

不正解:

rgb 値する

この例では、数値テキストが正しく左揃えではありません。
常に通貨値を右揃えにします。
特殊な意味がアプリケーションによって内部的に使用されている場合でも、特定の数値に特別な意味を割り当てないでください。代わりに、明示的なユーザー選択にはチェックボックスまたはラジオボタンを使用します。

不正解:

を無効にする

この例では、-1 値には特別な意味があります。

正解:

チェックボックスラベルの

この例では、チェックボックスをオンにすると、オプションが明示的になります。

パスワードと PIN 入力

独自のコントロールを作成する代わりに、常にパスワード共通コントロールを使用してください。 パスワードと PIN を安全に処理するには、特別な処理が必要です。

その他のガイドラインと例については、「バルーンのをする」を参照してください。

テキスト出力

大きな複数行の読み取り専用テキストには、白の背景色を使用することを検討してください。 白い背景を使用すると、テキストが読みやすくなります。灰色の背景に多くのテキストが表示され、読み取りが推奨されません。

背景色の詳細については、「フォントの」を参照してください。

データ出力

単一行の読み取り専用テキストボックスには罫線を使用しないでください。 罫線は、テキストが編集可能であることを示す視覚的な手掛かりです。
単一行の読み取り専用テキストボックスは無効にしないでください。 これにより、ユーザーはテキストを選択してクリップボードにコピーできなくなります。また、ユーザーが境界のサイズを超えた場合にデータをスクロールすることもできなくなります。
ユーザーがテキストをスクロールまたはコピーする必要がある場合を除き、単一行の読み取り専用テキストボックスにタブ位置を設定しないでください。

入力の検証とエラー処理

テキストボックスは通常、有効な入力のみを受け入れるように制限されないため、入力を検証し、問題を処理することが必要な場合があります。さまざまな種類の入力の問題を次のように検証します。

ユーザーが無効な文字を入力した場合は、その文字を無視し、有効な文字を説明する入力の問題吹き出しを表示します。

プロダクトキーテキストボックスのする

この例では、吹き出しが正しくない入力文字を報告します。
入力データに無効な値または形式がある場合は、テキストボックスが入力フォーカスを失ったときに入力の問題の吹き出しを表示します。
入力データがウィンドウ上の他のコントロールと矛盾している場合は、ユーザーがモーダルダイアログボックスで [OK] をクリックしたときなど、入力全体が完了したときにエラーメッセージを表示します。

ユーザーがエラーを簡単に修正できない場合を除き、無効な入力データをクリアしないでください。 これにより、ユーザーは最初からやり直すことなく間違いを修正できます。たとえば、ユーザーが簡単に修正できないため、正しくないパスワードと PIN をクリアする必要があります。

その他のガイドラインと例については、「エラーメッセージのと吹き出しのを参照してください。

プロンプト

プロンプトは、テキストボックス内に既定値として配置されるラベルまたは短い命令です。静的テキストとは異なり、ユーザーがテキストボックスに何かを入力するか、入力フォーカスを取得すると、プロンプトは画面から消えます。

ラベルが付いたプロンプトテキストボックスのスクリーンショット: 検索

一般的なプロンプト。

次の場合にプロンプトを使用します。

画面領域は、ツールバーなど、ラベルや命令の使用が望ましくないほど重要です。
プロンプトは、主にテキストボックスの目的をコンパクトな方法で識別するために使用されます。テキストボックスの使用中にユーザーが確認する必要がある重要な情報にすることはできません。

プロンプトは、ユーザーが何かを入力したり、ボタンをクリックしたりするように指示するためだけに使用しないでください。たとえば、ファイル名を入力して [送信] をクリックするというプロンプトテキストを書かないでください。

プロンプトを使用する場合:

プロンプトテキストを斜体の灰色で描画し、実際の入力テキストを通常の黒で描画します。プロンプトテキストと実際のテキストを混同しないでください。
プロンプトテキストを簡潔に保ちます。完全な文の代わりにフラグメントを使用できます。
文スタイルの大文字を使用します。
終了句読点や省略記号は使用しないでください。
プロンプトテキストは編集可能ではなく、ユーザーがテキストボックス内またはタブをクリックすると消える必要があります。
- 例外: テキストボックスに既定の入力フォーカスがある場合、プロンプトが表示され、ユーザーが入力を開始すると表示されなくなります。
入力フォーカスが失われるときにテキストボックスがまだ空の場合、プロンプトテキストが復元されます。

推奨されるサイズ設定と間隔

1 行テキストボックスと 2 行テキストボックスの図

テキストボックスに推奨されるサイズ設定と間隔。

テキストボックスの幅は、予想される入力サイズの視覚的な手掛かりです。テキストボックスのサイズを設定する場合:

最も長い有効なデータに適した幅を選択します。 ほとんどの場合、ユーザーは入力または表示する可能性が最も高い文字列をスクロールする必要はありません。
ローカライズされるテキスト (数字ではなく) に対して、さらに 30% の (短いテキストの場合は最大 200%) を含めます。
予想される入力に特定のサイズがない場合は、ウィンドウ上の他のテキストボックスまたはコントロールと一致する幅を選択します。
複数行のテキストボックスのサイズを設定し、整数のテキスト行数を表示します。

ラベル