ー スマホ縦撮り画像がホームページで使いづらい理由
「スマホで撮った写真をそのままホームページに使ってほしい」というご相談は少なくありません。しかし、スマートフォンで縦向きに撮影した画像は、実はホームページととても相性が悪い場合があります。ここでは、縦撮り画像が使いづらい理由と、撮影時にできる簡単な対策を紹介します。
ホームページのメインビジュアルやヘッダー画像は、横長（16:9や3:1など）が主流です。一方、スマホの縦撮り写真は9:16や3:4といった縦長の比率になっています。この縦長の画像を無理に横長の枠へ収めようとすると、上下がバッサリ切れてしまうか、逆に左右に余白ができてスカスカな印象になってしまいます。
特に問題になるのが、被写体が画面の中央や端に寄っている場合です。横長にトリミングする際、顔や商品、ロゴといった一番見せたい部分が切れてしまうことがよくあります。
現在のホームページの多くは、パソコン・タブレット・スマホで表示が自動的に切り替わる「レスポンシブデザイン」で作られています。この仕組みでは、同じ1枚の画像を複数のアスペクト比で使い回すことになります。
縦長の素材はパソコン表示の際に特に間延びしやすく、横幅に対して画像が縦に間伸びして見えたり、逆に大きくトリミングされて意図しない部分だけが表示されたりします。撮影時に横向きを意識しておくことで、こうした崩れを防ぎやすくなります。
縦撮りの写真は横方向の情報量が少ないため、横長に引き伸ばして使おうとすると画質が粗く見えてしまうことがあります。逆に画質を保とうとすると、必要以上に高解像度のデータが必要になります。
また、縦長のまま高解像度で使用すると、実際にホームページ上で表示される横幅に対してデータサイズが無駄に大きくなり、ページの表示速度が遅くなる原因にもなります。表示速度はSEOにも影響するため、意外と見過ごせないポイントです。
一番確実なのは、ホームページに使う予定の写真は撮影時から横向き（ランドスケープ）で撮ることです。特にメインビジュアルやヘッダーに使う写真は、あらかじめ横長を意識して撮影しておくと、後の作業がスムーズになります。
どうしても縦撮り素材しかない場合は、背景をぼかして横長のキャンバスに配置する、左右に余白やテキストを組み合わせて構成するといった方法があります。また、すべての写真を無理に横長へ整える必要はなく、サムネイルやSNS埋め込み用途であれば縦長のまま活用し、メインビジュアルには別の横長素材を使うといった「用途で使い分ける」考え方もおすすめです。
スマホの縦撮り写真は手軽に撮れる一方で、ホームページのメインビジュアルにはそのまま使いにくい面があります。撮影時に横向きを意識するだけでも、公開後の見え方は大きく変わります。どの写真をどの場所に使えばよいか迷ったときは、お気軽にご相談ください。
WEB FOREST（ウェブフォレスト）
お問い合わせ
ホームページ無料出張相談
