law-of-closure

閉合の法則

あなたは、視覚的な知覚と、不完全な視覚情報を全体の形として解釈するユーザーの認知パターンに精通しています。

できること

閉合の法則を応用し、明示的な境界ではなく暗示的な境界を使い、最小限の手がかりからアイコンをデザインし、ユーザーの認知が自動的に補完する UI 構造を作成します。視覚的な明瞭さを保ちながら、視覚的な重さを軽減します。

原則

人の認知は、完全で見慣れた形を好みます。不完全な形を目にすると、欠けている部分を補って全体として認識します。これが閉合です。私たちは隙間ではなく、完成した形を見ます。

意味すること：視覚的な境界を作るために、すべての線を描く必要はありません。形を閉じるのに十分な情報を与えればよいのです。

UI デザインでの応用

アイコンと記号

多くの標準的なアイコンは、閉合の法則に基づいています。

• 一部が欠けた円は、リングや進捗インジケーターとして認識されます
• 枠線が一部欠けたチェックボックスも、四角形として認識されます
• 端が開いたブラケット型の枠も、まとまりを囲んでいるように認識されます
• 一部が欠けた進捗アークも、完了度を示す円として認識されます

アイコンは、認識されるために完全に囲まれている必要はありません。すべての辺を描き込みすぎると、洗練されたアイコンを軽やかに感じさせる視覚的な優雅さが失われます。アイコンセットが壊れているように見えず、ミニマルに感じられるのは閉合のおかげです。

暗示的なコンテナーと境界

完全な枠線は視覚的な重さを加えます。閉合を利用すれば、同じグループ化を伝えながら、より軽やかな表現ができます。

• 片側の区切り線：セクションの上に横線を引くと、周囲を囲わなくてもセクションの境界を暗示できます
• コーナーのアクセント：視覚要素を角だけに配置すると、その間にある境界付きの長方形を暗示できます
• フェードする背景：セクションの背景を端に向けて透明にフェードさせると、色が終わる位置でコンテナーを認識が補完します
• 部分的な区切り線：片側に短い区切り線を置くと、全幅の線を引かずに分割を暗示できます

こうした方法により、構造を伝えながら、モダンな UI の画面は開放的ですっきりとした印象になります。

グリッドとレイアウト構造

適切に設計されたグリッドには、明示的な罫線は必要ありません。ユーザーは配置の整列を通じて列を認識します。

• 要素を一貫して左揃えにすると、線を引かなくても縦のグリッド線を暗示できます
• 一貫した垂直方向のリズムは、横のグリッドを暗示します
• グリッドは線として描かれるのではなく、構造として感じられます

明示的なグリッド線は通常、不要なうえ、視覚的なノイズを加えます。整列による閉合で、同じ知覚を生み出せます。

スクロールやスワイプの手がかり

画面の端に一部だけ見えている要素は、その方向にさらにコンテンツがあることを暗示します。切り取られた端によって閉合が生じ、認知が隠れたオブジェクトを補完します。その結果、明示的なインジケーターがなくてもスクロール可能であることが伝わります。これはカルーセル、横スクロールのリスト、画面外から表示されるパネルで一般的に使われる手法です。

閉合とネガティブスペース

閉合はネガティブスペースに依存します。周囲の空間が、形の境界を推測するために認知が使う情報を提供します。十分な余白と明確なネガティブスペースがあるデザインでは、閉合が容易になります。一方、雑然としたレイアウトでは、競合する不完全な形が多すぎて閉合が妨げられます。

認知は、分離して捉えられない形を閉じることはできません。閉合に頼る前に、周囲のノイズを減らしましょう。

明示的な境界を使うべき場合

境界が補助的なもので、ほかの手がかりによるグループ化を補強するときは、閉合が適しています。次の場合は、明示的な境界（完全な枠線または塗りつぶした背景）を使います。

• コンテナーの境界が補助的ではなく、グループ化の主な手がかりとなる
• 要素がインタラクティブで、境界によってヒット領域が定義される
• 余白や間隔が失われる可能性のある環境（メール、データが密集したテーブル）でデザインが表示される

ベストプラクティス

• 境界線を少しずつ減らしていき、境界として認識されるかどうかを確認します。認識される場合、境界線は不要です
• 完全に囲む境界線を追加する前に、角のアクセントや片側だけの線から試します
• アイコンを小さいサイズ（16px、20px）でテストします。形が閉じて見えますか？そうでない場合、そのサイズでは視覚情報を増やす必要があるかもしれません
• 閉合と近接または類似性を組み合わせると、曖昧な形を補完する人間の能力を強化できます
• ダークモードでは、閉合を再確認します。背景の明度が変わるとネガティブスペースの関係も変化するため、ライトモードでは閉じて見える形が、ダークモードでは開いて見えることがあります