前回はアイキャッチの最適サイズを求めました。今回は実際にアイキャッチを作る過程を紹介します。
突然ですが、ここに２つの画像があります。どちらがアイキャッチとして最適だと思いますか？
A
B
正解は「B」です！ぱっと見 Bはバランスが悪く見えますが実はBの方がアイキャッチとしては優秀なんです。
それはなぜか解説します。まず知っておいてほしいのが「アイキャッチの切り抜き(クロップ)」についてです。
アイキャッチは切り取りされることに注意！
アイキャッチはいろんな場所で使い回されます。【参考アイキャッチの役割と使われる場所についての解説】全て場所で同一の形状で表示してくれれば問題ないのですが、困ったことに、アイキャッチは場所によって違う形で表示されるんです！
上のダメなアイキャッチの例を見てください。横長で作ったオリジナルのアイキャッチがあります。このアイキャッチはある場所では1:1の正方形で表示され、またあるところでは1.91:1で表示されます。切り取られた後のアイキャッチを見てみると文字やイラストが変なところで切り取られています。
何も考えずにアイキャッチを作るとこのように予期しないかたちで切り取られてしまうんです。これがダメなアイキャッチの例。
一方、こちらがいいアイキャッチの例です。画像が切り取られたあとも文字や人が見切れていません。
いいアイキャッチを作るには切り取られるパターンから逆算して文字やイラストを配置していきます！
これからそのやり方について詳しく解説します。
あ、別に切り取られても気にしない！という人はこの作業はやらなくて大丈夫です！
いいアイキャッチを作る全体像！
いいアイキャッチを作るにはこんな感じで進めていきます。
- 切り取られるパターンを把握する
- 切り取られる部分にガイドラインを引く
- ガイドラインを意識してアイキャッチを作成する
準備：切り取られるパターンを把握しよう！
いいアイキャッチを作るにはまずアイキャッチがどんな風に切り取られるか把握します。
まずアイキャッチはどんな風に切り取られるのか把握しましょう。
| １：１ | １６：１ | 1.91 : １ | |
|---|---|---|---|
| 正方形コース(１６：９) | ◯ | – | – |
| 長方形コース(インフィード広告使わない)(１６：９) | ◯ | – | ◯ |
| 長方形コース(インフィード広告使う) | ◯ | – | – |
「正方形コース」の人は画像の中心が１：１に切り取られます。「長方形コース(インフィード広告を使わない)」人は１：１と1.91：１の２枚に切り取られます。そして「長方形コース(インフィード広告使う)」人は１：１に切り取られます。
正方形コースの人
正方形コースの人は画像の中心が１：１で切り取られる。
長方形コースの人(インフィード広告使わない)
長方形コースの人(インフィード広告使わない)は画像の中心が１：１と1.91 : １に切り取られる。
長方形コースの人(インフィード広告使う)
長方形コース(インフィード広告使う)人は画像の中心が１：１で切り取られる。
「長方形コース(インフィード広告を使わない)」人が２枚考えないといけないので難しいです。
切り取られる形状を把握しておいてください。
実践：いいアイキャッチの作り方手順
それでは実際にアイキャッチを作っていきましょう！
画像作成ツールCanva(キャンバ)を使って説明します。Canvaはおしゃれな画像を手軽に作成できるものすごく便利なツールです(しかも無料！有版版もおすすめ！)。まだ画像作成ツールを持っていない人はこの機会にCanvaをお試しください。
新規ファイルを作成
まずはCanvaで新規の画像ファイルを作成します。
新規でデザインを作成
Canvaのホーム画面を開いてください。右上のデザインを作成(1)からカスタムサイズ(2)を選択します。
するとサイズを入力する項目が出てきます。そこに前の記事(アイキャッチ画像の最適サイズを求めよう)で求めたサイズを入力してください(単位はpx)。そして新しいデザインを作成を押します。
するとまっさらなキャンバスが表示されます。
ガイドラインを引く！その１(アスペクト比１：１)
切り取られる部分が分かるようにガイドライン(補助線)を引きます。まずは正方形(アスペクト比１：１)はどのアイキャッチでも必ず切り取られるのでまずは正方形のガイドラインを引きます。
ガイドラインを引くのに便利な画像を用意しました。まずはこれをダウンロードしてください。
正方形の画像をダウンロードする(表示→右クリックで保存)
正方形の画像を配置
Canvaの画面。左の列のアップロード(1)→メディアをアップロード(2)から 先ほどダウンロードした画像をアップロードします。
アップロードが終わったら画像をクリックしてキャンバスに反映させます(1)。画像の端をドラッグして縦の長さがキャンバスとぴったりになるように拡大してください(2)。そして画像を中心に移動させます(ピンクのラインがちょうど真ん中です)(3)。
ガイドラインを引く
画像を目印にガイドラインを引きます。左上のメニュー、ファイル→定規とガイドを表示を選択します。するとキャンバスに定規のような目盛りが表示されます。
左側にある目盛りにカーソルを持っていきます。するとカーソルが(矢印)に変わるのでそこからドラッグを始めてください(1)。紫の線をスーッと横に移動させ画像に合わせます(2)。もう一方にも同じようにガイドラインを引きます。
ガイドラインを引き終わったら画像を消去します。
これで正方形(アスペクト比1:1)のガイドラインが引けました！
ガイドラインを引く！その２(アスペクト比1.91:1)
長方形コース(インフィード広告使わない)人はもう１枚、アスペクト比1.91:1のガイドラインを引きます。
アスペクト比 1.91：１の画像を配置
アスペクト比 1.91：１用の画像を用意しました。これをダウンロードしてください。
アスペクト比1.91：１の画像をダウンロードする(表示→右クリックで保存)
先ほどと同じ要領でガイドラインを引きます。先ほどと違うのは上下にガイドラインを引くことです。上下がちょっとだけ切り取られる感じになります。
アイキャッチを作る！
あとはガイドラインに合わせてアイキャッチを作っていきます。
文字やイラストを配置
先ほど引いたガイドラインで切り取られることを意識して文字やイラストを配置していきます。文字やイラストが中途半端なところで見切れないように気をつけてください。
配置のポイント！
- 文字はなるべくガイドラインを跨がない！跨ぐ場合は目立たないように！
- イラストや写真の肝心な部分は中心枠に収める！
画像を保存
配置が終わったら画像を保存します。右上の共有(1)からダウンロード(2)を選択。ファイルの種類を選択(3)してダウンロードボタンを押してください(4)。ファイルの種類はどちらでもいいです。目安としては写真の場合はJPG、イラストの場合はPNGがおすすめです。
どちらか迷った場合は両方でダウンロードしてみてファイルサイズが小さい方を採用してください。
- JPG＝写真の表示が得意(カラフルで複雑な画像はこちら)
- PNG=イラストの表示が得意(色や形がシンプルな画像はこちら)
これでアイキャッチの完成です！
＼ 完成 ／
ちゃんとできたか確認
最後に配置が上手にできているか確認してみましょう。
画像シミュレータを開く
画像がうまくできたかテストできるツールがあるのでそのサイトを紹介します。それがこちら！「OGP画像シミュレータ」。このサイトを開いてください。
OGP画像シミュレータ：https://ogimage.tsmallfield.com/
画像をアップロード
ドラッグ＆ドロップで画像を追加からアイキャッチ画像をアップロードしてください。すると結果が反映されます。
正方形(アスペクト比１：１)をチェック！
正方形(アスペクト比１：１)のところを見てください。文字や写真は見切れていませんか？
アスペクト比 1.91：１をチェック！
長方形コース(インフィード広告使わない)人はもう１枚、アスペクト比1.91:1の箇所もチェックしてみましょう。
1200 × 630 はアスペクト比：1.91:1の一例です(数pxズレあり)。
確認ができたらいいアイキャッチの完成です！
お疲れ様でした！
次回予告
できたアイキャッチ画像は今すぐアップロードしたいところですが、適当にアップロードしてしまうと容量を無駄に食ってしまったりサイトスピードに悪影響を及ぼしたりします！そういった無駄は少しでも減らしたいところ！そのためにはアップロードに関する設定をきちんと行ってあげる必要があります。そこらへんについては次回 紹介します。
今回はここまで。