伝わるデザインを作るレイアウトのコツは対角線にアリ!見本使って説明します

プロデザイナーが対角線に見るモノ

こんにちは、読むだけでデザインを学べる!デザイン研究所です!

毎日デザインのポイントを解説するインスタアカウントを運営しております。

こちらのブログはインスタ投稿をより深く解説した記事になります!

 

今日のテーマ:プロのデザイナーが対角線に見るもの

伝わりやすくなるレイアウトを知っていますか?それが対角線を活用したレイアウトデザインになります。

そのまま真似できるような見本と、そのままお客さんに伝えれる論理的な解説を心がけました!初心者の注意点なども書いてるのでぜひ最後まで記事をご覧下さい!

 

レイアウトに関してのまとめ記事を作りました。具体的なレイアウトのデザイン例が豊富です。ぜひご覧ください!

関連記事

デザインにおけるレイアウトのポイントを知ることで圧倒的に作りやすくなります。今回の記事ではそんなレイアウトに関してのデザインポイントを紹介!どんなデザインにもレイアウトは存在します。そんなレイアウトのよくある[…]

対角線を使ったレイアウトで伝わるデザインを作ろう!

対角線を使ったレイアウトで伝わるデザインサンプル

こちらが今回のデザインサンプルです。

左上にタイトルを配置、右下に詳細はブログ記事にてという次のアクションに繋げる文言を配置

左上と右下というのはつまり対角線であるということなのですが、この対角線はデザインはとても作りやすくしてくれる指標になります!

対角線を使ったレイアウトで伝わるデザイン解説

左上と右下という対角線に配置するとデザインは作りやすいのです。

これは縦のデザインも横のデザインもそうです。

さらにこのサンプルでは過去投稿067「黄金のレイアウト、上重く下軽くする」のポイントも使ってます。この2つの合わせ技よくやります!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

目線の事を考えると人は左上から文章を読みます。

そこで左上に重要度の高い文や引きつけるコピーを配置することが多いです。(必見!など)

目線の始まりに配置することでその後も読んでもらえるということですね!

 

また詳細はブログ記事にてという見た後の次の行動を目線の終わる右下で催促しています。

このように文章を読み終える右下に行動催促する要素を配置することとても多いです。

チラシだと電話番号やクーポン券など右下多いですね!

 

まとめると

  1. 目線の始まりである左上に興味を惹く文言を配置
  2. 目線の終わりである右下に行動催促する文言を配置

 

このようなことを知っていれば対角線のレイアウトでデザインはかなり作りやすい!

左上、右下という配置は人間の目線を考えた”意図をもった要素”を配置しよう

そんな目線を考えたレイアウトが対角線で結ぶことです!

 

デザケン
ここは知ってるかどうかで差がつくポイント!

 

すぐ真ん中にレイアウトする人注意!伝わるデザインのコツは端に配置!

左上には惹きつけるコピーを

上のデザインサンプルでも左上と右下の対角線に要素を配置しました。

前章でお伝えした必見!というキャッチーな文字を目線の始まりである左上に、そして右下がボタンのようなデザインになっています。

この左上→右上→左下→右下に進む目線の動きをZ読みといいます!

 

デザ研
Zの要素に進んでいくからですね!

 

覚えておきたいポイントとしてはレイアウトは端から作るという点です。

このデザインのように真ん中から要素を配置してしまうと、、、

周りの余白が限られてしまうためにレイアウトパターンも限られてしまいます。

このように端から要素を配置することで、、、

余白が大きく生まれレイアウトパターンも豊富に考えることができるのです!

 

とりあえず真ん中に配置すること禁止

とりあえず真ん中に要素を置いとくのではなく、とりあえず端に置いとこう!

端に置いた上で真ん中配置のレイアウトを採用することはもちろんOKです。

最初からなんとなく真ん中に配置していた人はこの機会に端に置きましょう!

中央揃え、左揃えのショートカットキーは?▼
文章を中央揃えにするにはcmd(ctrl)+shift+C、左揃えはcmd(ctrl)+shift+L、ちなみに右揃えはcmd(ctrl)+shift+Rです。つまりC(センター)、L(レフト)、R(ライト)ですね。

伝わるデザインを作るレイアウトのコツは対角線!の記事まとめ

いかがでしたでしょうか?人間の目線を考慮してデザインを作ることで伝わりやすいデザインに近づきます。

クライアントの説明にも使いやすく納得していただけるレイアウトなんじゃないかと。

よくデザ研にはデザインを経験していないお客さんが分かってくれないという質問がきたりしますが、、、

今回のようにしっかりと理由を説明できるようにデザインを作ること、そして2つのパターンを見比べてもらうことで大分解決するんではないでしょうか?

ぜひ対角線のレイアウトを使って、伝わるデザインを制作してみてください!

こちらの記事では写真のレイアウトについて解説しているので合わせてご覧下さい。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

ちなみにレイアウトについてのデザイン参考書も読んだことがありますが、、、

今回のようなデザインのレイアウトについてもっと書籍で学びたいのなら「伝わるデザインの基本」がおすすめです!

特に初心者の方にオススメします。ベストセラーだけに他の書籍と比べてかなり分かりやすいのです。

もし初心者を脱出しているのであればレイアウトに関してはこの「レイアウト・デザインの教科書」がオススメです!

created by Rinker
SBクリエイティブ
¥2,530(2020/09/26 09:24:13時点 Amazon調べ-詳細)
・人間の目線の動きに合わせた配置をすることで伝わりやすいデザインに
・とりあえず真ん中に要素を配置せず、端に配置する

 

 

この投稿をInstagramで見る

 

デザイン研究所(デザ研)1日1投稿(@designkenkyujo)がシェアした投稿

全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。

>インスタでデザインを学ぶ

インスタでデザインを学ぶ

デザインの見る目を養うインスタアカウントを運営中!初心者から脱するデザインのポイントを解説しています。だいたい毎日更新です!

CTR IMG