MENU
人気記事TOP3
TOP 1
【2022年版】名刺を作成、印刷するならココ!おすすめ名刺印刷サービスランキング! この記事は約3分で読めます。 ビジネスやオフ会などで必要な名刺。名刺を作る時に手間なのがデザインや入稿データの作成です。 イラストレーターで入稿用のaiデータを作...
TOP 2
「インスタ始めました」ポップやバナーの作り方。おしゃれなテンプレートで「良いね」をGET!! 最近お店やホームページでよく見るようになった「インスタ始めました」ポップやバナー。 こんな感じのものを作ります みんな大好きインスタのユーザー数は14億7800万人...
TOP 3
Canvaとの相性バツグン!PDF入稿で印刷が出来る印刷屋さん Canvaで作ったデザインを印刷する際のオススメの印刷屋さんの紹介と、入稿方法の説明です。

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

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

Kesa

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

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

興味のある方は、こちらの記事もおすすめです。

目次

画像とテキストの関係

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

Kesa

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

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

などなど。

普段何気なく配置している「画像+テキスト」の組み合わせ。

少し意識すれば良くなる画像とテキストの関係を、右と左、上と下、それぞれ解説していきます。

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

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

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

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

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

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

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

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

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

また、視線の動きを考慮した際にもこの方法は有効です。

Kesa

視線の動きについては「Fの法則」や「Zの法則」が有名です。

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

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

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

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

今度は縦のレイアウトです。

縦の構成の場合、人の視線は上にあるものを「さらっと」捉えた後に下に移動するという傾向があります。

その為、文章にて伝えたい内容がある場合には「さらっと」捉える上部には画像を配置し、下には読ませたい内容を掲載すると良いでしょう。

Kesa

スマホ向けにも相性のいいレイアウトです。

終わりに:画像とテキストは「左文字+右画像」か「上画像+下文字」

今回はwebサイトやブログ記事を書く際の「画像」と「テキスト」の配置についてご紹介しました。

まとめると、以下の2つ。

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

もちろんこれ以外にもレイアウトの法則はたくさんありますが、まずはこの2つで十分です。

使う画像やフォントの与えるイメージについてもまた投稿します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次