おはようございます、金曜担当のumaです
前回はレイアウトの4原則のひとつ、
『近接』について解説しました。
今回は4原則の2つ目、
『整列』について
解説していきますよ～
同一線上に要素を揃える『整列』
『整列』は、デザインにおいて非常に重要な要素の一つです。
レイアウト内のオブジェクトやテキストの
位置を整えることで、スッキリとした
見やすいデザインを作り出すことができます。
本記事では「整列」について、その基本的な
ルールと良いデザインの例を紹介していきます。
ちなみに今回説明に使用するデザインはコチラ
最近急に暖かくなって春めいてきたので、
春を代表する花たちをご紹介
それでは参りましょう～
整列の基本ルール
整列には以下のような基本ルールがあります。
レイアウト全体を考慮する
まず、レイアウト全体を考慮することが大切です。
全体のバランスや均一性を保つため、
一つのオブジェクトを基準にして
他のオブジェクトを整列させることが効果的です。
例えば、見出しの左端を基準にして
他のオブジェクトを整列させるなどがあります。
各項目の見出しである花名の左端（ピンクのライン）を基準に画像やテキストを整列させている
マージン（余白）を揃える
オブジェクト同士の間隔は揃えて、
オブジェクトとレイアウトの端との
距離も揃えることが大切です。
これにより、オブジェクト同士のバランスが
取れ、レイアウト全体が整った印象になります。
それぞれオレンジが60px、緑が40px、ピンクが20px、青が10px
グループ化する
オブジェクトをグループ化することで、
より整然としたデザインを作り出すことができます。
特に、同じ種類のオブジェクトを
グループ化することで、整列がしやすくなります。
各項目（菜の花、桜、チューリップ）でグループ化している
線を揃える
レイアウト内のオブジェクトに線がある場合、
その線を揃えることも大切です。
例えば、ボタン同士の高さや幅を揃えるなどがあります。
同じ幅、高さで統一された「詳細を見る」ボタン
例外もある
「整列」のルールはデザインにおいて
非常に重要な役割を果たしますが、
常にこのルールに従う必要はありません。
例外的なケースでは、原則を破ることが必要な場合もあります。
意図的に不規則な配置を用いたり、
背景やイラストのテーマに合わせて
意図的に乱雑な配置を用いたりすることがあります。
こちらは東京の企画・制作会社様の
サイトですが、要素同士の配置が不規則で、
重なっているところもあります。
それでも洗練されて見えるのは、
要素ひとつひとつは揃えられていたり、
たっぷり余白を取っていたり、
文字の可読性に配慮していたりと、
一定の規則があるからです。
動画や動く文字を使ったりして
視覚的に面白さを出しているところも
ポイントですね
このように意図的に「整列」の原則を
破ったデザインを作成する場合でも、
その理由を考慮し、適切なバランスを
保ちつつデザインを作成する必要があります。
要素をきれいに整列させ、格子状に並べた
レイアウトを「グリッドレイアウト」
というのですが、上述のサイトのように
あえてこのグリッドを崩したデザインを
「ブロークングリッドレイアウト」といいます。
グリッドレイアウトのルールを元にしながらも、
あえて外れた部分を作り出すことで、
ユニークでクールな印象を与えられます。
ブロークングリッドレイアウトより
さらに自由度高く配置した
「ノングリッドレイアウト」というのも
あるのですが、難しいので今回は
説明しません
まとめ
以上、整列についての解説でした。
「整列」は、レイアウトの基本原則の1つであり、
デザインにおいて重要な役割を果たしています。
正確な配置と整然とした配置は、デザインを
美しく、見やすく、親しみやすくするために欠かせない要素です。
「整列」を意識することで、
視覚的な混乱を避け、
読み手のストレスを減らし、
メッセージを明確に伝えることができます。
ただし、常に「整列」の原則に従う必要はありません。
意図的に原則を破ることが必要な
場合もありますが、その際にも、
バランスを保ちつつデザインを作成することが重要です。
今回はここまで。
次回は『反復』についてです！
また来週～
よい週末をお過ごしください