今回はアイキャッチを作るときに欠かせない知識「アスペクト比」についての話です。「アスペクト比」ってわかりにくいですよね。わかります。そこで今回は「アスペクト比」について最低限 知っておくべきことだけをまとめました。
一応 初めて聞いた人に説明すると「アスペクト比」っていうのはアイキャッチを作るときに必要な前提知識です。これを知らないとアイキャッチが変なふうに表示されてしまいます！それを防ぐためにも最初にきちんと勉強しておきましょう！
アスペクト比とは？
「アスペクト比」とは画像を作るときときに目安として使うものです。画像の横の長さと縦の長さの比率で表します。
アスペクト比＝【横の長さ：縦の長さ】
詳しく見ていきましょう！下の図を見てください。左の画像は横の長さが600pxで、縦の長さも600pxです。これをアスペクト比で表すと１：１になります。同じように右の画像は横の長さが1200pxで縦の長さが675pxです、アスペクト比は(1200px：675pxなので)３：２になります。
要するにアスペクト比で何を伝えたいのかというと 「その四角形がどんな形の四角形か？」 ということに尽きます。アスペクト比を用いれば四角形の形を簡単に表すことができるのです。
【アスペクト比◯：◯】前の数字が「横幅」、後ろの数字が「縦幅」であることに注意！
なんでアスペクト比を勉強しなきゃいけないの？
なんでわざわざアスペクト比を勉強しなきゃいけないの？と思いますよね。
アスペクト比はアイキャッチを作るときに必須の知識です。アイキャッチを記事一覧やSNSで枠内にきれいに表示させるためにはアスペクト比を頭に入れておかなければならないのです。
例えばTwitterでこんな画像が中途半端に見切れたアイキャッチを見たことはありませんか？これはアスペクト比を考慮していないいい例です。こういうことを防ぐためにアスペクト比を勉強します。
覚えるアスペクト比は数パターン
アスペクトの比率は自分で考えるのかというとそうではありません。アスペクト比にはある種の"規格"みたいなものが存在します(コピー用紙にA４とかB５とかあるのと似ています。)。初心者はまず今から紹介する３パターンだけ覚えましょう。
アイキャッチでよく使われるアスペクト比３つ
初心者が覚えるべきアスペクト比はこれだ！
アイキャッチにまつわるアスペクト比で必ず覚えなければならないものは次の３つです！
正方形：アスペクト比１：１
アスペクト比１：１、つまり正方形はアスペクト比のレジェンドです。初心者におすすめです。１：１はとてもオールマイティでこれに合わせればほぼ困ることはありません。ただ コンパクトなのでインパクトに欠けるのが難点です。次に紹介する長方形に押されぎみの印象があります。
長方形(一般)：アスペクト比１６：９
アスペクト比１６：９は長方形のアイキャッチ代表格です。長方形のアイキャッチといえばもう この比率！(ただしカード型を除く)。実はデジタルデバイスのほとんどは１６：９のアスペクト比でできています。いま使っているそのパソコンの画面も１６：９でできているのではないでしょうか？パソコンの画面と同じ比率なのでとても自然で溶け込んだ感じに見えます。
１６：９はパソコンだけでなくデジタル関連のいたるところで採用されています(例えば、テレビの画面やデジカメの写真など。あとYouTubeのサムネイルなんかもいい例です)。
長方形(カード型)：アスペクト比1.91：１
アスペクト比1.91：１はカード型と相性がいいアスペクト比です。カード型とはアイキャッチの下にタイトルや説明文が入るやつです(記事一覧やTwitterカード(大)など)。1.91：１という数字はなんとも中途半端な数字ですが かたち的には先ほどの１６：９を少し押しつぶしたような四角形になります。なぜ潰れているのかというと、下にタイトルや説明文がくる分 間延びさせないようにしているためです。
まとめ
ということでまとめです。
アスペクト比とは？
- アスペクト比＝画像の【横の長さ：縦の長さ】
- なんでアスペクト比を勉強するの？→どんな媒体でもアイキャッチを枠にきれいに収めるため
- アスペクト比には"規格"と呼べるような定型の組み合わせがある
アイキャッチでよく使われるアスペクト比
- １：１(正方形)
- １６：９(長方形：一般)
- 1.91：１(長方形：カード型)
以上、アイキャッチにまつわるアスペクト比にお話ししました。これだけ頭に入れたら安心してアイキャッチ作りに進んでください！
今回はアイキャッチにまつわるアスペクト比に限定してお話ししましたが実は他にもよく使われるアスペクト比はあります。３：２とか４：３など。これらはデジカメに採用されている比率です。記事に挿入する画像はこれらを使うといいでしょう。このサイトでも記事に挿入する画像は３：２のアスペクト比を使っています。余裕があれば参考にしてみて下さい。