今回はアイキャッチを作るときに知っておくべき知識「アスペクト比」について解説します。これを知っておけばアイキャッチがきれいに作れるようになりますよ。
アスペクト比とは？
「アスペクト比」とは画像の横の長さと縦の長さを比率で表したものです。
アスペクト比＝【横の長さ：縦の長さ】
例を見てみましょう！下の図を見てください。左の画像は横の長さ600px縦の長さ600pxの画像です。この画像をアスペクト比で表すと両辺の長さが同じなのでアスペクト比１：１ということなります。また、右の画像は横の長さが1200px、縦の長さが675pxの画像です。1200px：675pxを計算すると16：９なのでアスペクト比16：９の画像ということになります。
【アスペクト比◯：◯】前の数字が「横幅」、後ろの数字が「縦幅」であることに注意！
アスペクト比を用いれば四角形の形状を簡単に表すことができます。
どうしてアスペクト比を勉強しなきゃいけないの？
どうしてアスペクト比を勉強しなきゃいけないの？と思いますよね。
それは、アイキャッチ画像をきれいに表示させるために必要だからです。
例えばTwitterでこんな画像が中途半端に見切れたアイキャッチを見たことはありませんか？これはアスペクト比を考慮していないから起こる現象です。アスペクト比をきちんと勉強しておけば右のようにきれいに枠内に表示できます。
覚えるアスペクト比は３パターン！
アスペクト比の組み合わせは無限大ですが、アイキャッチで使用されるアスペクト比はたった３パターンです。アイキャッチを作るときはこの３パターンだけ覚えておけば大丈夫です。
アイキャッチでよく使われるアスペクト比３つ
アスペクト比にはある種の"規格"みたいなものが存在します(コピー用紙にA４とかB５とかあるのと似ています)。
アイキャッチで使うアスペクト比は次の３つです！
正方形：アスペクト比１：１
アスペクト比１：１、つまり正方形の紹介です。これは最も汎用性が高くアスペクト比のレジェンド的な存在です。ただ コンパクトすぎるゆえインパクトに欠けるのが難点です。次に紹介する長方形に押されぎみの印象があります。
長方形(一般)：アスペクト比１６：９
アスペクト比１６：９の紹介です。こちらは長方形のアイキャッチ代表格です。長方形のアイキャッチといえばもう この比率！(ただしカード型を除く)。実はデジタルデバイスのほとんどは１６：９のアスペクト比でできています。いま使っているそのパソコンの画面も１６：９でできているのではないでしょうか？パソコンの画面と同じ比率なので違和感がありません。
１６：９はパソコンだけでなくデジタル関連のいたるところで採用されています(例えば、テレビの画面やデジカメの写真など。あとYouTubeのサムネイルなんかもいい例です)。
長方形(カード型)：アスペクト比1.91：１
アスペクト比1.91：１の紹介です。これは長方形の中でもカード型のアイキャッチと特に相性がいいアスペクト比です。カード型とはアイキャッチの下にタイトルや説明文が入るやつです(記事一覧やTwitterカード(大)など)。1.91：１は かたち的には先ほどの１６：９を少し押しつぶしたような四角形になります。なぜ潰れているのかというと、下にタイトルや説明文を入れるためです。
まとめ
ということでまとめです。
アスペクト比とは？
- アスペクト比＝画像の【横の長さ：縦の長さ】
- なんでアスペクト比を勉強するの？→どんな媒体でもアイキャッチを枠にきれいに収めるため
- アスペクト比には"規格"と呼べるような定型の組み合わせがある
アイキャッチでよく使われるアスペクト比
- １：１(正方形)
- １６：９(長方形：一般)
- 1.91：１(長方形：カード型)
以上、アイキャッチにまつわるアスペクト比にお話ししました。これだけ覚えておけばアイキャッチ作りで苦労しません！
補足：今回はアイキャッチに関するアスペクト比に限定してお話ししましたが実は他にもよく使われるアスペクト比はあります。３：２とか４：３などです。これらはデジカメの画像に採用されている比率です。記事に挿入する画像に関してはこれらの比率を使うといいでしょう。このサイトでも記事に挿入する画像は３：２のアスペクト比を使っています。余裕があれば参考にしてみて下さい。