ココを押さえればおしゃれに見える!デザインのポイント3つ!

デザイン




デザインって文字の大きさ決めて、何万色の中から色を選んで、レイアウトも考えて…とやることが多く迷いますよね。

迷った挙げ句、微妙なデザインになってしまったなんていう経験はありませんか?

私もデザイン始めた頃は、作っているうちに何が良いのか分からなくなってしまうということが何度もありました。

そこで、そんな経験がある方のために、ココを押さえればおしゃれに見える!というポイントを3つ厳選しました!

3つのポイントならできそうですよね!

 

ずばり!

  1. フォント
  2. 余白

以上、この3つです!

では、それぞれ詳しく解説していきます。

 

①フォント

まずは、フォントを押さえていきましょう。

今回は、選ぶコツではなく読みやすくするコツを3つお伝えします。

フォントを選ぶコツについては、こちらの記事を読んでみてください。

プロのデザイナーが教える!初心者におすすめフォント選びの3ステップ

【フォントを読みやすくするコツ】

  1. 縦・横比は元のフォントのまま変えない
  2. 2行以上になるときは、行を近づけすぎない
  3. 文字間を詰める・空ける
  4. 文字の装飾はしない

 

①縦・横比は元のフォントのまま変えない

つまり、フォントを縦長・横長に伸ばさないということ。

フォントはすでに読みやすくデザインされているので、それをわざわざ壊してしまうと読みにくくなってしまいます。

Photoshop・Illustratorを使用している方は「Shift(シフト)」を押しながら拡大・縮小をすれば、フォントの縦・横比を維持したままサイズを変更できます。

(※Photoshop CC 2019版以降をご使用の方は、逆にシフトを押すと縦・横比が変形してしまうので注意です。)

 

②2行以上になるときは、行を近づけすぎない

行を離しすぎると読みにくいというのは分かると思うのですが、実は近づけすぎても読みにくくなってしまうのです。

「行送り」という項目であけるサイズを変更しましょう。

 

③文字間を詰める・空ける

文字をテキストで打っただけだと「、」「!」などの約物の前後が空いてしまいます。

空いてしまっている部分の文字間を詰めてあげると不自然な空間がなくなり、読みやすくなります。

約物とは:

言語の記述に使用する記述記号類の総称。具体的には、句読点・疑問符・括弧・アクセントなどのこと。

また、漢字・ひらがな・カタカナが混在している文の場合は、

  • 漢字の間を少し空ける
  • ひらがな・カタカナの間を少し詰める

ことをすると文字間隔が均等に空き、読みやすくなります。

Photoshop・Illustratorの場合は、以下の手順で文字間隔を空け詰めしましょう。

【手順】

  1. テキストツールを選択(ショートカットキー:T
  2. 文字間隔を変更したい間に入る(クリック)
  3. alt(option)+ ◀▶キー で間隔を空ける・詰める

 

④文字の装飾はしない

文字に色・境界線(縁取り)・影をたくさん付けたくなってしまう…。

分かります。いろいろ付いてたほうがデザインしてる感でそうですもんね。

でも!無駄につけないほうが間違いなく読みやすいです!!!

黒 or 白文字でOK。

境界線つける必要がある場合は、文字と境界線のコントラストを意識しましょう!

 

②余白

次に、余白です。

デザインしていたら勝手にできたもの、それが余白だと思っていませんか?

実は、余白もデザインできるんです。

むしろデザイナーは余白をデザインしています。

よくあるのが枠の中に文字があるデザイン。

このように枠があると、ギリギリまで入れたくなってしまうんですよね。

よく分からないけど余ってしまった部分って不安ですもん。

「あれ、空いちゃった…。ここの空白不安だな…。とりあえず埋めとくか!」ってなってしまうのも無理はありません。

だって、「余白はデザインする」ということを知らなかったのですから!

でも「余白はデザインする」と知った今から、少しだけ意識してみましょう!

上下・左右の余白をそれぞれ揃え、多くとったパターンです。

これだけで、文字が読みやすくなりましたよね。

余白が少ないほうが文字が大きくでき読みやすいのでは?と、埋めてしまうこともあるかと思います。

ですが、文字の大きさよりも余白があるかないかの方が、文字の読みやすさに関係しているのです。

余白について詳しく学びたい人は「けっきょく、よはく」という書籍がおすすめですので、ぜひ読んでみてください。

 

③色

最後は、色についてです。

今回は「選ばない方が良い色」をお伝えします。

色を選ぶコツについては以下の記事で紹介しましたので、合わせて読んでみてください。

配色センスないと思っている人必見!配色で失敗しない方法7選

 

【選ばない方が良い色】

  1. 原色
  2. カラフル

 

①原色

原色とは、すべての色の元になっていて、他の色とは混ざらない色のことを指します。

この世に存在する色は、元となる3色を混ぜて表されています。

自ら光っている物体の色は「光の3原色」で、色を吸収して表示している色は「色材(インク)の3原色」と呼ばれる3色を混ぜることで表示されるのです。

  • 光の3原色:赤・緑・青で構成されており、テレビ・PCなどのモニターではこの3色を使用して表示されている。
  • 色材(インク)の3原色:シアン・マゼンタ・イエローで構成されており、プリンターのインクなどで使用されている。

といろいろ説明しましたが、言いたいことは真っ赤・真っ青・真っ黄色・真ピンクなどは使わないほうが良いよ!ということだけです。

Photoshop・Illustratorであれば、カラーパネルの一番右上の色は採らないようにしましょう。

 

原色だけカラーコードをまとめたので、参考にしてみてください。

※インクの場合、この色より暗めに見えます。

 

②カラフル

カラフルにしたくなる気持ちはいったん置いておきましょう。

特に、文字に色をたくさん付けてしまうと、逆に読みにくくなります。

 

デザインは「こうしたい!」という自分の好みではなく、そのデザインを見た人に伝わりやすいかどうかを考えるのが大切です。

目立たせたいポイントだけに色をつける。もしくは大きく or 太くする。

 

こちらの方が断然読みやすいですよね!

ポイントとして(黒・白以外の色で)最大4色というのを覚えておくと良いですよ。

同じ割合で色を入れるのではなく、メインカラーとサブカラーを決め、[メイン]5:[サブ①]3:[サブ②]2くらいの割合で入れるのがおすすめです。

 

ココを押さえればおしゃれに見える!デザインのポイント3選!まとめ

今回は、最低限ココを押さえておきましょう!というポイントを3つ厳選してご紹介しました。

  1. フォント
  2. 余白

デザインは考えることが多く、難しいイメージもあるかと思いますが、最低限これだけやってみてください。

これまでよりも見やすく、おしゃれなデザインになるはずです!