素人っぽさがなくなるデザインの基本①

こんにちはAmbran Createです。
サイトにご訪問いただきありがとうございます。

今回から少しづつデザインの基礎について書いていきたいと思います。

最近は、Canvaなど、ノンデザイナーでも簡単に素敵なデザインが作れるツールがたくさん出てきています。

フライヤーや自分の名刺デザインなどはCanvaなどで作る方も多いのではないでしょうか?

テンプレートなども用意されていて非常に使いやすくておすすめですが、1から作りたいとき、
デザインやレイアウトの基本的なことがわかっていれば、作るのも早くなりますし
なにより自信を持ってデザインすることができます。

ただ、デザインに正解はなく、誰でも簡単にできるようで、いざつくってみると意外と難しいものです。
原因はわかならいけど、なぜかいつもきれいに作れない・素人っぽくなってしまう、
という方も多いのではないでしょうか?

その答えはセンスがないから!
・・ではなく!!

基本的なルールを知らないだけです。

デザインには基本的なルールがいくつも存在します。
その一つ一つを少しづつ意識していくことで、わかりやすく、伝わりやすいデザインを作ることができます。

第一回目はまず、「揃える」を意識してみましょう!

揃える

少しのズレも、全体的に崩れて見えてしまう

「要素同士を揃える」ことは、レイアウトの基本です。
人は、規則正しく整列しているものは美しいと感じます。

画像や文字をレイアウトするときは、要素同士をきちんと整列させることが基本です。

人間の脳は少しのズレでも違和感を感じてしまうため、チラシや投稿画像を作成するときは
まず基準線を作っておくと、きれいなレイアウトでデザインを作ることができます。

<例1>基準線がどこかわからない

上記の例は少し極端ですが、
画像の位置もバラバラですし文字の位置も揃っていません。

「さすがにこれはやならいかな」と思っている方も、QRコードの位置はどうでしょう?

もちろん内容が変わればデザインもさまざまですし、正解はありませんが、迷う方も多いところではないでしょうか?

次の画像を見てみましょう!

<例2>基準線をひいて作成

上記はまず、基準線をひいて作成したレイアウトです。

先ほどの画像と違って、QRコードの位置も、左の画像とともに、下揃えになっています。

揃っているのはわかるけど、まず何を基準としたらいいのでしょうか?

デザインには、「揃える」要素が多く存在します。
画像とキャプション、図形と解説など、ひとかたまりで扱わなければならない要素などが挙げられます。余白の幅や大きさを揃える必要もあります。

ただ、なんの脈絡もなく揃えていては、見る側にとって「わかりずらいデザイン」になってしまいますので、前述した、画像とキャプションなどの一つのグループでまずは捉えることが大切です。

上記は、 要素を配置する前に基準線を引いたものです。
画像の両サイドの余白も同じ幅をとり、全体の要素が全て、紫の基準線の中に入っています。

赤の線は、画像配置のための基準線となります。

一見なんとなく画像を配置したように見えますが、こうして基準線を引くと、左右の余白を揃えていることがわかります。

日常でよく見るチラシやポスターなども、意識してみると、見えない線が存在していることがわかりると思います。

文章は右揃えに

中央揃えは難しい

文章の中央揃えは、ブログなどで使用している方も多く、レイアウト手法の一つですが
「基準線がわかりづらい」というデメリットがあります。

文章の始まりの位置がバラバラになってしまうことで、読み手にわかりづらくなっています。

中央揃えにするときは、キャッチコピーなど、その一文だけを目立たせたい時や、端的な表現をする際に留めておき、基本的には左揃えにすると、読み手も制作者の意図を容易に理解してくれます。

基本的なレイアウトのひとつ、「揃える」を簡単にご紹介しました。

基本的で簡単なことですが、一度今までに制作したデザインを見直してみてください。
新たな気づきがあると思います!

この記事を書いた人

Ambran Create

スキル
HTML,CSS,SCSS
javascript
jQuery
php
wordpress