デザインをもっとカジュアルに

View Steal

デザインのコツ

レイアウトデザイン 〜右と左、上と下、画像とテキストの関係〜

今回はwebサイトやブログのレイアウトを組む際に役立つお話。

覚えるのはたった2つです。

画像とテキストを使って、コンテンツページや記事を書く際に「人の心理や癖、傾向」を意識する事で、効果的なレイアウトにしましょう、という内容です。

興味のある方は、こちらの記事もおすすめです。
【ノンデザイナーの方にも】デザインをする人におすすめしたい本

 

画像とテキストの関係

画像と文字の組み合わせ、どっちをどっちに配置すれば良いの?
と迷われた方、いらっしゃるんじゃないでしょうか。

基本の配置を覚えるだけで、ぐっと良くなりますよ!

「この商品を紹介したいんだけど、紹介文や伝えたい内容はどこに配置すれば良いの?」
「このページ、テキストだけで抑揚がないなぁ…画像を入れてこの部分を目立たせたいんだけどどうしよう」などなど。

普段何気なく配置している「画像+テキスト」の組み合わせ。
少し意識すれば良くなる画像とテキストの関係を、右と左、上と下、それぞれ解説していきます。

画像とテキスト、上下左右の関係

前述の通りこの「画像とテキストの配置」、アイキャッチ画像を作ったり、本文中に画像を入れたりと、悩む頻度が高いんじゃないでしょうか。

そんな時は下記2点を意識してみて下さい。

  1. 画像は左、テキストは右
  2. 画像は上、テキストは下

それぞれ解説していきます。

画像を左、テキストを右に配置する事でバランスを整える

これは、「人の脳は左側に配置されているものを感覚的に捉え、右側に配置されているものを論理的に捉える」という傾向を取り入れたものです。

この傾向をレイアウトに当てはめた場合には、「画像を左側に、テキストを右側に」配置する事でバランス良く見せる事が出来ます。

また、視線の動きを考慮した際にもこの方法は有効です。
視線の動きについては「Fの法則」や「Zの法則」が有名です。

※「Fの法則」と「Zの法則」についてはこちら

視線は左から右に流れていきますので、この動きを意識してレイアウトするとスムーズにテキストが読めるようになります。

画像を上、テキストを下にする事で、文章を読ませるレイアウトに

今度は縦のレイアウトです。
縦の構成の場合、人の視線は上にあるものを「さらっと」捉えた後に下に移動するという傾向があります。
その為、文章にて伝えたい内容がある場合には「さらっと」捉える上部には画像を配置し、下には読ませたい内容を掲載すると良いでしょう

終わりに

いかがでしょうか。
今回はwebサイトやブログ記事を書く際の「画像」と「テキスト」の配置についてご紹介しました。
使う画像やフォントの与えるイメージについてもまた投稿します。

人気の記事

1

この記事は約3分で読めます。 ビジネスやオフ会などで必要な名刺。 名刺を作る時に手間なのがデザインや入稿データの作成です。 イラストレーターで入稿用のaiデータを作る…?? 塗り足しや裁ち落としを考慮 ...

no image 2

チラシを使って、お店やサービスの認知度を上げたり、売上アップにつなげたい! でも… チラシってどう作れば良いの? 自分でチラシを作ってみたけど、なんか上手くいかない....。 どんな情報を載せたら良い ...

3

Canvaで作ったデザインを印刷する際のオススメの印刷屋さんの紹介と、入稿方法の説明です。

-デザインのコツ

Copyright© View Steal , 2019 All Rights Reserved.