書評記事のアイキャッチ画像をCanvaで作ってみた

この記事では、書評記事のアイキャッチ画像の作り方を紹介します。

記事を読み終えると、以下のようなアイキャッチ画像が作れるようになります↓

 

このようなアイキャッチ画像を作るまでは、以下のようにただ上から本を撮ったものをアイキャッチにしていました↓

アイキャッチとしてはこれでも十分なのですが、なんとなくダサく感じてきたので、書評記事用にアイキャッチを作りました。

記事一覧のページを見てみると、なんとなくダサいのがわかると思います↓

 

そこで、アイキャッチを改善してみたら記事一覧のページが以下のようになりました↓

全体的に統一感のあるレイアウトになりました。

 

ぼく

書評記事のアイキャッチなんてそこまで見てる人いないのに、こだわる必要あるのかな?
とも思ったのですが、トップページが綺麗になったのでよかったです。

 

完全に自己満足ですが、トップページを綺麗にしたい人におすすめのアイキャッチです。

具体的な作り方を解説していきます。

 



アイキャッチ画像の具体的な作り方

手順
  1. Canvaの編集画面を開く
  2. テンプレートを選ぶ
  3. いらないものを消す
  4. 背景の色を変える
  5. 画像の大きさと位置を調整する
  6. テキストボックスの大きさと位置を調節する
  7. 文字のフォントと位置を調節する
  8. 本の表紙の画像を載せる
  9. PDFをJPGに変換
  10. 画像を小さくする

1.Canvaの編集画面を開く

Canvaとは無料で使えるデザインツールです。

アイキャッチ画像やSNSのヘッダー画像、ロゴなどが手軽に作れます。

書評記事のアイキャッチもcanvaで作っていきます。

 

2.テンプレートを選ぶ

会員登録が済み、ダッシュボード画面が表示されたら「デザイン作成」に進んでください。

 

選ぶデザインの型はなんでもいいのですが、ここではとりあえずプレゼンテーションを選びます。

 

次に「テンプレート」の検索画面でchurchを検索します。

Springpoint Churchと書かれたテンプレートを選択します。

このテンプレートが書評記事アイキャッチ画像のもとになります。

 

3.いらないものを消す

アイキャッチに必要のない要素を消します。

要素を選択して、deleteキーもしくはbackspaceキーを押せば消せます。

 

4.背景の色を変える

背景を好みの色に変えれます。

僕は「#B4CCE3」の色を使っています。

 

5.画像の大きさと位置を調整する

最初ままだと画像が小さいので大きくします。

画像を大きくして位置を調整すると、紫の線が表示されます。

紫の線に合わせて画像を配置すると全体のバランスの取れたデザインになるので、線に合わせましょう。

 

6.テキストボックスの大きさと位置を調整する

画像同様に、テキストボックスも大きくして位置を調整します。

位置をずらしていくと、紫の線が表示されるので、線に合わせて配置します。

 

7.文字のフォントと大きさを調整する

フォントは「M+ Black」です。

著者名の文字の大きさは、96です。

作品名の文字の大きさは、作品名の長さによって変えています。

 

長い作品名でも、2行で収まるように大きさを調整しています。

 

8.本の表紙の画像を載せる

画像の上に本の表紙の画像を載せれば完成です。

「アップロード」で画像をアップロードすると、Canva内で画像が使えるようになります。

 

本の表紙の画像は、Amazonにある作品の表紙の画像を保存して使っています。

もしかしたら著作権的に問題かもしれませんが、今の所誰からも何も言われていないので、このやり方でやっています。

アップロードした画像を選択して、テンプレートの画像の上で離すとサイズを自動で調節してくれます。

 

これで完成です。

作ったものは「ページをコピー」でいくらでも複製できるので、1回作ると繰り返し使えます。

今回作った型を利用することで「画像」「作品名」「著者名」だけを入れ替えるだけでアイキャッチが作れるようになりました。

 

最後に、9と10で画像のダウンロードとサイズ変更の仕方を解説します。

 

9.PDFをJPGに変換

作った画像をPDFでダウンロードします。

最初からJPGでダウンロードすることもできますが、PDFでダウンロードしてJPGに変換した方が綺麗です。

 

ダウンロードするページを選択し、PDFでダウンロードしたらオンラインで無料で使える「PDFからJPGに変換できるツール」を使います。

ログイン不要で、ファイルをドラッグ&ドロップでするだけで変換できます。

 

変換が終わったら、出来上がったJPGをダウンロードします。

 

10.画像を小さくする

そのままだと画像の幅が3000pxぐらいあり、無駄に大きすぎるので小さくします。

ページ速度に影響するので、できる限り画像の容量は軽くします。

 

アイキャッチ画像の幅は700pxあれば十分です。

「横縦比を維持」にチェックを入れて幅を700pxにすると、幅に合わせて縦も自動的にサイズ変更します。

 

幅を決めてダウンロードしたら終わりです。

これでCanvaで作った画像をアイキャッチ画像として使うことができます。

 

最後に

書評記事のアイキャッチ画像の作り方を紹介しました。

アイキャッチを整えたことで、ブログの記事一覧のページが綺麗になってよかったです。

Canvaを使えば、他にも色々なアイキャッチ画像が作れるようになるので、もしよかったら作ってみてください。

 

おわり