AFFINGER(アフィンガー)で地味に悩まされるのがサムネイル問題。
AFFINGER5では記事ごとにアイキャッチ画像を設定できますが、記事一覧やブログカードで表示されるサムネイル画像は縦横比が1:1の正方形です。
ところがアイキャッチは横長の長方形の画像を使うのが一般的。
そのため、サムネイルに表示されるのは中央部分のみになってしまいます。
フリー画像をそのまま使っているだけなら問題はありませんが、画像にタイトルや見出しを入れている場合は左右が見切れてしまうため、かなり不格好になってしまいます。
そこで本記事では、AFFINGER6やSANGOのブログカードのように、正方形のサムネイルに対応したアイキャッチ画像の作り方をご紹介します。
簡単でかつきれいに仕上がるので、ぜひ参考にしてください。
AFFINGERを使っていた頃に書いた記事なのでAFFINGER向けの記事のようになっていますが、SANGOなどでも使える方法です。
AFFINGER特有の何かを使わなければできない方法ではないので、その他のテーマをお使いの方もぜひ参考にしてみてください。
» WordPressテーマ・AFFINGER5（アフィンガー5）のメリット・デメリットをレビュー！
AFFINGER5のサムネイル画像が見切れてしまう問題
AFFINGER5のサムネイル画像は下記のとおり正方形。
非常に美しいのですが、一般的にサムネイルは長方形。
そのためアイキャッチに文字を入れていたりすると、このようにばっさり見切れてしまいます。
なおAFFINGER5でサムネイル画像が使われる場面は下記の2つ。
- 記事一覧
- ブログカード
どちらもブログ中で使う場面は多いですよね。
それだけに、サムネイルが表示されるごとに読者から「イケてない」と思われるのは避けたいところ。
せめてこれから作るものは対応しておくとよいかと思います。
AFFINGER5のアイキャッチを正方形対応で作成する方法
サムネイルの作成にはCanvaを使用します。
ちなみにCanvaはウェブブラウザ上で利用できるデザインツール。無料で利用することができます。
なお作成の手順は簡単です。
- Canvaで任意の縦横サイズでアイキャッチのベースを作成
- 素材から縦横比1:1の正方形を作成
- 正方形の透過度を50%くらいにしてアイキャッチの中央に配置
- 正方形に収まるように文字を入れる
たったこれだけ。
めちゃくちゃ簡単ですね。
またCanvaを使った方はご存じだと思いますが、Canvaは自動の位置合わせ機能が効いています。
中央で合わせたり端を揃えたりをアシストしてくれるので、簡単に美しいレイアウトを作ることができますよ。
AFFINGER5のアイキャッチの作成手順
実際の手順を画像付きで解説します。
①Canvaでアイキャッチのサイズを決定する
アイキャッチのサイズを決めます。
サムネイルで正方形に切り取られることを考えると、縦横比の差が小さく正方形に近い方が表示できる範囲は大きくなります。
またアイキャッチ画像(OGP画像)の大きさは、Google砲の被弾条件にも関わるようです。
ある程度の大きさの方が被弾しやすいという説もありますが、当然縦横サイズが大きくなると画像容量も大きくなります。
ブログや記事のテーマによってもG砲への意識は異なるかと思いますので、この辺りはお好みで決めていただいてよいかと思います。
なお自由にサイズを決めたい場合はCanbaの画面右方の「カスタムサイズ」から設定できます。
ちなみにこのブログではアイキャッチの縦横サイズを760×428pxで設定しています。
②素材から正方形を作り透過させる
まずベースとなる画像を用意しておきます。
ちなみに今回の例ではアップロードした無料画像を背景にしています。
素材から四角を選択します。
アイキャッチ画像の上に貼り付けます。
縦横比1:1を維持しながら正方形を縦枠いっぱいまで広げます。
四角素材はドラッグして中央辺りで上下左右に位置を探ればCanvaが自動でアシストしてくれます。
中央に配置したあとに四角を透過させます。
透過は右上のモザイク模様のアイコンを押せばスライダーバーで調節できます。
50%くらいにしておけばよいと思います。
文字入れをするエリアが決まりました。
③テキストを挿入する
テキストを配置していきます。
テキストも位置がアシストされるので、参考にしながら配置するとよいと思います。
④作成完了
テキストを配置し終わったら四角素材を削除して完成です。
このようにサムネイルにきれいに収まっています。
なお作った素材とテキストはまるっとコピペ＆ペーストして次のアイキャッチ画像の作成時に使いまわすことができます。
Ctrl＋Aで全選択して、Ctrl＋Cでコピー。
「新しくページを追加」で2ページ目にベースを作り、
Ctrl＋Vでペーストすると、
このように複製できます。
文言を変えていけばどんどん量産できるのでとても捗ります。
画像作成アプリでも同様のことは可能
上記の手順は必ずしもCanvaでないとできないかというと決してそんなこともなく、他の画像編集アプリでも十分可能です。
たとえば私は「PhotoScape X」という有料の画像加工アプリを持っていますが、上記で説明した手順はこちらのアプリでも再現できます。
機能的に必要なのは「自動の位置合わせ機能がある」ことと「四角形の素材を自由に追加できる」ことだけ。
透過機能もなければないで、問題ありません。
四角素材をテキストの背面にまわして下敷きのように使えばよいだけなので。
Canvaがあまり好きでない方はお手持ちのアプリでどうぞ。
AFFINGER5のサムネイルは正方形以外も可能
なおサムネイル画像は初期設定では正方形が選択されていますが、正方形以外を選ぶことも可能です。
「AFFINGER5 管理」から「丸」「フルサイズ」「メディア設定」が選べます。
アイキャッチを作り直すのが面倒な方はこちらで調整してみるのもありですね。
まとめ：ユーザー体験を向上させるためにもサムネイルは整えよう
ここ最近、SEO対策としてユーザー体験がとても重視されています。
本質的な意味では離脱率を下げるためのライティングであったり、内部リンクの導線だったりするのかもしれませんが、デザインも立派なユーザー体験の一つ。
サムネイルが崩れていると地味に視認性を下げてしまいます。
また何よりデザイン崩れはユーザーに対して無意識の不快感を与えてしまいます。
ブロガーは日頃から自分のブログを見ているので、自分のブログに関することはよく分かっていますが、初見の訪問者にとっては見たままがすべて。
「サムネイルの左右が切れているのは、長方形で作った画像が正方形に収まり切らないから」という理由を訪問者はわかりません。
訪問者にはおそらく「デザインが崩れている」としか見えないはずです。
何にせよ、クリックしてもらいたい箇所が読者にとってよい評価には繫がらないのはあまり歓迎できないこと。
記事数によってはすべてを対応することは難しいとは思いますが、機会があればぜひ挑戦してみてください。
また下記の記事ではアフィンガーのCSSカスタマイズについて解説しています。
» AFFINGER5(アフィンガー)のデザインをさらに向上させるCSSカスタマイズ集
こちらはブログデザイン全般に関わることを紹介していますので、ぜひあわせてご覧いただければと思います。