ビジュアルで一般的なアスペクト比はどれ?

 In Best Practices, おすすめ活用例

1137447579, lechatnoir

ソーシャルメディアに画像を投稿したり、写真を印刷したりしたことがある人なら、アスペクト比を扱ったことがあると思います。アスペクト比について疑問に思ったり、混乱したりすることはよくある話です。幸い、アスペクト比の仕組みの基本を理解するのはとても簡単です。

アスペクト比の選択肢が無限にあるように思えますが、数学の知識やグラフィックデザイナーの経験がなくても、最適なアスペクト比を計算することができます。

アスペクト比って何?

最も簡単に言うと、アスペクト比とは、画像の縦幅に対する横幅の比を表すものです。通常、アスペクト比はコロンで区切られた2つの数字で表記されます(1:1や16:9など)。1番目の数字は必ず横幅を表し、2番目は縦幅を表します。アスペクト比は、画像の全体的な形を表す方法として世界的に普及しているので、どの国のデザイナーでもコンテンツに応じて迅速に変更を加えることができます。

1_Most common.jpg1094618134, SimonSkafar

アスペクト比は、画像やグラフィックが表示されるプラットフォームや印刷物によって変わるものだということを覚えておきましょう。アスペクト比の違いとその調整方法を理解しておけば、画像が使用される場所に関わらず、印象的なビジュアルコンテンツを作成することができます。プラットフォームに適したアスペクト比を使用することで、意図したとおりにビジュアルを表示させられるので、思わぬ画像の引き伸ばしやトリミングを防いで、解像度の低下を避けることができます。いずれも、デザインの重要な要素ですね。

画像サイズとアスペクト比の関係は?

画像のアスペクト比は、それ自体が重要な数値ですが、大切なのはアスペクト比だけではありません。アスペクト比は、画像の全体的な形を把握するのに役立ちますが、どのアスペクト比を選ぶべきか判断するには、画像の実際のサイズ(ピクセルまたはインチ)を知る必要があります。

ピクセルは、デジタルやウェブで使用する画像の横幅と縦幅を表すのによく使われる単位です。例えば、1080×1080ピクセルの正方形の画像であれば、アスペクト比は1:1になります。つまり、横幅と縦幅の比ですね。500×500ピクセルの画像のアスペクト比も同じく1:1です。画像のサイズは明らかに異なりますが、画像の横幅と縦幅の比が同じであるため、アスペクト比も同じになります。

一般的なデジタル画像のサイズと、それに対応するアスペクト比は次のとおりです。

  • 1080×1080ピクセル = 1:1アスペクト比
  • 1080×720ピクセル = 3:2アスペクト比
  • 1024×768ピクセル = 4:3アスペクト比
  • 1920×1080ピクセル = 16:9アスペクト比

用途に適したアスペクト比の求め方

用途に適したアスペクト比は、いくつかの要素によって変わってきます。画像のトリミングやリサイズを行うまえに確認しておきたい大切な点がいくつかあります。用途に適した画像とアスペクト比を選ぶ際には、次の点を考慮するようにしましょう。

  • 画像が閲覧されるのは、主にどのプラットフォームですか?
  • プラットフォームによって複数のバージョンを作成する必要がありますか?
  • アスペクト比を変えると、画像が劇的に変化したり、好ましくない影響を受けたりすることはありますか?
  • 画像をソーシャルメディアで使用しますか?
  • 画像を印刷物で使用しますか?
  • 画像をデジタル広告に使用しますか?
  • 画像に文字やロゴが含まれますか?

画像の主目的に焦点を当てることで、ニーズに適したアスペクト比を定めることができます。そして、様々な状況で最も一般的なアスペクト比を知っていれば、特定のプラットフォームや目的によって画像を調整/編集しやすくなります。

とくに一般的なアスペクト比は?

アスペクト比はいくつもありますが、その中には、人気が高く、日常的に使用されているものがいくつかあります。そこでアスペクト比について、SNS、映像、印刷物の多くで見かける推奨基準と使用例を網羅しました。

SNSとウェブに共通するアスペクト比

1日平均9,500万枚以上の画像がSNSにアップロードされている現在、SNSやウェブサイトでどのアスペクト比で画像を最も魅力的に表示できるのか理解しておくことが重要です。

Facebookのアスペクト比

Facebookでとくに一般的なアスペクト比は、1:1、16:9、9:16です。

2_Facebook.jpg1057767656, damircudic

Facebookプロフィール写真

  • アスペクト比:1:1
  • 推奨サイズ:128×128ピクセル

Facebookカバー写真

  • アスペクト比:16:9
  • 推奨サイズ:820×461 ピクセル

Facebookフィード動画

  • アスペクト比:9:16 ~ 1:1
  • 推奨サイズ:1280×720 ピクセル

Facebookフィード広告

  • アスペクト比:9:16 ~ 16:9(リンクで1.91:1にトリミング)
  • 推奨サイズ:1200×628 ピクセル

Facebookカルーセル広告

  • アスペクト比:1:1
  • 推奨サイズ:1080×1080 ピクセル

Facebook

  • アスペクト比:16:9
  • 推奨サイズ:1280×720 ピクセル

Instagramのアスペクト比

Instagramでとくに一般的なアスペクト比は、1:1、9:16です。

3_Instagram.jpg473082752, knape

Instagramフィード写真

  • アスペクト比:1:1
  • 推奨サイズ:1080×1080 ピクセル

Instagramフィード正方形動画

  • アスペクト比:1:1
  • 推奨サイズ:1080×1080 ピクセル

IGTV動画

  • アスペクト比:9:16
  • 推奨サイズ:1080×1920 ピクセル

Instagramストーリー動画

  • アスペクト比:9:16
  • 推奨サイズ:1080×1920 ピクセル

Snapchatのアスペクト比

Snapchatでとくに一般的なアスペクト比は、9:16です。

4_Snapchat.jpg1049883642, Sergeeva

Snapchat広告

  • アスペクト比:9:16
  • 推奨サイズ:1080×1920 ピクセル

Snapchatジオフィルター

  • アスペクト比:9:16
  • 推奨サイズ:1080×1920 ピクセル

Twitterアスペクト比

Twitterの画像では、次のアスペクト比が標準と考えられています。

5_Twitter.jpg108328915, piskunov

Twitterプロフィール写真

  • アスペクト比:1:1
  • 推奨サイズ:400×400 ピクセル

Twitterカバー写真

  • アスペクト比:3:1
  • 推奨サイズ:1500×500 ピクセル

Twitterタイムライン写真

  • アスペクト比:2:1
  • 推奨サイズ:1024×512 ピクセル

Pinterestのアスペクト比

Pinterestでとくに一般的なアスペクト比は、1:1、2:3です。

6_Pinterest.jpg1147289749, Rowan Jordan

Pinterestのプロフィール写真

  • アスペクト比:1:1
  • 推奨サイズ:165×165 ピクセル

Pinterestの標準的なピン

  • アスペクト比:2:3
  • 推奨サイズ:1000×1500 ピクセル

LinkedInのアスペクト比

LinkedInで一般的に使われているアスペクト比は複数あります。とくに、1:1と4:1が一般的です。

7_LinkedIn.jpg686004832, Branimir76

LinkedInのプロフィール写真

  • アスペクト比:1:1
  • 推奨サイズ:400×400 ピクセル

LinkedInの背景写真

  • アスペクト比:4:1
  • 推奨サイズ:1584×396 ピクセル

LinkedInの企業ロゴ

  • アスペクト比:1:1
  • 推奨サイズ:300×300 ピクセル

LinkedInの企業カバー写真

  • アスペクト比:2:1
  • 推奨サイズ:1536×738 ピクセル

LinkedInのブログ投稿リンク画像

  • アスペクト比:2020年1月5日
  • 推奨サイズ:1200×628 ピクセル

動画や映画で一般的なアスペクト比

映画や動画でとくに一般的なアスペクト比は、16:9です。例外として、古いテレビや端末では、4:3のアスペクト比で表示されます。

8_YouTube.jpg1138834713, vm

YouTubeのアスペクト比

YouTubeでとくに一般的なアスペクト比は、16:9です。

YouTubeチャンネルのアイコン

  • アスペクト比:1:1
  • 推奨サイズ:800×800 ピクセル

YouTubeチャンネルアート

  • アスペクト比:16:9
  • 推奨サイズ:2560×1440 ピクセル

YouTubeにアップロードする動画

  • アスペクト比:16:9
  • 推奨サイズ:1920×1080 ピクセル

写真やアートで一般的なアスペクト比

標準的な写真やアート系の印刷物でとくに一般的なアスペクト比は、3:2、5:4です。

Aspect Ratios for Photography and Art.jpg1245116904, Geber86

アスペクト比3:2の標準的な印刷サイズ

  • 4×6印刷サイズ
  • 16×24印刷サイズ
  • 24×36印刷サイズ

アスペクト比5:4の標準的な印刷サイズ

  • 8×10印刷サイズ
  • 16×24印刷サイズ
  • 24×36印刷サイズ

使用する画像のアスペクト比を把握していますか?

用途に適した画像を見つけたはいいものの、その画像のアスペクト比は、オンラインプラットフォームや印刷サイズに適しているでしょうか? 必要なサイズやアスペクト比を知らずに画像を選択してしまうと、デザインに支障をきたす原因になります。アスペクト比を計算して、必要に応じて画像を調整するためのツールやワザを知っておきましょう。

アスペクト比計算機

アスペクト比を自分で計算する方法を知っておくと、いざというときに役立ちます。手っ取り早く計算してくれるオンラインツールも多くあります。画像のサイズがピクセルまたはインチでわかっている場合、アスペクト比計算機に横幅と縦幅を入力してアスペクト比を求めることができます。

アスペクト比を変えずに画像のサイズを変更する方法

数式を使って、元のアスペクト比を維持したまま画像の新しいサイズを定義することができます。

  • (もとの縦幅÷もとの横幅)×新しい横幅=新しい縦幅

例えば、1920×1080ピクセル、アスペクト比16:9の画像があるとします。ただし、その画像を表示させるプラットフォームでは、横幅が1280ピクセルに制限されているとします。この画像のアスペクト比16:9を維持したまま、新しいサイズの縦幅を計算してみましょう。これにより、もとの画像が損なわれることなく、新しい横幅の制限に合わせて画像のサイズを変更することができます。

  • (もとの縦幅1080÷もとの横幅1920)×新しい横幅1280 = 新しい縦幅720

この計算から、新しいプラットフォームに適合させるには、画像を1280×720ピクセルにリサイズしなければならいないことがわかります。リサイズ後も画像のアスペクト比は16:9のまま変わらず、サイズは小さくなったものの、画面上での表示に影響はありません。

画像のアスペクト比を変更する方法

ウェブサイトで見栄えのする画像でも、別の媒体でアスペクト比が変わると見え方がおかしくなることがあります。1枚の画像を複数のソーシャルプラットフォームや印刷サイズで使用するために、自らアスペクト比や画像サイズを何度も変更して、見た目の悪くなる引き伸ばしやトリミングのほか、解像度の低下を避けなければならないこともあります。

iStock Editor.png

オンラインで使えるiStockエディターのようなシンプルな画像編集ツールは、ウェブや印刷物でとくに一般的なアスペクト比や画像サイズに対応していて、よく使われるサイズでトリミングできるようになっています。また、独自のアスペクト比や好みの画像サイズに設定することも簡単にできます。iStockエディターに画像をアップロードして、内蔵トリミングツールを使うか手作業でトリミングすれば、希望のアスペクト比に合わせて画像の設定やリサイズを思い通りに行えます。

表示先のプラットフォームのアスペクト比と画像のアスペクト比が一致していることを確認することで、媒体を問わず、印象的なビジュアルコンテンツを制作できます。トリミングや画質の低下により、せっかくの画像が台無しになることはありません。

いかがでしたか? iStockで写真素材やベクター画像素材を検索して、次回のコンテンツ制作に適したビジュアル探してみましょう。

この記事は役に立ちましたか?
この記事をシェアする
最新のアドバイスをiStockから受け取る
この記事も好きかも