今回はブログやお知らせをWEBサイトで作る際に使用する画像について、サイズや明るさなどのポイントをご紹介していきます。
画像のサイズや明るさはちょっと意識するだけで、記事の雰囲気が一気に変わり、ユーザーの読みやすさに繋がっていきます。
画像のサイズ
使用する画像のサイズを意識したことはありますか？
意外と多くの方が意識出来ていないのがサイズです。
スマートフォンやカメラで撮影した画像をそのまま掲載していたり、必要な場所をトリミングした時のサイズで掲載していたり。
このサイズの乱雑さが原因で、画像の印象が変わってしまいます。
先にサイズをお伝えすると、横向き画像のベストは 横800px 縦 450pxです。
※「px」はピクセルと読み、画像のサイズなどでよく使われます。
この800px × 450pxというのは、サイトのデザインによってベストサイズは変わってきますので、参考までにのサイズですが、一番意識して欲しいのは、比率です。
800px × 450px は16:9の比率になっています。最近は動画配信サービスの普及などもあり、この16:9というサイズがユーザーにとって最もよく見られているサイズになってきています。
少し前までは4:3が主流だったとは思いますが。
つまり、普段多くの方が見られているサイズこそ、最も印象が良いサイズということになるので、掲載する画像は16:9の比率になるように意識することをオススメします。
特に！アイキャッチ画像（サムネイル画像）に使用する画像は。
当サイトの記事の画像も、記事内の画像は縦向き画像などもあり、比率の統一は完全には出来ていないです。しかし、アイキャッチ画像に関しては全て16:9の比率になっています。
アイキャッチ画像が16:9で全て統一されていると、投稿一覧を見た時にもレイアウト崩れが起きずに綺麗な印象を与えることができます。
その為、画像は16:9の比率を意識しながら、サイズに困ったらとりあえず800px × 450pxで作成すればOKです。
ちなみに、iPhoneなどで撮影している場合は、カメラで16:9か4:3で選択できるかと思いますので、アイキャッチ画像に使いたいと思った時は16:9で撮影すれば修正は必要無しです。
トリミングする際も16:9の比率になるように意識してトリミングしましょう。
トリミングはIllustratorやPhotoshopを使うのが早いですが、Adobeは有料ソフトなので、無料でトリミングしたい場合はこちらがオススメです。
画像の明るさ
画像の明るさもポイントです。基本的に人は明るい画像は印象が良く、暗い画像は印象が悪くなりやすいです。
その為、掲載する画像も画像の明るさ（明度）を意識していきましょう。
例えば、こちらの画像を比較すると。
before
after
このとおり、明るさ（明度）を少し変えるだけで海の濃い青や太陽光の明るさの印象がとても良くなります。
明度の調整はPhotoshopで行うのがベストですが、こちらも無料で行いたい場合はこちらがオススメ。
まとめ
いかがでしょうか。あまり意識していなかった画像のサイズと明るさ。
意識するだけで、かなり印象が良くなります。印象が良い画像がある記事＝読まれやすい記事です。
ぜひ、画像。特にアイキャッチ画像は比率と明度を意識していきましょう。
当記事に対してのコメントをご記載くださいませ！
いただいたコメントは運営者で確認・承認後に反映いたします。誹謗中傷に繋がるような内容・その他不適切な内容と運営者の方で判断したコメントは削除させていただきます。