gestalt-ui-organisation

Gestalt UI の構成

UI は、ラベルやドキュメントを読まなくても、どのコマンド、コントロール、要素がまとまりとして属しているのかを視覚的な構造で伝えられるように構成します。

UI レイアウトにおける Gestalt の基本原則

1. 近接

近くにある要素は、ひとまとまりとして認識されます。

• 関連するコントロール（例：Bold／Italic／Underline）は、間隔を最小限にして近くに配置します
• 関連のないグループは、より広い余白で区切ります
• 線や枠線を主なグループ化の手段として使わないでください。近接だけで関連性が伝わるようにします

例： [Cut] [Copy] [Paste] を近くにまとめ、その後に [Undo] [Redo] まで広めの間隔を設けたツールバーは、視覚的な区切り線がなくても、2 つの異なるコマンドグループを伝えます。

区切り線より余白を優先する

グループ化には、区切り線ではなく余白を基本として使います。多くの場合、区切り線が担う役割は余白のほうがうまく果たします。情報を増やさずに視覚的なノイズや「枠に囲まれた」印象を加えるだけなので、大半は取り除き、近接によってグループを表現します。

注意点：線はほとんど場所を取りません。そのため、取り除くとグループ同士が近づきすぎることがあります。**区切り線を削除する場合は、通常、余白を増やす必要があります。**線を削除してレイアウトを窮屈なままにするのではなく、余白（必要に応じて控えめな背景や見出し）を確保します。

距離が離れるほど区切りが必要になる

要素が密集していれば、それぞれ自然に区別されます。離れている要素には、区別するための工夫が必要です。短い行が並ぶコンパクトなテーブルは、各行が関連する要素のすぐ隣にあるため、線がなくても読めます。同じテーブルでも全幅にしたり、行を高くしたりすると、行の線やゼブラストライプが必要になります。そうしないと、行を目で追うときに視線が迷ってしまいます。

そのため、問題は「線を使うか、使わないか」ではなく、要素同士がどれだけ離れているかです。その間隔を埋めるために、最も控えめな手段を次の順に選びます：間隔、控えめな塗りやストライプ、細い線、枠で囲んだ領域。サイズに応じて使い分けます。幅広のテーブルには行の線を入れ、サイドバー内のコンパクトな表示では線を省いてもかまいません。

原因と結果は近くに置く

近接は時間にも関係します。クリックによって表示される内容は、クリックした場所の隣に表示します。左側のメニューを開いたときに、右端から離れた位置にコンテンツが表示されると、選択のたびに視線が画面全体を横切り、ユーザーは毎回位置を把握し直さなければなりません。

• コンテンツはペインの中央ではなく、左端に配置します。メニューの終わる位置からコンテンツを始めます。
• ペインの左上にページタイトルと主要なアクションを配置し、選択されたメニュー行と同じ高さに揃えます。こうすることで、最初に目を向ける場所がクリック位置のすぐ近くになります。
• 幅の広い画面では、幅の狭いメニューと幅広のフィールドを 1 つずつ並べるより、幅の狭い 3 つの列（メニュー、リスト、詳細）を優先します。視線は全幅を移動せず、列を 1 つずつ移動します。
• 選択された行を強調表示し、コンテンツを左から少し動かして表示することで、動きが視線を導くようにします。
• どのビューでも同じ方法を使います。ある画面ではクリックの隣に応答が表示され、別の画面では遠くに表示されるようでは、ユーザーは応用できることを何も学べません。

2. 類似性

見た目が似ている要素は、関連していると認識されます。

• 機能上のグループ内では、色、形、大きさ、アイコンを一貫させます
• 位置だけに頼らず、視覚的なコントラスト（形、塗り、大きさ）でグループを区別します
• 主要なアクションと副次的なアクションは、見た目ではっきり区別します

例： 破壊的なアクション（Delete、Remove）には、建設的なアクション（Save、Add）とは異なる色を使い、意図の異なるグループであることを示します。

3. 共通領域

共通の領域に囲まれた要素は、ひとまとまりとして認識されます。

• 論理的に関連するコンテンツは、カード、パネル、または背景色で囲みます
• 関連のない要素を同じコンテナーにまとめないようにします
• 入れ子になった領域は、論理的な階層構造を反映する必要があります

領域に枠線は不要ですが、枠線がない場合は余白が必要です。 枠線や塗りつぶし、または余白だけでも囲みを表現できます。カードに枠線も背景もない場合、十分な内側のパディングと隣り合うカードとの明確な間隔によって、ひとつの領域として認識されます。枠線がその役割を担わない場合、余白を削ると、個別のカードがひとつのぼやけたまとまりになってしまいます。枠線なしは問題ありませんが、窮屈で枠線もない状態は避けましょう。

例： フォームのセクションを枠線付きのカードにまとめると、各カード内のフィールドが論理的なひとまとまりであることを示せます。

4. つながり

線や視覚的なリンクでつながっている要素は、関連していると認識されます。

• 実際に関係がある場合に限り、コネクター、線、またはフロー矢印を使います
• ナビゲーションツリーやノードベースのエディターでは、表示されるつながりをデータの関係と正確に一致させます

5. 図と地

ユーザーは、前景のインタラクティブ要素と背景のコンテキストを区別します。

• インタラクティブなコントロールは、背景に対して十分なコントラストを確保します
• 無効化された情報やコンテキスト情報は、視覚的に目立たなくします（コントラストを下げる、ウェイトを軽くする）
• モーダルやオーバーレイは、背後のコンテンツ層と明確に区別できるようにします

6. 連続性

視線は滑らかな経路や線をたどります。

• 関連するコントロールは、一貫した軸（左端、ベースライン、または中心線）に沿って配置します
• 論理的なまとまりの中で配置の整列を崩さないようにします
• グリッドに沿ったレイアウトは、軸の連続性を共有することでグループ化を強化します

レビューチェックリスト

UI レイアウトがゲシュタルトの原則に準拠しているか確認する際は、次の点をチェックします。

• 初めて使うユーザーでも、ラベルを読まずにどのコントロールがひとまとまりか判断できますか？
• 枠線や線だけに頼らず、グループ化の主な手掛かりとして近接性を利用していますか？
• 視覚的に似ている要素は、同じ機能的な目的を持っていますか？
• 関連のないグループは、意味のある余白で区切られていますか？
• クリックの結果はクリック位置の近くに表示され、どの画面でも同じ位置に現れますか？
• 余白で代替できる不要な区切り線を取り除き、その分の間隔を追加していますか？
• 視覚的な階層は、操作上の階層（主要 > 副次 > 第三）と一致していますか？
• 破壊的な操作や取り消せない操作は、建設的な操作と視覚的に区別されていますか？
• すべてのインタラクティブ要素で、図と地のコントラストは十分ですか？

よくあるアンチパターン

アンチパターン	問題	修正方法
機能に関係なく、すべてのボタンのサイズと色が同じ	類似性の原則に反しており、すべての操作が同等であるという印象を与えます	主要、副次、破壊的な操作を視覚的に区別します
関連するコントロールが画面の離れた場所に分散している	近接性の原則に反しており、ユーザーが関連性を認識できません	関連するコントロールを近くに配置します
左側にメニューがあり、コンテンツが大きく離れた右側から始まる	選択のたびに視線が画面を横切ります	コンテンツを左側に寄せ、タイトルを選択中の行と同じ高さに配置します。画面が広い場合は中央の列を追加します
要素のグループ化に区切り線を多用する	空間的な論理ではなく装飾に頼っています	代わりに余白と近接性を使います
すべての要素の間隔が同じ	グループ化の手掛かりがなく、すべてが平坦なリストに見えます	8pt/4pt の間隔スケールを適用します。グループ内は狭く、グループ間は広くします
1 つのツールバーに異なるスタイルのアイコンが混在している	類似性が崩れ、異なる機能のまとまりである印象を与えます	ツールバーごとに、一貫したアイコンセットとウェイトを使用します