【ゼロからの流れも解説】デザインの基本原則４つで「伝わるデザイン」を

どうも、たっくん（@wakutakublog）です。

「まともなデザインを作りたいのに…」と悩んでいる非デザイナーの方へ。

デザインには４つの基本原則があります。

この４つさえ意識すれば「統一感があり、伝わるデザイン」を作ることができます。

逆にこれらの基本原則を知らず、なんとなくで作ったデザインは高確率で失敗するかと。

この記事は、WEBサイト制作を仕事にしている僕が “実際に作ったデザインをお見せしながら” 超分かりやすく解説するのでお付き合いください…！

デザインを作る際に欠かせない４つの基本原則

はじめに「デザインの基本原則４つ」を一覧にすると、以下の通りです↓

近接：余白でグループを切り離そう【2カラム構図で解説】

まずは「近接」について。

デザインにおいて「近接」が大切な理由は３つあります。

では一度「近接が上手くできていないデザイン」を見てみましょう。

これをパッと見て、

大半の人は迷いますよね。このような迷いが生まれるデザインは「悪いデザイン」と言っていいでしょう。

では「何がダメなのか」についてです。

このように４つの要素間にある「余白」が中途半端についています。

ココナッツオイルの画像（左上）に最も近い要素はシャンプーの文章（左下）ですね。

これが迷いの原因であり、逆に「左上の画像はシャンプーである」と誤認してしまう可能性すらあります。

では「改善方法」ですが、行うことは単純で以下の２つ↓

これらを行ったのが下のデザインです。

「画像・テキスト・画像・テキスト」という４つの要素として認識するのではなく「画像とテキストで１つの商品」というグループを作り２つの要素として扱います。

そして以下のように、余白の大きさを「グループ内の余白 ＜ グループ間の余白」としました。

整列：見えない線で団結力を強化しよう【料金表で解説】

次の基本原則は「整列」です。

デザインにおいて「整列」が大切な理由は２つあります。

では下の料金表のデザインを見て「好ましくないデザインはどれか」考えてみてください。

結論は「真ん中」です。

左右のデザインであれば「左列は機能の名称、右列はその有無や数値」とすぐに判断できます。

ですが真ん中のデザインの場合、右列に関連性が感じられません。

さらに言うと、視線の流れが定まらないため閲覧者への負荷が大きくなります。

お察しの通り、この原因となるのが「整列」です。

左のデザインには「整列の線が２本」右のデザインには「太く強い整列の線が１本」という見えない線がありますよね。

一方で真ん中のデザインには左に線があるものの、中心にあるガタガタの線が目立ってしまっています。

反復：デザインに一体感を生み出そう【見出しと本文で解説】

基本原則の３つ目は「反復」です。

デザインにおいて「反復」が大切な理由は３つあります。

では「反復」を取り入れていないデザインを見てみましょう。

あえて大袈裟にしたので違和感がありますが、普通に考えて「おかしい」と思うはずです。

上の本文を読み終えたとき「この後は続きなのか、それとも別の見出しなのか」という迷いが生まれ、読んでみないと分からないですよね。

「迷い＝悪」なので、これも悪いデザインと言えるでしょう。

見出しに「反復」を取り入れると下のようなデザインになります。

これならハッキリと「別の見出しである」「小見出しでもなく同階層の見出しである」ことが分かりますね。

ちなみに今回の反復では背景を黒で統一するだけでなく、点線や数字も付け足しています。

このように、反復として認識させるためだけに要素を付け足すこともアリです。

さらに言うと「目立つ要素が反復されていると、人間の目はつられてしまう」という習性があります。

上の例でいうと「２つ目の見出しに視線が移動したタイミングで、１つ目の見出しが視界にあると、ほんの一瞬そちらに視線が移ってしまう」ということです。（試してみてください）

なので反復によって「ページ滞在時間のUP」「本文を読み返す可能性UP」などのメリットが考えられますね。

コントラスト：焦点を作り視線を誘導しよう【ファーストビューで解説】

さいごの基本原則は「コントラスト」です。

デザインにおいて「コントラスト」が大切な理由は２つあります。

まずは「コントラストが弱いデザイン」を見てみましょう。

これをパッと見たとき、視線が定まらない感じありませか？

「おうち時間」というテキストと右のイラストの間で行ったり来たりする感覚です。

これこそが「コントラスト」が効いていない証拠ですね。

さらにテキストを上から見て行くと、最後にはボタンに行き着きます。

ですが、おそらくこのボタンは「あ、なんかボタンあるな…」程度にスルーされて終わりです。

これの原因もコントラストにあります。

ではコントラストを意識したデザインを見てみましょう。

これなら真っ先に「おうち時間」のテキストに目が向かうはず。

そして最後に行き着いたボタンで、視線の流れが一度ストップし「無料でお試しできるんだ」という思考までされると思います。

【制作の流れ】デザインの基本原則４つをすべて使ってみよう

ここまで「デザインの基本原則４つ」をそれぞれ個別に解説してきました。

ただ、これらは全て使わないと効果を発揮しません。

「近接・整列・反復・コントラスト」の１つでも欠けていたら、微妙なデザインになってしまいます。

とはいえ、個別には理解しても４つをバランスよく使いこなすのは難しいですよね。

なのでここからは「４原則を使って０からデザインを完成させるまでの流れ」を解説していきます。

STEP１：まずは必要な要素を置いてみる

STEP２：情報をグループ化し「近接」を取り入れる

「どこに何が書いてあるのか」がハッキリしないので、グループを作り余白を作りましょう。

これで「タイトル」「内容」「アピール文」という３つのグループができました。

STEP３：１本の線を意識して「整列」を作る

視線があっちこっち移動してストレスなので、１本の線を作りましょう。

「中央揃え」から「左揃え」に変えてみました。

これで文章のスタート地点がピシッと揃い、読みやすくなりましたね。

STEP４：文字サイズで「コントラスト」を作る

ちゃんと読む気がないと内容が入ってこないので、情報に優先順位をつけましょう。

目立たせたい情報は「文字のサイズや太さ」で強調させます。

STEP５：要素を追加して「反復」を作る

３つの要素（ご相談・打ち合わせ・ご利用開始）に関連性を感じないので、一体感を付け足していきましょう。

「ナンバー・右三角」を追加したことで、並列の関係がパッと伝わるようになりましたね。

さらにイラストも追加してみると、より関係性がハッキリしてきました。

STEP６：カラーを用いて「コントラスト」を強化する

文字のサイズや太字だけではコントラストが弱いので、色も使っていきましょう。

アピール文にピンクの下線を引くことで、重要ポイントが明確になりました。

また、ナンバーや右三角といった反復要素にもカラーを付けることで「繰り返されてる感」が強まり、デザインの統一感UPにつながります。

さらに背景色も使うと効果的なコントラストを生み出せます。

STEP７：細部までこだわり「反復」を強化する

かなり完成に近づいてきましたが、細かいところまでこだわりましょう。

箇条書きリストを「▼」に変更しました。

せっかく「▶︎」を使っているので、リストにも使うことで反復になります。

このように「反復」はまったく同じである必要はありません。一体感があればOKです。

【伝わらなければ無意味】デザインの基本４原則で「伝わるデザイン」を

デザイン作るときは「お洒落でカッコいいもの」を目指しがちですが、その考えはやめましょう。

芸術と違ってデザインは「情報を分かりやすく伝達するためのツール」でしかありません。

どれだけ「お洒落で美しいデザイン」や「アニメーションで賑やかなデザイン」を作ったところで、伝わらなければ無意味ですからね。

とはいえ、世の中にはお洒落で魅力的なデザインが多くあると感じますよね。

でもよく観察すると、それら全ては４つの基本原則を踏まえた上で成り立っています。

基本原則を使った上で、あえて崩してみたり、ブランドイメージを引き立てるデザインにしてみたりといった具合です。

なので今回紹介した「デザインの基本４原則」はぜっっったいに抑えておくべきポイントです。

最初にも書いた通り、これさえ忠実に守ればまともなデザインはできると思っています。

まぁ、実際に作ってみないことには使いこなせるようにならないので、今回の内容を参考にしながらデザインしてみてください！

「デザインの基本４原則」についてのさらに詳しい内容は『ノンデザイナーズ・デザインブック』に書かれているので、一度読んでおくといいかと（これはデザイナー必読書…！）