原則
連続性
Continuity
連続性とは、ひとつの線や曲線に沿って並んだ要素を、バラバラの断片ではなくひと続きの流れとして認識する原理のことです。
定義
連続性とは、ひとつの線や曲線に沿って並んだ要素を、バラバラの断片ではなく ひと続きの流れとして目がとらえる性質のことです。視線には、急に折れ曲がる方向よりも なめらかにつながる方向を追いかけようとする傾向があり、同じ整列ラインの上に置かれた 項目を自然にひとつの筋として読み取ります。リストのテキストが左端の一本の軸に きれいにそろっていると、視線が上から下へ滑るように降りていく。これが連続性の 代表的な例です。複数の要素が共通の線を共有した瞬間、それらは別々のものではなく ひとつの流れに属するものとしてまとまって読まれます。この力は要素をぴったり 寄せ合わなくても働くという点で、距離でグループをつくる近接性とははっきり区別されます。
なぜ重要か
連続性は、ユーザーがコンテンツを目で追う道筋をなめらかに敷いてくれます。要素が 共通の整列ラインや流れを共有していると、視線がつっかえることなく流れ、次に見るものを 自然に予測できるようになります。カルーセルが横一本の軸に沿ってつながり、タイムラインや ステップ表示がひとつの線に沿って配置されるのは、まさにこのためです。逆に整列が バラバラだと、視線は項目ごとに新しい基準点を探す羽目になって途切れ、その小さな 途切れが積み重なることで画面が散らかって不安定に感じられます。うまく保たれた 連続性は、ユーザーがどこから始めてどこへ向かうかで迷わずに済むようにしてくれます。 これは長いリストや複数のステップを踏む画面でとくに大きな差を生み、コンテンツを 最後まで追い読みさせる力になります。
よくある間違い
- 要素ごとに整列の基準を変えてしまい、視線の流れを断ち切るケースです。ある行は左、 ある行は中央にそろっていると、目は毎回新しい出発点を探さなければならず読むのが 疲れます。リストが長いほど、その負担は目に見えて大きくなります。
- 流れを強調しようとして、途中で方向が急に折れ曲がる配置を入れてしまうケースです。 連続性がいったん壊れると、ユーザーはその地点で立ち止まってしまい、それまで続いていた 文脈やリズムまで一緒に見失って、流れをつかみ直すのが難しくなります。
- ステップ表示をつくるときに、各ステップの位置をわずかにずらして置いてしまう ケースです。軸が少し揺れるだけでも、ひと続きの流れだという印象が崩れ、順番が あやふやになったり進み具合を誤解させたりします。
実務のヒント
- 関連する要素は共通の線、つまりグリッドや整列軸にそろえて配置しましょう。ひとつの 軸を共有するだけで視線がなめらかにつながり、とくに飾りを加えなくても構造が 整って見えます。
- ステップや順序を見せるときは、一方向の軸を決めて最初から最後まで貫きましょう。 流れの方向が一貫していれば、ユーザーは自分が今どのあたりまで来たのかを直感的に たどれます。
- 流れをあえて区切りたい箇所があるなら、そこだけに意図的に余白や仕切りを置きましょう。 連続性をどこでつなぎ、どこで止めるかを自分で決めれば単調にならないリズムが生まれ、 途切れた地点がむしろ新しい区画の始まりのように読まれて、長い画面にも自然な メリハリが生まれます。
AIに頼む
下に貼り付ける[画面の種類 — 例: アカウント設定リスト/入力フォーム]のコードから、要素ごとにバラバラなtext-alignと、それぞれ違う左の開始位置を全部見つけて。そのうえで関連する項目を一つの整列軸、つまり共通した左のedge一本に合わせて並べ直して、視線が上から下へ途切れずに滑るようにして。ある行は左・ある行は中央みたいに揃えを混ぜるのは禁止で、ラベル・値・説明がすべて同じ縦軸を共有するように統一して。要素を無理やり近づけるのではなく、共通の線を共有することで一つの流れにまとまるようにして(近接ではなく連続性)、変えた整列基準をbefore→afterの表にまとめて。
下に貼り付けるステップ表示(ステップインジケーター)/タイムラインのコードを検査して、各ステップの点・番号・ラベルが軸から微妙にずれている箇所を見つけて。すべてのステップマーカーが正確に一つの軸(横なら同じ水平中心線、縦なら同じ縦線)を0px誤差で共有するように座標を合わせて — 少しぶれるだけでも、つながった一つの流れだという印象が崩れるから。そして流れの方向は一方向(例: 左→右)に決めて、最初のステップから最後のステップまで一貫して保ち、途中で方向が折れないようにして。連結線も各マーカーの同じ中心を通るように描いて、順序と進行状況が一目で読めるようにして、修正した座標・整列値をまとめて。
この[長い画面 — 例: ランディングページ/長い記事]で、コンテンツが一つの整列軸に沿ってずっとつながるように基本の流れを組み立てて。ただし、流れを切りたい地点は私が意図したセクションの境界だけに置いて、そこにだけ目立つ余白や区切り線を入れて、新しい区画の始まりのように読めるようにして。残りの区間は軸をぶらさず共通の整列線をそのまま保って、切れ目以外では視線が引っかからないようにして。どこで連続性をつなぎ、どこで切ったのか、その根拠とあわせてセクション区分案をまとめて。