ブログのアイキャッチ画像に最適なサイズとレイアウトとは？アスペクト比を知ろう！
ブログの記事のトップに表示させる「アイキャッチ画像」
アイキャッチ画像に写真を使う場合はあまり問題ありません。
イラストや文字を使っている場合は、少し気を使う必要があります。
TwitterやFacebookに記事がシェアされた時…
投稿画像をチェックした事があると思います。
画像に入れたタイトル文字が変な感じに切れて表示された事はありますか？
ブログのアイキャッチ画像に最適な画像比率を計算して記事に掲載しよう！
最適なアイキャッチ画像サイズ
ブログに掲載する最適な画像サイズはあるのでしょうか？
少なくとも記事のスペースより大きい画像は必要ありませんね？
ただ…
大きく画像を見せたい場合などは画像を拡大表示したりします。
Lightboxなどを使用して小さい画像を拡大表示する場合もあります。
表示させるサイズは人それぞれですが…
アイキャッチの画像の比率は統一しておきたいですね。
SNSへの画像表示サイズ
SNSにシェアされた時や記事の投稿時に自動でSNSにシェアしたり…
SNSによって決まったサイズにトリミングされて表示されます。
OGP画像と呼ばれるものです。
Open Graph Protocolの略。
画像やタイトル抜粋文などを設定して表示させる事ができます。
表示させるサイズなどは各SNSで異なります。
厄介なのはTwitterとFacebookでは異なる事。
さらにPCとスマホでも表示サイズが異なる事。
TwitterのOGP画像
TwitterのOGPはTwitterカードと呼ばれ2種類の表示方法を選択できます。
その他には映像用・アプリ用のTwitterカードがあります。
Summary Card
（サマリーカード）
左側にスクエアの画像が表示されます。
–
Summary Card with Large Image
（大きい画像のサマリーカード）
記事タイトル上部に大きく画像が表示されます。
サマリーカードは正方形にトリミングされます。
↓
1.91：1の比率
FacebookのOGP画像
FacebookはPCとスマホでは表示が変わります。
Twitter同様に正方形表示は同様です。
↓
16：9の比率
Facebookの場合、トリミングされる画像シミュレーターが存在します。
気になったら表示してテストしてみると良いでしょう。
http://ogimage.tsmallfield.com/ブログのアイキャッチ画像
ブログの記事の画像でのOGPはテーマによって設定が異なりますが…
ほとんどの場合アイキャッチ画像を選びます。
一般的なアスペクト比
矩形における長辺と短辺の比率。
タイヤのような3次元形状の中の2次元平面（トーラス面）、あるいはロッドの長さや直径のようなものにも適用される。
使用される代表的な物は、映像、紙、航空機や鳥の翼の形状、微細加工における穴径と深さなどである。
例えば矩形のときは"長辺の割合:短辺の割合"で表される。
出典：wikipedia
ハイビジョン（HDTV）16:9（1.78:1）
主にフルハイビジョンテレビもしくはフルハイデフィニションテレビの画面解像度での1920×1080など。
パノラマ写真の一種でアドバンストフォトシステムの規格（APS-H）。一部のデジタルカメラでも使われる。
4：3の画像を16：9にトリミングすると上記の画像になります。
※ピンクの部分が切り取られます。
横の長さが縦の長さの2倍寸。
ワイドなイメージで横広がりのある画像などにも良さそうです。
正方形の画像になります。
WQXGA（解像度2560×1600）、WUXGA（同1920×1200）など。
最適サイズのアイキャッチ画像
写真の場合はどのようにトリミングされても仕方ないですね。
ただ故意に人物などをトリミングする場合は切り取られる事を考慮しても良いですね。
特に考慮すべきは文字の位置を考えて表示しておくのが良いでしょう。
上記の画像がどのようにトリミングされても表示されるエリアです。
文字を挿入する場合はこのエリアに入れる
↓
SNSでの表示でトリミング内に表示
–
アイキャッチを1：1（正方形）に設定した場合
↓
16：9や1.91：1にトリミングされます。
アイキャッチ画像に文字を入れる時はトリミングサイズを意識！
最適なアイキャッチ画像サイズまとめ
当ブログで提供している素材は4：3で作成されています。
トリミングを意識してアイキャッチとしてお使いください。
またワイドを800ピクセルにしているのは一般的な記事のワイドに合わせています。
1カラムにすると足りないサイズになりますが…
2カラムなどは780なども多いですがご自身のブログの記事サイズに合わせてご使用ください。
