TextBox
注意
この設計ガイドは Windows 7 用に作成されており、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には 現在の設計ガイダンスは反映されていません。
テキスト ボックスを使用すると、ユーザーはテキストまたは数値を表示、入力、または編集できます。
一般的なテキスト ボックス。
これは適切なコントロールですか?
それを判断するには、以下の質問を考えます。
- 有効なすべての値を効率的に列挙することは実用的ですか? その場合は、 単一選択リスト、 リスト ビュー、 ドロップダウン リスト、編集可能なドロップダウン リスト、または スライダー を検討してください。
- 有効なデータに、何も制約がないか。 または、有効なデータは形式 (制約付き長さまたは文字型) によってのみ制約されますか? その場合は、テキスト ボックスを使用します。
- 値は専用のコモン コントロールがあるデータ型か。 たとえば、日付、時刻、IPv4 アドレス、IPv6 アドレスなどがあります。 その場合は、テキスト ボックスではなく日付コントロールなどの適切なコントロールを使用します。
- データが数値の場合:
- ユーザーは、この設定を相対的な数量として認識しますか? 便利である場合は、スライダーを使います。
- 設定の変更による影響をすぐに確認できることがユーザーにとって便利か。 その場合は、テキスト ボックスと共にスライダーを使用します。 たとえば、ユーザーは、色相、彩度、明度の値に対する変化の影響をすぐに確認できるため、スライダーを使用して色を簡単に選択できます。
設計概念
テキスト ボックスは非常に柔軟であるという利点を持ちますが、制約を最小限に抑えるという欠点があります。 編集可能なテキスト ボックスに対する唯一の制約は次のとおりです。
- 必要に応じて、最大文字数を設定できます。
- 必要に応じて、入力を数値 (0 9) のみに制限できます。
- スピン コントロールを使用する場合は、 スピン コントロールの選択肢を有効な値に制限できます。
長さとスピン コントロールのオプションの存在とは別に、テキスト ボックスには、有効な値またはその形式を提案する視覚的な手がかりはありません。 つまり、ラベルを使用してこの情報をユーザーに伝えます。 ユーザーが無効なテキストを入力した場合は、エラー メッセージでエラーを処理する必要があります。
一般的なルールとして、 最も制約の多いコントロールを使用する必要があります。 テキスト ボックスなどの制約のないコントロールを最後の手段として使用します。 ただし、制約を検討する場合は、グローバル ユーザーのニーズに留意してください。 たとえば、米国郵便番号に制約されているコントロールはグローバル化されませんが、郵便番号形式を受け入れる制約のないテキスト ボックスはです。
使用パターン
テキスト ボックスは、いくつかの使用が可能な柔軟なコントロールです。
| Label | 値 |
|---|---|
|
データ入力 短い文字列を入力または編集するために使用される、制約のない 1 行のテキスト ボックス。 |
制約のない 1 行のテキスト ボックス。 |
|
書式付きのデータ入力 特定の形式のデータを入力するために使用される、固定サイズの 1 行の短いテキスト ボックスのセット。 |
書式設定されたデータ入力に使用されるテキスト ボックス。 メモ：自動終了機能は、入力フォーカスをテキスト ボックスから次のテキスト ボックスに自動的に進めます。 この方法の欠点の 1 つは、データを 1 つの単位としてコピーまたは貼り付けることができないということです。 |
|
補助付きのデータ入力 文字列の入力または編集に使用される 1 行の制約のないテキスト ボックスと、ユーザーが有効な値を選択するのに役立つコマンド ボタンが組み合わされています。 |
![[参照] ボタンを含むテキスト ボックスのスクリーン ショット](images/ctrl-text-boxes-image4.png)
この例では、[参照] コマンドを使用すると、ユーザーが有効な値を選択できます。 |
|
テキスト入力 長い文字列を入力または編集するために使用される、制約のない複数行のテキスト ボックス。 |
![[アドレス] テキスト ボックスのスクリーン ショット](images/ctrl-text-boxes-image5.png)
制約のない複数行のテキスト ボックス。 |
|
数値入力 数値の入力または編集に使用される 1 行の数値のみのテキスト ボックス。マウスベースの入力を容易にする オプションのスピン コントロール があります。 |
数値入力に使用されるテキスト ボックス。 テキスト ボックスとそれに関連付けられているスピン コントロールの組み合わせは、 スピン ボックスと呼ばれます。 |
|
パスワードと PIN 入力 パスワードと PIN を安全に入力するために使用される、制約のない 1 行のテキスト ボックス。 |
![[パスワード] テキスト ボックスのスクリーン ショット](images/ctrl-text-boxes-image7.png)
パスワードの入力に使用するテキスト ボックス。 |
|
データ出力 1 行の読み取り専用テキスト ボックス。常に罫線なしで表示され、短い文字列を表示するために使用されます。 |
静的テキストとは異なり、テキスト ボックスを使用して表示されるデータはスクロール (データがコントロールよりも広い場合に便利)、選択してコピーできます。
データの表示に使用される 1 行の読み取り専用テキスト ボックス。 |
|
テキスト出力 長い文字列を表示するために使用される複数行の読み取り専用テキスト ボックス。 |
![[プライバシー情報] テキスト ボックスのスクリーン ショット](images/ctrl-text-boxes-image9.png)
データの表示に使用される読み取り専用テキスト ボックス。 |
ガイドライン
全般
テキスト ボックスを無効にする場合は、関連付けられているラベル、命令ラベル、スピン コントロール、およびコマンド ボタンも無効にします。
オートコンプリートを使用して、ユーザーが繰り返し使用される可能性のあるデータを入力できるようにします。 たとえば、ユーザー名、アドレス、ファイル名などです。 ただし、パスワード、PIN、クレジット カード番号、医療情報などの機密情報を含む可能性があるテキスト ボックスには、オートコンプリートを使用しないでください。
ユーザーを不必要にスクロールさせないでください。 データがテキスト ボックスよりも大きくなることが予想され、レイアウトを損なうことなくテキスト ボックスを簡単に大きくできる場合は、ボックスのサイズを変更してスクロールする必要がなくなります。
正しくない:
この例では、テキスト ボックスのデータを処理するために、はるかに長くする必要があります。
スクロール バー:
- 複数行のテキスト ボックスに水平スクロール バーを配置しないでください。 代わりに垂直スクロールと行折り返しを使用します。
- 1 行のテキスト ボックスにスクロール バーを配置しないでください。
数値入力の場合は、スピン コントロールを使用できます。 テキスト入力の場合は、代わりにドロップダウン リストまたは編集可能なドロップダウン リストを使用します。
書式設定されたデータ入力を除き、自動終了機能を使用しないでください。 フォーカスの自動シフトは、ユーザーを驚かせる可能性があります。
編集可能なテキスト ボックス
可能な場合は、入力テキストの長さを制限します。 たとえば、有効な入力が 0 ~ 999 の数値の場合は、3 文字に制限された数値テキスト ボックスを使用します。 書式設定されたデータ入力を使用するテキスト ボックスのすべての部分には、短い固定長が必要です。
データ形式を柔軟に使用できます。 ユーザーがさまざまな形式を使用してテキストを入力する可能性がある場合は、最も一般的なものをすべて処理してみてください。 たとえば、多くの名前、数字、識別子を省略可能なスペースと句読点で入力できます。大文字と小文字は関係ありません。
可能性の高い形式を処理できない場合は、書式設定されたデータ入力を使用して特定の形式を要求するか、ラベルに有効な形式を指定します。
普通：
この例では、テキスト ボックスには特定の形式の入力が必要です。
より適切な例:
この例では、書式設定されたデータ入力パターンを使用して、特定の形式を要求します。
最高：
この例では、テキスト ボックスがすべての可能性のある形式を処理します。
最大入力長を選択する場合は、書式の柔軟性を考慮してください。 たとえば、有効なクレジット カード番号では最大 19 文字を使用できるため、長さを短いものに制限すると、長い形式を使用して数値を入力するのが困難になります。
ユーザーが長く複雑なデータに貼り付ける可能性が高い場合は、書式設定されたデータ入力パターンを使用しないでください。 代わりに、ユーザーがデータを入力する可能性が高い状況に備えて、書式設定されたデータ入力パターンを予約します。
この例では、書式設定されたデータ入力パターンは使用されないため、ユーザーは IPv6 アドレスを貼り付けることができます。
ユーザーが値全体を再入力する可能性が高い場合は、入力フォーカスのすべてのテキストを選択します。 ユーザーが編集する可能性が高い場合は、テキストの末尾にキャレットを配置します。
この例では、ユーザーは編集よりも置き換える可能性が高いので、入力フォーカスで値全体が選択されています。
この例では、ユーザーはテキストを置き換えるよりもキーワードを追加する可能性が高いので、キャレットはテキストの末尾に配置されます。
改行文字が有効な入力である場合は、常に複数行のテキスト ボックスを使用します。
テキスト ボックスがファイルまたはパス用の場合は、常に [参照] ボタンを指定します。
数値テキスト ボックス
最も便利な単位を選択し、単位にラベルを付けます。 たとえば、リットルの代わりにミリリットル (またはその逆)、直接値ではなくパーセンテージ (またはその逆) などを使用することを検討してください。
正確:
この例では、単位にラベルが付けられますが、ユーザーは 10 進数を入力する必要があります。
より適切な例:
この例では、テキスト ボックスはより便利な単位を使用します。
スピン コントロールは、役に立つたびに使用します。 ただし、ユーザーが多数の数値を入力する必要がある場合など、スピン コントロールが実用的でない場合があります。 スピン コントロールは、次の場合に使用します。
- 入力は少数である可能性が高く、通常は 100 以下です。
- ユーザーは、既存の数値に小さな変更を加える可能性があります。
- ユーザーは、キーボードよりもマウスを使用している可能性が高くなります。
次の場合は常に数値テキストを右揃えにします。
- 複数の数値テキスト ボックスがあります。
- テキスト ボックスは垂直方向に配置されます。
- ユーザーは、値を追加または比較する可能性があります。
正確:
この例では、数値テキストを右揃えにして、値を簡単に比較できます。
正しくない:
この例では、数値テキストが正しく左揃えされていません。
常に通貨値を右揃えにします。
特殊な意味がアプリケーションによって内部的に使用されている場合でも、特定の数値に特別な意味を割り当てないでください。 代わりに、チェック ボックスまたはラジオ ボタンを使用して、明示的なユーザー選択を行います。
正しくない:
この例では、値 -1 には特別な意味があります。
正確:
この例では、チェック ボックスを使用すると、 オプションが明示的になります。
パスワードと PIN 入力
- 独自のパスワードを作成する代わりに、常にパスワード共通コントロールを使用してください。 パスワードと PIN を安全に処理するには、特別な処理が必要です。
その他のガイドラインと例については、「 バルーン」を参照してください。
テキスト出力
- 大きな複数行の読み取り専用テキストには、白の背景色を使用することを検討してください。 白い背景を使用すると、テキストが読みやすくなります。 灰色の背景に多くのテキストが表示され、読み取りが推奨されません。
背景色の詳細については、「 フォント」を参照してください。
データ出力
- 単一行の読み取り専用テキスト ボックスには罫線を使用しないでください。 罫線は、テキストが編集可能であることを示す視覚的な手掛かりです。
- 1 行の読み取り専用テキスト ボックスは無効にしないでください。 これにより、ユーザーはテキストを選択してクリップボードにコピーできなくなります。 また、ユーザーが境界のサイズを超えた場合にデータをスクロールすることもできなくなります。
- ユーザーがテキストをスクロールまたはコピーする必要がある場合を除き、1 行の読み取り専用テキスト ボックスにタブ位置を設定しないでください。
入力の検証とエラー処理
テキスト ボックスは通常、有効な入力のみを受け入れるように制限されないため、入力を検証し、問題を処理することが必要な場合があります。 次のように、さまざまな種類の入力の問題を検証します。
ユーザーが無効な文字を入力した場合は、その文字を無視し、有効な文字を説明する 入力問題吹き出 しを表示します。
この例では、吹き出しが正しくない入力文字を報告します。
入力データの値または形式が無効な場合は、テキスト ボックスが入力フォーカスを失ったときに入力問題の吹き出しを表示します。
入力データがウィンドウ上の他のコントロールと矛盾している場合は、ユーザーがモーダル ダイアログ ボックスで [OK] をクリックしたときなど、入力全体が完了したときにエラー メッセージを表示します。
ユーザーがエラーを簡単に修正できない場合を除き、無効な入力データをクリアしないでください。 これにより、ユーザーはやり直すことなく間違いを修正できます。 たとえば、ユーザーが簡単に修正できないため、正しくないパスワードと PIN をクリアする必要があります。
その他のガイドラインと例については、「 エラー メッセージ と 吹き出し」を参照してください。
プロンプト
プロンプトは、テキスト ボックス内に既定値として配置されるラベルまたは短い命令です。 静的テキストとは異なり、ユーザーがテキスト ボックスに何かを入力するか、入力フォーカスを取得すると、画面からプロンプトが消えます。
一般的なプロンプト。
次の場合にプロンプトを使用します。
- 画面領域は、ツール バーなど、ラベルや命令の使用が望ましくないほど高いレベルにあります。
- プロンプトは、主にテキスト ボックスの目的をコンパクトな方法で識別するために使用されます。 テキスト ボックスの使用中にユーザーが確認する必要がある重要な情報にすることはできません。
プロンプトを使用して、ユーザーに何かを入力したり、ボタンをクリックしたりするように指示しないでください。 たとえば、ファイル名を入力して [送信] をクリックするというプロンプト テキストを書かないでください。
プロンプトを使用する場合:
- プロンプト テキストを斜体の灰色で描画し、実際の入力テキストを通常の黒で描画します。 プロンプト テキストと実際のテキストを混同しないでください。
- プロンプト テキストを簡潔に保ちます。 完全な文の代わりにフラグメントを使用できます。
- 文章スタイルで大文字と小文字を使い分けます。
- 終了句読点や省略記号は使用しないでください。
- ユーザーがテキスト ボックス内またはタブをクリックすると、プロンプト テキストを編集できないようにし、非表示にする必要があります。
- 例外： テキスト ボックスに既定の入力フォーカスがある場合、プロンプトが表示され、ユーザーが入力を開始すると表示されなくなります。
- 入力フォーカスが失われると、テキスト ボックスがまだ空の場合、プロンプト テキストが復元されます。
推奨されるサイズ設定と間隔
テキスト ボックスに推奨されるサイズ設定と間隔。
テキスト ボックスの幅は、予想される入力サイズの視覚的な手掛かりです。 テキスト ボックスのサイズを変更する場合:
- 最も長い有効なデータに適した幅を選択します。 ほとんどの場合、ユーザーは、入力または表示する可能性が最も高い文字列をスクロールする必要はありません。
- ローカライズされるテキスト (数字は含まない) に対して、さらに 30% (短いテキストの場合は最大 200%) を含めます。
- 必要な入力に特定のサイズがない場合は、ウィンドウ上の他のテキスト ボックスまたはコントロールと一致する幅を選択します。
- 複数行のテキスト ボックスのサイズを設定して、整数のテキスト行数を表示します。
ラベル
テキスト ボックスのラベル
すべてのテキスト ボックスにはラベルが必要です。 ラベルを単語または語句として記述し、文としてではなく、コロンで終わり、 静的テキストを使用します。
例外:
スペースが Premium の場所にプロンプトが表示されたテキスト ボックス。
ラベル付けでは、 書式設定されたデータ入力 に使用されるテキスト ボックスのグループを 1 つのテキスト ボックスとして扱う必要があります。
テキスト ボックスがラジオ ボタンまたはチェック ボックスの下位にあり、コロンで終わるラベルによって導入される場合は、テキスト ボックスに追加のラベルを配置しないでください。
メイン命令を修正するコントロール ラベルを省略します。 この場合、メイン命令はコロン (質問でない限り) とアクセス キーを受け取ります。
普通：
この例では、テキスト ボックスのラベルは、メイン命令の単なる修正です。
より適切な例:
この例では、冗長ラベルが削除されるため、メイン命令はコロンとアクセス キーを受け取ります。
一意のアクセス キーを割り当てます。 アクセス キーの割り当てのガイドラインについては、「 キーボード」を参照してください。
文章スタイルで大文字と小文字を使い分けます。
ラベルをテキスト ボックスの左側または上に配置し、ラベルをテキスト ボックスの左端に揃えます。 ラベルが左側にある場合は、ラベル テキストをテキスト ボックス テキストに垂直方向に揃えます。
正確:
これらの例では、上部のラベルはテキスト ボックスの左端に揃え、左側のラベルはテキスト ボックス内のテキストに合わせて配置されます。
正しくない:
これらの正しくない例では、上部のラベルがテキスト ボックス内のテキストに合わせられ、左側のラベルがテキスト ボックスの上部に揃えられます。
ラベルの後にかっこで単位 (秒や接続など) を指定できます。
テキスト ボックスで任意に小さい最大文字数を受け入れる場合は、ラベルの最大入力を指定できます。 テキスト ボックスの幅では、最大サイズも指定する必要があります。
この例では、ラベルに最大文字数を指定します。
テキスト ボックスの内容 (またはその単位ラベル) を文の一部にしないでください。これはローカライズできないためです。
テキスト ボックスを使用して複数の項目を入力できる場合は、ラベル内の項目を区切る方法を明確にします。
この例では、ラベルに項目区切り記号を指定します。
必要な入力を示すガイドラインについては、「 ダイアログ ボックスでの必須入力」を参照してください。
命令ラベル
テキスト ボックスに関する説明テキストを追加する必要がある場合は、ラベルの上に追加します。 終了句読点で完全な文を使用します。
文章スタイルで大文字と小文字を使い分けます。
役に立ちますが、必要ない追加情報は短くしておく必要があります。 この情報は、ラベルとコロンの間にかっこで囲むか、テキスト ボックスの下にかっこなしで配置します。
この例では、テキスト ボックスの下に追加情報が配置されます。
ラベルの入力を求める
- プロンプト テキストを簡潔に保ちます。 完全な文の代わりにフラグメントを使用できます。
- 文章スタイルで大文字と小文字を使い分けます。
- 終了句読点や省略記号は使用しないでください。
- プロンプトがユーザーにテキスト ボックスの横にあるボタンによって処理される情報を入力するように指示する場合は、テキスト ボックスの横にボタンを配置するだけです。 プロンプトを使用してユーザーにボタンをクリックするように指示しないでください (たとえば、ファイルをドラッグして [送信] をクリックするというプロンプト テキストを書かないでください)。
ドキュメント
テキスト ボックスを参照する場合:
型を使用して、入力または貼り付けが必要なユーザー操作を参照します。ユーザーがリストから値を選択したり、[参照] ボタンを使用したりするなど、他の方法でテキスト ボックスに情報を入力できる場合は、enter を使用します。
select を使用して、読み取り専用テキスト ボックス内のエントリを参照します。
大文字と小文字を含む正確なラベル テキストを使用し、単語ボックスを含めます。 アクセス キーのアンダースコアまたはコロンは含めないでください。 テキスト ボックスをテキスト ボックスまたはフィールドとして参照しないでください。
可能な場合は、太字のテキストを使用してラベルの書式を設定します。 それ以外の場合は、混乱を防ぐために必要な場合にのみ、ラベルを引用符で囲みます。
例: [ パスワード] ボックス にパスワードを入力し、[OK] をクリック します。
テキスト ボックスに特定の形式が必要な場合は、最もよく使用される形式のみを文書化します。 ユーザーが自分で他の形式を検出できるようにします。 データ形式を柔軟に使用する必要がありますが、そうすることで複雑なドキュメントを作成することはできません。
正確:
1234-56-7890 形式を使用して、部品のシリアル番号を入力します。
正しくない:
次のいずれかの形式を使用して、部品のシリアル番号を入力します。
1234567890
1234-56-7890
1234 56 7890