はてなブログのアイキャッチ画像をTwitterサイズや正方形に対応させよう
突然ですが。
アイキャッチ画像、ブロガーのみなさんは、どのように作っていますか？
まえがみです。
手段はどうあれ、自分で画像を (イチから写真を撮りに国外に行ったり、プロに頼んだりはなかなかないにしろ) 作っている方は多いんじゃないかなぁ～、と思います。
…でも、ちょっと待ってください。
あなたのその努力、労力、無駄になっていませんか？
私のまわりの素晴らしいブロガーさん方であれば、フリーのものを拾ってきて、そのまま貼って終わり、ということは、あまりないと思います。(よくやっていた人はここにいる)
いちばん多いのは、そういったフリー画像の上に、文字をのせるというものではないでしょうか。（最近はそれが増えてきた人はここn）
でも。
がんばって画像を作ったとしても、読者にその意図がきちんと伝わらないと、その画像を作った意味がありません。
前置きを飛ばしたい方はこちらからどうぞ
ハイブリッドとは
わたしも以前は(というか今も時々)ほとんど気にしてはいませんでした。
でも、やっぱり問題がありますね。
どういうことかというと、例えば、
ブログ内で、正方形になるとこんなふうに横が切れていたり、
アミバットってなんだ。
それならと、こんなふうに、その問題を解決したとしても、
Twitterなどで、長方形になると縦で切れていたり。
こんなんで、いいのか…！
まぁ、わたし自身がこうなっている、という悪い見本だということですが！
それをどうにか頑張ろうとしているのですよ。
とにかく、今回の「ハイブリッド」とは 、そういう意味なのです。
正方形でも長方形でも、形に関わらず、伝えたいことが伝わるアイキャッチ画像を作ろう！
まえがみと一緒に！
ということです。
前書き長すぎた。目次さきに貼っておいたからいっか。
つくる前に、下準備！
さて、実際に画像をつくっていきますが、その前に、調べることがあります。
ただ、それらの情報はすべてネットにたくさんあるので、そこはそのサイトに丸投げさせてもらいます。
ベストサイズを知る
まずは画像のベストなサイズを知ることでしょう。
「ハイブリッド」がテーマのはずが、サイズを知らないと…、どんなにデザインをがんばっても、大変なことになります。
正方形でも長方形でもうまく表示できない、アイキャッチなんてもんじゃない、どっちつかずの画像ができあがります。
それは、残念だ。
というわけで調べました～！
とっても親切に教えてくれるサイトです。
はてなブログからTwitterシェア、最適なアイキャッチ画像サイズはこれだ！ - ムビログ
現状での最善策は、はてなブログでアイキャッチ画像にしたい画像サイズは、 448×252（16:9） となりました。これ以上のサイズでも16:9であれば構いません。
はてなブログからTwitterシェア、最適なアイキャッチ画像サイズはこれだ！- ムビログ
はい！
ということでまずは、使いたい画像を、伸ばすかトリミングするかなどして、このサイズになるように調整しましょう。
ただ、伸ばすとどうしても「縦横比」を崩すことになり、かなり気持ち悪い画像ができあがるので、おすすめはできません。
ちなみに、他にも、縦横を余白にして、枠組みのようにするという方法もあります。
いよいよつくる
さてさて、ここからがデザインのお話です。
ここからの画像は、この記事のアイキャッチ画像ができるまで、という感じでいきます。
制作過程を細かく公開しますよ！
元の画像はこちら。
ぱくたそにあがりたてほやほやでした。笑
サイズを調整
まずはこれです。
前の記事で紹介したとおりの比率、16：9にします。
詳しくはこちら
今回は、ペイントのサイズ変更という機能を使うことにしました。
ペイントなら、パーセントを指定しても、ピクセルの数字を変えるだけでも簡単に画像のサイズが調整できます！
すると、こんなふうに。
おじちゃんがゆがんでしまいましたが、許容範囲でしょう。
どうしても、ゆがむと困る！ という場合は、サイズ変更ではなく「トリミング」機能を活用することをおすすめします。
文字などを入れる
お次はこれ。
こんな感じに入れてみました。
で、ここがいちばん大切な作業なのです。
目安となる画像を貼ります。保存しても大丈夫ですよ～！
( 誰がする
長方形の場合
こんなイメージです。
とにかく、ツイッター用などの長方形の画像にだけ対応させたいだけの場合は、ほとんど画面いっぱいに文字やパーツを配置しても大丈夫です。
しかし、角が丸くなるなどの加工がされていることが多いと思います。なので念のため、画像の枠内くらいに収めることをおすすめします。
正方形の場合
正方形にも対応する画像をつくる場合には、これくらいの枠に収めるといいと思います。
実際にちょっとだけ確認してみます。
やりました。ぴったり収まりました～！
というわけで、ブログの中などで使いたい場合には、あれくらいの枠の中に収めると、きれいにできると思います。
実際には、自分が作りたい画像のカタチを考えるといいと思います。
なぜ今回、二つのサイズの場合でつくることをおすすめしているのかというと、そうすれば、自由さが生まれるからです。
画像全体のサイズがきちんとしていれば、長方形は問題ないのですが、正方形は別です。文字を入れる場所が、言ってしまえば「どこでもいい」。
…言いすぎました。
枠の外に出すなら出す、入れるなら入れるの二択のみですが、これだけ幅が広がります。
ちょっと左にずれているような気もしますが、入れたい文字の都合上でこうなりました。
そして、
…と。
これらの画像の印象が違うのは、文字の位置ではなくて、何というか、根本的な差があるからだと思いますが。
とにかく、どれもよくできていると思います。
つまり、好みってことですよ、はい！
できあがりを確かめる
まだ不安ですね。というわけで、確かめてみましょう。
ちょっと面倒なので、前の記事の画像で。
まずは、長方形のツイッターから。
おおおっ！
とりあえず、ツイッターはいい感じじゃないですか！？
お次は、正方形。
先ほども試しましたが、今度は完成品で。
ブログ内の画像
わ…、ああ…！
だ、大成功！！
やったあーーー！ やった！
きれーいに正方形におさまっています。
最後に
ここまで読んでくださって、ありがとうございました！
こんなちっぽけなブログがえらそーなこと言うな、って思った方もいると思います。
でも、これだけは胸を張って言えることだなと思っていたので、今回こんな記事にしてみました。
小さくても、その記事をあらわせる画像。すっごく素敵だと思いませんか？
そんな素敵な画像が、この記事によってあふれることを、ひっそりと願っています。
その前に、このブログをもっと育てないとなぁ。
…それでは。
画像はこちらからいただきました
記事内で貼りつけた画像の記事はこちらからどうぞ
ご意見・ご相談・リクエストなどはこちらから→ お問い合わせフォーム
