"> ');

【WordPress】twitter投稿時のアイキャッチ画像最適サイズを考える

WordPressで記事を書いたら、twitterに投稿しています。

いつも苦々しく思っているのは、twitterに投稿すると、画像(アイキャッチ)が「見切れる」問題です。

情報を入れすぎといこともあるが、文字や画像が四隅で中途半端に切れてしまうのです。

今回アイキャッチ画像として作成した画像は次のようなものです。

一般的な比率(4:3)で作成した画像

これを、アイキャッチ画像としてtwitterに投稿すると、次のようなイメージで投稿されます。

これは、twitterの開発者ツールで記事をレビューしたときのプレビュー画面です。

上下の文字がや背景のロゴが上下にはみ出て表示されていません。これを「見切れ」といいます。

640×480サイズ 上下の文字やWordPressアイコンが「見切れ」ている

半分ほど文字が見えてますので言いたいことは伝わるかもしれませんが、下手をすると完全に見切れてしまうケースもあります。

せっかく作成したアイキャッチですので、できたら完全に見切れなく表示させたいものです。

伝えたい情報を完全に表示したい

ものぐさな筆者は、まあいいや、といつも問題を放置していたのですが、そろそろ結論を出しておこうと思います。

アイキャッチ画像を、見切れることなくtwitterで表示できるサイズを提言いたします。

PhotoshopやIllustratorなど画像サイズを制御することができるソフトでアイキャッチ画像を作成している方向けの記事になります。

少なくともこの記事と同じサイズで投稿すれば、同様の見え方をするはずですのでご活用願えればと思います。

環境としては、WordPressを用いて投稿していますが、基本的にはどのような環境からの投稿でも対応できるものと思っています。

サイズ:606×317(px),かつマージン上下左右それぞれ:13(px)

今回筆者のほうで検証した結果は以下のようになります。サイズはマージンを設定できるアプリを用いてこのサイズを使用すると、「見切れ」がなくtwitter上で表示できます。

606×317(px)とバッチリサイズ指定していますが、この比を用いれば、大きいサイズでもいいですし、小さいサイズでも大丈夫です。

見切れなく情報を表示できるサイズ

サイズギリギリに文字やロゴを配置しないでください、「見切れ」が発生してしまいます。

マージン(余白)を上下左右に必ず入れてください

サイズを計測できなければ、思い切り中央に寄せてみる

PhotoshopやIllustratorを使わないという方は、いちいち測ってなんか作らないよ、という方には、思い切り中央に寄せて文字入れをする、というザックリした方法もあります。

下の画像をダウンロードして、Photoshopやillustratorや写真アプリに取り込んで、スケール感を合わせて「おおよそ」赤い枠内に収まるようにしてもよいでしょう。

この画像をダウンロードしてアプリに取り込んでもよいでしょう
目次に戻る▶▶

検証方法と検証過程

アイキャッチの最適な画像サイズは、twitterの公式サイトでは、推奨はないようです。

webサイト上で調べると、多数の情報は出てくるのですが、決定的な物はありません。

デスクトップやスマートフォン、タブレットなど多数のデバイスで閲覧されるので、なかなかこれだ、というサイズは断言はできないのです。

本記事で扱う「見切れ問題」について言及した記事も筆者が検索した限りありませんでした。

有力が情報がないので、実験的に検証しました。

目次に戻る▶▶

検証には、twitter開発者ツールを利用しました

twitterには、投稿時にどのように表示されるかをプレビューできるサイトがあります。

・twitter開発者ツールへのリンク

アイキャッチがどのように表示されるかを事前に確認できます。

記事URLを入れると、プレビュー画面を表示してくれる

いきなり投稿してもいいのですが、気に入らないと削除して再投稿したりする必要がないので便利なサイトです。

目次に戻る▶▶

最適画像サイズ割り出し

①基準サイズ を検証 640×480(px)

まず、一般的なサイズである640×480(PX)を検証してみました。

赤の点線を外枠とした画像です。これをTwitterに投稿すると、完全に縦が「見切れ」ました。

基準サイズ 640×480(px)
②基準サイズと同じ比率で半分サイズにして検証 320×240(px)

そこで、同じ比率で小さいサイズであれば表示されると考えました。単純に小さくなれば枠に収まるだろうと考えたのです。

ですが、結果は、基準サイズ(640×480)と同じでした。やはり「見切れる」のです。

Twitterで表示される枠よりも小さいサイズの画像にもかかわらず「見切れ」てしまいます。

わざわざ枠の中で拡大して「見切って」いるようです。

逆に基準サイズの2倍 、1280×960(px)でも同じように見切れてしまいます。

基準サイズの比を保ち、サイズ変更してみた

どうやら、サイズというよりも、「縦横の比率」に関係がありそうだ、という考えに至りました。

③縦方向をカット 640×317(px)で検証するも今度は横が見切られた

「見切られた」画像を見ると、横方向は、赤の外枠は見切られていませんでした。

ですので、縦方向の「見切られていない」範囲に収めてしまえば、全ての情報を表示できるであろうと考えました。

見切れない画像サイズの決め方

このサイズが、640×317でした。理屈的にはこのサイズで治まるはずなのですが、下の画像のように今度は横方向が見切れてしまいました。

今度は横のラインが見切れてしまう

いったいどうなっているのだろう?と途方にくれてしまいました。

④横方向をカット 606×317(px)で検証

③の手法と同じやり方で今度は横方向を加味したサイズを割り出しました。

それが、606×317(px)というサイズとなります。

今度は横方向が表示されるサイズを探る
点線までほぼ表示されている。ほぼ理想である

どうでしょうか?かなり結論に近い結果となったと考えられないでしょうか。

ほぼほぼ赤い点線が表示されていると思います。

ですが、微妙に上下で「見切れ」が確認できます。理屈的には収まりそうなものですが、何か違うロジックがあるものと思われます。

完全に端っこまで見切れないサイズを更に検証しましたが、結果的にはジャストサイズの解析はできませんでした

筆者がやった限り、必ず上下のどこかが見切れてしまいました。

一番見切れ量が少ないのが、やはり前述の606×317(px)でした。ですので、こちらを今回のご提案サイズと決定しました

⑤ジャストサイズではないので、マージン13(px)を設け、絶対領域を確保する

端部まで完全に見切れないサイズの提案をめざしましたが、断念をいたしました。

ですが、実用的に端部まで完全に入りきるアイキャッチ画像を作成する必要があります。

そのため、606×317(px)からさらに中心(内側)にマージン(余白)を設けることによって目的を実現します。

検証画像で使用した赤い点線の幅は、13(px)です。少なくともこの 赤い点線 内に情報を入れ込めば確実にtwitterで表示されるはずです。

点線よりも内側に情報を入れる

ですので、606×317(px)の画像、さらに、上下左右に13(px) を設ける、というのを今回の結論としました。

確実に情報を入れることができた
目次に戻る▶▶

まとめ

以上検証を行ってみました。

PhotoshopやIllustratorでアイキャッチを作成される際には参考にしていただけると思います。

  • 606×317(px)かつ、マージン(余白)上下左右かつ13(px)
  • 比率さえ同じであれば、サイズは大きくても小さくてもよい(twitterで拡大縮小されるため)

注意点としては、画像サイズを小さくしすぎると、画像が粗くなってしまいますし、大きいと容量が大きくなる点に注意してください。

ぜひご活用ください!

目次に戻る▶▶

コメントを残す

メールアドレスが公開されることはありません。