プロも実践している！
超優秀レイアウト9選

• いつも似たり寄ったりのデザインになってしまう
• 伝わるデザインを作るコツってある？
• 実践的なレイアウトのアイディアを知りたい

こんな悩みを解決できる記事になっています。 

レイアウトはデザインの核、とも言える重要な要素です。にもかかわらず「レイアウトを決めるのが苦手」「なんだかダサい構図になってしまう」と悩んでいる方も多いのではないでしょうか？

そこで、この記事では実践的なレイアウトの例を紹介します。プロが現場で実際に使っているものばかりですので、参考になること間違いなしです！

また、レイアウトの基礎的な知識に不安がある方はこちらの記事も合わせてお読みください。今回の記事の内容をより深く定着させられます。

check!!

これだけはおさえておきたい！レイアウトの基礎

2024.02.28

レイアウトはデザインにおいてとても大きな役割を担っています。デザインの4原則などレイアウトの基礎を習得することで違和感のないデザインを作成できます。実例付きで解説しているのでより実践的に学べます。

「伝わるデザイン」を作りたい方には必読の内容ですので、ぜひ最後までお読みください。

※この記事ではアフィリエイト広告を利用しています。

【今日から使える】優秀レイアウト9選

こちらでは、実践で使えるレイアウトを9選紹介します。

1. 二分割で同時訴求
2. グリッドでおしゃれに
3. 図形を配置
4. 文字に背景をつける
5. 枠を使って目立たせる
6. 上を重くして下を軽くする
7. 水平に区切らない
8. 対角線を意識する
9. 王道の中央配置

より伝わるデザインにしたい方、普段同じようなデザインになってしまい変化をつけたい方は、ぜひ参考にしてみてください。

1. 二分割で同時訴求

2つの情報を比較しつつ、同じ重要度で同時に主張できます。

〇〇×△△や〇〇vs△△、〇〇or△△など対比構造を強調したい時におすすめのレイアウトです。

トーンを揃えるとまとまったデザインになりますが、あえて真逆の色を使ってレイアウトを強調することも効果的です。

2. グリッドでおしゃれに

グリッドを使えば、多くの情報をわかりやすく伝えられます。綺麗に整列させられるので、洗練された印象になります。

均等に配置をすれば同じ重要度で伝えることができますが、あえて大きさを変えて強弱をつけ、特定の情報を強調するような使い方も効果的です。

3. 図形を配置

図形を使うと、デザインのイメージやテーマを直感的に伝えられます。それぞれの図形には、以下のようなイメージがあります。

• 円形：優しさ、安全、調和、循環
• 三角形：方向性、段階、注意、危険
• 四角形：安全性、信頼性、頑丈、シンプル

図形によって与える印象が違うので、場合によって使い分けるのがおすすめです。

4. 文字に背景をつける

文字に背景（帯）をつけると、テキストの視認度が大きくアップします。読ませたい情報がより目立つようになるので、デザインの中でも特に強調したい部分に使うと良いでしょう。

また、文字と背景の色のコントラストが大きいとより目立つようになります。オレンジと青、緑と紫、のように、色相環の中で最も遠い色である補色の関係にある色なども効果的です。

5. 枠を使って目立たせる

枠をつけると、周りの情報との境界をはっきりさせられるので、インスタグラムのように多数の画像がある中でも存在が際立ちます。

たくさん情報がある中で目立たせたいなら、ぜひ使ってみてください！背景色と枠を補色関係にするとより目立つようになるので、おすすめです。

6. 上を重くして下を軽くする

目線の動きを意識すると、より情報をスムーズに伝えられます。人間の目線は上から下に動く性質を持つため、上を重くして下を軽くすると洗練されたデザインになります。

バランスの良いデザインを作りたい場合は、ぜひ活用してみてくださいね。

7. 水平に区切らない

少し動きを加えたい、遊び心を加えたい時におすすめのレイアウトです。具体的には、以下のようなレイアウトが考えられます。

• 波線で区切る
• 台形を使う
• 楕円形を使う

波線やギザギザの線を使って区切れば賑やかで元気な印象になりますし、台形など幾何学模様を利用するとスタイリッシュな印象になります。デザインの雰囲気によって使い分けましょう。

8. 対角線を意識する

こちらも人の目線を意識したレイアウトです。

左上に興味の引くようなキャッチコピーを、右下に行動を促す言葉を添えると、行動につながるデザインになります。

9. 王道の中央配置

非常に安定したレイアウトです。中央揃え・中央配置は重心が揃うので、安定感のあるデザインになります。

安定感のあるデザインにしたい場合や、情報は少ないが存在感を持たせたい場合におすすめです。

レイアウト学習におすすめの本4選

こちらでは、レイアウトについて学べる本を4冊紹介します。見本がたくさん載っているので、迷った時のために一冊手元にもっておくことをおすすめします。

1. けっきょく、よはく。

（Amazon：https://amzn.to/4a1gu1Z）

タイトルの通り「余白」の大切さを知ることができる１冊です。NG例を元にOK例をいくつか掲載しているので、余白に迷った時に参考になる本です。

2. レイアウト・デザインの教科書

（Amazon：https://amzn.to/4bhXPju）

基礎から応用まで１冊で網羅できます。悪い例をあげて、どこが悪いかも解説しているので勉強になります。

3. あるあるレイアウト

（Amazon：https://amzn.to/4bhvDNo）

文字が少なく、レイアウトのカタログのようになっている本です。レイアウトに迷った時にきっと助けてくれるでしょう。

4. レイアウトデザイン見本帳

（Amazon：https://amzn.to/4cF80ik）

デザインを見る側の心理や行動などを解説しているので、レイアウトを決める時以外にも使える知識が身に付きます。デザインの事例がたくさん載っているので、レイアウトの引き出しが増えること間違いなしです。

まとめ

今回はレイアウトの実践的な例を9選紹介しました。

これら今回の記事で紹介したレイアウトは、デザインを作る上で必要なレイアウトの基礎から活用したデザインです。

check!!

デザインの視線誘導4法則！もうレイアウトで迷わないデザインテクニックを解説

2023.11.28

レイアウトはデザインの核とも言える重要なものです。「視線誘導の４つの法則」と「視線誘導デザイン例」を徹底解説していきます！

本記事のレイアウトを参考にしたり、紹介した本を読んでみたりすることで、納得のいくデザインが作成できるかもしれません！ぜひ試してみてくださいね。