デザイン初心者でもレイアウトで迷わなくなる4つのコツ

デザイン




みなさん、デザインをしたときに、文字や写真、図形などの配置で迷った経験はありませんか?

私も以前は、「とりあえず文は真ん中に配置したら良いか」などと適当に決めていましたが、すべての配置に意味を持ってあげるとより見やすく、美しいデザインを作ることができます。

今回は、デザインを美しく見せるためのレイアウトのコツをご紹介します。

 

レイアウトで迷わなくなる4つのコツ

  1. 記載文の量で決める
  2. 関連性の高いものを近くに、関連性の低いものを遠くに配置する
  3. 余白をデザインする
  4. 写真の構図によって決める

では、この4つのコツを詳しく解説していきます。

 

①記載文の量で決める

まずはじめに整列の仕方には主に3種類あります。

左揃え・中央揃え・右揃えです。

では、この3つの整列の種類の中で、よく使われる整列の仕方はどれだと思いますか?

中央揃え?

いえ、実は左揃えです。

その理由は、文字を読むときの視線の動かし方を考えてみると分かります。

基本的に言語は、左から右に読んだらまた左に戻りますよね。

この戻った位置がバラバラになると人は自然に「読みにくいな」と感じてしまうのです。

中央揃えの場合、文字の量が多くなればなるほど戻る位置がバラバラになるので読みにくくなります。

赤丸が目線の戻る位置

 

反対に、左揃えは目線の戻る位置が同じなので読みやすくなります。

中央揃えは揃っていることが分かりにくいので、左揃えより難しいレイアウト方法です。

では、中央揃えは全く使わないのかというとそうではありません。

記載文が少ないデザイン(例:バナー広告、看板など)や目立たせたいタイトル部分に使うことがあります。

タイトル部分は中央揃え、それ以外の詳細はほとんど左揃え

 

まずは自分がデザインする記載文の量によって、中央揃えにするか左揃えにするかを決めてみましょう。

 

②関連性の高いものを近くに、関連性の低いものを遠くに配置する

次に、配置したいもの同士の関連性でレイアウトを決めましょう。

人は無意識のうちに、距離で関連性を考えています。

例えば、ベンチに座っている人が2人いる場面を思い浮かべてください。

2人が近くに座っていれば、「友達かな?恋人かな?」と2人の関係性が想像できますよね。

でも、もし2人が少し離れて座っていたらどうでしょうか?

2人の関係性は他人かそれとも知り合いなのか分かりにくくなると思います。

 

では、これと同じことをデザインに置き換えて考えてみましょう。

写真とタイトルが並んでいるようなデザインを見たことがあると思います。

この場合、「Sea」というタイトルの写真はどちらなのか分かりにくいと思います。

なぜならタイトルから写真までの距離が同じだからです。(ピンク部分)

このレイアウトを分かりやすい配置に変えてあげるとこうなります。

こちらはぱっと見た瞬間に写真とタイトルの関係性が分かりますよね。

このように距離で関係性を表すことをデザインの基本原則で『近接(グールプ化)』と言います。

近接(グループ化)ができていないと分かりにくいデザインになってしまうので、デザインに入る前に関連性を考えてあげることが大切です。

 

③余白をデザインする

余白とは、デザイン上の文字や図形がなどがない部分のことです。

レイアウトを考えたら勝手にできた空白部分が『余白』だと思っていませんか?

実は、余白もデザインする必要があります。

ではどのように余白をデザインしているのかを、名刺を例に解説していきます。

近接(グループ化)で関連性のあるもの同士のグループに分けておきます。

 

②名刺のサイズに対して記載文の量が多めなのと、名刺は小さい文字になってしまうことを考え、読みやすい左揃えで配置します。

 

③①でグループ分けしたものを関連性によって距離を変えます。

真ん中の肩書グループは名前グループと関連性が高いので、連絡先グループとは離す。

 

④グループ分けした部分の上下左右の余白を揃えていきます。

同じ色の部分の余白の太さが同じ

 

⑤目で確認して、ずれて見える部分の余白を修正していきます。

実際に目で見てみると、肩書グループから連絡先グループまでの余白が空きすぎて見えたので、肩書グループを少し下にずらしています。

 

簡単に解説するとこの流れで行っていますが、実際にはこの余白の微調整に時間をかけてデザインしています。

おすすめは、デザインを遠くから眺めたり、スマートフォンで見たりすることです。

ずっとPCの画面で見続けていると気づけない、目の錯覚による余白のずれを見つけることができたりします。

 

また、枠の中に文字を入れるデザインの場合も余白を作りましょう。

枠いっぱいに文字を入れたデザインより、余白を作ったデザインのほうがすっきりして読みやすいですよね。

枠を作ると埋めたくなってしまいがちなので気をつけましょう。

 

④写真の構図によって決める

背景に写真を使用している場合もありますよね。

その場合、どのようにレイアウトしたらよいか迷うと思うので、これについても解説していきます。

写真の構図によって色々なレイアウトのパターンがあるので、よく使うレイアウト方法を2つお伝えします。

  1. 写真をトリミングして空間を作る
  2. 情報量の多い写真は、文字をデザインする

では、それぞれデザイン例とともに解説していきます。

 

①写真をトリミングして空間を作る

被写体がメインの写真の場合、文字を入れる部分の空間をあけると良いです。

こちらの写真を例に見ていきましょう。

この写真は被写体である女性が中央に配置されています。

被写体が中央に配置されている写真の場合は、右か左の空間をもっと空けて文字を入れると奥行きを演出できます。

この写真の様に人物が横を向いている写真は、向いている方を空けると未来を思わせるデザインにできます。

 

反対に向いていない方を空け文字を入れると、過去や奥行きを演出できます。

 

②情報量の多い写真は文字をデザインする

風景写真のように、色数や色のコントラスト大きい写真は情報量が多い写真です。

このような写真の場合は、文字のデザインを工夫しましょう。

写真によって工夫の仕方はたくさんありますが、簡単な方法は以下の4点です。

 

①写真に使われている色を文字色に使用して調和をはかる

今回は、ウォータースライダーの青色と同じ色を使用しました。

 

②背景の色とコントラストをつける

背景の色が白に近いので、濃いグレーにしています。
写真が背景の場合、黒だと浮いてしまう場合があるのでグレーがおすすめです。

 

③写真の上に半透明の帯をつける

帯をつけると、情報量が多い部分でも文字が見やすくなる。

 

④文字に光彩外側をつける

光彩外側なしだと見にくい

 

光彩外側を黒よりのグレーでつけるだけで、文字がくっきりとして見やすくなる。

光彩外側とは、文字の周りにぼかしをつけられる機能のことです。

これをつけるだけで、背景と文字が同化してしまうのを防げることがあります。

ただ、つけすぎると光彩外側が目立ってしまうので、さりげなくつけるのがポイントです。

 

レイアウトで迷わなくなる4つのコツまとめ

今回は、レイアウトについて文字配置をメインに解説しました。

これまで迷っていた方は、ぜひ参考にしてみてください。

  1. 記載文の量で決める
  2. 関連性の高いものを近くに、関連性の低いものを遠くに配置する
  3. 余白をデザインする
  4. 写真の構図によって決める

 

また、フォントの選び方・文字のサイズに関してはこちらの記事で解説しています。

合わせて読むとより分かりやすいので、こちらもぜひ読んでください。

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

デザイン初心者向け!!これをやるだけで見やすくなる文字サイズを決める4つのコツ