ホームページで使う画像は横長で！テキストの前後の文章が読めず画像だけで画面が埋まってしまいます

ホームページを作成するお手伝いをよくしています。

そのときに「お手持ちの画像で、ホームページで使えそうなものをお持ちください」というのですが、持ってきていただいた画像で使いにくいものと使いやすいものがあります。
スマートフォンで撮っている場合などは縦長の写真が多いのですが、ホームページでは横長の画像の方が使いやすいのです。そのことについて書きます。

ホームページで画像を使うときにはなぜ横長の画像がいいか？

ホームページの投稿などで画像を使うとき以前は画像が大きいとそのまま表示されることが多く、はみ出したりしていたことが多かったですが最近はWordPressなどで画像を使ったときは自動的に横幅がはみ出さないように調整されて表示されることが多くなりました。

たとえば横幅が1000ピクセルの画像横長画像をここに貼り付けてみると

このように横幅をそのときに見ているデバイスに合わせて縮めて表示してくれます。私の今見ている環境はPCで、750ピクセルに縮めて表示されました。縦の長さはなりゆきになります。なりゆきとは横の長さの750ピクセルに合わせて、縦横比によって自動的に縦の長さが変わるということです。

次に横幅が1000ピクセルの縦長画像を貼り付けてみます。

この場合も横幅を見ている環境に合わせて縮めてくれて、縦の長さもなりゆきになります。

この2つを見比べてみると、

このようになり、横長の写真を使った場合は前後の文章が読めますが、縦長の写真を使った場合はスクロールしないと前後の文章が読めません。

縦の長さを短くするという方法をとってみることもできますが

このように左右が空いてしまいます。

ということで、ホームページで画像を使うときは横長画像の方が向いているということになります。

スライダーで使う画像の場合はさらにもっと横長の方がいい可能性があります

ホームページのスライダーで使う画像の場合はさらにもっと横長の画像が必要になる場合があります。

WordPressのテーマLightningでよく使うスライダー画像の大きさは1900x600ピクセルを推奨されています。先ほどの横長画像を使う場合は、

このぐらいの縦横比になります。こちらの場合はちょうどいい感じに空きがあったので、横長にしてもおかしな感じにはなりませんでしたがたとえば、

こういう画像を1900x600ピクセルで切り取ると

このように、パソコンの上下が切れてしまいます。もしもこのサイズでもパソコンが切れないようにしたいと思ったらもっと上下左右に空きのある写真を探す必要があります。

縦横比の比率がこのように大きい場合は「メインの画像の周りに余白がある画像」でないと切り取ったときにメインの画像（この場合パソコン）が切れてしまうということになります。

まとめ：ホームページで使う写真を撮るときは可能であれば横長で撮りましょう

ということでホームページで使う写真を撮るときは可能であれば横長で撮ることをお勧めします。また、最初から「スライダーで使いたい」などの場合はさらに横長の方がよいことが多いですので、できれば「余白を大きく」した写真を撮ることをお勧めします。

カメラでなくスマートフォンで撮影するときは縦の状態で撮影するということも多いかと思いますが、ホームページで使おう！と思った場合はできれば横長で撮る癖をつけていただければと思います。

縦長の画像はたとえば「プロフィール写真」などではまだ使うこともあると思います。プロフィール写真はサイドバー（かなり縦長のエリア）や、プロフィールページ（縦長に画像を配置して文字を回り込ませる場合が多い）で使うと思われます。人間は本来縦長のもの（？）なので縦長の方がフィットするから、ということなのかな？と思われます。

その他の写真は横長で撮っておくと使い出がある、という感じで覚えておいていただくとよいかなと思います。

この記事のご依頼・お問い合わせの方はこちら