【センス不要】デザイン基本4原則で綺麗なレイアウトを実現

うさぎのアイコン画像うさぎ

デザインセンス無いからレイアウトが悲惨…

黒猫のアイコン画像黒猫

芸術的なデザインはともかく、見栄えが良く見やすいデザインはノンデザイナーでも余裕で作れるよ!

見やすいデザインはデザイナーでなくても役に立ちます。

報告書、プレゼン、業務資料などは見た目が悪いと内容が良くても評価されないなんて事もあり、デザインの基礎はデザイナーでなくても抑えておいたほうが良いでしょう。

例えばこのようなよくあるレイアウト、これは基本4原則のみで作った文字1色の単純デザインですがなんとなく整って見えますよね。

今回はたった4つの基本を守るだけで見た目も読みやすさも向上するデザイン基本原則について解説します。

デザインの基本4原則とは?

  1. 【近接】グループ化による情報整理で理解しやすく
  2. 【整列】要素を整列させて統一感のあるデザインに
  3. 【反復】同じ要素を繰り返す事で視認性・可読性UP
  4. 【対比】コントラストにより伝えたいものを強調
デザイン4原則の効果
  • 統一感を出し読みやすく
  • 内容を誤解なく伝えやすく
  • 情報を整理し理解しやすく
  • 優先順位をつけ伝えやすく

4原則を使用したもの、使用していないものを図解で比較し詳しく解説していきます。

目次

【近接】グループ化による情報整理で理解しやすく

近接Proximity

すべて重要なデザイン4原則ですが、あえて順位をつけるなら一番は『近接』

近接が機能していないデザインはもはやデザインと呼べません。

近接を使う目的

近接を使う目的はグループ化して情報を整理するためです。

関連性の高い情報同士を近づけ情報の関連性を強調することで一瞬で内容が理解できるデザインになります。

近接を使用しないと情報の関連性が伝わらない

近接を使っていないデザイン

近接を使用していない
商品名が上なのか下なのかすぐに理解できない
近接適用比較
余白のサイズを変えてグループ化

近接を使ったデザイン

近接を使用
近接によりグループ化され、すぐに理解できるデザインに

このように近接により要素を近づけてグループ化することで、情報の関連性がはっきりと理解できるようになります。

近接の使い方はかんたんで関連性が強いものを近づけ、関連性が弱いものを遠ざけるだけ。

近接効果でひと目で伝わるデザインに

近接を使っていないデザイン

近接を使っていないデザイン例
視線があっちこっち移動する羽目に

近接を使ったデザイン

近接あり
見たい情報に一瞬でアクセス可能

このように『近接』を利用しグループ分けすることで情報が整理され、ぱっと見ただけでも内容が伝わるようになります。

また近接の強弱により関連性の強さを調整することも可能

近接によるグループ化
関連性に応じてグループ分け
近接によるグループ化(余白部分)
関連性に応じて余白を変更

近接の強弱を使い分ける事ができると装飾がなくても情報を伝えることができるのでシンプルなデザインでも見た目が良くなりますよ。

【整列】要素を整列させて統一感のあるデザインに

整列Alignment

要素を整列させることでデザインに統一感が生まれます。

『近接』でまとめたグループを『整列』できれいに並べることで美しく見やすいデザインが実現可能。

基本的な整列
  • 左揃え
  • 中央揃え
  • 右揃え
  • 上揃え

今読んでいるこのブログ記事は『左揃え』
小説は文字が上に揃う『上揃え』

中央揃えは長文になるととても読みにくくなるので文章がメインの場合は左揃えにするのが基本。

整列には斜めの線やオブジェクトの形状に沿って揃えるなど揃え方はいろいろありますが、基本は上記の4つですね。

整列されていないデザインは読みにくい

整列していない、乱雑なレイアウト
整列していない、乱雑なレイアウト
要素を分類
『整列』されていないが『近接』によってかろうじてまとまっている

上の画像は整列が機能していない、要素をてきとうに並べただけのデザインです。

バランスが悪いため、とても読みにくく読む気が失せますよね。

整列されたデザインは統一感があり秩序を感じる

整列後のデザイン
整列されたデザインのグリッドライン

このようにラインにそってレイアウトすることで統一感が生まれ、見えない線が見えるようになります。

上記の画像ではわかりやすいように整列線を色付けしていますが、きれいに整えられたレイアウトは色付けしなくても『見えない線が見えます

先程の『近接』の例でも『整列』が使用されています

整列を強調したい場合は色付けもあり

整列を強調したい場合は色付けもあり
色付けすることで見えない線が見えるようになり、整列が強調されます

色がなくてもわかりやすく区別できるのが理想ですが、情報量が多く整列がわかりにくい場合はエリア分けによって対処することも可能です。

  • 色を塗ってエリア分け
  • 枠で囲んでエリア分け

このようにグループとして目立たせることが可能ですが、線や色を多用すると安っぽい印象が出がちなので装飾に頼らず『近接』『整列』だけで区分けできるようになるとGood

【反復】同じ要素を繰り返す事で視認性・可読性UP

反復Repetition

反復とは繰り返しのことで、同じルールに基づいてスタイルやフォーマットを統一します。

反復の効果とポイント

反復で同じ要素を繰り返し利用することで一貫性が生まれ、ユーザーが読みやすく混乱することのないデザインになりますよ。

また、反復は同じページだけにとどまらず繰り返し使用することでイメージという記憶定着効果も期待できます。

アプリやスマートフォンのUIなどにも反復が用いられ、デザインだけでなく操作方法やボタンを繰り返し利用することで下記のような効果を発揮しています。

反復の効果
  • 統一感UP
  • 一貫性UP
  • 可視性UP
  • 速読性UP
  • 利便性UP
  • 記憶定着

今見ていただいているこのブログも『大見出し』と『小見出し』を繰り返し同じデザインを利用することで構造をわかりやすくしています。

利用する装飾の種類を減らし、装飾の法則を作ることで読みやすいデザインになりますよ。

反復により統一感やリズムが生まれ読みやすく

同じルールで整えられたデザインは情報が整理しやすくなります。

逆に反復を利用しないと統一感が生まれず、非常にちらかった印象に。

反復の例

反復はあらゆる要素に対して有効

反復は文字だけでなくイラストや雰囲気など、多くの要素に対して有効。

  • ロゴ
  • 位置
  • 見出し
  • 大きさ
  • フォント
  • イラスト
  • テイスト
  • シリーズ

この他にもあらゆる要素に対して反復は効きますので、繰り返し利用し『統一感』や『一貫性』を出していきましょう。

【対比】コントラストにより伝えたいものを強調

対比Contrast
うさぎのアイコン画像うさぎ

『近接』『反復』『整列』の3つを使っただけでもそこそこ見れるデザインになってきたね

黒猫のアイコン画像黒猫

”なにか足りない感じ”を埋めるのが最後の『対比』になります

ここまで解説してきた3つだけでも整ったデザインになりますが、整いすぎていて情報の優先順位がわからないので『対比』を利用してコントラストを出してみましょう。

対比のないデザインは単調で伝わりにくい

対比のないデザイン

まずはコントラストの無いデザインです。これでは何が伝えたいかわかりませんよね。

では中で強調したい情報はどれでしょうか?

  • 店舗名
  • キャッチコピー
  • 営業開始日
  • オープン告知

『デザインで一体何をしたいのか?』をはっきりさせることが重要になります。

伝えたい情報の優先順位に応じて強調

強調したいものにフォーカスして3パターンレイアウトしてみました。

オープン日時を強く強調したい場合

オープン日時を強く強調したい場合のデザイン

キャッチコピーを強く強調したい場合

キャッチコピーを強く強調したい場合

ロゴを強くアピールしたい場合

ロゴを強くアピールしたい場合のレイアウトデザイン

このようにコントラストを出すことで一番伝えたい情報が強調され、伝わるデザインになります。

  • 全部強調しようとすると逆に全部目立たなくなる
  • 優先順位をつけるとメリハリのあるデザインになる

ジャンプ率に応じて印象が変わる

対比による違い比較
ジャンプ率の違いにより印象が大きく異る

対比をつけたい要素同士の差のことをジャンプ率と呼びます。

ジャンプ率はフォントのウエイト以外にも色、図、アイコンなどでも上げることが可能。

ジャンプ率を高くするメリット
  • 力強い印象
  • 情報がすぐに伝わる
  • 伝えたい情報を強調できる
ジャンプ率を低くするメリット
  • 高級感や洗練された印象を与える
  • シンプルで全体の統一感を出しやすい

伝えたい情報を伝える際に『対比』は重要ですが、強調により与えられる印象も含めてデザインすると良いですよ。

デザイン4原則を使って見やすいレイアウトにしましょう

デザイン4原則まとめ

4つのデザイン基本原則を紹介しました。

これらはあらゆるデザインの基礎となるものなのでしっかりと抑えておきましょう。

デザイン4つの基本原則
  1. 『近接』で情報をまとめる
  2. 『整列』で整える
  3. 『反復』でリズムを作る
  4. 『対比』で強調する

なんとなくでレイアウトするよりこの4つを意識したレイアウトにしてみてください。

崩すにしても、一度整えた後に崩したほうが美しいデザインになりますよ。

レイアウトが整っているのにデザインの見栄えが悪い?

4つの基本原則を使用しているのに見た目が悪い…っていう時は余白や装飾を見直してみてください。

デザインの見栄えが悪くなる主な原因
  • 余白がない
  • 装飾が過剰
  • 色の使い方が悪い

他にもやりがちな失敗をまとめましたので下記の記事もあわせてご覧ください。

デザインは心理学を利用するとさらに効果的に

見る人のことを考えてデザインすることも重要。

人の心理を考慮してデザインにすることでさらに読まれやすいデザインに仕上がりますのでぜひ『デザイン×心理学』も取り入れてみてください。

デザインは基本だけでも見栄え良く見やすくなります

今回紹介したように必要最低限のデザインは難しくなく、デザイナーでなくても十分なものばかりです。

ぜひ次の提案書や論文資料などにデザインの基本原則を使ってみてくださいね。

黒猫のアイコン画像黒猫

今回紹介した基本だけでも見た目が格段に良くなりますが、更に細かい場所までこだわりたい人は下記の記事も参考にしてみてください!

コメント

コメントする

目次
閉じる