連続性

定義

連続性とは、ひとつの線や曲線に沿って並んだ要素を、バラバラの断片ではなく ひと続きの流れとして目がとらえる性質のことです。視線には、急に折れ曲がる方向よりも なめらかにつながる方向を追いかけようとする傾向があり、同じ整列ラインの上に置かれた 項目を自然にひとつの筋として読み取ります。リストのテキストが左端の一本の軸に きれいにそろっていると、視線が上から下へ滑るように降りていく。これが連続性の 代表的な例です。複数の要素が共通の線を共有した瞬間、それらは別々のものではなく ひとつの流れに属するものとしてまとまって読まれます。この力は要素をぴったり 寄せ合わなくても働くという点で、距離でグループをつくる近接性とははっきり区別されます。

なぜ重要か

連続性は、ユーザーがコンテンツを目で追う道筋をなめらかに敷いてくれます。要素が 共通の整列ラインや流れを共有していると、視線がつっかえることなく流れ、次に見るものを 自然に予測できるようになります。カルーセルが横一本の軸に沿ってつながり、タイムラインや ステップ表示がひとつの線に沿って配置されるのは、まさにこのためです。逆に整列が バラバラだと、視線は項目ごとに新しい基準点を探す羽目になって途切れ、その小さな 途切れが積み重なることで画面が散らかって不安定に感じられます。うまく保たれた 連続性は、ユーザーがどこから始めてどこへ向かうかで迷わずに済むようにしてくれます。 これは長いリストや複数のステップを踏む画面でとくに大きな差を生み、コンテンツを 最後まで追い読みさせる力になります。

よくある間違い

• 要素ごとに整列の基準を変えてしまい、視線の流れを断ち切るケースです。ある行は左、 ある行は中央にそろっていると、目は毎回新しい出発点を探さなければならず読むのが 疲れます。リストが長いほど、その負担は目に見えて大きくなります。
• 流れを強調しようとして、途中で方向が急に折れ曲がる配置を入れてしまうケースです。 連続性がいったん壊れると、ユーザーはその地点で立ち止まってしまい、それまで続いていた 文脈やリズムまで一緒に見失って、流れをつかみ直すのが難しくなります。
• ステップ表示をつくるときに、各ステップの位置をわずかにずらして置いてしまう ケースです。軸が少し揺れるだけでも、ひと続きの流れだという印象が崩れ、順番が あやふやになったり進み具合を誤解させたりします。

実務のヒント

• 関連する要素は共通の線、つまりグリッドや整列軸にそろえて配置しましょう。ひとつの 軸を共有するだけで視線がなめらかにつながり、とくに飾りを加えなくても構造が 整って見えます。
• ステップや順序を見せるときは、一方向の軸を決めて最初から最後まで貫きましょう。 流れの方向が一貫していれば、ユーザーは自分が今どのあたりまで来たのかを直感的に たどれます。
• 流れをあえて区切りたい箇所があるなら、そこだけに意図的に余白や仕切りを置きましょう。 連続性をどこでつなぎ、どこで止めるかを自分で決めれば単調にならないリズムが生まれ、 途切れた地点がむしろ新しい区画の始まりのように読まれて、長い画面にも自然な メリハリが生まれます。

関連概念