こんにちは！シオです。
突然ですが、
こんなお悩みありませんか？
「なんか素人っぽくなる」
「色やフォントを選ぶとき、
なんとなくの感覚で選んでしまう。」
実はそれ、
センスがないからではありません。
原因はシンプルで、
レイアウト・配色・フォントという
ルールを知らないだけなんです。
この3つを意識せずにデザインすると…
🌀情報がごちゃごちゃして伝わらない
🌀色が多すぎで見づらい
🌀「なんとなく」のデザインから抜け出せない
つまり、「見てもらえない」「伝わらない」
デザインになってしまいます。
逆に、この3つを理解して押さえるだけで…
✅情報が整理されて「伝わる」デザインに
✅全体にまとまりが出て「見やすく」なる
✅自信を持って制作できる
結果、「わかりやすく、伝わるデザイン」
に変わります。
今回は、最初に覚えてほしい
「レイアウト・配色・フォント」
の基本ルール
について、徹底解説します！
「センスがないかも…」と悩んでいた方も
読み終わる頃にはきっと
「自分にもできそう！」と思えるはずです。
レイアウトの基本
1.視線の流れを意識する
見る人の視線が定まらず、
どこを見ていいのかわからないと
情報が伝わらない
あるいは見てもらえなくなります。
パッと見て、情報が
正確にわかりやすく伝わるような
視線の流れを作りましょう。
具体的にどんな視線の流れがあるのか、
代表的なパターンを紹介しますね！
❶Z型レイアウト
人の視線は上から下へと流れます。
横書きの場合は、
自然と左上から右上、左下、右下
と自然と視線が流れますよね。
これを意識したレイアウトです。
見出しや重要な要素を
角に置くと効果的です。
❷F型レイアウト
左上から右に読み、
順に下に移動していくレイアウトです。
Webサイトの記事やブログなど
情報量が多い場合に向いています。
下に行くほど注目度が下がるので
重要な情報は上に配置しましょう。
❸N型レイアウト
縦読みする場合に多い
右上から右下、左上、右下の順に
視線を誘導するレイアウトです。
縦書きのキャッチコピーの場合は
このレイアウトを意識すると
効果的です！
2.余白はデザインの一部
❶情報を整理
余白をしっかり取ることで
情報が処理されて見やすくなります。
下の2つの画像を比べてください。
右側の方が小さい文字ですが、
余白があることで整理され、
読みやすくなっています。
❷余白が与える印象
余白の取り方で
デザインの与える印象は変わります。
下の2つの
バナーを比べてみて
どんな印象を受けますか？
左側の余白が狭い方は
にぎやか、カジュアルな印象
右側の余白が白い方は
オシャレ、高級な印象
を受けるのではないでしょうか？
デザインするときは
どんな印象を与えたいか
ということを意識してみましょう！
3.揃えるだけで整う
下の右側の画像のように
文字や写真の端や余白、行間を揃えると
一気にまとまって見えます。
左側のっように配置がバラバラだと
見づらく、情報が伝わりにくいです。
ガイド線やグリッド線を使用すると
端を揃えやすくておススメです。
配色の基本
1.色の三属性を知る
「色の三属性」とは、
色を表すときに重要な
「色相」「彩度」「明度」
の3つの要素のことです。
❶色相
色相とは、「赤」「青」「緑」など
色の種類のことです。
上の画像のように
色を円形に並べたものを
色相環といいます。
配色を考えるときは、この関係性を
意識するとまとまりやすくなります。
例えば、
色相環で向かい合う色同士は「補色」
と呼ばれ、一緒に使うと互いに引き立ちます。
色相環で隣り合う色は「近似色」
と呼ばれ、
自然で落ち着いた印象を
与える組み合わせができます。
❷明度
明度とは、明るさの度合いのことです。
白に近づくほど明るく
黒に近づくほど暗くなります。
❸彩度
彩度とは、鮮やかさの度合いのことです。
彩度が高いほど鮮やかな色となり
彩度が低い場合には、
くすんだ色になっていきます。
❹トーン
トーンとは、色の明度と彩度の組み合わせ
によって生まれる色の雰囲気のことです。
トーンを揃える事で
デザインに統一感が出ます。
また、トーンで雰囲気を演出できるため
伝えたいメッセージやターゲットに合わせて
トーンを選ぶようにしましょう！
2.色の持つイメージを知る
色にはそれぞれイメージがあります。
見てもらう人に
どんな印象を与えたいか
を考えて選びましょう！
3.配色は3色以内でまとめる
色をたくさん使うと
ごちゃごちゃしてしまい
全体がまとまりのない印象になります。
そこで、使う色は3色以内にし
・ベース【70％】
・メイン【25％】
・アクセント【5％】
この比率にすると、
バランスよくまとまります。
フォントの基本
1.フォントが与える印象
フォントを選ぶときに、
一番大切なのは「読みやすさ」です。
でも、実は「印象」もすごく大事。
フォントは、デザイン全体の雰囲気を
大きく左右します。
なんとなく選んでしまうと
🌀伝えたいイメージと合わない
🌀統一感がなくなる
🌀素人感が出やすい
このようなデザインになってしまいます。
下の二つの言葉を見て
どう感じますか？
左側は違和感がありませんか？
フォントの雰囲気と
言葉に意味が合っていないと
人は違和感を覚えてしまいます。
だからまずは
代表的なフォントが与える印象
を覚えましょう！
❶ゴシック体(角ゴシック)
太めを使うと迫力が出て
細めを使うとスマートに。
セール告知や、スポーツ、IT系サービス
などのデザインに向いています。
❷ゴシック体(丸ゴシック)
やわらかい印象があるので、
子ども向け、女性向け、食品
などのデザインに向いています。
❸明朝体
タイトルや本文に使うと
上品な雰囲気になります。
背景はシンプルに。
ブライダル、和食、化粧品
などのデザインに向いています。
❹手書き風フォント
写真に添えると自然。
子どもっぽい印象だけでなく、
使い方でオシャレな印象に。
全体的に使うと読みにくくなるので、
タイトルやワンフレーズに限定すると
バランスが良いです◎
❺筆文字
余白を広めに取り、和のイラストや写真
と併せると世界観が際立ちます。
和食店、旅館、日本らしい行事
などのデザインに向いています。
2.フォントは多く使わない
1つのデザインに使うフォントは
基本的に2種類まで
に抑えるのがおすすめです。
なぜなら、フォントを3種類以上使うと…
🌀見る人の視線が分散して読みづらくなる
🌀全体がちぐはぐでまとまりがなくなる
🌀「素人っぽさ」や「落ち着きのなさ」
を感じさせてしまう。
逆に、フォントを少なくすると…
✅情報が整理されて見やすくなる
✅デザインに一貫性が出て
「プロっぽい」仕上がりになる。
ポイントは、
メイン(タイトル)とサブ(本文)
の2種類を使い分けること。
これだけで十分に見やすく
洗練されたデザインになります。
1つのフォントで文字の太さに
バリエーション(細字、太字、極太)
の種類が多いフォントを使うと、
統一感がありメリハリのあるデザイン
になるのでおすすめです。
まとめ
【レイアウト】
・視線の流れ（Z型・F型・N型）を意識
・余白を活かして整理・印象づけ
・端や行を揃えるだけで一気に整う
【配色】
・色の三属性(色相・明度・彩度)
とトーンを理解
・色のイメージを意識して選ぶ
・3色以内(ベース70％/メイン25％/
アクセント5％)でまとめる。
【フォント】
・フォントは「読みやすさ+印象」で選ぶ
・フォントは伝えたい雰囲気に合わせて選ぶ
・1デザインに使うのは基本2種類まで
この基本を意識するだけで
素人っぽいデザインから卒業し
わかりやすく、伝わるデザインに変わります。
その経験がきっと
「私にもできる！」という自信
につながります。
最後まで読んでいただき、
ありがとうございました！
ここまで読んでくれた
やる気のあるあなたに
フォント図鑑をプレゼントします🎁
🌀こんなデザインのときは
どのフォントを使ったらいいの？
と迷ったことがある方は
デザインの雰囲気別に
一覧にしているので
ぜひ、活用してみてね！
PS.
デザイン経験０の
社畜OLだった私が、
フリーデザイナーとして
稼ぐ力を学び、
その過程で得た知識、スキルを
公式LINEで配信しています。
今の現状に何かしら不満や不安を感じ、
現状を打破したいと思っているのなら・・・
必ず私の公式LINEを登録して
活用してくださいね！
好きな場所で好きな時間に仕事し、
楽しみまくる人生を手に入れましょう♡
遠回りせずに進みたい人は、
こちらからポチッとな ⇩ ⇩ ⇩
コメント