Webデザイン
 

【デザイン四原則】要素に一体性を持たせる!「整列の原理」

       

 

デザインの四原則、近接」「整列」「反復」「強調に関しての記事です。前回は近接の原理についてお話ししました。

今回は「整列」についての話をしたいと思います。

※デザインの四原則とは?と言う方は前記事「デザインの四原則について」をご覧ください。

 

デザインの四原則「整列の原理」

 

  →  

 

デザイン四原則、「整列」の役割は

見えない一本の直線をつなげることで、要素に一体性を持たせ整ったデザインを作り上げる

働きを持つのが特徴です。

 

一体どう言う原理なのか?と言うことで図形を用いて説明します。

 

 

いろいろな図形がごちゃごちゃしていて散らかっていてうるさい印象な上、

視線があちこち飛んで見ていて疲れる配置になっております。

 

そこでそれぞれの図形に直線を繋ぎます。

 

見ての通り線はぐちゃぐちゃしていますが、これらを直線で揃えて見ましょう。

 

整列で重要なのは見えない一本の直線で要素を整えてあげることで

すっきりと見えるようになりました。

 

整列の原理を反映させるまでの手順

 

これらの原理を利用してメニューの「価格」の並び方を整えてみましょう。

 

❶価格を直線で結びます。

 

 

❷一本の直線になるようにドリンクの価格の位置を整えます。

 

一直線に整えることでとてもすっきりとした印象のメニュー表が完成しました。

 

Before                            After

   

おまけ(揃えに着目)

 

整列の原理は「揃え」に着目すると、整った印象のデザインを生むことができます。

各要素の頭の位置がバラバラで、左揃えと中央揃え、右揃えが混在し、まとまりがありません。

整列の原理を意識して揃えを調整してみましょう。

 

すべて要素を中央揃えにしました。揃えの種類には「左揃え」「右揃え」「中央揃え」とありますが、

揃えを統一することで1本の直線が生まれ、整った目に入りやすい図が完成しました。

 

整列の原理のまとめとお約束

・整列の原理は意識的に要素に一体性を持たせ整ったデザインを作り上げる働き がある

・揃えに着目し、中央揃え、左揃え、右揃え、を混在させることを避ける

見えない一本の直線で要素を整列させる

 

以上がデザインの四原則の一つ「整列」の原理になります。

最後まで拝読いただき、ありがとうございました。

 
  • このエントリーをはてなブックマークに追加