アップル ヒューマンインタフェースガイドライン

第１４章

コントロール

---

コントロールとは、ユーザがマウスでこれらを操作したときに、即座に動作を起こしたり、視覚的な結果をもたらす、画像オブジェクトのことです。

標準的なコントロールとしては、押しボタン、スクロールバー、ラジオボタン、チェックボックス、スライダ、ポップアップメニューが含まれます。

Carbonでは、Control Managerが、多数のコントロールの全体的な外見を決定しています。Mac OS X バージョン 10.2以降に導入されたコントロールは、HIView形式を用いて実装されています。

Cocoaでは、インタフェース要素の全体的な外見は、Application Kitによって提供されています。

あなたのウインドウの内部での、コントロールの配置について、あなたはこの章、および「配置の例」（289ページ）で与えられるガイドラインに一致させる責任を持ちます。

【初見で思わず引いてしまった非Macプログラマの皆様
InterFace Builderを利用すれば大体正しい間隔で配置できます。と弱々しくフォロー】

この章では、Mac OS Xで利用できる、標準的なコントロールのふるまいと外見について述べます。

あなたのウインドウ内において、コントロール間の間隔を正しく取るために、この章で提供される寸法に従ってください。

コントロールの多くは、パレットやユーティリティウインドウといった、空間が極めて限られているときに使用するための、小型版やミニ版を持ちます。この章では、通常版と同様に、これらについての仕様も提供します。詳細は「小型及びミニ版コントロールを使用する」（299ページ）を参照してください。

ボタン

ボタンは即座の動作を開始します。もし、ボタンが【いつ完了するのか】不明確な処理を開始するのであれば、ボタンは処理が完了するまで淡色表示され、状態についての反応が提供される必要があります。

もしあなたが、ブラウザの「再読み込み」と「停止」といった、対照的な二つの機能を提供する必要があれば、単一の、状態が変化する二つの目的を持つボタンの代わりに、二つに分割されたボタンを使用することを検討してください。

二つの目的を持つ単一のボタンを提供することは、ユーザがある状態のときにボタンを押しても、ボタンがもう一つの状態に変化した後でクリックが受け取られ、処理されてしまうという状況をもたらすことがあります。

もし、あなたが二つの目的を持つ単一のボタンを提供しなければならないのであれば、あなたがクリックを適切に処理できるように、確実にボタンがその状態を変化させるときを捉えてください。また、即座の、参考になる反応を提供してください。

ボタンのラベル【表記】の正しい大文字始まりについての詳細は、「インタフェース要素のラベルと文字列の大文字始まり」（128ページ）を参照してください。ボタンのラベルにおいて省略文字を使用するのが適切なときについての詳細は、「省略文字を使用する」（123ページ）を参照してください。

このセクションでは、あなたのインタフェースの要求に合わせるために利用できるボタンについて述べています。

押しボタン

押しボタン【push button】は、その上に文字列ラベルを持つ角丸長方形です。押しボタンをクリックすることで文書の保存といった即時の動作を行い、ダイアログにより定義された操作を完了するか、エラーメッセージを確認します。

押しボタンは、文字列だけを含むボタンのために使用してください。アイコンやその他の図形を持つボタンは、ベベルボタンとする必要があります。

押しボタンの文字列には、影やその他の効果を加えるべきではありません。後述する仕様セクションで説明されるとおりの、ボタンの大きさに対して適切なシステムフォントとする必要があります。

ボタンの名前は、行われる動作を説明するような動詞にする必要があります—「保存」、「閉じる」、「プリント」、「削除」といったように。もし、ボタンが単一の設定に作用するのであれば、できるだけ具体的にボタンに表記してください。たとえば、「画像を選択…」は、「選択…」よりも有用です。ほとんどのボタンは即座に動作を開始するので、表記の中で「今すぐ」（たとえば、「今すぐスキャンする」）を用いることは不要とすべきです。

オンやオフといった状態を表すために押しボタンを使用しないでください（この場合は、チェックボックスを用いるのがより適切でしょう）。

押しボタンをラベルとして使用しないでください。代わりに固定文字列を使用してください。

メニューと押しボタンを関連付けないでください。代わりにベベルボタンを使用してください。

すべての押しボタンは、透明（つまり、色を付けない）な外見とする必要があります。ただし、デフォルトボタン—Returnキーを押すことで選択されるボタン—は、デフォルト色を使用する必要があります（加えて、明滅します）。

たとえば、「OK」ボタンと「キャンセル」ボタンを持ち、「OK」がデフォルトであるダイアログでは、「キャンセル」ボタンは透明であり、「OK」ボタンは色を使用し、明滅します。

ユーザが「キャンセル」といった、デフォルトではないボタンを押したときは、ボタンに色が付き、デフォルトボタンの色は消えます。もし、あなたが標準的なコントロールを使用していれば、このふるまいは自動的に行われます。

ダイアログにおける押しボタンの使用例は、「ダイアログ」（207ページ）を参照してください。

押しボタンの仕様

図 14-1 押しボタンの高さ

標準の押しボタン
20

小型の押しボタン
17

ミニ版の押しボタン
15

図 14-2 押しボタンの間隔

標準の押しボタン
12

小型の押しボタン
10

ミニ版の押しボタン
8

• 高さ：
  • 標準：20ピクセル、影は含みません。
  • 小型：17ピクセル
  • ミニ：15ピクセル

• 幅：ボタンの文字列に依存します。もし、あなたが十分なボタンの幅を指定しないと、最後の大文字によって文字列は切り詰められます。「OK」と「キャンセル」ボタンのための標準的な幅は、図 14-3に示すとおり、68ピクセルです。【英語の場合・日本語の幅は未確認】

  図 14-3 ダイアログで使用される標準の押しボタン

  「Cancel」←12→「OK」
  　←68→　　　　←68→

• 文字列：
  • 標準：システムフォント。システムフォントより大きいフォントを使用する必要があれば、代わりにベベルボタンを使用してください。
  • 小型：小型システムフォント
  • ミニ：ミニシステムフォント
• 色：デフォルトボタンを除く、すべての押しボタンは透明です。デフォルトボタンはデフォルト色を使用します（加えて、明滅します）。
• 間隔：
  • 標準：水平に配置したり、縦に重ねたボタンの同士の間隔は、最低12ピクセル離してください。
  • 小型：最低10ピクセル離してください。
  • ミニ：最低8ピクセル離してください。

金属風ボタン

金属風ボタン【metal buttons】は、磨かれた金属風ウインドウで使用するためのものです。（Interface BuilderとCocoa APIでは、金属風ボタンは「質感つき」【textured】と呼ばれます。）

金属風ボタンは…

• アイコン、画像、文字列を含むことができます。
• ラジオボタンや、チェックボックスを含む、ほかの種類のボタンのふるまいを持たせることができます。

ダイアログでは金属風ボタンを使用しないでください。ダイアログは磨かれた金属風の外見を、決して使用すべきではありません。いつ、磨かれた金属風ウインドウを使用するべきかのガイドラインは、「磨かれた金属風ウインドウ」（187ページ）を参照してください。

もしボタンが、単一の設定に対して作用するのであれば、ボタンの表記をできるだけ具体的にしてください。

図 14-4 金属風ボタン

標準の大きさの金属風ボタン
アイコンつき　フォント文字つき　文字列つき

小型の金属風ボタン
アイコンつき　フォント文字つき　文字列つき

金属風ボタンの仕様

図 14-5 金属風ボタンの寸法

標準の大きさの金属風ボタン
25 16 コントロール領域用

小型の金属風ボタン
18 11 コントロール領域用

• 高さ：
  • 標準：最小25ピクセル、最大32ピクセル
  • 小型：最小18ピクセル、最大24ピクセル
• 幅：ボタンの内容に依存します。
• 画像の大きさ：
  • 標準：ボタンの高さ25ピクセルに対し、16ピクセル以上にはしません。どの側にも最低2ピクセルの空白を置いてください。
  • 小型：ボタンの高さ18ピクセルに対し、11ピクセル以上にはしません。どの側にも最低2ピクセルの空白を置いてください。
• 文字列：
  • 標準：システムフォント
  • 小型：小型システムフォント
• 間隔：
  • 標準：水平に配置したり、縦に重ねたボタンの同士の間隔は、最低12ピクセル離してください。
  • 小型：最低8ピクセル離してください。

注：金属風ボタンにミニ版はありません。

ベベルボタン

ベベルボタン【bevel button ベベル=斜面、面取り】は、ボタンに三次元的な外見を与える、面取りされたふちを持ちます。

ベベルボタンは極めて多目的であり、文字列、アイコン、その他の図形を表示することができます。これらは、標準の押しボタンのようにふるまうことができ、またグループ化してラジオボタンやチェックボックスのように用いることもできます。たとえば、ベベルボタンは、ツールバーで文字揃えの選択肢を、視覚的に表現するために使用することもできます。

図 14-6 ラジオボタンと押しボタンとしてのベベルボタン

24
20

ベベルボタンは、ポップアップメニューのようにふるまうために、付属するメニューを持つことができます。「ポップアップメニュー付きアイコンボタンとベベルボタン」（246ページ）を参照してください。

ベベルボタンは多くの異なる方法で用いることができますが、使いすぎることのないように気をつけてください。適宜、ラジオボタン、チェックボックス、押しボタンといった、その他のコントロールを使用してください。

ベベルボタンは、丸い角、または四角い角を持つことができます。四角いボタンは、グループ内で並べる用途に有効です（たとえば、ラジオボタンとして使用する場合）。

ベベルボタンの仕様

図 14-7 ベベルボタンの例

丸い角
32 x 32（中のアイコン）
アイコンのふちとボタンのふちの間を、最低5ピクセル離してください。

アイコンの下にラベルのある丸い角
32 x 32（中のアイコン）
58 x 57 押しボタンとしてのベベルボタン

四角い角
ラジオボタンの組み合わせとしてのベベルボタン

• ボタンの大きさ：可変。ツールパレットの中では、20 x 20ピクセルが推奨される大きさです。もし、ボタンの中でアイコンや文字列を使用するのであれば、どの側からも、最低5ピクセルの境界を維持してください。
• アイコンの大きさ：32 x 32ピクセルが、推奨される最大のアイコンの大きさです。
• 間隔：24 x 24（もしくは、それ以上）のアイコンを含む、丸い角のボタンについては、水平に配置したり、縦に重ねたボタンの同士の間隔を、最低12ピクセル離してください。もしくは、互いに密着させてください。
• 文字列：ラベルフォント（10ポイント Lucida Grande Regular）。

もし、ベベルボタンがアイコンとラベルを持っていたら、アイコンと関連する場所であればどこでも、あなたは文字列を配置することができます。あなたはInterface Builderを用いて、もしくはプログラム的に、位置を指定できます。

アイコンボタン

アイコンボタン【icon button】はベベルボタンのようにふるまいますが、周囲に四角いふちを持ちません。アイコンだけではなく、ボタン全体がクリック可能です。

アイコンボタンはポップアップメニューを付属させることもできます。詳細は、「ポップアップメニュー付きアイコンボタンとベベルボタン」（246ページ）を参照してください。

図 14-8 ツールバーで使用されるアイコンボタン

アイコンボタンの仕様

図 14-9 アイコンボタンの寸法

32 x 32（中のアイコン）
53 x 53（ボタン全体）
当たり判定【（→ボタン全体）】

• アイコンの大きさ：32 x 32ピクセルが推奨されます。
• 間隔：24 x 24（または、それ以上）のアイコンを持つボタンに対しては、縦に重ねたり、水平に並べたボタンの同士の間隔を、最低8ピクセル離してください。
• 文字列：小型システムフォント。文字列は、図 14-9に示すとおり、アイコンの下とする必要があります。

丸ボタン

丸ボタン【round buttons】は画像を含みますが、文字列は含みません。即座に動作を開始するための、簡素なアイコン風押しボタンを、あなたが必要とするときに使用してください。

これらは一般的に、案内用のコントロールとして使用されます。ラジオボタンやチェックボックスとしては、使用すべきではありません。

図 14-10 丸ボタンの例

丸ボタンの仕様

図 14-11 丸ボタンの寸法

標準丸ボタン 25
小型丸ボタン 20

• 直径：
  • 標準：25ピクセル
  • 小型：20ピクセル
• 文字列：丸ボタンで文字列を使用しないでください。単一の文字は適切なことがありますが、文字はアイコンとして扱われます。
• 間隔：ボタン同士、もしくはほかのインタフェース要素から、12ピクセル

注：丸ボタンにミニ版はありません。

ヘルプボタン

ヘルプボタン【Help button】は、ボタンの文脈に対して適切なヘルプページを指定するために、ヘルプビューアを開きます。【ヘルプのための】カスタムボタンを作成しないでください。Mac OS Xの疑問符マーク画像を含む、標準ヘルプボタンを使用してください。

ダイアログ、シート、ドロワーで、ヘルプボタンは一般的に左下の角に配置され、「OK」および「キャンセル」ボタンがあれば、これらと垂直位置が揃えられます。図 14-12は、ヘルプボタンを搭載するダイアログの例を示しています。

図 14-12 ページ設定ダイアログでのヘルプボタン

ヘルプボタン

あなたのアプリケーションにおけるヘルプの使用についての詳細は、「ユーザ補助」（73ページ）を参照してください。

ヘルプボタンの仕様

図 14-13 ヘルプボタンの寸法

20

• 直径：20ピクセル
• 間隔：ほかのインタフェース要素から、最低12ピクセル

選択コントロール

以下のセクションで説明されるコントロールは、ユーザに、複数の項目から選択範囲を作成するための手段を提供します。

ラジオボタン

ラジオボタン【radio buttons】は、相互に排他であるものの、関連しているという選択肢の組み合わせのために使用してください。

ラジオボタンの組み合わせは、最小で二つ、最大で五つ程度の選択肢を含む必要があります。（五つ以上の項目に対しては、ポップアップメニューの使用を検討してください。）

ラジオボタンの組み合わせは、動的になることはありません（つまり、内容が文脈に応じて変化すべきではありません）。

ラジオボタンは、決して動作を開始すべきではありません。

ラジオボタンの仕様

図 14-14 ラジオボタンの間隔

標準のラジオボタン
種類:○ラジオ オフ ○ラジオ オフ
　　 ●ラジオ オン ●ラジオ オン
【ラベルのコロンとボタンとの左右間隔 = 8、
ラベルの下端と2番目のボタンの上下間隔 = 7、
ボタン同士の上下間隔 = 6】

小型のラジオボタン
種類:○ラジオ オフ ○ラジオ オフ
　　 ●ラジオ オン ●ラジオ オン
【ラベルのコロンとボタンとの左右間隔 = 6、
ラベルの下端と2番目のボタンの上下間隔 = 7、
ボタン同士の上下間隔 = 6】

ミニ版のラジオボタン
種類:○ラジオ オフ ○ラジオ オフ
　　 ●ラジオ オン ●ラジオ オン
【ラベルのコロンとボタンとの左右間隔 = 5、
ラベルの下端と2番目のボタンの上下間隔 = 6、
ボタン同士の上下間隔 = 5】

ラベルのベースライン、および最初のボタンの文字列に揃えます。

• 大きさ：
  • 標準：影を含めて、18 x 18ピクセル
  • 小型：14 x 15ピクセル
  • ミニ：10 x 11ピクセル
• 間隔：
  • 標準：縦に重ねたときはコントロールの間に6ピクセル、ラベル（コロン）からコントロールまでは8ピクセル
  • 小型：縦に重ねたときはコントロールの間に6ピクセル、ラベル（コロン）からコントロールまでは6ピクセル
  • ミニ：縦に重ねたときはコントロールの間に5ピクセル、ラベル（コロン）からコントロールまでは5ピクセル
• 文字列：
  • 標準：ラベル、コントロール文字列の両方とも、システムフォント
  • 小型：ラベル、コントロール文字列の両方とも、小型システムフォント
  • ミニ：ラベル、コントロール文字列の両方とも、ミニシステムフォント
• 配置：一般的に、ボタンの状態の間の関連性を明確に示すために、垂直に重ねられます。

チェックボックス

チェックボックス【checkboxes】は、オンかオフのどちらかでなければならない、一つ、またはそれ以上の選択肢を意図する場合に使用してください。

各チェックボックスのラベルは、ボックスがチェックされたとき、されなかったときに、何が起こるかを明らかにするために、二つの反対の状態を明確に伴う必要があります。

もし、あなたが曖昧さのないラベルの文言を見つけることができなければ、二つの異なるラベルで状態を明確に説明できるように、ラジオボタンの使用を検討してください。

ユーザが、一つ以上の状態から構成される選択を行ったときは、適切なチェックボックスにダッシュを使用してください。この記号は「メニューで記号を使用する」（154ページ）で説明されている、メニューにおける複合状態の表示と一貫性があります。

チェックボックスの仕様

図 14-15 チェックボックスの間隔

標準のチェックボックス
種類:□チェック オフ □チェック オフ
　　 ■チェック オン ■チェック オン
【ラベルのコロンとボタンとの左右間隔 = 8、
ラベルの下端と2番目のボタンの上下間隔 = 9、
ボタン同士の上下間隔 = 8】

小型のチェックボックス
種類:□チェック オフ □チェック オフ
　　 ■チェック オン ■チェック オン
【ラベルのコロンとボタンとの左右間隔 = 6、
ラベルの下端と2番目のボタンの上下間隔 = 9、
ボタン同士の上下間隔 = 8】

ミニ版のチェックボックス
種類:□チェック オフ □チェック オフ
　　 ■チェック オン ■チェック オン
【ラベルのコロンとボタンとの左右間隔 = 5、
ラベルの下端と2番目のボタンの上下間隔 = 7、
ボタン同士の上下間隔 = 7】

ラベルのベースライン、および最初のチェックボックスの文字列に揃えます。

• 大きさ：
  • 標準：影を含めて、18 x 18ピクセル
  • 小型：14 x 16ピクセル
  • ミニ：15 x 15ピクセル
• 間隔：
  • 標準：縦に重ねたときはコントロールの間に8ピクセル、ラベル（コロン）からコントロールまでは8ピクセル
  • 小型：縦に重ねたときはコントロールの間に8ピクセル、ラベル（コロン）からコントロールまでは6ピクセル
  • ミニ：縦に重ねたときはコントロールの間に7ピクセル、ラベル（コロン）からコントロールまでは5ピクセル
• 文字列：
  • 標準：ラベル、コントロール文字列の両方とも、システムフォント
  • 小型：ラベル、コントロール文字列の両方とも、小型システムフォント
  • ミニ：ラベル、コントロール文字列の両方とも、ミニシステムフォント
• 配置：もし、二つ以上の関連するチェックボックスがあれば、一般的には、これらは関連性があるということを明確に示すために、垂直に重ねられます。

分割コントロール

分割コントロール【segmented control】は、二つ以上の部分に分割され、ラジオボタン（またはチェックボックス）の集合としてふるまいます。あなたのアプリケーションや、親ウインドウのモードや表示を切り替えるために使用されます。

• 分割コントロールは、アイコン、もしくは文字列を含むことができますが、両方は含みません。
• コントロールがアイコンを含むとき、あなたはコントロールの下に文字列ラベルを配置することができます。
• 分割コントロールは、標準、もしくは磨かれた金属風ウインドウで使用できます。
• 分割コントロールは、押しボタンのように、即座に動作を開始する必要があります。ユーザが分割されたうちの一つを押したとき、何かが起こる必要があります。

分割コントロールの仕様

図 14-16 分割コントロールの寸法

磨かれた金属風ウインドウ要の、標準の分割コントロール
17 x 15【アイコンの大きさ】 25【高さ】

標準の分割コントロール
17 x 15【アイコンの大きさ】 20【高さ】

小型の分割コントロール
14 x 13【アイコンの大きさ】 17【高さ】

ミニ版の分割コントロール
12 x 11【アイコンの大きさ】 15【高さ】

• 高さ：
  • 標準：磨かれた金属風ウインドウ用には25ピクセル、そうでなければ20ピクセル
  • 小型：17ピクセル
  • ミニ：15ピクセル
• 文字列：
  • 標準：コントロール内の文字列、その下のラベル文字列とも、システムフォント
  • 小型：コントロール内の文字列、その下のラベル文字列とも、小型システムフォント
  • ミニ：コントロール内の文字列、その下のラベル文字列とも、ミニシステムフォント

ポップアップメニュー付きアイコンボタンとベベルボタン

ポップアップメニューを格納するベベルボタン、もしくはアイコンボタンは、単一の下向き矢印【三角形】を持ちます。

ボタン上の画像が現在の選択範囲となるか、もしくは常に同じ画像を表示したまま、ボタンがメニュータイトル代わりとなることで、ボタンは標準的なポップアップメニューのようにふるまうことができます。

ボタンそのものの仕様は、「ベベルボタン」（236ページ）と「アイコンボタン」（237ページ）を参照してください。

図 14-17 ポップアップアイコンボタン

32 x 32【アイコンの大きさ】

図 14-18 四角い角のポップアップベベルボタン

32 x 32【ボタンの中のアイコンの大きさ】

図 14-19 丸い角のポップアップベベルボタン

32 x 32【ボタンの中のアイコンの大きさ】

ポップアップメニュー

ポップアップメニュー【pop-up menus】は、ダイアログやウインドウ内で、相互に排他の選択肢の一覧を提示するために使用してください。

ポップアップメニューは、一覧にある多数の中から一つの選択を行う、という意味として使用されます。もし、あなたが六つ以上のラジオボタンの組み合わせを持つダイアログを作っていたら、代わりにポップアップメニューを使用することを検討してください。

ポップアップメニューは…

• 一般的に、ラベルを左に持ちます（左から右に書く筆記形式の場合）。メニューがグループボックスのタイトルとして用いられる場合は除きます。
• 二重三角形表示【上下を指す二つの三角形】を持ちます。
• 名詞（事柄）、または形容詞（状態や属性）を含みますが、動詞（コマンド）は含みません。コマンドにはプルダウンメニューを使用してください。
• 開かれたとき、現在選択されている値のそばに、チェックマークが付きます。

ポップアップメニューはほかのメニュー同様にふるまいます。ユーザは項目を選択するためにドラッグします—その際に、【項目は】短く点滅し、現在の選択が表示されます—もしくは、ユーザは現在の値を活性にしたままにするため、メニューの外側にカーソルを移動します。

何が利用できるかを見るための、確認のためのボタン押下は、新しい値を選択することはありません。

特殊な場合に、あなたはポップアップメニュー自体の内容に作用するコマンドを搭載したくなることがあるでしょう。

たとえば、プリントダイアログでは、ユーザがメニューにプリンタを追加できるように、「プリンタ」ポップアップメニューは、「プリンタ一覧を編集」【要確認】を含みます。新しいプリンタは、メニューのデフォルト選択対象となります。

このようなコマンドは、分割線の下の、ポップアップメニューの底辺に置いてください。

いくつかの状況では、先行する操作を説明する文章を、ポップアップメニューを用いて締めくくるのが適切なことがあります。たとえば、Finderの「検索」ウインドウとMail環境設定の「ルール」ウインドウは、共にこの方法でポップアップメニューを使用しています。

ポップアップメニューは、ユーザが一度にすべてを見る必要のない、12個までの、相互に排他の選択肢を提示するために使用してください。

ポップアップメニューを使用してはいけないのは…

• 12項目以上に対して。

  この場合、空間が制限されている場合を除き、スクロールする一覧を使用してください

• 一覧の項目が可変のとき

• 文字列のスタイル（たとえば、ボールドとイタリックが選択できる）のように、一つ以上の選択が適切なとき。

  この場合、チェックボックスか、チェックマークの現れるプルダウンメニューを使用してください。

ポップアップメニューでサブメニューを使用してはいけません。そうすることにより、選択肢は深い層に隠れてしまい、物理的に使用することが難しくなってしまいます。

ベベルボタンとアイコンボタンもポップアップメニューとすることができます。「ポップアップメニュー付きアイコンボタンとベベルボタン」（246ページ）を参照してください。

図 14-20 開いたポップアップメニュー

↓ラベル　「　インチ　　　　」
　　　　　「　センチメートル」
　　単位: 「レピクセル　　　」◆←これがポップアップメニューであることを示す矢印
　　　　　「　ポイント　　　」
　　　　　「　パイカ　　　　」

ポップアップメニューの仕様

図 14-21 ポップアップメニューの寸法

標準のポップアップメニュー
種類: ポップアップメニュー|◆
8【ラベルとコントロールの間隔】
9【コントロールの端と中の文字列との水平間隔】
9【コントロールの右の境界線（二重三角形の左）と文字列との水平間隔】
20【高さ】

小型のポップアップメニュー
種類: ポップアップメニュー|◆
6【ラベルとコントロールの間隔】
7【コントロールの端と中の文字列との水平間隔】
7【コントロールの右の境界線（二重三角形の左）と文字列との水平間隔】
17【高さ】

ミニ版のポップアップメニュー
種類: ポップアップメニュー|◆
5【ラベルとコントロールの間隔】
5【コントロールの端と中の文字列との水平間隔】
5【コントロールの右の境界線（二重三角形の左）と文字列との水平間隔】
15【高さ】

図 14-22 ポップアップメニューの間隔

標準のポップアップメニュー
　色: ターコイズ|◆
10【上下間隔】
種類: 丸　　　　|◆

小型のポップアップメニュー
　色: ターコイズ|◆
8【上下間隔】
種類: 丸　　　　|◆

ミニ版のポップアップメニュー
　色: ターコイズ|◆
6【上下間隔】
種類: 丸　　　　|◆

• 高さ：
  • 標準：20ピクセル
  • 小型：17ピクセル
  • ミニ：15ピクセル
• 幅：収納している中で、最も長いメニュー項目に対して十分な幅
• 間隔：
  • 標準：縦に重ねたコントロール間の間隔を、最低10ピクセルは離します。
  • 小型：最低8ピクセル
  • ミニ：最低6ピクセル
• コントロール上の文字列：
  • 標準：システムフォント、左端から9ピクセル、二重三角形部分から最低9ピクセル
  • 小型：小型システムフォント、左端から7ピクセル、二重三角形部分から最低7ピクセル
  • ミニ：ミニシステムフォント、左端から5ピクセル、二重三角形部分から最低5ピクセル
• メニューラベル文字列：
  • 標準：強調システムフォント、文字列（コロン）からメニューの左端まで8ピクセル
  • 小型：強調小型システムフォント、文字列（コロン）からメニューの左端まで6ピクセル
  • ミニ：強調ミニシステムフォント、文字列（コロン）からメニューの左端まで5ピクセル

コマンドポップダウンメニュー

コマンドポップダウンメニュー【command pop-down menu】は、プルダウンメニューと似ていますが、メニューバーではなくウインドウの中に現れます。

このコントロールは、ウインドウが複数のアプリケーションの間で共有されており、メニューがウインドウの内容に作用するコマンドを含むときにのみ、使用してください。

たとえば、「カラー」ウインドウは、どんなアプリケーションにも使用されることができ、「カラー」ウインドウ自体の内容を変化させるために使用できるコマンドを持つメニューを格納しています。

もし、あなたのアプリケーションが「カラー」ウインドウを使用するのであれば、これらと同じコマンドを持つ、独自のメニューを作成してはいけません。

図 14-23 コマンドポップダウンメニュー

〔選択肢 |▼〕
|パレットの編集…|
|カーソルの変更 |
|グリッドを表示 |
|プレビュー |
【要確認】

コマンドポップダウンメニューは、3個から12個の間のコマンドを含む必要があります。閉じたコマンドメニューは、メニュータイトルとして働く、常に同じ文字列を表示します。

コマンドポップダウンメニューの仕様

コマンドポップダウンメニューの仕様は、ポップアップメニューと同じであることに注意してください。

図 14-24 コマンドポップダウンメニューの寸法

標準のポップダウンメニュー
〔選択肢 |▼〕
9【コントロールの端と中の文字列との水平間隔】
9【コントロールの右の境界線（下向き三角形の左）と文字列との水平間隔】
20【高さ】

小型のポップダウンメニュー
〔選択肢 |▼〕
7【コントロールの端と中の文字列との水平間隔】
7【コントロールの右の境界線（下向き三角形の左）と文字列との水平間隔】
17【高さ】

ミニ版のポップダウンメニュー
〔選択肢 |▼〕
5【コントロールの端と中の文字列との水平間隔】
5【コントロールの右の境界線（下向き三角形の左）と文字列との水平間隔】
15【高さ】

• 高さ：
  • 標準：20ピクセル
  • 小型：17ピクセル
  • ミニ：15ピクセル
• 幅：収納している中で、最も長いメニュー項目に対して十分な幅
• 間隔：
  • 標準：縦に重ねたコントロール間の間隔を、最低10ピクセルは離します。
  • 小型：最低8ピクセル
  • ミニ：最低6ピクセル
• コントロール上の文字列：
  • 標準：システムフォント、左端から9ピクセル、三角形部分から最低9ピクセル
  • 小型：小型システムフォント、左端から7ピクセル、三角形部分から最低7ピクセル
  • ミニ：ミニシステムフォント、左端から5ピクセル、三角形部分から最低5ピクセル

コンボボックス

コンボボックス【combination box / combo box】は、文字列入力欄とドロップダウンリストが組み合わさったものです。

コンボボックスは、一覧にない項目をユーザが入力できる機能を持ちながら、妥当な選択肢の一覧を表示するために有効です。

ユーザは文字列入力欄に、適切な文字であればどんな種類でも入力できます。

もし、ユーザが既に一覧の中にある項目を入力したら、もしくは、一覧の中にある項目の、最初の文字に一致する数文字を入力したら、ユーザが一覧を開いたときに、その項目は強調表示されます。

ユーザが入力した項目は、恒久的な一覧には追加されません。

ユーザは、文字列入力欄の右にある矢印をクリックするか押し続けることで、一覧を開きます。

一覧は、文字列入力欄から下がるウインドウです。ウインドウは文字列入力欄と矢印ボックスを足したものと等しい幅を持ち、影を持ちます。一覧の右端は、矢印ボックスの右端を越えてはいけません。もし項目が長すぎたら、切り詰められます。

ユーザが一覧の中の項目を選択したとき、文字列入力欄の内容は何であれその項目で置き換えられ、一覧は閉じます。

もし、一覧が、矢印を押し続けることで開かれていたのであれば、ユーザは、一覧の中のある項目までドラッグすることにより、それを選択します。

もし、一覧が、矢印をクリックすることで開かれていたのであれば、ユーザは、項目をクリックするか、上矢印か下矢印を押すことにより選択を行います。ユーザは、スペースバー、Enter、もしくはReturnを押すことで、項目を承認することができます。

もし、一覧が開いて、文字列入力欄の内側も含め、ユーザがその外側をクリックしたら、一覧は閉じます。

図 14-25 開いた一覧付きコンボボックス

町: 【サンフランシスコ |▼】
　　 |クパチーノ　　　　　|
　　 |ロサンゼルス　　　　|
　　 |サクラメント　　　　|
　　 |サンディエゴ　　　　|
　　 |サンフランシスコ　　|【強調表示】
　　 |サンノゼ　　　　　　|

コンボボックスのデフォルト状態は、閉じた状態で、文字列入力欄は空か、デフォルトの選択を表示しています。

デフォルトの選択（一覧の最初の項目である必要はありません）は、隠れた選択肢への意味のある手がかりを提供する必要があります。

また、コンボボックスは、有効なラベルを持つ必要があります。

コンボボックスの仕様

図 14-26 コンボボックスの寸法

標準のコンボボックス
種類: 【コンボボックス |▼】
8【ラベルとボックスの水平間隔】
20【高さ】

小型のコンボボックス
種類: 【コンボボックス |▼】
6【ラベルとボックスの水平間隔】
17【高さ】

ミニ版のコンボボックス
種類: 【コンボボックス |▼】
5【ラベルとボックスの水平間隔】
15【高さ】

• 高さ：
  • 標準：20ピクセル
  • 小型：17ピクセル
  • ミニ：15ピクセル
• 幅：収納している中で、最も長いメニュー項目に対して十分な幅
• 間隔：
  • 標準：縦に重ねたコントロール間の間隔を、最低12ピクセルは離します。
  • 小型：最低10ピクセル
  • ミニ：最低8ピクセル
• メニュー項目文字列：
  • 標準：システムフォント
  • 小型：小型システムフォント
  • ミニ：ミニシステムフォント
• メニューラベル文字列：
  • 標準：強調システムフォント、文字列（コロン）からメニューの左端まで8ピクセル
  • 小型：強調小型システムフォント、文字列（コロン）からメニューの左端まで6ピクセル
  • ミニ：強調ミニシステムフォント、文字列（コロン）からメニューの左端まで5ピクセル

プラカード

プラカード【placard】は、現在のページ番号といった情報を表示するために使用される、ウインドウの底辺にある小さな区画です。

また、あなたはコントロールの裏に縞模様の背景を作り出すためにも、プラカードを利用することができます。

一般に、プラカードは書類ウインドウにおいて、内容の見え方—たとえば、現在のページや、表示倍率など—を、すばやく変更するための手段として用いられます。

プラカードの、最もおなじみの使い方としては、ウインドウの底辺、水平スクロールバーの左に、ポップアップメニューとして配置されたものがあります。

図 14-27 ポップアップメニュー付きプラカード

プラカードの高さは15ピクセルとし、文字列には小型システムフォントかラベルフォントのいずれかを使用します。

カラーウェル

カラーウェル【color well】は、特定の設定に対して現在選択されている色を示す、小さな四角形のコントロールであり、クリックされると、カラーウインドウを表示します。

あなたがユーザに色設定を変更できるようにするときは、いつでもカラーウインドウを使用してください。

一つのウインドウ内に、複数のカラーウェルが現れても構いません。

図 14-28 環境設定ウインドウでのカラーウェル

イメージウェル

イメージウェル【image well】は、アイコンや画像のための、ドラッグアンドドロップの目標として使用してください。

たとえば、あなたはクリップアートカタログ内のサムネイルを管理するために、イメージウェルの組み合わせを使用することができます。

イメージウェルを、押しボタンやベベルボタンの代わりとして使用してはいけません。

図 14-29 イメージウェル

通常
選択された状態【全体が強調表示される】
選択され、ドロップされた状態【全体が強調表示され、輪郭が濃くなる】
ドロップ対象【輪郭が濃くなる】

イメージウェルのいくつか（たとえば、アカウント環境設定の画像ペイン【要確認】にある、ユーザの写真）は、常に画像を含んでいる必要があります。

もし、あなたのアプリケーションで、ユーザがイメージウェルを消去できる（空のままにする）のであれば、標準的な編集メニューコマンドと、クリップボード対応を提供してください。

日付ピッカ

日付ピッカ【date picker】は、ユーザに、ウインドウ内で特定の日付や時刻を選択できるようにするために使用してください。

日付ピッカコントロールは、日付と時刻の選択について、二つの形式を提供します…

• 文字列入力欄と段階コントロールの組み合わせ
• 画像によるカレンダと時計

文字列入力欄と段階式の日付ピッカは、日付の形式（月、日、年、もしくは月と年）と時刻の形式（時、分、秒、もしくは時と分）の、さまざまな組み合わせを表示するために、変更することができます。

また、日付か時刻のどちらかに対して、文字列入力欄と段階コントロールを表示することもできます。

ユーザは、段階コントロールの矢印をクリックするか、変更したい欄（月や分の欄といった）を選択し、新しい値を入力することによって、日付と時刻を調節できます。

図 14-30（257ページ）は、文字列入力欄と段階コントロール式の日付ピッカを示しており、日付のために月、日、年を選択することができ、時刻のために時、分、秒を選択することができます。

図 14-30 文字列形式の日付ピッカコントロール

【06/06/2005 9:00:00 AM】◆
【◆は上下矢印（段階コントロール）を示す】

画像形式の日付ピッカコントロールは、日付と時刻システム環境設定で表示されているものと同様の、カレンダと時計を表示します。あなたのウインドウで、カレンダと時計のどちらか一方、もしくは両方を一緒に表示することができます。

ユーザはカレンダ表示の左上隅にある、左右の矢印をクリックすることで月を選択し、その月の中の日付をクリックすることで日を選択します。

特定の時刻は、時計の針をドラッグすることで選択されます。

図 14-31（257ページ）は、画像形式の日付ピッカコントロールを示しています（時計に秒針は表示されません）。

図 14-31 画像形式の日付ピッカコントロール

調節コントロール

このセクションでは、ユーザが視覚的に設定やパラメータを調節できるようにするコントロールについて説明します。

段階コントロール（小矢印）

段階コントロール【stepper control】は、ユーザに値を増加させたり減少させたりできるようにします。このコントロールは通常、現在の値を表す文字列入力欄と接続した形で使用されます。文字列入力欄は編集できても、できなくても構いません。

段階コントロールの仕様

図 14-32 段階コントロールの寸法

標準の段階コントロール
【2】◆
文字列入力欄の高さ：22
文字列入力欄と段階コントロールとの水平間隔：2
段階コントロールの幅：13
段階コントロールの高さ：21

小型の段階コントロール
【2】◆
文字列入力欄の高さ：19
文字列入力欄と段階コントロールとの水平間隔：2
段階コントロールの幅：11
段階コントロールの高さ：18

ミニ版の段階コントロール
【2】◆
文字列入力欄の高さ：15
文字列入力欄と段階コントロールとの水平間隔：1
段階コントロールの幅：11
段階コントロールの高さ：15

• コントロールの大きさ：
  • 標準：13 x 21ピクセル
  • 小型：11 x 18ピクセル
  • ミニ：11 x 15ピクセル
• 文字列入力欄の高さ：
  • 標準：22ピクセル
  • 小型：19ピクセル
  • ミニ：15ピクセル
• コントロールと、変更対象となる入力欄との間隔：
  • 標準：2ピクセル
  • 小型：9ピクセル
  • ミニ：1ピクセル

スライダコントロール

スライダコントロール【slider controls】は、許容できる値の、連続する範囲から、ユーザに値を選択させます。

• スライダコントロールは水平または垂直にすることができます。スライダを水平にするか、垂直にするかを決定する際には、実世界における同様のコントロールについての、ユーザの想定事項に合わせるように試みてください。
• スライダコントロールは、あなたが指定する増加量を表すために、ラベル付きの目盛りを表示することができます。
• スライダそのもの（つまみの部分）は、指示型か丸型のどちらかにすることができます。
• スライダコントロールは、ユーザがスライダをドラッグするのに応じてその効果を見ることができるように、ライブフィードバック（ライブドラッギング）【生の反応、ドラッグ】に対応します。たとえば、Dock環境設定は、「Dockの大きさ」スライダを動かした効果を表します。

スライダコントロールの仕様

図 14-33 標準のスライダコントロールの寸法

水平の目盛り付き指示型スライダの高さ：25
水平の丸型スライダの高さ：15
水平の指示型スライダの高さ：19
垂直の目盛り付き指示型スライダの幅：24
垂直の丸型スライダの幅：15
垂直の指示型スライダの幅：18

図 14-34 小型のスライダコントロールの寸法

水平の目盛り付き指示型スライダの高さ：19
水平の丸型スライダの高さ：12
水平の指示型スライダの高さ：14
垂直の目盛り付き指示型スライダの幅：19
垂直の丸型スライダの幅：11
垂直の指示型スライダの幅：14

図 14-35 ミニ版のスライダコントロールの寸法

水平の目盛り付き指示型スライダの高さ：17
水平の丸型スライダの高さ：10
水平の指示型スライダの高さ：11
垂直の目盛り付き指示型スライダの幅：17
垂直の丸型スライダの幅：10
垂直の指示型スライダの幅：11

• コントロールの大きさ：

  • 標準：指示型スライダは19ピクセル（目盛りつきは25ピクセル）、丸型スライダは15ピクセル。

    垂直に配置されたときは、指示型スライダは幅18ピクセル、目盛り付き指示型スライダは幅24ピクセル。

  • 小型：指示型スライダは14ピクセル（目盛りつきは19ピクセル）、丸型スライダは12ピクセル。

    垂直に配置されたときは、丸型スライダは幅11ピクセル。

  • ミニ：指示型スライダは11ピクセル（目盛りつきは17ピクセル）、丸型スライダは10ピクセル。
• ラベル文字列の大きさ：
  • 標準：10ポイント
  • 小型：10ポイント
  • ミニ：9ポイント
• 間隔：
  • 標準：コントロール間の間隔は、12ピクセル
  • 小型：コントロール間の間隔は、10ピクセル
  • ミニ：コントロール間の間隔は、8ピクセル

インジケータ

インジケータとは、ユーザに何かの状態をを示すコントロールのことです。

進行インジケータ

進行インジケータ【progress indicators】は、長い時間のかかる操作の状況についてユーザに知らせます。（こうした情報をいつ提供すべきかのガイドラインは、「反応と伝達」（43ページ）を参照してください）

進行インジケータには、三つの種類があります…

• 定量進行バー【Determinate progress bar】：操作の全体の長さを決定することができ、処理がどれくらいで完了するかをユーザに伝えることができるときに使用してください。

  たとえば、あなたは定量進行インジケータを、ファイル変換の進行状況を示すために使用することができます。図 14-36を参照してください。

• 不定量進行バー【Indeterminate progress bar】：処理の継続期間が決定できないときに使用してください。

  たとえば、あなたは、アプリケーションがダイアルアップ接続を試みていることをユーザに知らせようとする際、完了するまでにどれだけかかるかを正確に決定する手段が無いときに、不定量進行インジケータを使用することができます。

  もし、不定量な処理が、その継続期間を決定できる段階まで達したら、定量進行インジケータに切り替えてください。図 14-36を参照してください。

• 非同期進行インジケータ【Asynchronous progress indicator】：空間が極めて制限されているときに使用してください。これらのインジケータは、サーバからのメッセージ検索といった、背面で行われる非同期イベント処理に用いるのが最適です。

  開始時には不定量であっても、やがて期間が確定する操作において、この非同期進行インジケータを使用しないでください。

定量進行バーにおいて、「詰め物」は左から右へと進み、消去される前に完全に埋まる必要があります。

不定量進行バーは、回転する縞模様の円筒を表示して、進行中の処理を示します。

定量進行バーは、進行度合いと時間を関連付ける必要があります。

たとえば、5秒間で90%に達したのに、残りの10%のために5分間かかる進行バーは、じれったく、ユーザに何かがおかしいのではないかと考えさせてしまうでしょう。

進行バーは一般的に、進行ダイアログの中に現れます。中断されることのある処理が行われるとき、進行ダイアログは「キャンセル」ボタンを含む（なおかつ、Escキーに対応する）必要があります。もし、処理の中断が副作用をもたらすことがあれば、ボタンは「キャンセル」ではなく「停止」と表記する必要があります。

ダイアログ内に現れることに加えて、非同期進行インジケータは、しばしばメインアプリケーションウインドウや、書類ウインドウにも現れます。非同期進行インジケータは一般的に、不定量の処理が進行中であるときのみ、表示されます。

進行インジケータは、必ず、あなたのウインドウとダイアログの中で一貫した位置に設置するようにしてください。たとえば、Mailアプリケーションは、ユーザが入力したものに一致するメールアドレスを検索し、表示する際に、非同期進行インジケータを常に「宛先」入力欄の右端に表示します。

進行インジケータのために一貫した位置を選択することにより、ユーザはある操作の状態を、見慣れた場所ですばやく確認できるようになります。

あなたのアプリケーションにおいて、一貫性を提供することの大切さについての詳細は、「一貫性」（44ページ）を参照してください。

図 14-36 進行バー

標準の進行バー
定量進行バー 不定量進行バー
高さ：16
活性の詰め物
非活性の詰め物

小型の進行バー
定量進行バー 不定量進行バー
高さ：10
活性の詰め物
非活性の詰め物

図 14-37 非同期進行インジケータ

高さ：16

注：ミニ版は利用できません。

関連性インジケータ

関連性インジケータ【relevance indicator】は、図 14-38に示すような、検索結果の関連性を表示するために使用してください。関連性インジケータはリスト表示の一部とする必要があります。

図 14-38 関連性インジケータ

関連性インジケータの仕様

図 14-39 関連性インジケータの状態

最も関連性がある
関連性がない

• 高さ：インジケータが属するリストにおけるフォントの、小文字のxの高さ【（x-height）】

水準インジケータ

水準インジケータ【level indicator】は、何らかの水準や総量についての情報を、視覚的なやり方で提供するために使用してください。

水準インジケータには三つの種類があります…

• 容量
• 評価
• 関連性（Cocoaアプリケーションで関連性インジケータを表示するためには、この形式を使用してください。このコントロールを使用する上での詳細は、「関連性インジケータ」（262ページ）を参照してください。）

容量インジケータの仕様

容量インジケータ【capacity indicator】は、明確に定義された最小値と最大値を持つ、何らかの水準か総量についての情報を提供するために使用してください。

たとえば、あなたはサーバ上の記録空間の使用量の、現在の水準を示すため、もしくは、バッテリの残量を表すために、容量インジケータを使用することができます。

容量インジケータには、連続と不連続の、二つの形式があります。

連続容量インジケータは、現在の容量の値を示す、色付きの棒によって埋められていく、透明な溝です。

不連続容量インジケータは、分割された行であり、コントロールの値の組の最大数に等しい、四角い区画です。【要確認】これらの区画は、容量インジケータの指定された長さに合わせて、均等に伸縮します。不連続容量インジケータは、現在の容量値を、最も近い整数に丸めて表示します。これは、不連続インジケータの区画は完全に満たされているか、空であるかのどちらかであり、部分的に満たされることはない、ということを意味します。

容量インジケータの両形式における、中身の部分のデフォルト色は緑です。

もし、あなたが警告水準の値を定義すれば、その値に達したときは中身の色は黄色に変化します。

もし、あなたが重大水準の値を定義すれば、その値に達したときは中身の色は赤に変化します。

あなたは、適切な値を設定することで、インジケータのどちらの端が重大（赤）であるかを指定できます。

もし、あなたが重大値を警告値より大きく定義した場合、値が警告水準より低いときの中身は緑となり、警告水準と重大水準の間では黄色、重大水準より上では赤となります。（この、連続容量インジケータでどのように警告値と重大値が定義されるかは、図 14-40（264ページ）で示されています）この方向付けは、あなたが、容量が最大値に近づいたときに、警告を表示する必要があるときに有効です。

もし、あなたが重要値を警告値より小さく定義した場合、重大値より低いときの中身は赤、重大値と警告値の間では黄色、警告値より上（最大値まで）では緑となります。この方向付けは、あなたが、容量が最小値に近づいたときに、ユーザに警告する必要があるときに有効です。

連続、不連続の容量インジケータは共に、中身によって表される水準への文脈を与えるために、インジケータコントロールの上か下に、目盛りを表示することができます。

しかし、目盛りを表示するのは連続容量インジケータのみとするべきです。なぜなら、不連続容量インジケータにおける区画の数と幅は、同様の文脈を提供するからです。

図 14-40（264ページ）は、連続容量インジケータのさまざまな状態を示します。

図 14-40 三つの異なる範囲において値を表示する連続容量インジケータ

標準範囲にある水準
警告範囲にある水準
重大範囲にある水準

図 14-41（265ページ）は、不連続容量インジケータのさまざまな状態を示します。

図 14-41 三つの異なる範囲において値を表示する不連続容量インジケータ

標準範囲にある水準
警告範囲にある水準
重大範囲にある水準

評価インジケータの仕様

評価インジケータ【rating indicator】は、何らかの評価に対応した、星の数を表示します。評価インジケータは、リスト表示かテーブル表示の一部とする必要があります。なぜなら、これはお気に入りの画像や、最も頻繁に訪れたウェブページといった、ある区分におけるさまざまな要素の、相対的な評価を伝えるからです。

デフォルトでは、評価インジケータは星を表示しますが、あなたは星を置き換えるための独自の画像を与えることができます。

このセクションでは、【便宜上、】評価インジケータは星を表示すると仮定しますが、あなたが与えた画像にも、情報は等しく適用されます。

評価インジケータは半端な星を表示しません。代わりに、完全な星だけを表示するために、現在の値を最も近い整数に丸めます。

評価インジケータの中の星は、コントロールの指定された長さに合わせるために、伸縮することはありません。そして星の間に空白が加えられることもありません。

あなたは、ユーザが表や一覧の要素の順位を上げ下げできるように、評価インジケータを編集できるようにすることができます。

図 14-42（265ページ）は、さまざまな値を表示する評価インジケータを示します。

図 14-42 さまざまな評価を表す評価インジケータ

文字列コントロール

このセクションでは、文字列を表示するか、文字列を入力として受け取るかの、いずれかのコントロールについて説明します。

コンボボックスは、文字列入力欄を含んでいますが、このセクションでは扱いません。このコントロールについての情報は、「コンボボックス」（253ページ）を参照してください。

固定文字列

固定文字列欄【static text field】は、ダイアログの説明文（ユーザに変更されることを意図していない文字列）のために使用してください。

固定文字列欄は二つの状態を持ちます。活性と淡色表示です。

ユーザにとって明らかに有益なときは、固定文字列は選択できるようにするべきです。

たとえば、ユーザは、エラーメッセージ、シリアル番号、IPアドレスなどを、どこかにペーストするためにコピーできる必要があります。

固定文字列欄の仕様

• 大きさ：
  • 標準：システムフォント
  • 小型：小型システムフォント
  • ミニ：ミニシステムフォント

文字列入力欄

文字列入力欄【text input field】は、編集可能な文字列欄とも呼ばれ、ユーザが文字列を入力したり、既存の文字列を変更する、矩形の領域です。

文字列入力欄は、活性または使用不能となることができます。キーボードフォーカス、パスワード入力に対応します。

あなたのアプリケーションの文字列入力欄は、適切な編集の確認を行う必要があります。たとえば、入力欄に対して正当な値が数字の文字列であれば、ユーザが数字でない文字を入力したら、アプリケーションは警告を発行します。

ほとんどの場合、入力欄のデータを確認するための適切なときは、ユーザが入力欄の外側をクリックしたときか、Return、Enter、Tabキーを押したときです。

コンボボックスは文字列入力欄を持ち、さらにメニューや選択肢の一覧を含みます。「コンボボックス」（253ページ）を参照してください。

文字列入力欄の仕様

図 14-43 標準の文字列入力欄の寸法

高さ：22
文字列と挿入ポイントのある、標準状態
フォーカスのある状態
選択範囲のある状態

図 14-44 小型の文字列入力欄の寸法

高さ：19
文字列と挿入ポイントのある、標準状態
フォーカスのある状態
選択範囲のある状態

図 14-45 ミニ版の文字列入力欄の寸法

高さ：15
文字列と挿入ポイントのある、標準状態
フォーカスのある状態
選択範囲のある状態

• 高さ：
  • 標準：22ピクセル（システムフォントを納めるには、行の間隔無しで高さは16ピクセルです）
  • 小型：19ピクセル
  • ミニ：15ピクセル
• 間隔：
  • 標準：入力欄の間の間隔を、最小で10ピクセルは離してください。
  • 小型：最小8ピクセル離してください。
  • ミニ：最小8ピクセル離してください。
• 文字列：
  • 標準：システムフォント
  • 小型：小型システムフォント
  • ミニ：ミニシステムフォント

文字列入力欄での選択範囲の強調表示の行い方に関する詳細は、「キーボードフォーカスと移動」（101ページ）、および「文字列における選択範囲」（106ページ）を参照してください。

トークン欄

トークン欄【token field】は、入力文字列からトークン【字句】を作成するコントロールです。トークン欄コントロールは、Mailアプリケーションのアドレス欄のものと同様のふるまいに対応しています。

トークン欄コントロールは、文字列入力欄の中で使用してください。ユーザが文字列入力欄で入力するのに応じて、トークン欄コントロールはあなたの指定した遅延時間の後で、文字列補完機能を呼び出します。ユーザがカンマ文字を入力するか、Returnを押すと、それまでの文字列入力はトークンに変換されます。

トークンはドラッグすることが可能であり、（もしあなたがメニューに対応するためのコードを追加するのであれば）マウスポインタがその上に重なっているとき、コンテキストメニューのための開示三角形を表示します。

このメニューでは、あなたはそのトークンについての更なる情報と、トークンを操作するための手段を提供することができます。

たとえば、Mailでは、トークンメニューはトークンについての情報（名前に関連付けられた電子メールアドレス）を表示し、ユーザがトークンを編集したり、トークンに関連付けられた情報をアドレスブックへ追加できるようにする項目を表示します。

図 14-46（269ページ）は、トークンコントロールのさまざまな状態を示します（この例ではコンテキストメニューに対応していません）。

図 14-46 トークンコントロールの用例

選択されたトークン（キーボード入力前）
【（name） 】

ユーザのキーボード入力内容へと変更されたトークン
【（John Smith） 】

ユーザがReturn、Enter、Tabを押す前に、新たにキーボード入力があった場合
【 Iは挿入ポイント 】
【（John Smith）Robin SmithI 】

マウスポインタを上に重ねた、新しいトークン
【ポインタで指すことにより強調表示色が変化する】
【（John Smith）（Robin Smith）I 】

トークン欄の仕様

図 14-47 標準、小型、ミニ版のトークン欄の寸法

標準のトークン欄の寸法
高さ：22

小型のトークン欄の寸法
高さ：19

ミニ版のトークン欄の寸法
高さ：15

検索欄

検索欄【search field】は、両端が丸い文字列入力欄であり、検索対象とする項目を見分けるために、ユーザが新たな文字列を入力したり、既存の文字列を変更したりします。

あなたのアプリケーションで検索機能を提供するための方法についての詳細は、「Spotlight」（70ページ）を参照してください。

検索欄は活性、もしくは使用不能とすることができます。また、キーボードフォーカスに対応します。

もし、検索欄があなたのインタフェースの必要不可欠な部分となるのであれば、ユーザがマウスを使わずに検索欄に移動できるように、Command-Option-Fのキーボードショートカットを提供してください。

検索欄にラベルは不要です。

検索欄は、ユーザの入力に応じて検索を開始することもできますし、検索を開始するためにReturnやEnterを押す必要があっても構いません。

検索欄は、ユーザがさまざまな検索の種類を選ぶことができるように、またユーザが検索の文脈を定義できるように、もしくは、最近の検索結果の履歴を提供するために、メニューを含むことができます。

あなたは、現在のメニュー選択対象を表す、プレースホルダ【置き換え先、代替】文字列を提供することができます。すると、ユーザは検索の現在の文脈を、メニューを開く必要なく確認することができるようになります。

検索欄は、検索を停止したり、入力欄を消去するためのアイコンを含むことができます。

こうしたアイコンを使用することが適切なのは、ユーザが検索を開始するために、ボタンのクリックかキー押下を必要とする場合であり、特に検索のために1〜2秒以上かかる可能性があるときです。

もし、あなたがこのアイコンを使用するのであれば、長くかかる検索のために進行インジケータを表示することを検討してください。

複数の検索欄を提供する代わりに、一つのウインドウに一つの検索欄を置き、ポップアップメニューから利用できる、さまざまな文脈を持たせるのが適切です。

検索欄の仕様

図 14-48 標準の検索欄の寸法

（Round Text Field ）
高さ：22
文字列は13番目のピクセルから始まる

（♀Round Text Field ｘ）
【♀は虫眼鏡アイコン、ｘは停止アイコンのつもり】
アイコン領域は22 x 22
文字列は25番目のピクセルから始まる

図 14-49 小型の検索欄の寸法

（Search Field ）
高さ：19
文字列は12番目のピクセルから始まる

（♀Search Field ｘ）
アイコン領域は19 x 19
文字列は24番目のピクセルから始まる

図 14-50 ミニ版の検索欄の寸法

（Search Field ）
高さ：15
文字列は11番目のピクセルから始まる

（♀Search Field ｘ）
アイコン領域は15 x 15
文字列は21番目のピクセルから始まる

• 高さ：
  • 標準：22ピクセル
  • 小型：19ピクセル
  • ミニ：15ピクセル
• 間隔：
  • 標準：縦に重ねたコントロール間の間隔を、最低12ピクセル離してください。
  • 小型：最低10ピクセル離してください。
  • ミニ：最低8ピクセル離してください。
• 文字列：
  • 標準：システムフォント
  • 小型：小型システムフォント
  • ミニ：ミニシステムフォント

スクロールする一覧

スクロールする一覧【scrolling list】は、その内容を見せるためにスクロールバーを使用する一覧です。

スクロールする一覧は、必要なだけ多くの項目を格納することができます。ユーザは何も選択せずに、一覧の端から端までスクロールすることができます。また、選択するために項目をクリックすることができ、連続する一つ以上の項目を選択するためにShift-クリックを使用することができ、もしくは不連続な選択範囲のためにCommand-クリックを使用することができます。

ユーザは、一覧の端から端までを移動するために矢印キーを押すことができ、先頭の数文字を入力することで、すばやく項目を選択することができます。

もし、リストボックスに収めるには項目が長すぎるのであれば、中間に省略文字を挿入し、項目の始まりと終わりの部分を維持してください。ユーザは、よく書類の名前の末尾に版数を加えるため、始まりと終わりは共に見えていなければなりません。

限定された範囲の中で選択肢を提供するために、スクロールする一覧を使用しないでください。なぜかというと、【限定された】範囲全体を一度に見渡すことができないため、ユーザが自分で行った選択の範囲を把握することが難しいことがあるからです。

代わりに、「スライダコントロール」（259ページ）で述べられている、スライダを使用してください。

あなたが寸法を定義するときは、確実に、一覧が、完全な高さの文字列の行だけを表示するようにしてください（文字列が水平に切れてしまってはいけません）。そして、スクロールする際の増分は、必ず一覧の一要素分としてください。

スクロールする一覧の仕様

図 14-51 スクロールする一覧の寸法

枠：1ピクセル
12ポイントのフォント
ベースラインからベースラインまでは19ポイント

• 文字列：12ポイント
• 枠：1ピクセル幅

表示コントロール

以下のコントロールは、ユーザが情報の提示のされ方を変更できるようにしたり、どの情報を表示するかを選択できるようにします。

開示三角形

開示三角形【disclosure triangle】は、ウインドウの初期情報に関連付けられた、情報や機能の表示/非表示を可能にします。

開示三角形は、ポップアップメニューといった特定のコントロールと関連付けられた、追加の選択肢を表示するためには使用されません。もし、あなたがこれを行う必要があるのなら、開示ボタンを使用してください（「開示ボタン」（274ページ）を参照）。

開示三角形には二つの用途があります。小型【（簡易）】状態と拡張状態を持つダイアログでの用途、そして階層リストでの用途です。ダイアログにおける例は図 14-52を、階層リストにおける例は図 14-55（276ページ）を参照してください。

あなたが、何かについての簡潔なデフォルト表示を提供したいが、ユーザにより詳細な表示を可能とする必要がある、または、時として追加の動作を行う必要がある、そういったときに開示三角形を使用してください。

開示三角形は、デフォルトで右を指した、閉じた状態とする必要があります。ユーザが開示三角形をクリックしたとき、三角形は下を指し、追加情報が表示されます。

ダイアログでの開示三角形は、何が開示されるのか、または隠されるのかを示す、ラベルを持つ必要があります。理想的なラベルは、開示三角形の状態に応じて変化します。たとえば、閉じた状態では「高度な設定を表示する」、開くと「高度な設定を隠す」と述べます。

図 14-52 ダイアログの内容を、段階的に明らかにするために使用される開示三角形

開示三角形の仕様

図 14-53 開示三角形

• 大きさ：13 x 13ピクセル

開示ボタン

開示ボタン【disclosure button】は、ポップアップメニュー、コンボボックス、コマンドポップダウンメニューといった、特定の選択コントロールに関連付けられた、より広い範囲の選択肢をユーザに提供するために、ダイアログやユーティリティウインドウを拡張します。

これが、ウインドウの内容や区画と関連する追加情報や機能を表示する、開示三角形（「開示三角形」（272ページ）で説明しています）と、開示ボタンとの違いを生んでいます。

もし、特定の選択肢の一覧に対して、密接に関連していない追加のオプションを提供する必要があれば、開示三角形を使用してください。

開示ボタンによって拡張されたダイアログの例としては、拡張保存ダイアログ（図 14-54で示しています）があります。

簡易保存ダイアログ（図 13-39（220ページ）で示されます）は、ファイルを保存するための標準的な場所、そして最近使用した場所の一覧をユーザに提供するために、ポップアップメニューを使用します。

選択肢のより広い範囲を得るには、ユーザは開示ボタンをクリックします。開示ボタンは、ユーザに保存ダイアログの文脈から抜けることを要求せずに、ユーザの指先にファイルシステムを配置します。

図 14-54

デフォルトでは、開示ボタンは下を指した、閉じた状態とする必要があります。ユーザが開示ボタンをクリックしたとき、ウインドウが広がり、開示ボタンは上を指した状態に変化します。

開示ボタンはポップアップメニューや、その他、開示ボタンが作用する一覧形式の選択コントロール（コマンドポップダウンメニューなど）と揃える必要があります。

開示ボタンはラベルを伴うべきではありません。

リスト表示

リスト表示【list views、一覧表示】は、ユーザがサイズ変更、並べ替えを行うことのできる、表の中に並んだ記録を表示します。また、しばしばデータの属性を表す列を加えたり、減らしたりします。

列見出しを選択することにより、表の中の行を並べ替えてください。あなたは、裏で2番目の属性による並べ替えを実装することができます。しかし、ユーザは一度に選択された列が一つだけ見えている必要があります。 【「日付」の列見出しをクリックされたときに日付順で並べ替えて、さらに同じ日付の中で名前順に自動的に並べ替えることが可能であるが、クリックされていない「名前」の列見出しが強調表示されることはない。という意味。たぶん。】

もし、ユーザが既に選択されている列見出しをクリックしたら、並べ替えの方向を変更してください。

リスト表示は、一覧【リスト】の階層を見せるために、開示三角形を含むことができます。ただし、一つの列にだけです。（図 14-55を参照）

項目は、あなたのアプリケーションの目的によっては編集することができます。たとえば、Finderは、リスト表示のときは「名前」列の項目が編集できます。しかし、ほか【の列】はできません。

図 14-55 開示三角形付きのリスト表示

カラム表示

カラム表示【column view】コントロールは、階層でまとめられたデータから、表示と選択を行う手段をユーザに提供します。

• データを並べ替える方法が一つしかないとき、もしくは、あなたがデータを並べ替える唯一つの方法を提供したいとき、カラム表示は有効です。また、ユーザが頻繁に複数の階層の間を行き来する、ファイルシステムのような、深い階層に対しても有効です。
• カラム表示が情報の木構造を表しているのであれば、根【ルート】を左側にします。ユーザが項目を選択するのに応じて、フォーカスは右へ移動し、その枝【ブランチ】で可能な選択肢のいずれかを表示します。もしくは、選択肢がもうなければ、終端オブジェクトを表示します。ユーザが終端オブジェクトを選択したときは、あなたはそれに関する補足情報を、右端の列に表示することができます。

図 14-56 ファイルを表示するカラム表示

分割表示

分割表示【split view】は、カラム表示やリスト表示といった、二つ以上の表示をグループ化し、ユーザにこれらの表示の相対的な幅や高さを調節できるようにします。

分割表示は子表示の間に分割バーを含みます。たとえば、五つの子表示を持つ分割表示は、四本の分割バーを持つことになるでしょう。

分割表示は、その子表示を、（垂直分割バーで）横並び、（水平分割バーで）縦並びのいずれかで表示することができます。

単一の分割表示は、垂直方向と水平方向の子表示の組み合わせを表示しません。けれども、単一のウインドウは、互いに異なる方向を表示する、別々の分割表示を格納することができます。これがどのように見えるかの例は、図 15-11（299ページ）を参照してください。

ユーザは、分割バーの任意の場所をドラッグすることで、子表示の相対的な幅か高さを調節できます。分割バーは、ユーザにドラッグできることを示すために、中点に丸いくぼみを表示します。加えて、分割バー全体がホットゾーン【ドラッグ対象】です。言い換えると、マウスポインタが分割バーのどこかの部分を通過すると、カーソルは移動、もしくはサイズ変更カーソルのどれかに変化します（表 11-1（143ページ）に示しています）。

もし、ユーザが分割バーを、分割表示の端まで（または隣の分割バーまで）完全にドラッグしたら、子表示は非表示となる必要があります。ただし、分割バーは非表示とすべきではありません。分割バーは、隠れた子表示があるということをユーザに思い出させ、それを見えるようにすることを簡単にするために、表示の中に留まる必要があります。

金属風ウインドウにおける分割バーの幅は、標準ウインドウにおける幅と異なります。金属風ウインドウでは、分割バーの幅は（図 14-57（278ページ）に示すとおり、）7ピクセルです。

図 14-57 金属風ウインドウでの分割バー

幅：7

標準アクアウインドウでは、分割バーの幅は図 14-58（278ページ）に示すとおり、9ピクセルです。

図 14-58 アクアウインドウでの分割バー

幅：9

タブ表示

タブ表示【tab view】は、複数ペイン形式で情報を提示するための、便利な手段を提供します。タブコントロールは、内容領域の上端を横切るように、水平方向の中央に表示します。

コントロールの下の内容領域は、ペイン【pane、区画】と呼ばれています。タブ表示を持つウインドウでは、あなたは押しボタンや文字列入力欄といった、その他のコントロールを使用することができます。

コントロールは大域—すべてのペインの設定に作用する—とすることも、個々のペインに特有のコントロールとすることもできます。コントロールが一つのペインに作用するのか、それともすべてのペインに作用するのかは、ラベルの表記と配置（ペインの境界の中か外か）を通して、明確にしてください。

分割されたコントロールは、ペインの間を切り替える手段を提供します。これはタブ表示と同じように見えますが、こちらはペインにくっついていません。「分割コントロール」（244ページ）を参照してください。

タブ表示の仕様

図 14-59 標準のタブ表示の寸法

タブコントロール（タブバーとタブペインを含めて）
タブバー
タブの高さ：20
各タブの端から文字列までの間隔：12
タブペイン

図 14-60 小型のタブ表示の寸法

タブの高さ：17
各タブの端から文字列までの間隔：10

図 14-61 ミニ版のタブ表示の寸法

タブの高さ：15
各タブの端から文字列までの間隔：8

• 文字列：
  • 標準：システムフォント、タブ内で両端から12ピクセル離して中央揃え【タブが文字列の長さに合わせる】
  • 小型：小型システムフォント、タブ内で両端から10ピクセル離して中央揃え
  • ミニ：ミニシステムフォント、タブ内で両端から8ピクセル離して中央揃え
• タブの高さ：
  • 標準：20ピクセル
  • 小型：17ピクセル
  • ミニ：15ピクセル

ペインは、ウインドウの一つの端からもう一方の端まで達することができます。または、ウインドウの中にはめ込むことができます。図 14-62は、ウインドウの一つの端からもう一方へ達するペインの例を示しています。

図 14-62 端から端までのタブペイン

タイトルバー下端からタブバー上端までの垂直間隔：12または14
タブバー下端からペインの内容領域までの垂直間隔：10
ウインドウ左端から内容領域左端までの水平間隔：20
ウインドウ下端から内容領域下端までの垂直間隔：20
【ウインドウ左右の端からタブバー左右の端までの】間隔は両側で等しくする必要があります。

はめ込み式のタブペインについては、推奨される枠はウインドウの内側各端から20ピクセルですが、16ピクセルも許可されています。あなたは、タブペインの下に、押しボタンのような大域コントロールのための空間を残しておくようなウインドウを定義することができます。図 14-63は、ペインの下にボタンがある、ウインドウの中にはめ込まれたタブペインの例を示します。

図 14-63 ウインドウの端から中に寄せたタブペイン

タイトルバー下端からタブバー上端までの垂直間隔：12または14
タブバー下端からペインの内容領域までの垂直間隔：10
ウインドウ左端からペイン左端までの水平間隔：20
ウインドウ右端からペイン右端までの水平間隔：20
ペイン下端から大域コントロール（ボタン）上端までの垂直間隔：12
大域コントロール下端からウインドウ下端までの垂直間隔：20
【ペイン左右の端からタブバー左右の端までの】間隔は両側で等しくする必要があります。

CarbonとCocoaの間の、タブ表示の寸法の違い

あなたが、Interface Builderの青いアクアガイド【位置指定用補助線】に従うとき、CarbonとCocoaのウインドウの間では、タブ表示の垂直間隔が3ピクセル異なります。これは、ウインドウの二つの種類によって異なる切り取り線【clipping line】からアクアガイドが算出されるためです。

ほとんどの開発者は、CarbonとCocoaのウインドウを同一アプリケーションの中で混在させることはないので、これが問題となることはありません。

あなたは、ユーザインタフェースをデザインするためにInterface Builderを使用するときは、アクアガイドにこれまでどおり従うべきです。

図 14-64（282ページ）は、垂直間隔の違いを示しています。どちらのウインドウでも、ポップアップメニューは、切り取り線から20ピクセル下である、青いアクアガイドに合わせて配置されました。

図 14-64 CarbonとCocoaの間の垂直タブ表示間隔の違い

Cocoaのタブ表示における垂直間隔
タブバー上端からペイン内のコントロールの上端まで：47

Carbonのタブ表示における垂直間隔
タブバー上端からペイン内のコントロールの上端まで：50

以前のバージョンのMac OS Xとのタブ表示の違い

タブ表示の大きさは、Mac OS X バージョン 10.2（Jaguar）と、Mac OS X バージョン 10.3（Panther）の間で変更されました。Mac OS X 10.4（Tiger）では、タブ表示についての大きさの変更はありません。

このセクションでは、以前の大きさについての変更が、バージョン10.3以前のMac OS Xで動作する必要のあるアプリケーションに、どのような影響を与えるかについて、述べています。

もし、あなたがMac OS X v10.3以降のみに対応するのであれば、何もする必要はありません。「タブ表示」（279ページ）のガイドラインに従ってください。

もし、あなたがMac OS X v10.3に加えて、Mac OS X v10.2（以前）に対応する必要があれば、あなたは違いに配慮する必要があります。

Mac OS X v10.2のタブは、タブの天辺からタブの下の棒の底辺まで、高さが29ピクセルありました。Mac OS X v10.3以降のタブは、高さは20ピクセルだけです。

これが意味しているのは、もしあなたがユーザインタフェース要素をMac OS X v10.2向けにデザインしていたら、Mac OS X v10.3で見られたときには、タブの下に余計な4ピクセル、上に5ピクセルの空間が生まれるということです。

図 14-65 Mac OS Xバージョン間のタブ表示の違い

Mac OS X v10.2
タイトルバー下端からタブバー上端まで：12

Mac OS X v10.3
タイトルバー下端からタブバー上端まで：17

あなたのユーザに配慮して、あなたはタブを使わないようにするか、新しい間隔も可能にしつつ、Mac OS X v10.2のタブ表示周りの間隔の仕様に固執するか、あなたのインタフェースをどちらにデザインしなおすかを決める必要があります。

グループ化コントロール

分割線とグループボックスは、ウインドウの中でほかのコントロールをグループ化するために使用されます。グループボックスと分割線のどちらを使用するかを決定する指針とするため、またこれらを用いた配置の例について、「ウインドウ内でコントロールをグループ化する」（303ページ）を参照してください。

分割線

分割線【separators】は、ウインドウを個々の視覚的な部分に分割するために使用されます。分割線は垂直か水平のどちらかで配置されます。

これらは通常、ウインドウの幅全体にかかるべきではありませんが、ウインドウ内のコントロールの端とはそろえるべきです。

分割線にラベルが伴うことがあります。分割線は、ラベルの文字列の基準線に置く必要があります。

分割線の仕様

図 14-66 分割線

• ラベル文字列の大きさ：
  • ほかのコントロールが標準のとき：システムフォント
  • ほかのコントロールが小型のとき：小型システムフォント
  • ほかのコントロールがミニ版のとき：ミニシステムフォント
• 間隔：ラベル文字列は線から2ピクセルとするべきです。

グループボックス

グループボックス【group boxes】は、分割線と同様に、ウインドウを明確な論理的領域に切り分けるために使用されます。グループボックスは、分割線よりももっと明示的な分割を提供します。あなたが、あるコントロールの組を、単一の要素として捉えて欲しいときにグループボックスを使用してください。

グループボックスが散らかって見えないように、あまり多くのコントロールを置くことは避けましょう。

グループボックスは、タイトルを付けても付けなくても構いません。もしタイトルを付けるのであれば、文字列のみのタイトル、チェックボックスのタイトル、ポップアップメニューのタイトルを付けることができます。

もしグループボックスがチェックボックスのタイトルを使うのであれば、チェックボックスがチェックされているときのみ、グループボックス内の項目を活性にする必要があります。

ポップアップメニューのタイトルは、中央揃えとするか、グループボックスの左側から14ピクセルにするかのどちらかとする必要があります。

図 14-67 グループボックスの種類

ポップアップメニュー付きグループボックス
ラベル付きグループボックス
ラベルなしグループボックス
ラベル付きグループボックス

グループボックスの仕様

図 14-68 文字列のみのタイトル付きグループボックス

グループボックス左端からタイトルの左端まで：14
タイトル下端からグループボックス上端まで：4

図 14-69 チェックボックスのタイトル付きグループボックス

グループボックス左端からチェックボックスの左端まで：14
タイトル下端からグループボックス上端まで：4

図 14-70 ポップアップメニューのタイトル付きグループボックス

グループボックス左右端からポップアップメニューの左右端まで：均等な間隔

もし、あなたがグループボックスを入れ子にする決定をしたら、これらの内部間隔のガイドラインに従ってください。

図 14-71 グループボックスの間隔

タイトルバー下端から、グループボックスのタイトルであるポップアップメニューの上端までの間隔：14
ウインドウ左端から、グループボックス左端までの間隔：20
ウインドウ右端から、グループボックス右端までの間隔：20
親グループボックスのタイトルであるポップアップメニュー下端から、子グループボックスのタイトルであるラベルの上端までの間隔：4
親グループボックス左端から、子グループボックス左端までの間隔：12
親グループボックス右端から、子グループボックス右端までの間隔：12
子グループボックスの下端から、その下の子グループボックスのタイトルであるラベルの上端までの間隔：12

• ラベル文字列の大きさ：
  • 標準：システムフォント
  • 小型：小型システムフォント
  • ミニ：ミニシステムフォント
• 間隔：グループボックスの端は、ウインドウの端から最低20ピクセル離してください。

---

←第１３章：ウインドウ
→第１５章：配置の例