東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

画像の縦横比について考えよう

2021.04.07 Posted by

画像の縦横比について考えようトリミングで変わる!写真における良い構図とは?では、写真をトリミングして構図を調整する方法をご紹介しました。
良い構図というものは分かるようになったと思いますが、好きなようにトリミングするだけだと写真そのものの縦横比はバラバラになってしまいますよね。
今回は、ホームページに載せる写真の縦横比(アスペクト比)について考えましょう。

写真は縦長?横長?

ホームページに載せる写真は、デザインにもよりますが大抵は横長です。
では、何故横長が多いのでしょうか。

ホームページの利用者は、ページを上からスクロールして閲覧しますよね。
ここで、縦が1000pxの写真を貼ったとします。
日本ではPCのモニターサイズは1920×1080や1366×748あたりのシェアが高いですが、その環境で縦が1000pxもある画像が出てくると、画面の上から下まで画像で埋まってしまいます。つまり、スクロール量が増えます。
スクロール量が多いと利用者がページを閲覧する際に負担が増え、ページの離脱に繋がってしまいます。

また、写真の上に記載されている文章と見比べたい場合など、画面が写真で埋まっていると、スクロール位置をわざわざ戻さなければいけません。
スマートフォンの場合は画面も小さいので、写真全体が見えなくなったりして尚更ストレスになります。

このように、縦長写真にはデメリットが多いため、ホームページでは基本的には横長写真を載せるようにしましょう。

例外として、コンテンツの背景画像など、写真そのものから読み取れる情報よりも、デザイン性を重視した要素であれば縦長も活用できると思います。
また、twitterなどのSNSでサムネイルをクリックして詳細を確認するタイプの画像は、あえてスマホサイズに合わせて縦長にすると、細部まで見てもらいやすいなどのメリットもあります。

美しい縦横比(アスペクト比)

では、実際に美しいと思える縦横比とはどんなものなのでしょうか。
幾つかご紹介します。

黄金比(1:1.1618)と白銀比(1:1414)の画像イメージ

黄金比

近似値1:1.618の比率です。
古代ギリシャの時代から使われ、人類が最も美しく安定を感じる比率と言われています。
レオナルド・ダ・ヴィンチのモナ・リザやミロのヴィーナスにも使用されています。
写真も縦横の長さが1:1618の黄金長方形にすると、安定的で美しいと感じるようになります。

白銀比

1:√2 = 1:1.414の比率です。
日本では「大和比」と呼ばれ、法隆寺などの歴史的建造物で使用されています。
また、身近な例ではA4やB5などの用紙サイズも白銀比が採用されています。

3:2と4:3と16:9の画像イメージ

3:2

フィルムカメラや一眼レフに使われる比率です。

4:3

プロジェクターなどで使用される比率です。

16:9

現在主流になっている比率。
テレビやPCモニター、YouTubeの画面も現在はこの比率が主流です。

結局どの比率が良いの?

画像そのものの大きさや、デザインなどにもよるので「この比率が一番良い」と一概には言えません。
しかし、先程挙げたスクロールの問題上、4:3のような正方形に近い比率は、なるべく小さい画像に使用したほうが良いように思います。
また、必ずしもこれらの比率ピッタリのしなければならないというわけではないので、状況に応じて調整するようにしましょう。

まとめ

トリミングで変わる!写真における良い構図とは?と合わせて、ホームページに掲載する写真についての理解が深まったのではないでしょうか。
写真の見せ方次第でホームページの印象も替わりますので、ぜひ知っておいてください。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278