画像配置について考えてみる

Pocket

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼画像配置の考え方①

ユーザーがストレスなくサイト回遊をするうえで意外と忘れられがちなのが画像の配置の仕方です。

突然ですが、下記サイトAとBどちらが見やすいですか?
A・Bは同内容のサイトとします。


ヘッダーからフッターまでゆっくりサイトA、Bを見ていったときに違和感を感じることがほとんどなく見やすい方と思うのはAと答える方が多いのではないのでしょうか。

それではなぜAなのでしょうか。
AもBもコンテンツの内容は同じです。
しかし、よくよく見てみると画像の配置の仕方が異なるのが見て分かるかと思います。
配置によって違和感を感じてしまっているのでしょうか?
考えていきたいと思います。

▼画像配置の考え方②

今回はより違和感を感じるであろう部分よりピックアップをしていきます。

★前提★
このサイトはよく見ると左右にある程度の余白をとっている。

またこの部分の画像の見せ方として、サイト全体の余白に合わせAのように余白を整えることが改善への近道ですが優先度によっては画面いっぱいに画像を表示する事で他の部分との差別化を図ることも可能です。
現在ではそのどっちつかずの状態が違和感を与える原因になっています。

▼ ▼ ▼

これら部分の横幅のずれは、作成している画像であれば画像のサイズがそもそも異なってしまっている。
またはCSSだけでのHTML構成、画像配置のCSSが崩れてしまっていることが大いに考えられます。
小さな差ですが、揃っている方がコンテンツ内の統一感を感じられ見ていて気持ちの良いものです。

▼ ▼ ▼

一言で言いますと面積率の高い物から配置するイメージです。
そうすると自然と訴求内容が大きなものから並びますよね。

▼最後に

サイトの提供内容がユーザーにとって「本当に唯一無二である」または「細かいことは気にしないユーザー」であれば多少、画像の配置に違和感があっても気にならないかもしれません。
ですが、全部のサイトがそうとは限りませんし取り除ける違和感であれば取り除いておいた方がユーザーにも運営者側にもメリットは有るでしょう。
1つでも違和感に感じる所を見つけてしまうとどうしてもその印象は残ってしまい、ずっと改善されなければ「まだ改善されていない」と負の要因になってしまう可能性も考えられます。
画像の配置について少しでも気にかけてあげると、ユーザーのサイト巡回はよりスムーズになるかもしれません。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。
またお会いしましょう!

Pocket