アイキャッチ画像とOGPのサイズ
ブログをTwitterにシェアすると、OGP(アイキャッチ画像)が意図しない位置で断ち切れてしまうことがあります。
なぜなら、TwitterOGPの比率は1.9:1だからです。
Safe areaを意識してデザインしたいですね。
Twitter Card Validatorで確認しようね。
この記事をシェアしてみると、変な位置で切れるのがわかるよ〜！
16:9→Twitter Website card
さて、16:9のアイキャッチ画像は、Twitter上でどのように見えるのでしょう。
↓投稿すると青枠で断ち切れます。
ブログ上のサムネイル・アイキャッチ・OGP画像のセーフエリア設計
さて、このブログですが、わたしが無計画に設計してしまったため、アイキャッチ画像は16:9、一覧ページのサムネイルは4:3になっています。
OGP画像が断ち切れないようにデザインしても、ブログ一覧で、断ち切れていました。
自動的にトリミングされた際に、断ち切れない位置に、文字やロゴなどの重要な情報をレイアウトをすることが望ましいです。
デザインする前に、サイズの設計はしっかりおこないましょう（自戒）。
Web業界の片隅に生息しているマダムです。肩書きは特にありませんが、コアスキルはデザイン。（当ブログでの発信内容は、個人の見解であり、所属組織とは一切の関係がございません）