Web制作

デザイナーじゃなくても知っておきたい、見やすいレイアウトをつくる基本ルール

  • このエントリーをはてなブックマークに追加
  • LINEで送る

つい最近、きらきらした新入社員たちに向けて、デザイン研修を行いました。今回はその中で振り返った見やすいレイアウトの基本について書いてみたいと思います。
さて、いろいろ考えていましたが、とりあえずこれではないかと。

揃えてグループ化!

まずこちらをご覧ください。ざっくり文字などの要素をボックスで表現して説明してみます。
rule_01
これでは全体的にまとまりがなく、ぱっと見て情報が入ってきにくい状態です。。

まずこれを揃えてみます。
rule_02
要素の頭を揃えることで、目が左右に迷わなくなり少し読みやすくなりました。が、まだなんだかばらばらしていて読みにくい…のでもう一歩です!

次に、グループで分けてみます。
rule_03
同じカテゴリのものは近づけてまとまりを出し、違うカテゴリのものとの余白をとることで、情報が認識しやすくなりました。

そして、ここでもうひとつ大切なのが外枠との余白です。今は外枠との関係が近かったり遠かったり…中身と外枠との関係はどこも同じであるべきなので、均等に余白をとって配置します。
rule_04

これで「揃えてグループ化」の完成です!少し気をつけるだけで、まとまりが出て見やすくなり、すっと内容が入ってくるようになります。

まとめ

rule_05
・要素の頭を揃える
・同じカテゴリの情報は近づけてグループ化
・枠をつけるときには、内容を中央に

デザイナーじゃない方も、資料作りなどにぜひ役立ててみてください!

  • このエントリーをはてなブックマークに追加
  • LINEで送る

ブリッジコーポレーションへの
お問い合わせはこちらから

この記事を書いた人

米田

デザイナー。 新卒で入社し、はや◯年です。 いろんなものを見るのが好きです。 たくさんの人に愛されるブログに育てていきたいと思います!