アイキャッチ画像を作りたい！でもアイキャッチの最適サイズがわからない・・・。そんな人のために今回はブログで使うアイキャッチ画像の最適サイズついてお話しします。
準備１：アスペクト比について知る！
アイキャッチのことを語るにはまず「アスペクト比」という前提知識が必要になります。「アスペクト比」のことをまだ知らない人は過去に解説した記事があるのでこちらをお読みください。
準備２：アスペクト比を決める！
アイキャッチの最適サイズを求める前にまずアイキャッチのアスペクト比 を決めておきます！
記事一覧のサムネイルを正方形にするか長方形にするか決めましょう！
一般的にサムネイルの形は大きく２種類あります。一つめは正方形１：１。二つめは長方形です。長方形はさらに二つに分かれていて、16:１の長方形と1.91：１の長方形があります。
まずは正方形コースで行くか長方形コースで行くか決めてください(正方形コースの方が比較的かんたんです。長方形コースは難しめ)。長方形コースの場合は「インフィード広告」を利用するかしないかで16:１派か1.91：１派に分かれます。
- 正方形コース→１：１
- 長方形コース(インフィード広告を使わない)→16：１
- 長方形コース(インフィード広告を使う)→1.91：１
どれらか決めたら次に進みます！
アイキャッチの最適サイズを求めるフローチャート
ここから最適なアイキャッチサイズを求めていきます。全体的な流れはこちらです！
- アスペクト比を決める！
- 記事の上にアイキャッチを表示させない→一般サイズを使う
- 記事の上にアイキャッチを表示させる→自分でサイズを計測する
- 記事の上にアイキャッチを表示させるが自分で測るのがめんどくさい→一般サイズを使う
アイキャッチを記事上に表示させない場合
アイキャッチは記事上に必ず表示させなきゃいけないかというとそうでもありません。表示しない人もいます。そんな人は一般的に用いられるアイキャッチのサイズで十分です。
アイキャッチの一般サイズ
一般的にはアイキャッチは横幅1200pxがよく使われているようです。横幅1200pxのときの各コースに対応するサイズを一覧にしました。
| コース | アスペクト比 | 一般サイズ |
|---|---|---|
| １、正方形コース | １６：９ | 1200px × 675px |
| ２、長方形コース(インフィード広告使わない) | １６：９ | 1200px × 675px |
| ３、長方形コース(インフィード広告使う) | 1.91 : １ | 1200px × 628px |
正方形コースの人もアスペクト比16:9の長方形で作ります。長方形の真ん中をくり抜いて正方形を作ります。
アイキャッチを記事上に表示させない人はここからサイズを選んで終了です。
アイキャッチを記事上に表示させる場合
アイキャッチを記事上に表示させる人はこちらです。この場合では２手に分かれていて正確なサイズを測る方法と一般サイズを使う方法があります。
記事の上にアイキャッチを表示させるとなると先ほど紹介した一般サイズではちょっと小さめです。画質がちょっとだけですが荒くなります。よりきれいに表示させるにはもう少し大きめのアイキャッチが必要です。
とはいうものの画質は誤差の範囲なので「正確なサイズを出すのがめんどくさい」、「難しいことを考えたくない」という人は先ほど紹介した一般サイズを使っても問題ありません。そういう人は上の表からサイズを選んで終了です。
アイキャッチのサイズを測る方法
ここからはアイキャッチを記事上に表示させる人が正確なサイズを測る方法を紹介します。
アイキャッチの(表示上の)横幅を測る
まずはアイキャッチが表示される場所の表示上の「横幅(px)」を測定します。
表示上の「横幅(px)」：画像自体のサイズではなく表示されるときのサイズ、枠のこと
デフォルトの人
メインカラムの幅をいじってない人、つまりAFFINGERのデフォルトのままの人はこちら。AFFINGERの初期状態ではメインカラムの幅は次のように固定されています。
アイキャッチのデザイン(スタイル)によって横幅が異なります(記事上のアイキャッチデザインについて)。
- デフォルト表示、ワイド化(横幅いっぱいに表示される系のデザイン)の場合は740px
- タイトル下、ポラロイド化(文章幅と同じ横幅デザイン)の場合は640px
該当する方の値をメモしておいてください。
デフォルト以外の人(メインカラムの幅を変えた人や１カラムにした人)
メインカラムをカスタマイズした人(カラム幅を変える)や１カラムにした人は直接 横幅を調べます。次の手順で調べてください。
- Chromeブラウザで自身のサイトを開きアイキャッチを表示させます。※テスト用の画像を用意したのでアイキャッチをまだ作ったことがない人はこれを使ってください。テスト用アイキャッチをダウンロードする(表示→右クリックで保存)
- ブラウザ画面上で右クリック→検証を押すと「デベロッパーツール」パネルが開きます。注意「デベロッパーツール」パネルはメインカラムが縮まないように最小幅にしておいてください。
- 「デベロッパーツール」パネルの上にあるページ内にある要素を選択して検査を押します。
- カーソルをアイキャッチの上に持っていきます。するとそのアイキャッチの表示上の横幅が表示されます。
表示された値をメモしておいてください。
アイキャッチのサイズを算出する
最後にアスペクト比と表示上の横幅からサイトに合う実際のアイキャッチサイズを算出します！
高画質ディスプレイに対応させるため横幅を1.5倍or２倍にする
いきなりサイズを出したいところですがその前に。。。
先ほどメモした表示上の横幅の値(px値)がありますね。これをそのまま使うと高画質ディスプレイに対応できません。高画質ディスプレイではアイキャッチが荒く表示されてしまいます(高画質なディスプレイは通常のディスプレイの二倍の解像度があるため。通常のサイズで作ると半分の密度になってしまう。macのretina displayなど)。
高画質ディスプレイできれいに表示するために画像を1.5倍か２倍に大きくします(1.5倍でちょうどいい大きさ、２倍できれいさMAXになります)。ちなみに２倍以上からは画質に変化はありません。
個人的には1.5倍で十分だと思います。
やること→先ほど測った表示上の横幅(px)を1.5倍か２倍にしてください。
例740px × 1.5 = 1110、640px × 2 =1280
「アスペクト比 計算ツール」でアイキャッチのサイズを出す
最後にこれまで集めた情報を元にアイキャッチのサイズを算出します。
| コース | アスペクト比 | サイズ |
|---|---|---|
| １、正方形コース | １６：９ | 横幅 × 縦 |
| ２、長方形コース(インフィード広告使わない) | １６：９ | 横幅 × 縦 |
| ３、長方形コース(インフィード広告使う) | 1.91 : １ | 横幅 × 縦 |
計算にはウェブツールを使うのが便利です。ウェブで使える便利な自動計算ツールを公開している方がいましたので紹介します。こちらのサイトを開いてください。
https://hakoirioyaji.com/tools/calc-size-using-aspect-ratio/：画像サイズ計算機(ハコイリオヤジ)
使い方は次の通り。
サイズに先ほど1.5倍か２倍にした横幅のpx数値を入力します。※基準はwidthのまま。
すると下の画像に結果が反映されます。最初に選んだアスペクト比(１６：９か1.91 : １)に該当する箇所を見てください。そこに書いてあるheightが縦の長さです。この値が求める縦の長さです。
例えば横幅が1476pxの場合はこんな感じになります。
| コース | アスペクト比 | サイズ |
|---|---|---|
| １、正方形コース | １６：９ | 1476px × 830px |
| ２、長方形コース(インフィード広告使わない) | １６：９ | 1476px × 830px |
| ３、長方形コース(インフィード広告使う) | 1.91 : １ | 1476px × 772px |
これでアイキャッチの横幅と縦幅がわかりました。それがあなたのサイトにぴったりなアイキャッチのサイズです！これを元にアイキャッチを作っていきます。
今回はここまで。今度はアイキャッチの作り方について解説する予定です。