こんにちは、読むだけでデザインを学べる！デザイン研究所です！
フォローするだけでデザインを学べるTwitterアカウントと
毎日デザインのポイントを解説するインスタアカウントを運営しております。
こちらのブログはインスタ投稿をより深く解説した記事になります！
伝わりやすくなるレイアウトを知っていますか？それが対角線を活用したレイアウトデザインになります。
そのまま真似できるような見本と、そのままお客さんに伝えれる論理的な解説を心がけました！初心者の注意点なども書いてるのでぜひ最後まで記事をご覧下さい！
レイアウトに関してのまとめ記事を作りました。具体的なレイアウトのデザイン例が豊富です。ぜひご覧ください！
デザインにおけるレイアウトのポイントを知ることで圧倒的に作りやすくなります。今回の記事ではそんなレイアウトに関してのデザインポイントを紹介！どんなデザインにもレイアウトは存在します。そんなレイアウトのよくある[…]
対角線を使ったレイアウトで伝わるデザインを作ろう！
こちらが今回のデザインサンプルです。
左上にタイトルを配置、右下に詳細はブログ記事にてという次のアクションに繋げる文言を配置
左上と右下というのはつまり対角線であるということなのですが、この対角線はデザインはとても作りやすくしてくれる指標になります！
左上と右下という対角線に配置するとデザインは作りやすいのです。
これは縦のデザインも横のデザインもそうです。
さらにこのサンプルでは過去投稿067「黄金のレイアウト、上重く下軽くする」のポイントも使ってます。この2つの合わせ技よくやります！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
目線の事を考えると人は左上から文章を読みます。
そこで左上に重要度の高い文や引きつけるコピーを配置することが多いです。(必見！など)
目線の始まりに配置することでその後も読んでもらえるということですね！
また詳細はブログ記事にてという見た後の次の行動を目線の終わる右下で催促しています。
このように文章を読み終える右下に行動催促する要素を配置することとても多いです。
チラシだと電話番号やクーポン券など右下多いですね！
まとめると
- 目線の始まりである左上に興味を惹く文言を配置
- 目線の終わりである右下に行動催促する文言を配置
このようなことを知っていれば対角線のレイアウトでデザインはかなり作りやすい！
左上、右下という配置は人間の目線を考えた”意図をもった要素”を配置しよう
そんな目線を考えたレイアウトが対角線で結ぶことです！
すぐ真ん中にレイアウトする人注意！伝わるデザインのコツは端に配置！
上のデザインサンプルでも左上と右下の対角線に要素を配置しました。
前章でお伝えした必見！というキャッチーな文字を目線の始まりである左上に、そして右下がボタンのようなデザインになっています。
この左上→右上→左下→右下に進む目線の動きをZ読みといいます！
覚えておきたいポイントとしてはレイアウトは端から作るという点です。
このデザインのように真ん中から要素を配置してしまうと、、、
周りの余白が限られてしまうためにレイアウトパターンも限られてしまいます。
このように端から要素を配置することで、、、
余白が大きく生まれレイアウトパターンも豊富に考えることができるのです！
とりあえず真ん中に要素を置いとくのではなく、とりあえず端に置いとこう！
端に置いた上で真ん中配置のレイアウトを採用することはもちろんOKです。
最初からなんとなく真ん中に配置していた人はこの機会に端に置きましょう！
文章を中央揃えにするにはcmd(ctrl)＋shift＋C、左揃えはcmd(ctrl)＋shift＋L、ちなみに右揃えはcmd(ctrl)＋shift＋Rです。つまりC(センター)、L(レフト)、R(ライト)ですね。
もっと対角線のポイントを使ったデザインが見たい方！
この記事で解説した対角線のデザインをもっと見たい方は、、、
デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ！
伝わるデザインを作るレイアウトのコツは対角線！の記事まとめ
いかがでしたでしょうか？人間の目線を考慮してデザインを作ることで伝わりやすいデザインに近づきます。
クライアントの説明にも使いやすく納得していただけるレイアウトなんじゃないかと。
よくデザ研にはデザインを経験していないお客さんが分かってくれないという質問がきたりしますが、、、
今回のようにしっかりと理由を説明できるようにデザインを作ること、そして2つのパターンを見比べてもらうことで大分解決するんではないでしょうか？
ぜひ対角線のレイアウトを使って、伝わるデザインを制作してみてください！
ちなみにレイアウトについてのデザイン参考書も読んだことがありますが、、、
今回のようなデザインのレイアウトについてもっと書籍で学びたいのなら「伝わるデザインの基本」がおすすめです！
特に初心者の方にオススメします。ベストセラーだけに他の書籍と比べてかなり分かりやすいのです。
もし初心者を脱出しているのであればレイアウトに関してはこの「レイアウト・デザインの教科書」がオススメです！
こちらの記事は名刺デザイン厳選記事まとめにも含まれています！
名刺はデザイン範囲も小さいので初心者でも作りやすい制作物です。今回の記事ではそんな名刺デザインのコツを厳選して10個紹介！ここで紹介する10のコツを利用して自分の名刺を作ってみると良いかと思います。 […]
こちらの記事はシンプルなデザインまとめ記事にも含まれています！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 今回の記事ではシンプルなデザインを作るテクニックを[…]
こちらの記事ではバナーデザインのまとめ記事にも含まれています！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 バナーデザインは作りやすく初心者にもおすすめできる[…]
・とりあえず真ん中に要素を配置せず、端に配置する
この投稿をInstagramで見る
全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。