WordPressで記事を書いたら、twitterに投稿しています。
いつも苦々しく思っているのは、twitterに投稿すると、画像（アイキャッチ）が「見切れる」問題です。
情報を入れすぎといこともあるが、文字や画像が四隅で中途半端に切れてしまうのです。
今回アイキャッチ画像として作成した画像は次のようなものです。
これを、アイキャッチ画像としてtwitterに投稿すると、次のようなイメージで投稿されます。
これは、twitterの開発者ツールで記事をレビューしたときのプレビュー画面です。
上下の文字がや背景のロゴが上下にはみ出て表示されていません。これを「見切れ」といいます。
半分ほど文字が見えてますので言いたいことは伝わるかもしれませんが、下手をすると完全に見切れてしまうケースもあります。
せっかく作成したアイキャッチですので、できたら完全に見切れなく表示させたいものです。
ものぐさな筆者は、まあいいや、といつも問題を放置していたのですが、そろそろ結論を出しておこうと思います。
アイキャッチ画像を、見切れることなくtwitterで表示できるサイズを提言いたします。
PhotoshopやIllustratorなど画像サイズを制御することができるソフトでアイキャッチ画像を作成している方向けの記事になります。
少なくともこの記事と同じサイズで投稿すれば、同様の見え方をするはずですのでご活用願えればと思います。
環境としては、WordPressを用いて投稿していますが、基本的にはどのような環境からの投稿でも対応できるものと思っています。
サイズ：606×317(px)，かつマージン上下左右それぞれ：13(px)
今回筆者のほうで検証した結果は以下のようになります。サイズはマージンを設定できるアプリを用いてこのサイズを使用すると、「見切れ」がなくtwitter上で表示できます。
606×317(px)とバッチリサイズ指定していますが、この比を用いれば、大きいサイズでもいいですし、小さいサイズでも大丈夫です。
サイズギリギリに文字やロゴを配置しないでください、「見切れ」が発生してしまいます。
マージン（余白）を上下左右に必ず入れてください。
サイズを計測できなければ、思い切り中央に寄せてみる
PhotoshopやIllustratorを使わないという方は、いちいち測ってなんか作らないよ、という方には、思い切り中央に寄せて文字入れをする、というザックリした方法もあります。
下の画像をダウンロードして、Photoshopやillustratorや写真アプリに取り込んで、スケール感を合わせて「おおよそ」赤い枠内に収まるようにしてもよいでしょう。
検証方法と検証過程
アイキャッチの最適な画像サイズは、twitterの公式サイトでは、推奨はないようです。
webサイト上で調べると、多数の情報は出てくるのですが、決定的な物はありません。
デスクトップやスマートフォン、タブレットなど多数のデバイスで閲覧されるので、なかなかこれだ、というサイズは断言はできないのです。
本記事で扱う「見切れ問題」について言及した記事も筆者が検索した限りありませんでした。
有力が情報がないので、実験的に検証しました。
目次に戻る▶▶検証には、twitter開発者ツールを利用しました
twitterには、投稿時にどのように表示されるかをプレビューできるサイトがあります。
アイキャッチがどのように表示されるかを事前に確認できます。
いきなり投稿してもいいのですが、気に入らないと削除して再投稿したりする必要がないので便利なサイトです。
目次に戻る▶▶最適画像サイズ割り出し
①基準サイズ を検証 640×480(px)
まず、一般的なサイズである640×480(PX)を検証してみました。
赤の点線を外枠とした画像です。これをTwitterに投稿すると、完全に縦が「見切れ」ました。
②基準サイズと同じ比率で半分サイズにして検証 320×240(px)
そこで、同じ比率で小さいサイズであれば表示されると考えました。単純に小さくなれば枠に収まるだろうと考えたのです。
ですが、結果は、基準サイズ(640×480)と同じでした。やはり「見切れる」のです。
Twitterで表示される枠よりも小さいサイズの画像にもかかわらず「見切れ」てしまいます。
わざわざ枠の中で拡大して「見切って」いるようです。
逆に基準サイズの２倍 、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で拡大縮小されるため）
注意点としては、画像サイズを小さくしすぎると、画像が粗くなってしまいますし、大きいと容量が大きくなる点に注意してください。
ぜひご活用ください！
目次に戻る▶▶
コメントを残す