アイキャッチ画像をPCブラウザ上だけで作る方法【まとめ】

ブログで発信しているえびてんです。どうもこんにちわ。

ブログを始めたばかりの方は、こんなお悩みお持ちではないでしょうか。

私はこれまで様々なアイキャッチを作ってきました。

アイキャッチの作り方はそれぞれあると思いますが、8ヶ月ブログを続けてきてやっと私なりのアイキャッチの作り方が確立されてきました。

使っているサイトは全て無料で、しかもPCブラウザ上での作業が可能！

余計なダウンロードが不要でデータ保存もオンライン上なので、PCへの負担も減って一石二鳥です！

今回はそのアイキャッチ作成で使っているサイトとその使い方をご紹介しますので、ぜひ素敵なアイキャッチを作ってより魅力的なブログにしていただくためにお役に立てください。

使っている４つのサイト

私は主に４つのサイトを使っています。

どれも無料で使えて高機能なので、私の周りのブロガーさんたちも使っている方がたくさんいらっしゃいます。

アイキャッチをどこから作り始めたら良いかわからないときは、とりあえずこの４サイトはブックマークしておきましょう！

Canva

無料のグラフィックツールです。

サイトからデザインから全てが非常にオシャレで、テンプレートを使うと素人の私でも綺麗なアイキャッチが作れます。

利用には事前登録が必要です。

Pixabay

フリーの画像配布サイトです。

写真やイラストなど1,500万枚の画像から、アイキャッチやブログ内の挿絵を探すことが出来ます。

何度でも検索＆ダウンロードが出来るので、気がすむまで画像探しが出来ます。

写真AC

フリーの画像配布サイトです。

無料ユーザーの場合、検索回数やダウンロード出来る容量に制限がありますが、痒い所に手が届く画像がたくさん揃っています。

Pixabayでどうしても欲しい画像が見つからなかった場合に利用しています。

利用には事前登録が必要です。

OGP画像シミュレータ

画像のシミュレータです。

出来たアイキャッチ画像が、どのようなシーンでどう見えるかが確認出来ます。

アイキャッチの作り方

では、ここからは私のアイキャッチの作り方をご紹介します。

作業自体は全く難しくないしセンスも必要ありません。

誰でも魅力的なアイキャッチが作れますよ！

記事のタイトルを決める

アイキャッチに入れるキャッチフレーズが必要なので、記事のタイトルを決めます。

画像を選ぶ

次に、Pixabayか写真ACでアイキャッチの背景となる画像を選びます。

今回はPixabayで解説していきます。

▲　タイトルに合うワードで画像を検索する

今回は「ホームページ」と言うワードで検索しました。

そのままエンターキーで検索しても良いですが、

「画像」をクリックすると画像の種類が選ぶことが出来るので、始めから指定しておくと検索結果を絞ることが出来ます。

▲　結果181件の画像が検索された

これらの中から気に入った画像をクリックします。

▲　クリックした画像が拡大される

確認してこの画像を使うのであれば、右側の「無料ダウンロード」をクリックします。

▲　サイズを選び「ダウンロード」をクリック

▲　会員登録していない場合、四角にチェックを入れて「ダウンロード」をクリック

これでPCの指定したフォルダに画像が保存されました。

画像を編集する

続いて、先ほど保存した画像を使ってアイキャッチ画像を作っていきます。

▲　Canvaのトップページからログイン

▲　ログイン後の画面

▲　上部にある検索画面から「Facebook広告」と検索する

様々なデザインがあるのでお好みで選べばOKです。

ブログと相性が良いのがこの1,200px×628pxサイズだったので、私はこのFacebook広告を使っています。

▲　デザインを選んだ直後の画面

▲　左のメニューバーから「テンプレート」を選ぶ

お好みのテンプレートを選びます。

ものすごくたくさんあるのでめちゃくちゃ迷うのですが、選ぶポイントとしては文字の後ろに透過されている図形が乗っているものをおすすめします。

この透過されている図形があると画像の色によって文字が見えなくなることを防げるので、カスタマイズがより自由に出来るようになります。

▲　画像をアップロードする

次に左のメニューバーから「アップロード」をクリックし、「画像のアップロード」から先ほど保存した画像を選びアップロードします。

画像をドラッグ＆ペーストしても取り込めます。

▲　テンプレートで使われている画像を削除する

▲　取り込んだ画像をクリックし、作業スペースに表示させる

▲　画像の配置を最背面にする

このままでは画像が最前面になっているので、右上の「配置　＞　背面へ」をクリックし、画像を最背面におきます。

その後、画像を適切な大きさに拡大or縮小して、お好みの位置に配置します。

▲　文字を編集する

文字を選択して、右上の「グループ解除」をクリックします。

解除しないと透過図形と文字とラインが一体になっていて編集が出来ないので注意してください。

▲　不要な文字とラインを削除する

▲　透過図形の透明度を変更する

今回の場合透明度72では文字が見ずらかったので90まであげました。

図形と文字色の塩梅を見ながら調整してください。また、透過図形そのものの色も変更出来ますのでお好みで変更してください。

▲　完成させる

文字をキャッチコピーに直し、文字の大きさやフォント、文字色など赤枠の中の項目を調整して、見やすいアイキャッチに仕上げましょう！

私は自分のブログのアイキャッチに統一性を持たせるため、フォントと文字色はなるべく変更しないようにしています。

これも好みですが、ある程度アイキャッチに癖があれば「この人の記事か！」と一瞬で認識して記事を読んでもらえそうですよね。

▲　画像をダウンロードする

出来たアイキャッチ画像を、右上の「ダウンロード」をクリックしてダウンロードします。

▲　画像の表示状態を確認する

ダウンロードしたアイキャッチ画像をOGP画像シミュレータにかけて、全てきちんと表示されるか確認します。

特にSNSに表示される左上の枠の大きさにきちんと収まっているか、よく確認をしましょう。

完成！

これでアイキャッチは完成です！お疲れ様でした。

説明すると長くなってしまいますが、一度慣れてしまうと10分ほどで作ることが出来るので、もうアイキャッチで悩むことはなくなりますよ。

ぜひ、アイキャッチ作成を楽しんでくださいね。

まとめ

今回は私流のアイキャッチ画像の作り方をご紹介しました。

全てPCブラウザ上で出来てしまうので手軽ですが、とてもクオリティーが高いものが出来るので、ぜひ活用してみてください。

またこの手順を使うとブログの挿絵や動画用のアイキャッチなど色々なものに使えるので、画像に関しても幅が広がっていきますよ。

便利なサービスを使って読者さんにわかりやすいブログを作っていきましょう！