こんにちは、デザイナーの中道です。
「アスペクト比」という言葉を、写真の編集や、SNS投稿の際のサムネイル、動画出力の際に目にする方もいるのではないでしょうか。
実は、Webサイト制作でもかなり重要だったりします。
今回はその画像のアスペクト比について、一般的なアスペクト比から、Webサイト制作で気をつけるべきアスペクト比を自分なりにまとめてみました。
アスペクト比とは、画像や写真・動画などの縦の長さと横の長さのの比率のことです。
一般的には「横：縦」のように表記され、例えばモニターのピクセル数が「1920×1080」pxの場合は「16：9」と表します。
スマホの写真の編集機能で写真をトリミングする際に「1：1」「16：9」「4：5」などの比率サイズを目にしたことがある人が多いかと思います。
これらの比率は全てWeb上で表示したり印刷する際に適した比率になっています。
では、一般的に良く使用されるアスペクト比（縦横比）にはどのような比率があるのでしょうか。
自分が知る限りにはなりますが、よく目にする一般的なアスペクト比についてまとめてみました。
16：9は、ハイビジョンTVやPCのモニターのディスプレイなどのワイドスクリーンの比率です。
Youtubeの動画サイズや、大体のスマホの画面サイズがこの比率のため、スマホやPCのスクリーン画面いっぱいに画像や動画を表示させたい場合はこの比率が適しています。
8：5は、黄金比に近い比率で、名刺や、クレジットカード、タバコの箱など多くのデザインに使用されている比率です。
黄金比とは、縦：横の比率がおよそ1：1.618（約5：8）のことで、自然界に存在する調和の比とされ、人間にとって最も美しいと感じる比率であるといわれています。
こちらの比率は、世界的に芸術家や建築家にも古くから使用され、19世紀に「黄金比」という名前で広く知られるようになったようです。
自分は、学生時代に「デザインに迷ったら黄金比で考えろ！」と口酸っぱく教えられたので、グラフィックデザインで比率を考えるときはこの黄金比にはとてもお世話になりましたし、今もまず黄金比を意識しながらデザインを考えてしまいます。
3：2は、35mmフィルムや写真に由来した比率で、多くのカメラで使われている写真のスタンダードな比率です。
ハガキサイズに近い比率なので、ポストカードなどの印刷に写真を使う場合に便利な比率です。
7：5は、白銀比に近い比率で、紙サイズのA判B判にも使用されている比率です。
白銀比とは、縦横の比率が1：√2＝1：1.414（約5：7）のことで、日本では古くから美しい比率とされ、法隆寺などの歴史的な建築物の中にも取り入れられている比率です。
古くから風呂敷や枡、折り紙など正方形文化が密接した日本人には特に美しく感じる比率と言えます。
4：3は、初期のテレビ放送に使用されていた規格であり、 デジタルカメラでも使用されているスタンダードスクリーンの比率です。
XやThreadsに縦長サイズの画像を投稿する場合は、「横3：縦4」がトリミングされず最も画像を大きく見せることができる比率のようです。
5：4は、大判カメラで使用されるサイズですが、InstagramやFacebookの画像・動画投稿にも適した比率です。
InstagramやFacebookに縦長サイズの画像を投稿する場合は、「横4：縦5」が一番適しているそうです。
Webサイトのデザイン制作では、デバイスのディスプレイサイズが命です、、！（と、自分は思っています）
画面いっぱいに画像やコンテンツを見せるためには、アスペクト比を考慮したデザインが必要になってきます。
多くのPCのディスプレイ比率は横長の「16：9」、スマホのディスプレイサイズは縦長の「9：16」です。
そして、タブレットは縦長の「4：3」が多いようです、、、
このようにデバイスによって画面比率が違うため、どの比率でも美しく見せられるよう、デザインや実装の工夫が必要となります。
また、デバイスやブラウザは常に変化するため、Webサイト制作では、常にアスペクト比への理解が必要になってきます。
【関連記事】Webデザインの最適な画面サイズとは？
OGPとは、XやFacebookなどのSNSでWebページがシェアされた際に、ページのタイトル、URL、概要、画像などの補足情報を伝えるための仕組みです。
SNSでWebページの画像や説明が表示されるのは、こちらが設定されているからということです。
OGPでSNSに表示させる画像の比率は「1.91：1」が推奨されています。
しかし、全てのSNSでOGP画像が同じように表示されるわけなく、「1：1」で表示される場合もあります。
そのため、どちらで表示しても体裁良く見える画像を用意する必要があります。
以下のようなOGP確認サービスで確認しながら作成すると、様々なSNSで最適化することが可能です。
【OGP確認サービス】https://rakko.tools/tools/9/
アスペクト比は、PCやスマホなどのデバイスの進化や、WebサービスのUIの変化によって設定を変える必要があります。
そのたびに見直す必要があり、時代とともに変化していくためその時代にも最適化したWebサイト制作が大切になると思います。
そのためには、基礎的な知識はもちろん、最新の情報も得る必要があります。
小さなことですが、このような細かな配慮がユーザーの満足度につながります。
今後も最新の情報を得られるよう常にアンテナを張って、「最先端の知識」を心掛けた制作を行いたいです。
