PR

【デザイン4大原則】整列(揃える)を徹底解説!

整列 Webデザインに必要な知識

デザインの4大原則は「近接・整列・反復・対比」です。

今回は前回の記事に引き続き

「デザインはセンスじゃないルールだ!」

をモットーに解説していきます!

まず、レイアウトの基本は「要素同士を揃える」です!

人は規則正しく整列されている物を見ると、本能的に「美しい」「きれい」と感じます。

つまり、人の目は優秀であるため、少しのズレでも違和感を感じます。

そして、少しのずれは、デザイン全体の印象を大きく崩れさせてしまいます。

並べるだけで、見た目の美しさと、情報の明瞭さを格段に高めることができます。

この記事が役立つ人
  • デザイン初心者
  • 会社で企画書・プレゼン・ビジネス資料を作っている方
  • デザインはセンスじゃない」⇒「ルールなんだ」と気になった方

それでは、デザインの質を上げたりビジネス書類の質を上げる事ができる、「整列」について詳しく見ていきましょう!

 

 

少しのずれでも、デザインは崩れる

デザインは崩れる?

整列がほんの少しでも狂うと、デザイン全体の調和が崩れてしまいます。

そのため、テキストや画像、アイコン、文字など、デザインに含まれる全ての要素の整列を心がけることが不可欠なんです…。

「ちょっと大変」と思いましたか?

しかし、要点をつかめば自然とできるようになっていきますので、まずは例を見てみましょう!

例えば、こちらが整列されていない例と、整列されている例です。

整列 不適格
整列 適格

さすがに、整列していない方はちょっと大げさですが、崩れた仕上がりになっていますね。

 

何を揃えるのか

何を揃える?

写真と文字グラフ説明文などが揃える要素です。

整列 写真 グラフ 文字

見逃しがちですが、余白の間隔も揃える事が重要です。

イラストの間隔を揃えたら、次は余白の間隔を揃えていきましょう。

余白を揃える

ただし、揃える時は近接:グループ化(前ブログ記事)でも説明しましたが、揃えることによってグループ化されます。

ですので、関連性の高い要素同士を揃える事が重要ですよ!

これをやってみよう!
  • グラフと説明文写真と文字イラストとボタンなどを揃える
  • 揃えるのは、関連性の高い要素同士を揃える
  • 余白の間隔も揃える

 

どこでそろえるのか

どこで揃える?

揃えると言っても、「揃える場所」は一つではありません。

さまざまな整列の方法がありますが、例えば左揃え中央揃え右揃えが主に用いられます。

整列 左揃え
整列 中央揃え
整列 右揃え

テキストの読みやすさを考慮すると、左揃えが一般的です。

 

中央ぞろえは難しい?

中央揃えは見た目をエレガントに見せることができますが、バランスを取るのが難しい方法です。

実は、中央揃えでは左揃え・右揃えと比べて「基準線がわかりずらい」というデメリットがあります。

読み手としては、明確な基準線が見えていた方が、製作者の意図を容易に理解できます。

つまり、紙面を製作する際は、最初から中央揃えを考えるのではなく、左右揃えの方がベターと言われています!

中央揃え
左揃え

 

揃える方法3つ

揃える3つの方法

揃える方法は3つあり、各特徴を説明していきます。

 

1 補助線を使う

各デザインソフトウェアの補助線機能を活用し、要素の整列を正確に行います。

ちなみに、Canvaなら、動かすと自然と補助線が出てくれます。

各要素同士を揃えるのに、とても便利です。

Canva 補助線 GIF

この方法は、一番簡単に要素同士を揃える事ができるので、おススメです!

他のデザインツールでも補助線は出てきますので、試してみて下さい。

 

2 ガイド線を自分で引く

基準になるガイド線を自分で作成し、そのガイド線に沿って各要素を揃えていく方法です。

ガイド線を引く作業があるので、ほんのすこし手間がかかります。

具体的には、多くの時間・手間がかかるデザインを作るのにおススメの方法です。

ガイド線

 

3 グリッド線を使う

紙面全体の方針に関わるような、大きい要素を配置するときに設定します。

グリッド線は、自分では引かず「設定」します。

そして、それに沿って要素を配置していきます。

グリッド線に従って要素を整列させることで、統一感のあるデザインを作成することができます。

グリッド線
ポイント!
  • 補助線は :ずらすと勝手に出てくる
  • ガイド線 :自分で引く
  • グリッド線:設定をする

各線の特徴を捉えて、整列に利用しましょう!

ほとんどのデザインは補助線で十分、細かでバランスが気になるデザインでガイド線・グリッド線を使っていきましょう!

補助線・ガイド線・グリッド線の具体的な引き方は、こちらの記事を参考にして下さい。

 

写真の表示範囲もそろえる

表示範囲

写真を使用する際には、表示範囲も揃えることが重要です。

例えば、顔が小さかったり、大きかったり、偏っていたりすると、統一感がありません。

物や商品も同じで、被写体の表示範囲を揃えて、文字も整列させていくと、さらに伝わりやすくなります!

整列 顔の大きさ 不適格
整列 顔を大きさ 適格
ポイント!

複数人の人物がいる場合は、顔の大きさを揃えましょう!

 

まとめ

整列のテクニックである「揃える」を使いこなすことで、デザインをもっと魅力的に、そして伝わりやすくできます。

つまり、見る人が、自然と美しいと感じるように

文字・写真の位置を揃え写真の大きさを統一余白の間隔も揃える!

「整列」を活用して、みんながパッと見て「なるほど!」と思えるようなデザインを目指しましょう。

このテクニックだけでも、デザイン初心者の方や、企画書・プレゼン・ビジネス資料を作成するビジネスマンに、必ず、必ず役立ちます

整列テクニックを上手に使って、お客さん・同僚・上司を驚かしてしまって下さい!

前項の「近接」と組み合わせると、さらに効果的なデザインができます!さらに、デザインの4大知識が深まっちゃいますよ!

では、次の記事で会いましょう!(*’▽’)/~~~

プロフィール
この記事を書いた人
しゅう☆

こんにちは!看護師をしながら副業をし、豊かな人生を目指しブログを開設しました。昨年からWebデザインの副業を始め、デザインを中心に発信していきます。応援して頂けると、とても嬉しいです!
詳しいプロフィールは「しゅう☆」をクリック!しゅう☆の動画もあります↑

\良かったらシェアしてね/
Webデザインに必要な知識デザインの教科書
スポンサーリンク
\良かったらシェアしてね/

コメント

タイトルとURLをコピーしました