超基本的なルール：デザイン4原則

はじめまして。Chappy Tabbyといいます。

今回、タイトル通り、駆け出しデザイナー向けの基本中の基本を、学習成果をアウトプットする一環として、noteに残させていただくことにしました。

目次：

＊簡単な自己紹介（そんなのいらねーよって人は、次へどうぞ）
＊グラフィックデザイン（Webデザインを含む）って何をするの？
＊デザインをする際、絶対に忘れてはいけないこと
＊デザインの大原則（デザイン4原則）
　- 整列
　- 近接
　- 反復
　- コントラスト
＊トーン＆マナー（別名トンマナ）
＊今回の内容のまとめ

まずは、簡単な自己紹介をします。

以前フリーランスのイラストレーターをしていて、兼業でWebデザインも請け負ったことがありました。

その後仕事をやめていましたが、フリーランスの仕事復帰にあたって、改めて本格的にWebデザイン（とその前提でもあるグラフィックデザイン）を学び直すため、短期集中型の学校（TECH::EXPERT）に通い始めている猫バカな、最近卵に還ったデザイナー（修行中）です。

あれ、お前哺乳類じゃねーの、いやカモノハシ？

というツッコミは不許可です。

さて、本題に戻りましょう💦

…とその前に、そもそもデザイナー（この場合はグラフィックデザイナー）って何をするんでしょうかね？

グラフィックデザイン（Webデザインを含む）って何をするの？

デザイナーの仕事とは、クライアントが解決したいと思ってる問題（例：新発売の商品をより多くの人に知ってもらい、買ってもらいたい）を、デザインを通じて解決することです。
具体的にはクライアントが望むイメージをデザイナーが汲み取って、チラシ、ポスター、Webサイトやランディングページのデザインを作り上げたり、広告バナーや企業ロゴを作ったりします。

クライアントは企業や商店主であることが多いため、

＊商品・サービスをクライアントが想定している人たち（ターゲットと呼ぶことが多い）に買ってもらいたい・利用してもらいたい
＊会社の理念・ミッションを的確に伝えて、知名度を上げたい・あるいは新たな顧客を獲得したい

というような問題を解決しようとしている場合がほとんどです。

デザインをする際、絶対に忘れてはいけないこと

ユーザー（デザインを見る人達：潜在的にお客様になってくれる可能性がある人達）の視点を忘れないことです。

普通、ユーザーは情報を求めてデザインを見ています。

なので、デザインする媒体から、すぐさまユーザーが必要な情報を読み取れないと、とてもとても困ります。
同時に、クライアントが伝えたいと思ってる情報をユーザーに的確に伝えなくてはなりません。

これは絶対に忘れちゃいけません！！

うっかり忘れてしまうと、例えば…

.。oO｛このポスターに書かれてるイベント…どこで開催されてるの…行きたいと思ったのに…😭｝

.。oO｛なんかチラシがあるけど、なんの相談会なのかさっぱりわかんねー…🤔｝

.。oO｛この会社のサイトを見たけど、トップページの面白い写真しか覚えてない。何をしてる会社だっけ🙃｝

なんてことになりかねません🙀
冗談のように聞こえるけど、そういうデザイン、本当に存在するので気をつけましょう…。

デザインの大原則（デザイン4原則）

そんなわけで、
ユーザーが求めている情報がひと目で分かり
クライアントが伝えようとしている情報がうまくユーザーに伝わるようにする
ためのルールを、先人たちが作ってきました。

私が通い始めた学校では
デザイン4原則
と呼んでいます。

それは
「整列」「近接」「反復」「コントラスト」
の4つです。

大体の意味は言葉通りなんですが、一つ一つ掘り下げていきましょう。

4原則に従ったサンプル画像も添えておきました。

文字が例のラテン語のあれだが考える余裕がなかったんだ…許して🙇

🐱.。oO｛今どきのPhotoshop、テキストツール使うと勝手にLorem Ipsum入れてくれるようになった｝

整列

各要素をユーザーが読みやすいように整列すること。

サンプル画像でも、大きな文字は中央揃え、長文は左揃えにし、見出しの罫線と長文、一番下の文章の横幅を揃えています。

例：
＊タイトルやキャッチコピーなど目立たせたい文字は中央揃えにする。
＊長文は左揃えまたは右揃えにする。
＊文章が書かれた各要素の幅を揃える。横の位置も揃える。

近接

関連する要素同士をより近くに配置すること。

見出しと本文（長い文章）は近くに、別の見出しと本文の組とはやや離れて配置しています。

タイトルと見出し＆本文のブロック、一番下の文章の余白は多くしています。

例：
＊ブログの記事リストで、同一記事のタイトル・画像・概要はまとめて配置する。
＊逆に異なる記事の余白はより多く取る。
＊ポスターで、開催日時と場所は関連性が高いので近くに置く。

反復

書体、線、色、レイアウトを繰り返し使い、デザインに統一性をもたらす。

今回の画像では、書体の種類と色・見出しの装飾（罫線）・レイアウトで同じものを繰り返し使用しています。

例：
＊レストランのメニュー表で、各メニュー名・価格・説明文・写真の各要素で使っている書体、色、装飾、レイアウトをどのメニューでも同じにする。あるいは一定のパターンで繰り返す。
＊Webサイトのナビゲーションメニューの書体・色・大きさ・クリックしたときの挙動を統一する。

コントラスト（対照）

各要素の違いが際立つように、罫線などの装飾を追加したり、書体を変更したり、要素や文字の色・大きさなどを変える。

例の画像では、文字全体の色を背景の補色にしています。
そして、タイトルの文字サイズは特に大きくしてドロップシャドウを少し入れて目立たせています。

また見出しは少し大きめの文字に罫線を左と下に入れています。更に、左の罫線の方を太くしています。

さらにもう一つ重要なことを書きます。

トーン＆マナー（別名トンマナ）

デザインに統一性・一貫性をもたせること。
色や文字などのデザイン要素によって作られる。
情報の分かりやすさと読みやすさにも影響してくるが、企業ブランディングでも重要になってくる。

デザインするときは、トーン＆マナーが成立するように（＝4原則の「反復」に従うように）します。

例えば、コーポレートサイトの企業概要のページデザインと、業務一覧のページデザイン、プレスリリースのページデザインが使用書体からサイズ、色、レイアウトまでてんでバラバラだったらどうでしょうか。

サイトを見ているユーザーは…

なんじゃこりゃーーーーーーーーーーーーー🤯

と混乱すること間違いなしです。

（正直こんな恐ろしいサイトデザイン実在してほしくない😂）

今回の内容のまとめ

＊デザインとはクライアントが解決したいと思ってる問題（例：新発売の商品をより多くの人に知ってもらい、買ってもらいたい）を、デザインを通じて解決すること

＊ユーザー（デザインを見る人達：潜在的にお客様になってくれる可能性がある人達）の視点を忘れない

＊先人たちの知恵「デザイン4原則」に従ってデザインをしていけば、少なくともユーザーが必要な情報を見つけられて、クライアントが意図する情報がユーザーに伝わる

＊デザイン4原則とは「整列」「近接」「反復」「コントラスト」である

＊トーン＆マナーとはデザインに統一性・一貫性をもたせる大切な概念

以上となります。

いかがでしたか。

なにかご要望等ありましたら、Twitter（@ChappyTabby）まで伝えていただければと思います。