MENU

【Blog】アイキャッチ画像の最適なサイズとレイアウトについて

f:id:min0124:20170919001634p:plain:w300

いままで適当にしていたアイキャッチの仕様を決めてみました。

なんで適当にしていたかというと、稼働がかかるからです。

ちゃんと記事の内容に合わせて、フリーの写真を探して、文字打って詰めて…と

できるだけ記事投稿はちゃちゃっと済ませたいので、特に何もしてませんでした。

とは言え、Twitterをはじめて、アイキャッチによるビジュアルの訴求は高いので、

できるだけ手間をかけずに作成する方法を考えてみました。

サイズについて

OGP画像はFacebookの推奨が1200x630px(縦横比 1.91:1)

そこから正方形のサムネイルを考慮するとして1200x1200pxになります。

少し大きい気もするのですが、端末の高解像度化も考えてこのサイズにすることにします。

あと2、3色しか使わないので、画像が大きくても最適化して、サイズを小さくできそうです。

レイアウトについて

テストしてみました。

f:id:min0124:20170919002909p:plain

  • まず上記のような画像を作成

※1200x630px外は暗くしています。

  • 下記のサイトに画像をアップロードして、それぞれのサイトでの見え方を見てみます。

アイキャッチ画像サイズチェッカー|TwitterやFacebookのOGP表示を確認

f:id:min0124:20170919003129p:plain

結果

1200x630px内に文字が入っていれば、問題なさそうです。

アイキャッチの作成

f:id:min0124:20170919003440p:plain

なんでもよいのですが、Photoshopで作成しています。

  • 背景はカテゴリーの色(今回は、はてなの青色00a4de

  • 文字は白文字(フォントはコーポレート・ロゴ)

  • 文字サイズは128px(漢字は120px)

  • 文字間隔は168px

  • 文字詰めはオプティカル

以上!

画像最適化

最後に画像サイズの最適化します。

Compressor.io - optimize and compress JPEG photos and PNG images

60.0 KB→12.0 KB(80%OFF)

まとめ

これなら数分内で作成できるので、毎回アイキャッチ画像作る気がします。