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

どうも、たっくん(@wakutakublog)です。

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

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

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

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

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

たっくんのアイコン画像たっくん

ぶっちゃけると、この4原則だけを身につけた状態でデザインを作ったりもしてました。

目次

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

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

  • 近接:余白でグループを切り離す
  • 整列:見えない線で団結力を強化
  • 反復:デザインに一体感を生み出す
  • コントラスト:焦点を作り視線を誘導する
たっくんのアイコン画像たっくん

文字だと意味不明なので、デザインを見ながら1つずつ解説していきますね!

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

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

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

  • 他3つの原則を使うための土台になる
  • 散らばった情報をまとめ、パッと見ただけで関連性が分かる
  • 視線が定まり、迷いが消える

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

これをパッと見て、

  • どっちがシャンプーの写真か分かりますか?
  • はじめに左上の写真を見たあと、右か下の文章のどちらを読むべきか判断できますか?

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

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

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

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

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

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

  • 関連性のある情報をグループ化する
  • それぞれのグループ間に適切な余白を作る

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

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

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

近接のポイント
  • パッと見ただけで情報の関連性が分かるようにしよう
  • そのためには「散らばった情報のグループ分け」が必要!
  • 1つのグループとして認識できるように、グループ間に広めの余白を作ろう
  • 最後に俯瞰してみて、視線の流れに迷いが生まれないかチェックしよう
たっくんのアイコン画像たっくん

近接は「その他3原則の土台」にもなるから絶対に抑えておこう!

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

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

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

  • 洗練された印象を与えられる
  • 近接による関連性をさらに強化できる

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

結論は「真ん中」です。

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

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

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

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

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

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

整列のポイント
  • なんか気持ち悪い…と感じたら整列に原因があるかも
  • 全ての要素を他の何かしらの要素と整列させよう
  • ガタガタの線を見つけたら、整列できないか考えよう
  • 上から下まで視線が気持ちよく流れたらOK
たっくんのアイコン画像たっくん

テキストの中央揃えは整列の敵だから、安易に使わないように…!

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

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

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

  • 素人っぽいデザインから抜け出せる
  • 作品に一体感が生まれる
  • 単調なデザインに面白みが生まれる

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

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

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

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

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

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

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

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

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

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

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

反復のポイント
  • 反復のためだけに要素を追加してもOK
  • 反復要素を目立たせると、視線をコントロールできる
  • 単調なデザインになったら面白みのある要素を追加し、さらに反復させると一体感もUP
たっくんのアイコン画像たっくん

反復を使いこなせると一気にデザインの幅が広がるよ…!

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

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

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

  • 読者の視線を引きつける
  • メリハリがつき面白みが生まれる

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

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

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

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

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

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

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

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

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

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

コントラストのポイント
  • 読者はテキストを読まない。流し読みされる前提で重要な情報は目立たせよう
  • 目立たせた情報で興味を引けなければ、その先はない
  • 視線のスタート地点と終着点を作ろう
たっくんのアイコン画像たっくん

強調したテキストで興味を惹きつけることが最重要ポイント!

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

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

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

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

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

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

たっくんのアイコン画像たっくん

よくある「ご利用の流れ」を7つのステップで解説するよ!

STEP1:まずは必要な要素を置いてみる

たっくんのアイコン画像たっくん

とりあえず必要な情報を並べればOK

STEP2:情報をグループ化し「近接」を取り入れる

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

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

たっくんのアイコン画像たっくん

グループと認識できるように余白を作ることが「近接」です

STEP3:1本の線を意識して「整列」を作る

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

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

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

たっくんのアイコン画像たっくん

視線がストンと下まで流れれば「整列」もクリア!

STEP4:文字サイズで「コントラスト」を作る

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

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

たっくんのアイコン画像たっくん

パッとみて「何が書いてあるか」分かればOK

STEP5:要素を追加して「反復」を作る

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

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

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

たっくんのアイコン画像たっくん

統一感だけじゃなく「視覚的なおもしろさ」も加わりましたね

STEP6:カラーを用いて「コントラスト」を強化する

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

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

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

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

たっくんのアイコン画像たっくん

スタート地点と終着点をコントラストで明確にしよう

STEP7:細部までこだわり「反復」を強化する

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

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

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

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

たっくんのアイコン画像たっくん

これで完成です…!!

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

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

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

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

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

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

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

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

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

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

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

created by Rinker
¥2,158 (2020/10/24 18:50:41時点 Amazon調べ-詳細)

たっくんのアイコン画像たっくん

4原則を使いこなして、なんとなくのデザインから卒業しましょう!

この記事が気に入ったら
いいね または フォローしてね!

目次
閉じる