2021年07月15日 2021年11月25日

アイキャッチ画像とOGPのサイズ

ブログをTwitterにシェアすると、OGP(アイキャッチ画像)が意図しない位置で断ち切れてしまうことがあります。

なぜなら、TwitterOGPの比率は1.9:1だからです。

Safe areaを意識してデザインしたいですね。

マグロン

Twitter Card Validatorで確認しようね。
この記事をシェアしてみると、変な位置で切れるのがわかるよ〜!

16:9→Twitter Website card

さて、16:9のアイキャッチ画像は、Twitter上でどのように見えるのでしょう。

画像サイズ16:9、青枠1.9:1

↓投稿すると青枠で断ち切れます。

ブログ上のサムネイル・アイキャッチ・OGP画像のセーフエリア設計

さて、このブログですが、わたしが無計画に設計してしまったため、アイキャッチ画像は16:9、一覧ページのサムネイルは4:3になっています。

OGP画像が断ち切れないようにデザインしても、ブログ一覧で、断ち切れていました。

自動的にトリミングされた際に、断ち切れない位置に、文字やロゴなどの重要な情報をレイアウトをすることが望ましいです。

デザインする前に、サイズの設計はしっかりおこないましょう(自戒)。

同じカテゴリーの記事5件