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

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

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

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

画像とテキストの関係

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

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

などなど。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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