ファンティアの「カバーフォト」（ヘッダー画像）の規格について。Twitterカードやサムネイルを綺麗に表示させるためには？

以前、ヘッダー画像メイキングの記事を書いた時に、ファンティアの「カバーフォト」（ヘッダー画像のようなもの）も作りました。


しかし、この画像だと、ある問題があったのです……。

※「そもそもファンティアって何の話？」という方はこちらをご覧ください。
（もうちょっとコンテンツが充実したら、改めてちゃんと記事を書きます！）

Twitterカードやサムネイルに変換された時に「見えなくなる」部分を意識しよう！

さて、上記の画像をカバーフォトに設定して数日、僕は残念な点に気づきました。


�@Twitterで表示した時、見事にサークル名が切れている！



�Aファンティア上でのサムネイル表示でも、サークル名がアイコン画像で隠れてしまっている！



�Bサークル名（Re:Iという文字）を左下に置くことで全体のバランスを取っていたので、これがないと左下スカスカのバランスの悪い画像になる！


これではクリック率が落ちてしまいますね。
ファンティアのカバーフォトの推奨サイズは1500×500ですが、単に1500×500の中に文字やイラストを収めておけばいいというものではなかったのです。


大雑把ですが、Twitterカードやファンティア上のサムネイルになった時に見えなくなる部分を図にしてみました。
透過処理済みです。ご自分の画像に重ねて確認するなど、ご自由にお使いください！


まず、左右はTwitterカードになった時に切り捨てられます。
また、左下は、ファンティアのサムネイルではアイコンが重なって見えなくなります。

そのため、基本的には、重要な文字やイラストは中心に寄せたデザインにすることが望ましいです。

サークルロゴを中央に持ってくるのが難しい時の力技！

そうは言っても、すでにカバーフォト（ヘッダー画像）を作ってしまっている場合、また一から作り直すのも大変ですよね。
僕もそう思いました。

そこで、無理矢理サークルロゴを移動させてみました！


んん？　こうじゃないな、可愛すぎる……。
じゃあこれでどうだ！


よし、無意味な画像でサークル名を右に押し出したぞ！

そう、もうやけっぱちに近い力技ですが、ロゴをずらして空いたスペースに、代わりに適当な画像を入れるのです！（笑）
これで左下スカスカ問題は解決です！

スペース埋め用の画像は、画像全体やサークルのイメージを損なわないものであることが望ましいです。
Re:Iの場合は、ファビコンやリストマーカーによく「◆」を使っているので、今回もまた菱形の力を借りました。

それでは、Befor・Afterをご覧ください！

ロゴの位置だけでなく、画像の切り抜き箇所も変えました。
Twitterカードやサムネイルになった時の見栄えを意識して、目立つところ（光っているところ）を中心に持ってきました。
また、主旨からは外れますが、色合いも見栄えが良くなるよう調整しました。



ファンティア上でも綺麗に見せたいので、「Twitterカード単体」で見た時にばっちりという配置にはできませんでしたが（実は左端に若干菱形が見切れてますｗ）、とりあえずぱっと見では、サークル名が印象的に見えるTwitterカードになったのではないでしょうか。



サムネイル上でもサークル名が確認できるようになりました。（なくたって下に「Re:Iファンティア支部」って書いてあるじゃんと言えばそうなのですが、Beforのように左下スカスカで文字下の線だけうっすらと見えてるのはちょっと……）

ちなみに、カテゴリー検索の画面では、さらに縮小されて表示されます。
しかしアイコン画像のサイズは変わらないので、結果的に左下の隠れる部分の割合が大きくなります。


それでもギリギリ表示されるように調整しました。