2019年8月11日スポンサーリンクこんにちは、emikiです。デザインには、見栄えを劇的に良くするための基礎的な4つの法則があります。列(Alignment)ある程度デザインに精通している方であれば、ピンとくるかもしれません。それほど有名な法則です。「初めて聞いた!」という方や、デザイナーではない方でも、この法則を活かせば劇的に綺麗な仕上がりのデザインを作ることができます。今回は、その法則についてご紹介します。列(Alignment)それでは早速、それぞれの法則について、見ていきましょう。画像つきで、解説していきます。人間は、位置が近いもの同士は「関係があるもの」と認識する習性があります。この習性を利用して、関連するもの同士は距離を近づけて配置します。文章で説明するより、図で解説した方が分かりやすいですね。以下の画像をご覧ください。アイスクリームのメニュー表です。問題ないように見えるかもしれませんが、アイスクリームそれぞれの隣同士の距離が近く、若干の見辛さを感じてしまうため、デザイン的にはよろしくありません。見やすいように修正した画像がこちらの上の画像です。関係性がないもの同士は、物理的に距離を離すと、差別化しやすいです。簡単にいうと関係性のないもの同士は、「余白」を取ることです。「近接」のデザインをするには、この「余白」が非常に重要な役割をはたします。余白をうまく使うことで、近接の効果を活かすことができます。余白の広さの幅は、均等な方が望ましいです。余白の幅の広さが均一でなければ、デザイン的に美しくはなりません。均等に配置するようにしましょう。「コントラスト」とは、デザインに「強弱」をつけて、情報の優先度を見やすく示す方法です。オブジェクトに強弱をつけたり、色を変えることで、コントラストのあるデザインができます。こちらの上の画像は、コントラストを意識せずフラットに作ったデザインです。こちらの上の画像は、コントラスト意識したデザインです。目立たせたい文字を大きくし、色も変更しました。1枚目の画像と2枚目の画像とでは、どちらが見やすいかは一目瞭然だと思います。「控えめ」この2パターンです。「やりすぎ(できるだけたくさんの情報を目立たせようと思う)」できるだけたくさんの情報を目立たせようと思い、コントラストをやりすぎてしまう事例。すべての情報を目立たせることは不可能であることを理解しましょう。目立たせない部分があるからこそ、目立つ部分がより際立つのです。逆に控えめの人は、思い切りが大切です。1番目に目立たせたい箇所、2番目に目立たせたい場所など優先度を決め、思い切ってコントラストをつけてみましょう。デザイン初心者がやりがちな「盛りすぎ」「やりすぎ」デザインについては、こちらの記事で詳しく解説しているので、ご確認ください。グラフィックデザイナー初心者のNGデザイン(カラー編)こんにちはemikiです。「反復」デザイン全体に統一感を出すためには「反復」が不可欠です。各オブジェクト、線、色、アイコン、レイアウトなど、デザイン中に同じ要素を繰り返して使うことにより、全体に統一感が出ます。文字で説明するよりも、画像を見た方が分かりやすいと思うので、こちらをご覧ください。スイーツのメニュー表です。(※例で作った画像なので、デザイン中に記載されている文言は適当です。)「カップケーキ」「ソフトクリーム」「ケーキ」「ドーナツ」と4つのカテゴリーに分けられています。「カップケーキ」のブロックをテンプレートと化し、反復して「ソフトクリーム」「ケーキ」「ドーナツ」のブロックを作っているだけ。決められたデザインの法則から逸脱していません。「単調でつまらないデザインだ」と一瞬思うかもしれませんが、情報を受け取る側からしたら、全体的に統一感があった方が見やすいです。デザインはオリジナリティーや個性も大事ですが、第一に情報を受け取る人が「見やすいかどうか」も考える必要があります。「整列」はデザインの基礎中の基礎。「整列」を意識すると、完成度の高いデザインにグッと近づけます。常にオブジェクトのツラを揃える癖をつけることが大事です。上の画像右側は、揃えることを特に意識していません。画像を見てもらえばわかると思いますが、情報を「整列」をするだけで、どれだけ見やすいデザインになるか一目瞭然ですよね。「整列」はデザインの基礎です。「整列」をするとしないとでは、デザインの見栄えがまったく変わるので、必ず意識して行うようにしましょう。列(Alignment)今回は、デザインの見栄えを劇的に良くするための4つの法則を紹介しました。意識して実践するだけでデザインのクオリティーをワンランクあげることもできるので、デザイン初心者の方は、ぜひ試してみてください。デザイナー以外の方も、ぜひ挑戦してみてください。具体的な実戦方法については、こちらの記事でも詳しく書いています。【脱】初心者デザイン!クオリティー向上のための4つのテクニックこんにちは、emikiです。デザインの勉強をスタートし始め...あわせて読みたいグラフィックデザイン勉強のための『おすすめ本7選』グラフィックデザイナー初心者のNGデザイン(カラー編)デザイナーが色の配色の時に取り入れたいポイントとアドバイスデザインを独学で学ぶことは可能か〜デザインの学び方を考える〜スポンサーリンクスポンサーリンク【必読】おすすめ記事はこちらからグラフィック・Webデザイナー向けの転職サイト8選はコレ!グラフィックデザイナー・Webデザイナー向けのおすすめ転職サイト・転職エージェントを比較しながら詳しく解説しています!記事本編はこちらから学び方〜仕事の探し方まで!未経験からデザイナーになるための完全ガイドデザインまったくの未経験者が、プロのデザイナーになるまでのステップを詳しく丁寧に徹底解説しています。「デザイナー辞めたい!」一度は考えたことありませんか?そんなデザイナーの不平・不満を調査してみました。デザイナーのみなさんならこの苦労を分かち合えるはずです!記事本編はこちらからWebデザインを安く勉強できるオンラインスクール厳選Webデザインを勉強したい方に向けて、価格や授業内容を比較しながら、おすすめできるオンラインスクールをまとめてご紹介しています。emikig279デザイナーの道しるべスポンサーリンクスポンサーリンクデザイナー兼ブロガーemikiデザイナー歴10年。デザイナーによるデザイナーのための当ブログ運営者です。デザイナーの道しるべ。