「見やすいデザインにしたいけど、どのようなことを意識すれば良いのか分からない」
「レイアウトの基本を知って、見やすいデザインにできるようにしたい」
このような考えをお持ちの方は多いでしょう。
見やすいデザインにするために、どうすれば良いか分かりませんよね。
実はレイアウトの基本を知るだけで、誰でも見やすいデザインができるようになります。
そこで今回はデザインの基本ルールであるレイアウトの基本や読みやすい書体・色使いなどについて紹介します。
また、視認性が低いレイアウトの特徴についても紹介するので、レイアウトの基本について知りたい方は、ぜひ最後までご覧ください。
目次
デザインの基本ルールとは何か？レイアウトの基本について知りたい方必見！
ここでは、デザインの基本ルールであるレイアウトの4つの原則について紹介します。
1.整列
まずは、情報を一定のルールに従って並べる「整列」です。
文章や図は、見えない線に沿うように並べます。
そうすることで、情報が規則正しく並び、視認性が上がるため情報を理解しやすくなります。
横書きの場合は、左揃え・中央揃え・右揃えのいずれかに統一すると良いでしょう。
左揃えは、最もよく使用される整列のパターンで、長めの文章におすすめです。
中横揃えは、インパクトを与えやすいため、短いメッセージを強く訴えかけたい場合に使用すると良いでしょう。
右揃えは、変則的でおしゃれな雰囲気にできますが、少し見づらくなる可能性があるため、使用する場合は注意しましょう。
基本的には左揃え・中横揃えのどちらかで配置します。
2.近接
次に、関連する情報を近づける「近接」です。
関連性の高い情報を近くに配置することで、内容がまとまりやすくなります。
例えば、図とその説明文をなるべく近づけて、対応関係を明確にすることです。
関係性のある情報を近づけると同時に、関係性の薄い情報は離すことも意識すると良いでしょう。
3.反復
次に、特徴的な要素をパターン化して繰り返す「反復」です。
同じ要素が繰り返し続くことで、人は安心感を覚えるため、強調する必要がない要素は体裁を統一するようにしましょう。
例えば、スライド資料のデザイン・見出しの書式や位置・文章の行間幅などです。
「この情報はこの位置にある」と認識させることで、本当に伝えたい部分に意識を集中してもらえるようになります。
4.強弱
最後は、大きさや色を変えて情報の優先順位を明確にする「強弱」です。
文字の大きさや色を変えたり、太字にしたりして強弱をつけることで、伝えたい情報が目立ちます。
ただし、色を変えて強弱をつける場合は、基本の色以外に1色、多くても2色までにしましょう。
色を使いすぎると、かえって強調したい部分が分かりづらくなってしまいます。
読みやすい書体とはどのようなものなのか？
文字を入力する際にさまざまな書体を選べますが、書体によって印象や見やすさが異なるので注意しましょう。
WEBの文章の場合は、シンプルで読みやすいのが基本です。
そのため、メイリオ・ヒラギノ角ゴシック・游ゴシックなどの読みやすい書体を選ぶようにすることをおすすめします。
明朝体も読みやすいと感じる方もいらっしゃると思いますが、画面の解像度によって潰れて見えてしまう可能性があるため、使用する場合はサイズや太さに注意しましょう。
基本的に文章はシンプルで見やすい書体にすると良いですが、見出しに関しては例外です。
見出しは強調したい部分であるため、ターゲットに合わせて特徴のある書体を使うようにしましょう。
文章と見出しがすべて同じ書体の場合、メリハリがなくて興味を引けない可能性があります。
注意点としては、全体で使用する書体は2〜3種類ほどにすることです。
フォントが多すぎると、統一感が失われてしまうため、多くても3種類ほどに留めるようにしましょう。
レイアウトのコンセプトに合わせた色使いが大切？
実は配色には、ルールがあります。
それは、背景や余白などの大部分を占めるベースカラー、キャッチコピーのように強調したい部分に使用するメインカラー、変化を加えるアクセントカラーの3つです。
コンセプトに合うように、この配色を意識することで、綺麗なデザインに仕上がります。
ただし、必ずこのルールに従う必要はありません。
ポップで楽しい雰囲気にしたい場合は色の数を増やし、反対にクールな雰囲気にしたい場合は減らすことがおすすめです。
また、色を選ぶ際は、その色が与える印象を考慮します。
例えば、赤・黄・オレンジなどの暖色はポジティブで明るい印象を与え、その一方で青・青緑・青紫などの寒色は知性やクールな印象を与えます。
ご自身が望んでいるコンセプトに合うように、色を選んでいきましょう。
色の使い分けに自信がない場合は、他のデザインを見てみることをおすすめします。
視認性が低いレイアウトとはどのようなものなのか？
視認性が低いレイアウトについてご存じでしょうか。
ここでは、視認性が低いレイアウトの共通点を紹介します。
その共通点は以下のものです。
視認性を高めるためには？
では、視認性を高めるためにはどのようなポイントを意識すれば良いのでしょうか。
視認性が低いレイアウトの共通点
・テキストや図の配置が不揃い
・必要な情報が一目で見つけづらい
・余白が少ない
視認性が低いと見てもらえない
これらはどれも、ついついおろそかにしてしまいがちなポイントです。
この3つのうちの1つでも該当していると、視認性が低いレイアウトと言えます。
書き手からすれば、あまり気にならないとしても、見る人にとっては「見にくい」と感じてしまうポイントになってしまうのです。
たとえ、説明文が分かりやすく書かれていても、「見にくい」と感じられると読んでもらえない可能性が高まってしまいます。
多くの方に見てもらうためには、何よりも視認性の高さが重要なのです。
言い換えると、一目見ただけで情報が見つけやすいレイアウトにする必要があります。
整列
まずは、先ほど紹介した整列です。
情報が整理されているだけで、理解しやすく見やすいです。
視線の移動を考えると、特に上端と左端は揃えると良いでしょう。
近接
次に、先ほど紹介した近接です。
視覚的に情報がまとまっていると認識してもらうために、関連する情報は近くするようにすることが効果的です。
図や文を多用する場合は、特に注意しましょう。
余白の有効活用
最後は、余白を有効活用することです。
余白は余ってしまった無駄なスペースと考えられる方がいますが、実際は無駄なスペースではありません。
「余白の美」と言われるように、余白を使いこなすことでデザインがより美しくなります。
余白によって得られる効果は、視線を情報に注目させたり、説明や内容の区切りなどを明確にしたりすることです。
図や文でスペースを使い切るのではなく、ある程度余白を持たせることを意識しましょう。
まとめ
今回はデザインの基本ルールであるレイアウトの基本や読みやすい書体・色使いなどについて紹介しました。
また、視認性が低いレイアウトの特徴についても紹介しました。
レイアウトの基本は整列・近接・反復・強弱です。
この4つの基本を押さえて、見やすいデザインを作ってみましょう。
メイリオ・ヒラギノ角ゴシック・游ゴシックなどの読みやすい書体を使用したり、色の配色を意識したりすると、より見やすいデザインが出来上がります。
当社ではWebページや原稿、デザイン案などをweb上で修正内容を可視化して共有するコミュニケーションツールを提供しております。
こちらのツールが気になる方は、お気軽にお問い合わせください。
