一番おすすめしたい療育関連本はこちら

ブログ初心者のアイキャッチ作成方法を徹底解説

※2018年12月現在、当記事で紹介したアイキャッチ画像やアイコンは使用しておりません。

 

rinrin
こんにちは、元女医ライターのrinrin(@Drrinrin1)です。

rinrinがワードプレスでブログを始めて、約1ヵ月が過ぎました。

初心者で右も左も分からないまま、とりあえず執筆に集中してきましたが、

このたびふと、わがブログを見返してみて思いました。

 

rinrin
アイキャッチ画像作成、手抜きすぎ…!!!

 

ブログ開始当時作成していたアイキャッチ画像がこちら↓↓↓

 

初期アイキャッチ画像
フリー素材サイトから写真をダウンロードして、文字を載せるだけのシンプル仕様です。文字色とフォントを変えるだけで精一杯でした…。

 

rinrin
何だか見にくい上に、面白みが何にもない…!!!

 

そんなわけで、今回、ブログ初心者なりに、

アイキャッチ画像を頑張ってテコ入れして作成してみたところ、

先ほどのアイキャッチが、最終的にこんな感じに仕上がりました。

 

アイキャッチ画像修正版
文字が読みやすくなり、アイコンを入れることでオリジナリティが出せました。

 

ブログ初心者の私なりに、アイキャッチ作成で実行した方法を記してみました。

 

rinrin
同じくブログ初心者でアイキャッチ画像作成に悩んでいる方は、ぜひ当記事をご参照ください。

 

ブログ初心者のアイキャッチ作成方法①:作成サイトはcanvaがおススメ!!

まず、アイキャッチを作成するサイトですが、

これは、色々なサイトでアイキャッチ画像作成を試した結果、

『canva』がダントツでおススメです。

 

canva公式サイトに飛ぶ

 

多くのブロガーさんに使われているサイトなので、説明不要かもしれませんが、一応canvaの特徴を説明すると…、

 

『canva』がおススメの理由
  • 無料(※一部有料コンテンツもあります)
  • 使用できるテンプレートが豊富
  • 操作が簡単
  • 挿入できる文字の種類が豊富
  • アイコンの種類が豊富

 

アイキャッチ画像の作成に使えるサイトは、他にも色々とありましたが、

上のようなクオリティの画像でよいなら、

『canva』で十分事足ります。

 

ちなみに、下のような真面目な(?)感じのアイキャッチも一瞬でできますので、

かなり多くのサイトの雰囲気にマッチするアイキャッチができるのではないでしょうか。

 

アイキャッチ試作版
この記事のためにさくっと作ったアイキャッチ画像なので、細かいバランスがおかしいですが、この程度ならcanvaで本当に一瞬で作れます。

 

rinrin
それでは、本題のアイキャッチ画像作成方法の説明をします。

 

ブログ初心者のアイキャッチ作成方法②:画像の推奨サイズを確認する

これは、ワードプレス各テーマによっても変わってきます。

私が使用しているテーマは『SANGO』と、公式子テーマである『PORIPU』なので、

公式ページを参照して、アイキャッチ画像のサイズを決めました。

 

参照(PORIPU公式サイト)

 

この記事によると、SANGOのアイキャッチ画像サイズは680×390なので、

私のブログではその通りに作成しています。

 

『canva』のホームページを開くと、『カスタムサイズ』と書かれたボタンが右上に表示されているので、

そこに『680×390』と打ち込むと、画像の編集ページが開きます。

 

ブログ初心者のアイキャッチ作成方法③:背景となる画像を用意する

次に、背景となる画像を用意します。

 

イラストを背景にしたい方、

写真を背景にしたい方、

背景は無地にしたい方、

 

それぞれサイトコンセプトがあると思いますので、

自分の好みの素材サイトから用意してください。

『canva』内にも無料で使える写真は豊富にありますので、『canva』から探してみてもよいでしょう。

 

ちなみに、当ブログの背景画像には、

商用フリーの写真素材サイトpixabayから引用した写真を使っています。

 

rinrin
pixabayは、綺麗な写真素材が豊富なサイトで、とてもおススメです。

 

今回は、こちらの画像を用意しました。

 

これを、canvaのアップロード画面からアップロードします。

 

ブログ初心者のアイキャッチ作成方法④:画像を背景らしく見せる

『canva』の編集ページにある、『素材』と書かれたボタンをクリックすると、

『写真』や『図形』など、様々な素材が出てきます。

 

このうち、『図形』をクリックすると、丸や四角などの図形がたくさん表示されますので、

この中から四角の図形を選びましょう。

 

 

こちらの『無料』と表示された図形なら、全て無料で使用できます。

この四角を白から薄いグレーの色味に設定し、先ほどの写真の上からかぶせていきます。

 

rinrin
写真を全て覆い隠すようにしてください。

 

その後、canvaの右上にある『透過』を設定するボタン(下図の赤丸で囲ったボタン)で、画像を覆った四角を透過させます。

 

rinrin
私はだいたい35~40くらいで透過させています。


 

rinrin
最初の画像と比べて、だいぶ背景っぽくなりました。

この画像に、文字を載せていきます。

 

ブログ初心者のアイキャッチ作成方法⑤:画像に文字を載せる

上の画像に文字を載せます。

 

canvaの『テキスト』ボタンを押すと、

一番上に、『テキストボタンを追加』というボタンが表示されるので、

それをクリックして文字を入力していきます。

 

 

rinrin
こちらのようになりました。

 

このままだと、文字が全く目立たないため、少し文字を目立たせる工夫をします。

 

これは好みによるところが大きいと思いますが、

私がしている方法を記します。

 

文字を目立たせる工夫
  • 文字の後ろに四角などの色つきの図形を持ってくる
  • 図形を透過させる(だいたい70くらいの透過度)
  • 文字色を白くする
  • 文字の大きさを大きくする
  • フォントをサイトイメージに合うものに変える

 

図形を文字の後ろに表示させるのは、canvaの右上の『配置』ボタン(下の赤丸で囲ってあるボタン)で調整できます。

 

フォントはお好みですが、私は『Rounded M』というフォントを使用しています。

色々なブログを拝見していると、

『チェックポイント』『ニコモジ+』というフォントを使用されている方が多い印象です。

 

図形(文字の背景となる図形)を白くして、文字の方に色を付けている方も多いですが、これもまたお好みで。

私はテーマごとに文字背景の色を変えたかったので、上記の方法にしました。

 

上記の方法で文字を目立たせたところ、下図のようになりました。

 

 

rinrin
記事タイトルが目立って、ずいぶんアイキャッチ画像っぽくなってきました。

 

これで終わりでもいいのですが、少し個性を出すために、ここにアイコンを載せていきます。

 

ブログ初心者のアイキャッチ作成方法⑥:アイコンを載せてオリジナリティを出す

自身のアイコンが決まっている方は、それを載せるといいと思います。

 

rinrin
ちなみに私のアイコンは、CHARATという無料のアバター作成サイトで作りました。

 

これをcanvaにアップロードして、先ほどの画像に載せていきます。

 

 

こんな感じになりました。

文字の大きさや位置などは、アイコンとのバランスを考えて修正を加えながら作業しています。

 

1人ではなんだか味気ないのと悪目立ちするので、横に助手を加えることにしました。

助手になりそうなキャラは、canvaの無料素材の中に大量に存在しています。

canvaの編集画面から『素材』ボタンを選択し、『動物』、『ウサギ』、『くま』など、助手キャラになりそうなワードで検索します。

 

 

すると、このような可愛い動物がたくさん出てきました。

今回は、左下のリスだかタヌキだかが可愛かったので、この子を助手にすることにしました。

 

 

このリスだかタヌキだかは、向きや色味も自在に変えることができる優れものです。

正直、canvaがあれば他のサイトは要らないくらい、canvaには色々な素材が揃っていることに驚きました。

 

rinrin
アイコンを載せることで、アイキャッチ画像にだいぶオリジナリティが出てきました。

 

ブログ初心者のアイキャッチ作成方法⑦:さらに素材を載せてディテールに凝ってみる

上で終わりでもいいのですが、私はこういうので遊ぶのが大好きなので、

記事タイトルに合わせて、さらに色々な装飾をしています。

 

先ほどのアイキャッチ画像の最終形を例に挙げると、

 

アイキャッチ画像最終版
助手キャラに花束を持たせて、文字背景色やアイコンの位置を調整し、ハート型のびっくりマークをつけてみました。ちなみに両方ともcanvaの素材です。

 

その他のアイキャッチ画像を例に取ると、

 

別テーマアイキャッチ画像
助手と文字背景カラーを変えて、『?』マークを付け、吹き出しで喋らせてみました。

 

rinrin
ここまで遊べる丁寧にアイキャッチ画像を作成できる無料サイトは、canvaだけなのではないかと思います。

 

まとめ

ブログ初心者のアイキャッチ作成方法を、ブログ初心者がとことん語ってみました。

 

こう書くと、とても面倒くさい作業に思えるかもしれませんが、

色味とキャラクターさえ決めてしまえば、

アイキャッチ作成は、5分とかからない作業です。

 

rinrin
私は遊びすぎて時間がかかってしまいましたが…

 

某ブロガー
こんなことしてる暇があったら記事を書け

なんて意見もありますが、

 

ブログを楽しんで、より自分のブログに愛着を感じるためにも、

こういう手間をかけるのは、悪くないことなのではと思います。

 

rinrin
アイキャッチ作成方法に悩むブログ初心者の、参考になれば幸いです。