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

第15章

配置の例

この章には、あなたのウインドウの中にコントロールを配置するための、特定のガイドラインに加えて、例となるウインドウとダイアログの配置が含まれています。

標準の大きさのコントロールを配置する

与えられたウインドウの中で、コントロールを整理するためのやり方はたくさんありますが、あなたのアプリケーションが清潔感のある、均整の取れたアクアの外見を持つために従うべき、ガイドラインがあります。

このセクションは通常のコントロールを用いた、ウインドウとダイアログの適切なデザインの例を提供します。

ミニ版と小型版のコントロールを用いる際のガイドラインは、「小型及びミニ版コントロールを使用する」（299ページ）を参照してください。

一部のガイドラインは示される例について特有のものですが、大半はあらゆるダイアログとウインドウに適用できる、一般的なガイドラインです。

特に記載の無い限り、全ての寸法はピクセル単位です。

単純な環境設定ダイアログ

図 15-1はとても単純な環境設定ダイアログを示しています。より高度な環境設定ダイアログは、さまざまなセクションを利用するためにツールバーを用いるであろうという点に注意して下さい。

図 15-1 環境設定ダイアログの例

このダイアログは中央均等のダイアログのよい例です。Mac OS Xにおいて、コントロールは常にウインドウ内において中央均等とすべきです。OS9を含む他のプラットフォームでは、コントロールはよく左揃えにされます。

中央均等とは、単純に、視覚的な比重がダイアログの内容領域の左右の側で均整が取れていることを意味します。ダイアログの持つ項目数や、文字数の正確な中心に引いた、架空の線に対して、左右を中央揃えするという意味ではありません。

図 15-2は均等揃えの強調表示です。右側にはより多くのオブジェクトがありますが、左側にある分類のためのラベル【表記】によって均整が保たれています。最終的には視覚的な均整の取れたダイアログとなります。

図 15-2 環境設定ダイアログにおける中央均等

ラベルとコントロールがグループの中に列挙されるとき、これらは垂直に並べられます。

図 15-3において、区分の大項目のコロンが右揃えである点と、チェックボックスとラジオボタンが左揃えである点に気をつけて下さい。

図 15-3 環境設定ダイアログにおけるラベルとコントロールの整列

右揃えのラベルとラベルのコロン

左揃えに並べられた項目

ダイアログをデザインするとき、心に留めておくべき間取りの規定についてのガイドラインがあります。

「コントロール」（231ページ）は互いに関連するコントロールを整理するためのガイドラインを提供しますが、この章ではどのようにしてこれらのコントロールを関連するウインドウの中に整理するかを見ることができます。

以下は図 15-4から簡単に見つけることのできるいくつかのガイドラインです。

グループボックスやタブ表示の中ではないコントロールは、タイトルバーから14ピクセルの位置とします。
ダイアログの左側、右側、下側いずれも20ピクセルの余白を取ります。
標準の大きさのコントロールは、コントロール間を8ピクセル離します。
分割線の上下は最低12ピクセル離します。
一番下のコントロールのグループと、ボタンの間は最低16ピクセル離します。（図 15-4の例では18ピクセルあります）

図 15-4 環境設定ダイアログにおける配置の寸法

20 8

ペインが変更できるダイアログ

図 15-5に示すような、ペインが変更できるダイアログは、「単純な環境設定ダイアログ」（289ページ）で概説したものと同じガイドラインに従います。ただし、これまで見てきた同じ基本ガイドラインの多数の別の実装に加え、いくつかの新しいガイドラインを図示しています。

図 15-5 ペインが変更できるダイアログの例

図 15-6で再び中央均等であることをはっきりさせています。ウインドウの全体の効果は、見えない中央の軸線の片方にあるコントロールの視覚的な重さと、もう片方のコントロールの重さの間で均整が取れています。

コントロールはまた、それぞれの側のグループボックスにある、最も遠いコントロールからの距離が、左右ともに等しくなる（この例では41ピクセル）ように、グループボックスの内部で集団としての均整が取れています。

ウインドウ内のタブ表示は常に中央です。

図 15-6 ペインが変更できるダイアログにおける中央均等

図 15-7はコントロール配置についての少数のガイドラインを図解しています。

重ねたラベルは右揃えにします。
重ねたコントロールは適切なときには左揃えにします。
同じようなコントロールは一貫した幅にします。たとえば、フォントポップアップメニューと、大きさコンボボックスは、2つのグループボックスにおいて同じ大きさです。

図 15-7 環境設定ダイアログにおけるラベルとコントロールの整列

右揃えのラベルとラベルのコロン

左揃えの重ねた項目

一貫したコントロールの幅一貫したコントロールの幅

図 15-8は以下の間取りについてのガイドラインの図解です。

タブの天辺からタイトルバーの底辺までは、12ピクセル離します。
ラベルを囲むテキストボックスは、表示を含むコントロールから少なくとも2ピクセル下にします。
グループボックスの中では、コントロールとグループボックスの端の間の余白を、最低16ピクセル離してください。この例のグループボックスのひとつは、最小の16ピクセルの縁よりも視覚的に均整がとれるため、18ピクセルの枠を使用しています。
ダイアログの左側、右側、下側はいずれも20ピクセルの余白をとります。

図 15-8 ペインが変更できるダイアログのための配置の寸法dialog

20 16 20

標準的な警告表示

CarbonやCocoaが提供する、標準的な警告ダイアログの例を図 15-9に示します。

図 15-9 標準的な警告表示の例

CarbonやCocoaが提供する、標準的な警告ダイアログは、あなたのために一般的な配置を考慮していますが、あなたが責任を持つ多少の細かい点があります…

警告表示の中で使用するための、あなたのアプリケーションアイコンは必ず64 x 64ピクセル版にしてください。
必ず本文と説明文の両方を含むようにしてください。本文だけの警告表示は不完全であり、一般的にユーザのためにとても役に立つとはいえません。
常に動作ボタンを警告表示の右下角においてください。動作ボタンとはユーザが、警告表示が行われる前に意図していた動作を完了するボタンです。動作ボタンは、この例のように常にデフォルトボタンであるとは限らないことを忘れないで下さい。危険な状況においては、デフォルトボタンはキャンセルとなるでしょう。しかし、キャンセルは動作ボタンとすべきではないので、動作ボタンの位置に配置してはいけません。

図 15-10は標準的な警告画面の間取りのガイドラインを示します。

警告ダイアログをデザインする際の詳細は、「警告表示の要素」（210ページ）を参照してください。

図 15-10 標準的な警告表示のための配置の寸法

24 16

64 x 64 12 24

磨かれた金属風アプリケーションウインドウの例

「磨かれた金属風ウインドウ」（187ページ）で述べたとおり、磨かれた金属風ウインドウをアプリケーションウインドウとして使用することが適切なときがあります。磨かれた金属風ウインドウはここに挙げ、そして図 15-11に示すとおり、標準的なアクアウインドウのものとはわずかに異なる間取りのガイドラインを持ちます。

ウインドウの天辺や、他のコントロールの天辺にあるコントロールは、ウインドウの底辺から9ピクセル離します。
ツールバーコントロールの底辺とその他のコントロールの間は、12ピクセルの間隔を空けます。
左右の枠は14ピクセルの幅にします。
底辺の枠は18ピクセルの幅にします。
分割バーはすべて同じ幅（ここでは共に9ピクセル）にします。

これらの磨かれた金属風ウインドウに特有のガイドラインに加えて、図 15-11には磨かれた金属風ウインドウと標準的なアクアウインドウの双方に適用される注意点が二つあります。

水平に整列したボタンの間は、最低12ピクセルは離すようにしてください。
水平に整列したボタンをグループ化するときは、グループの間に最低24ピクセルの間隔を空けてください（ここでは間隔を28ピクセルとしています）。

図 15-11 磨かれた金属風アプリケーションウインドウのための配置の寸法

12 9 28 12 12

小型及びミニ版コントロールを使用する

小型版のコントロールは、必要なときにのみ使用してください。あなたのアクアのデザインにおける最初の選択は、常に標準の大きさのコントロールを用いたものとしましょう。

あなたはツールパレット、その他のユーティリティウインドウ、Automatorのアクション（Automatorの詳細は、「Automator」（62ページ）を参照）といった、空間が貴重なときに小型版のコントロールを使用することができます。同じウインドウの中で異なる大きさのコントロールを混在させることは避けてください。

ペインが変更できるウインドウにおいて、ペインの内部で小型やミニコントロールを使用し、ペインの外側で標準コントロールを使用することはかまいません。ですが、ウインドウのすべてのペインで同じ大きさのコントロールを使用してください。

小型コントロールの配置の例

図 15-12は上手にデザインされた、小型コントロールを持つユーティリティウインドウを示しています。

図 15-12 小型コントロールを持つユーティリティウインドウの例

標準の大きさのコントロールを使用したときと同じく、コントロールの配置のために中央均等の手法をとる努力をしてください。この視覚的な均衡のとれた配置は、図 15-13で見ることができます。

図 15-13 小型コントロールを持つユーティリティウインドウにおける中央均等

標準の大きさのコントロールの場合と同様、小型（およびミニ）コントロールは重ねられるときには垂直に揃えてください。同じコントロールは一貫した幅を持ち、互いに揃えられるようにしてください。図 15-14を参照しましょう。

図 15-14 小型コントロールを持つユーティリティウインドウにおけるラベルとコントロールの整列

左揃えの重ねられた項目

右揃えのラベルとラベルのコロン

左揃えの重ねられた項目

コントロールの幅の一貫性

図 15-15が示すとおり、小型コントロールは、標準コントロールのものとは異なる間取りのガイドラインを持ちます。

ツールバーやタイトルバーと内容の天辺は、8〜10ピクセル離します。
ラベルを囲む文字列ボックスは、他のコントロールの最低2ピクセル下にします。
左右の枠は10ピクセルにします。
コントロールはグループボックスの最低10ピクセル内側にします。
底辺の枠は12ピクセル離します。
グループ化された内部では、個々のコントロールの間取りガイドラインに従ってください。「コントロール」（231ページ）を参照してください。

もしあなたのウインドウが、図 15-15のユーティリティウインドウのようにツールバーを持つのであれば、ツールバーボタンは16 x 16アイコンに適応できる十分な大きさにしてください。

図 15-15 小型コントロールを持つユーティリティウインドウのための配置の寸法

ミニコントロールの配置の例

図 15-16は上手にデザインされた、ミニコントロールを持つユーティリティウインドウを示しています。

図 15-16 ミニコントロールを持つユーティリティウインドウの例

小型コントロールと同じく、ミニコントロールは固有の間取りガイドラインを持ちます。

「コントロール」（231ページ）の間取りガイドラインに加えて、以下のガイドラインが図 15-17で図解されます。

左右の枠は10ピクセルにします。
底辺の枠は12ピクセルにします。
コントロールのグループ同士は、最低8ピクセルの間隔で分割してください。

図 15-17において、小型コントロールの場合と同様に、ツールバーのボタンは16 x 16のアイコンに適応できる十分な大きさとすることに気をつけて下さい。またタブ表示の内側で、グループボックスや空白の代用としての分割線の使いかたに注意してください。ウインドウがよりコンパクトになります。他の分割線の使用例は「グループ化コントロール」（303ページ）で図解しています。

図 15-17 ミニコントロールを持つユーティリティウインドウのための配置の寸法