デザイン基礎 デザインの「原則」を覚えて脱・初心者 2023 10/06 デザイン基礎 </noscript><iframe data-src="https://player.vimeo.com/video/871788608?h=b031a22ace&badge=0&autopause=0&quality_selector=1&progress_bar=1&player_id=0&app_id=58479" width="1920" width="100%" height="450" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" title="デザインの原則の理解をしよう" class="lazyload" > 動画内では、分かりやすくするため一部参考デザインを引用しております。引用元：https://www.pinterest.jp/ 谷町くん デザインのルールってよく言われるけど、なんで必要なの？センスでデザイン出来るんじゃないんですか？ トリペン先生 デザイン＝設計になるので、基本ルールを守らないと、なんか違うデザインになるんだよ。。 記事の内容「思考・概念を組み立てる」デザインの基本ルール 「デザインしてみて」と言われても、今までやったことがない人からすると何から始めたらよいか分かりませんよね？ デザインにもルールがあり、ルールを守って組み立てていくことで、それだけでもそれっぽいデザインに仕上げることができます。 「伝えたい人に伝える」ということも、ルールを守ることで、正確に伝えられるようになります。 そんなルールのもっとも基本かつ超重要な4つの原則を紹介します。 デザインがダサくなる理由は、「4原則」を守らないから よく初心者の人がデザインして、なぜかダサくなる光景をよく見ていますが。ほとんどの場合、この4原則が無視されています。 この４つは単に「きれいにレイアウトできる」だけにとどまらず、「設計・計画・構想を組み立てる」という部分に深く関係しています。 デザインにはルールがあり、この4原則もその1つです。デザインする時は、4原則が守られているかを意識しましょう。 ここではその4つのルールについて解説していきます。 デザインで重要な4原則とは？ 近接 = 関係ある情報を近づける 整列 = 見えない線で一体感をつくる 強弱 = 情報に優先度をつけて、はっきり違いをつける 反復 = 特徴が強い要素を同じルールで繰り返す 【近接】 = 関係ある情報を近づける 人は位置的に近いものを「関係があるもの」と認識する習性があるそうです。つまり、位置関係を調整するだけで、見た瞬間に理解しやすいレイアウトを作ることができるのです。 良い例・悪い例 下の図で、どの人がどの名前か瞬時にわかりますか？ 悪い例 このように、このデザインは情報の位置関係がまったく整理されていません。上下左右の余白が均等になっているので、どれとどれがくっついているのか、グループの関係性が見えづらくなっています。 どの人とイラストが関係しているのか、情報を整理してそれらをグルーピングしてみます。 良い例 これだと、どうでしょうか？イラストと名前を近づけて、違うグループの段とは距離をとりました。 これで位置関係が整理され、情報が見やすくなりましたね。このようなレイアウトの原則を「近接」といいます。 近接のポイントは「余白」 悪い例のように、ぱっと見た時にどっちだろ？とならないように、余白をとりまとめる必要があります。 余白をとりあえずで設定せずに、関係する情報をグルーピングして、グループごとに余白をもたせることを意識しましょう！ 【整列】 = 見えない線で一体感をつくる 名刺の良い例・悪い例 下記の名刺はどんな印象を受けますか？ 悪い例 この名刺を見ていただくと、どう感じますか？少し見づらい印象を受けると思います。 ただ、文字が羅列しているだけで、まとまりや統一性を感じられません。 web designer ： 肩書きTaro Torikumu ： 名前Creators Factory ： 会社名住所、メアド、URL ： 会社情報 上記の情報で関係ある要素はどれか、それとどれを「近接」にすればよいかを考えましょう。 例えば、「肩書き」と「名前」は、その人を表すパーツなのでなるべくひとまとめのほうが見やすいですね。それ以外は会社関連の情報なので、自分の情報とは分けて会社関連の情報をグルーピングした方が見やすいです。 近接でグループ化したそれぞれの要素を、さらに「整列」の原則を使って揃えてみます。 良い例 フォントの種類やサイズは全く変えていませんが、左揃え・右揃えを適用するだけでぐんと見やすくなりました！ 整列のポイントは、「見えない線」で繋げること なぜ、見やすくなったと思いますか？ それは、整列によって左右に「見えない線」を感じさせることで、画面がすっきりと整理されたからです。 ※見えない線をつくる 最初の名刺で使われていた中央揃えは、この見えない整列線がなかったので、ばらつきのある印象を与えていました。 脱初心者の第一歩「とりあえず中央揃え」をやめる！象徴的に使いたい、ソフトな印象を持たせたいなどの明確な意図がない限り、中央揃えは多用しない方が無難です。左揃えと右揃えだけでキレイなデザインができるようになってから、中央揃えは要所だけに使うようにしましょう 【強弱】 = 情報に優先度をつけて、はっきり違いをつける 見出しは大きく太く強調して、本文は小さく。メリハリがないと、違いが分かりづらい大きさや色になってしまうこともあります。 バナーの良い例・悪い例 下のバナーのレイアウトを見てみてください。 文字の太さなどの差はありますが、全体的にぬぼ〜っとした感じで、見づらいと思います。情報としては伝わるのですが、もっとよくできますよね。 このバナーで最も伝えたい重要なことは何でしょうか？一番なのはまず「興味を持ってもらう」ことではないでしょうか？早割キャンペーンとは「興味はあるけど…」という人の背中を押す目的があります。なのでまずは① 「早割」という部分から目に留めてもらう② それは、どういったメリットがあるのか？③ それ以外の情報の順番で優先を付けると、スッと理解しやすいデザインになります メリハリを意識して、違うものはやりすぎぐらい、変えてしまいます。。例えばフォントの大きさや種類、色を変える、重要な部分は思いっきり大きく太くて、逆に重要でない部分は小さくしたしましょう。 これで伝えたい情報が明確になり、読みやすくなりました。 強弱のポイントは、臆病にならず思いきって差をつけること デザイン歴が浅いと、このメリハリ感が弱い人が多くいます。中途半端な強弱でデザインするので、ぼやけた印象を与えてしまいます。 大事なのは、思いっきり差をつけることです。 MAXまでしてみてから、調整すると良いですよ。 【反復】 = 特徴が強い要素を同じルールで繰り返す Webデザインでは、特にこの反復が大事になります。例えば、Webサイトを全ページ違うデザインにすると。 ユーザーが混乱してしまいます。違うサイトに飛んだのかな？とか感じますよね。。 なれないうちは、色々とデザインを足していく人が多いですが、反復は一貫性や統一性を考えて使われるので、悩むようなデザインにならないように考えましょう。 同じサイトで同ページ内や別ページにまたいで反復している例 【左】Webクリエイティブコース 【右】CFブログ こうした反復は、サイト全体の統一感を生みます。 Webや広告では、全体に一貫性を持たせるためのスタイルやルールのことをトーン&マナーといいます。 反復のポイントは「リズム」を意識すること 同じものを繰り返すということは、「リズム」をつけるということです。そうすると、ユーザーに読み進めてもらえる可能性が高くなります。 デザインの基本ルールまとめ 4原則は難しいものではありません。デザインの基礎知識みたいなものです。 ですが、何でもそうですが基本が一番大事です。基本ができていなくて、いいデザインをしている人は見たことがありません。 そのため、まずは基本をしっかり理解して、自分に落とし込むようにしてください。 トリペン先生 4大原則は常に意識してデザイン作成に取り組みましょう！ 講座を完了したらクリックしてね！ レッスン完了 次のページへ デザイン基礎
