タブ

Note

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

タブを使用すると、ラベル付けされた別のページに関連情報を表示できます。

タブの一般的なセット。

通常、タブはプロパティ ウィンドウ (およびその逆) に関連付けられますが、タブは任意の種類のウィンドウで使用できます。

タブ コントロールは、米国でよく見られるファイリング キャビネットの情報を整理するために使用されるタブ付きのマニラ フォルダーを表します。 (マニラ フォルダーは世界中で使用されていません。

注意

レイアウト、タブ メニュー、ダイアログ ボックス、およびプロパティ ウィンドウに関連するガイドラインは、別の記事で示されています。

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

それを判断するには、以下の質問を考えます。

• コントロールは、1 つの合理的なサイズのページに快適に収まりますか? その場合は、1 つのページを使用します。
• タブは 1 つだけですか? その場合は、1 つのページを使用します。
• タブは明らかな方法で相互に関連していますか? そうでない場合は、情報を関連情報の別のウィンドウに分割することを検討してください。
• 設定に使用する場合、異なるページの設定は完全に独立していますか? あるページの設定を変更すると、他のページの設定に影響しますか? 独立していない場合は、代わりにタスク ページまたはウィザードを使用 します 。
• タブは主に互いのピアですか、それとも階層的な関係がありますか? 階層構造の場合は、プログレッシブ開示または子 ダイアログ ボックス を使用して関連情報を表示することを検討してください。
• タブは、タスク内のステップを表示するために使用されますか? "タブ" を使用すると、タスク内のステップがステップのように表示され、[次へ] ボタンなどのテキスト ステップにアクセスするための明確な代替方法がある場合にのみ、タスク内にステップを表示できます。 それ以外の場合は、手順が必要な場合は、ページ フローまたはウィザードでページを使用 します。 手順が省略可能な場合は、代わりにモーダル ダイアログ ボックス を使用してオプションの手順を表示します。
• タブは同じデータの異なるビューですか? その場合は、 分割ボタン または ドロップダウン リスト を使用してビューを変更することを検討してください。 タブはビューを変更するために効果的に使用できますが、代替手段はより軽量です。

使用パターン

タブには、いくつかの使用パターンがあります。

使用法	例
動的ウィンドウ 画面 スクロール バーと同様に、タブを使用してウィンドウの領域を拡大し、関連情報を表示できます。	このパターンでは、タブを使用することは概念的には、タブ ラベルを見出しとして使用して、タブ上のすべての情報を 1 つのスクロール可能なサーフェスに直線的に配置するのと似ています。 この例では、タブによってウィンドウのサーフェス領域が効果的に増加します。
複数のビュー 分割ボタンやドロップダウン リストのように、タブを使用して、同じ情報または関連情報のさまざまなビューを表示できます。	この例では、タブはドキュメント内のビューを変更します。
複数のドキュメント 複数のウィンドウと同様に、タブを使用すると、1 つのウィンドウに異なるドキュメントを表示できます。	これらの例では、タブは 1 つのアプリケーション ウィンドウ内に異なるドキュメントを表示します。
排他的なオプション ラジオ ボタンと同様に、タブを使用して複数の排他的な選択肢を表示できます。 このパターンでは、選択したタブのみが適用され、他のすべてのタブは無視されます。	この例では、ラジオ ボタンの代わりにタブが (正しく) 使用されていません。 このパターンは、 標準以外の動作を使用するため、推奨されません。 タブは、ウィンドウ内を移動する方法ではなく、設定として動作します。

1 つだけ行う場合...

タブの情報が関連していることを確認しますが、異なるページの設定は独立しています。 最後に選択したタブには特別な意味はありません。

ガイドライン

全般

• 次の場合は、水平タブを使用します。

  • ウィンドウには 7 つ以下のタブがあります。
  • ユーザー インターフェイス (UI) がローカライズされている場合でも、すべてのタブが 1 行に収まります。

• 次の場合は、垂直タブを使用します。

  • プロパティ ウィンドウには 8 つ以上のタブがあります。

  • 水平タブを使用するには、複数の行が必要になります。

    

    この例では、垂直タブは 8 つ以上のタブに対応しています。

• タブを入れ子にしたり、水平タブと垂直タブを組み合わせたりしないでください。 代わりに、タブの数を減らすか、垂直タブのみを使用するか、ドロップダウン リストなどの別のコントロールを使用します。

• 水平タブをスクロールしないでください。 水平スクロールは簡単には見つかりません。 ただし、垂直タブはスクロールできます。

  正しくない:

  

  この例では、水平タブがスクロールされます。

• サイズ変更可能なウィンドウまたはウィンドウのタブの場合は、必要に応じて、ウィンドウまたはウィンドウではなく、ページにスクロール バーを配置します。 タブは常に表示され、表示外にスクロールしないようにする必要があります。

  

  この例では、タブ ページにはウィンドウではなくスクロール バーがあります。

• タブがタブのように見え、別の種類のコントロールではないことを確認します。

  正しくない:

  

  この例では、これらのタブはコマンド ボタンのようになります。

相互作用

• コントロールがページにのみ適用される場合は、タブ付きページの境界線内に配置します。
• コントロールがウィンドウ全体に適用される場合は、タブ付きページの外側に配置します。
• タブの変更に効果を割り当てないでください。 タブには任意の順序でアクセスできる必要があります。 現在のタブを変更すると、副作用が発生したり、設定を適用したり、エラー メッセージが表示されたりすることはありません。
• 選択した最後のタブに特別な意味を割り当てないでください。 タブ選択は、ユーザーの最後のタブ選択が設定ではないナビゲーション用です。
• ページの設定を他のページの設定に依存させないでください。 代わりに、依存する設定を同じページに配置します。
• ユーザーが最後のタブを表示して開始する可能性が高い場合は、タブを保持し、既定で選択します。 設定をウィンドウごと、ユーザー単位で保持します。 それ以外の場合は、既定で最初のページを選択します。

アイコン

• タブにアイコンを配置しないでください。 アイコンは通常、不要な視覚的な乱雑さを追加し、画面領域を消費し、多くの場合、ユーザーの理解力を向上させません。 標準の記号など、理解を助け合うアイコンのみを追加します。

  正しくない:

  

  この例では、アイコンによって視覚的な煩雑さが増し、ユーザーの理解力を向上させる作業はほとんど行われません。

  例外： わかりやすいラベルを表示するためのスペースが不足している可能性がある場合は、明確に認識できるアイコンを使用できます。

  正確:

  

  この例では、ウィンドウは非常に狭いため、アイコンはラベルよりもタブを伝えるのに適しています。

• タブ グラフィックには製品ロゴを使用しないでください。 タブは ブランド化用ではありません。

動的ウィンドウ サーフェス パターン

• タブ ページではスクロール バーを使用しないでください。 タブはスクロール バーと同様に機能し、ウィンドウの有効領域を増やします。 1 つのメカニズムで十分である必要があります。

• 簡潔なタブ ラベルを使用します。 ページの内容を明確に説明する 1 つまたは 2 つの単語を使用します。 長いラベルでは、特にラベルがローカライズされている場合に、画面領域が消費されます。

• 特定の意味のあるタブ ラベルを使用します。 [全般]、[詳細設定]、[設定] など、任意のタブに適用できる汎用タブ ラベルは使用しないでください。

• タブが現在のコンテキストに適用されておらず、ユーザーが期待していない場合は、削除します。 これにより、UI が簡略化され、ユーザーはそれを見逃すことはありません。

  正しくない:

  

  この例では、Microsoft Wordが電子メール エディターとして使用されている場合、[ファイルの場所] タブが正しく無効になっています。 このタブを無効にするのではなく、ユーザーがこのコンテキストでファイルの場所を表示または変更することは想定されないため、削除する必要があります。

• タブが現在のコンテキストに適用されない場合、ユーザーは次のように期待できます。

  • タブを表示します。
  • ページ上のコントロールを無効にします。
  • コントロールが無効になっている理由を説明するテキストを含めます。

  タブを無効にしないでください。これは説明的ではなく、探索を禁止するためです。 特定の値を探しているユーザーは、他のすべてのタブを強制的に見る必要があります。

  

  この例では、[読み取りレイアウト] に [表示] オプションは適用しません。 ただし、ユーザーはタブ ラベルに基づいて適用することを期待する場合があるため、ページは表示されますが、オプションは無効になります。

複数のビューとドキュメントのパターン

• タブ ラベルでビュー名またはドキュメント名を使用します。
• タブ名が長くなりすぎないようにしてください。 必要に応じて、名前の最大サイズを指定するか、省略記号を使用して表示されるタブ ラベルを切り捨てます。 長いラベルでは、特にラベルがローカライズされている場合に、画面領域が消費されます。
• タブが現在のコンテキストに適用されない場合は、タブを削除します。

排他オプション パターン

• このパターンは使用しないでください。 代わりに、ラジオ ボタンまたはドロップダウン リストを使用します。

  正しくない:

  

  この例では、タブがラジオ ボタンの代わりに誤って使用されています。

  正確:

  

  この例では、代わりにラジオ ボタンが正しく使用されています。

ラベル

• パターンに基づいてタブにラベルを付けます。 句読点を終了せずに、動詞ではなく名詞を使用します。 詳細については、上記のパターン ガイドラインを参照してください。
• 文章スタイルで大文字と小文字を使い分けます。
• アクセス キーを割り当てないでください。 タブには、ショートカット キー (Ctrl + Tab、Ctrl + Shift + Tab、Ctrl + PgUp、Ctrl + PgDn) を使用してアクセスできます。 適切なアクセス キーの選択肢が不足しているため、タブにアクセス キーを割り当てないと、他のコントロールに簡単に割り当てることができます。

ドキュメント

タブを参照する場合:

• 大文字と小文字を含む正確なラベル テキストを使用し、単語タブを含めます。
• ユーザー操作を説明するには、クリックを使用します。
• 可能な場合は、太字のテキストを使用してラベルの書式を設定します。 それ以外の場合は、混乱を防ぐために必要な場合にのみ、ラベルを引用符で囲みます。
• 特に世界中の対象ユーザーの場合、複数の使用があいまいになる可能性があるため、名詞タブのみを使用してタブ コントロールのみを参照します。 その他の用途では、Tab キー、タブ ストップ、ルーラーのタブ マークなど、記述子を使用して意味を明確にします。

例: [ ツール ] メニューの [ オプション] をクリックし、[ 表示 ] タブをクリックします。