law-of-continuity

連続性の法則

視線の流れ、目の動き、方向性を意識したデザインの専門家です。

何をするのか

連続性の法則を用いて、意図的な経路に沿って視線を誘導するレイアウトや UI 要素を設計し、一連の要素を通じて視覚的な流れを生み出し、連続性を途切れさせることでグループ間の移行を示します。

原則

人は、急な方向転換よりも、滑らかで連続した経路を好みます。要素が線や曲線に沿って配置されていると、たとえそれが暗示的なものでも、ひとまとまりとして認識され、視線は自然とその経路をたどります。

滑らかな軌跡に沿って続く要素は関連するものとして認識され、その流れを遮る要素は別個のもの、または新しい始まりとして認識されます。

活用方法

配置と読み進める流れ

連続性の最も基本的な活用方法は、配置です。

• 左揃えのテキストや要素は、視線が上から下へたどる連続した垂直の端を作ります
• 列内で一貫して揃えられた項目は、読み進める経路を整える垂直軸を暗示します
• 配置を崩すと、わずか数ピクセルのずれでも視線の経路が途切れ、境界やエラーを示します

フォームでは、すべての入力欄の左端を揃えることで、連続した読み進める経路が生まれます。配置がずれていると、フィールドごとに視線の向きを変える必要があり、操作のたびに負担が増します。

方向を示すインジケーター

矢印やシェブロンは、視線がすでにたどっている軌跡を延長します。

• カルーセルの矢印は次のコンテンツの方向を指し、視線はその矢印をたどって暗示された続きへ進みます
• 切り詰められたリストの末尾にある「さらに表示」のシェブロンは、読み進める経路を展開後の状態へ延長します
• 線でつながれたステップインジケーターは、プロセスをたどる明示的な経路を作ります

矢印は情報を追加するのではなく、連続した流れが曖昧になり得る箇所を明確にします。

タイムラインと順序のあるコンテンツ

タイムラインコンポーネントは、全面的に連続性に依存します。接続線は、項目がひとつの系列に属することを示し、方向を伴う順序を確立します。線がなければ、同じ項目でも順序のないリストとして読まれます。線によって、空間的な配置から順序が生まれます。

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

暗示された方向性のある経路は、操作方法を示します。

• トラック上のスクロールハンドルは、コンテンツが垂直に連続していることを示します
• カルーセルの下にあるドットインジケーターは、スライドが横方向に連続していることを示します。ドットは、その経路を見える形にしたものです
• 引っ張って更新するアニメーションは、画面の端を越えて続く、暗示的な垂直方向の経路に沿って動きます

この手がかりは連続性によって機能します。視線が暗示された経路を読み取り、手がそれに従います。

連続性を途切れさせてグループを分ける

連続性がグループをまとめるのと同様に、連続性を途切れさせることでグループを分けられます。それ以外は連続している経路に意図的な切れ目を入れることで、移行を示します。

• リスト内の広めの間隔は、（見出しがなくても）新しいセクションを示します
• 区切り線は垂直方向の読み進める経路を中断し、カテゴリの境界を示します
• インデントは視線を二次的な経路へ導き、全体の流れの中にある下位階層を示します

連続性と視覚的階層

連続性は階層と相互に作用します。

• 左揃えで連続する読み進める経路は、各項目の重要度が同じであることを示します
• 特定の項目だけ配置を崩す（インデントする、ずらす、右に段差をつける）ことで、タイポグラフィを変えずに下位階層を示せます

インデントされたコンテンツは、単に空間的な位置が異なるだけではありません。別の連続した軸上にあるため、階層が明確になります。

ベストプラクティス

• 要素を配置する前に、視線の流れを意図的に設計します。視線はどこから入り、どのように移動し、どこに落ち着くべきでしょうか？
• すべてのブレークポイントで配置を確認します。1ピクセルのずれでも、意識されないほど小さくても、連続性の印象を損ないます。
• 複雑なレイアウトでは、線や矢印、ドットインジケーターを使って、暗黙の視線の流れを明示します。
• 画面をどのように読んだかユーザーに説明してもらい、流れをテストします。連続性が途切れると、混乱したり、前の箇所に戻ったりする様子に表れます。
• 意味を加えず、意図した流れを妨げる要素は取り除きます。そうした要素は価値をもたらさず、再定位の負担だけを生みます。