私が考えるレイアウトデザインの定義は「デザインエレメント（要素）の距離感の集合体」です。
音楽の三要素である、メロディ、ハーモニー、リズム、の構成により様々な楽曲が生み出されているのに近い概念だと考えています。
各種デザイン要素が、一定のエリア内にある種の規則性をもって配置されることで、要素同士・要素間に様々な状態のテンション（tension）が生まれます。
それぞれのテンションは、見るものに様々な感情的抑揚を与え、それらの総合的な組み合わせが独自の世界観を生み出しデザイン全体の雰囲気づくりに結びつくからです。
デザインエレメントの距離感とは
デザインエレメントの距離感とは、デザイン要素同士の距離、要素と画面の境界線の距離、要素の周囲の余白の距離などを指します。
これらの距離感をコントロールすることで、デザインの印象や雰囲気を大きく変えることができます。
デザインエレメントの距離感によって生まれるテンション
デザインエレメントの距離感によって、要素同士・要素間には、さまざまな状態のテンションが生まれます。
例えば、要素同士の距離が近い場合、要素同士が引き合うように見えるため、一体感、同属性、同一感、親密感、共有性、所属感，連帯感、関連性の濃さ、等の印象を与えることができます。
一方、要素同士の距離が遠い場合、要素同士の関連性が薄く見えるため、独立感、単独性、開放感、疎外感、緊張感のゆるさ、余裕のある落ち着き感、等の印象を与えることができます。
また、要素の周囲の余白の距離が大きいほど、外側にある様々な要素から内側の要素を離すことができますので、内側の要素が外側にある各種要素に干渉される度合いが少なくなり、その分際立ち、重要性が増します。
一方、要素の周囲の余白の距離が小さいほど、外側にある様々な要素からの干渉が強まり、外部との連帯感を与えたり、内側の要素の密度が高く見えることでコンテンツ内容も濃いのではと感じることでができます。
デザインエレメントの距離感をコントロールする方法
デザインエレメントの距離感をコントロールする方法は、大きく分けて2つあります。
1つは、グリッドシステムを活用する方法です。グリッドシステムとは、画面を一定の区画に分けデザインエレメントを配置する手法です。グリッドシステムを活用することで、要素同士の距離を一定の基準内に保つことができます。
もう1つは、感覚的に配置する方法です。感覚的に配置する方法では、デザインの目的やターゲットユーザーなどを考慮しながら、要素同士の距離感を調整していきます。
どちらの方法が正しいというわけではなく、状況によって使い分けることが大切です。
デザインエレメントの距離感を磨く方法
デザインエレメントの距離感を磨くためには、さまざまなデザインを観察、分析することが大切です。優れたデザインには、必ず共通する要素があります。それらの要素を分析することで、自身のデザインスキルを向上させることができます。
また、実践を重ねることも大切です。さまざまなデザインを制作することで、感覚的に距離感を調整するスキルを身につけることができます。
デザインエレメントの距離感による違い
下記2種類のサンプルでは、余白を確保する位置によって、写真画像と説明文の組み合わせが異なって見えてしまうことに注目してほしい。
上の例では、
1段目の「写真画像→記事タイトル→記事本文」と2段目の「写真画像→記事タイトル→記事本文」のかたまり感を1つのモジュールとして認識しやすいレイアウトとなっている。
一方、下の例では、
1段目の「記事タイトル→記事本文」と2段目の「写真画像」がひとつのモジュール（赤枠ブロック）として認識されるようなレイアウトとなってしまい、本来の上段から「写真画像→記事タイトル→記事本文」と認識されるべき記事が別の記事と混在しているような誤認識を生んでしまうでしょう。
サンプルを作成するために極端な例をつくりましたが、現実の世界でもこの例に近いレイアウトで運用しているサイトもあります。
まとめ
レイアウトデザインは、デザインエレメントのテンションの集合体です。デザインエレメントのテンションをコントロールすることで、デザインの印象や雰囲気を大きく変えることができます。
デザインエレメントのテンションを磨くことで、より効果的なレイアウトデザイン手法を身につけることができるでしょう。