【簡単】アイキャッチ画像をブラウザ上で作る方法【おしゃれ】

アイキャッチはブログや動画にとって大切なのは分かっているけど、まだお金はかけられない、、。

でも、無料でクオリティが高いアイキャッチを作りたい！

こんにちわ。えびてんです。

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

今回はそのサイトとその使い方をご紹介しますので、ぜひブログやYouTubeなどにお役立てください。

ポイント

オススメのサイトは３サイト
作り方は超簡単で慣れれば10分で完成

使っている３つのサイト

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

Canva
Pixabay
iLoveIMG

全て無料で、DL不要・高機能と良いことずくめなので、とても気に入っています。

アイキャッチをどこから作り始めたら良いかわからないときは、この３サイトがおすすめです。

とっても簡単におしゃれなアイキャッチが作れますよ。

ただし、PC環境によっては対応していない可能性があるので、その際はご了承ください。

では、３つのサイトをご紹介します。

Canva

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

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

利用には事前登録（無料）が必要です。

Pixabay

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

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

検索制限やダウンロード制限はないので、納得いくまで画像探しが出来ます。

iLoveIMG

画像編集に関する色々なツールが使えるオンラインフォトエディターです。

この中の「画像の圧縮」ツールで、作ったアイキャッチのサイズを小さくしています。

アイキャッチの作り方

Hugo HercerによるPixabayからの画像

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

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

誰でも魅力的なアイキャッチが作れるので、ぜひチャレンジしてみてください。

１：記事のタイトルを決める

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

今回は、この記事「アイキャッチ画像をブラウザ上で作る方法」に合うアイキャッチを作ります。

２：画像を選ぶ

検索する

アイキャッチに画像を使いたい場合は、Pixabayで選びます。
今回は「パソコン」で検索しました。
そのまま検索しても良いですが、「画像」をクリックすると画像の種類が選ぶことが出来るので、始めから指定しておくと検索結果を絞ることが出来ます。
選ぶ

これらの中から気に入った画像をクリックします。
ダウンロードする

確認してこの画像を使うのであれば、右側の「無料ダウンロード」をクリックします。
サイズは一番小さいサイズで大丈夫です。
これでPCの指定したフォルダに画像が保存されました。

画像を編集する

Canvaにログインする

画面右上のボタンからログインします。
未登録の場合は、登録ボタンから進みましょう。
テンプレートを検索する

Canvaには、様々なテンプレートが用意されています。
その中から、「プレゼンテーション」と検索し、推奨されている1920×1080サイズを選びます。
サイズはブログの構成や好みによって変えて大丈夫なので、自分のブログにあったサイズを見つけてみましょう。
テンプレートを選ぶ

お好みのテンプレートを選びます。
ものすごくたくさんあるので、めちゃくちゃ迷いますが、画像に合うテンプレを探してみてください。
選ぶポイントとしては、文字の後ろに背景があるものがおすすめです。
背景があると、画像の色によって文字が見えなくなることを防げるので、カスタマイズがより楽に出来るようになります。
不要な部分を消す

テンプレートをクリックすると、編集画面に移ります。
その中で、使わない素材は編集の邪魔になるので、予め削除しておきます。
不要な素材を選択して、右上のゴミ箱マークをクリックorデリートキーで削除できます。
素材がグループ化されていることがあります。
グループ化されていると、消したくない素材も一緒に消えてしまいます。
その場合は、消したい素材を選択したときに、右上に「グループ解除」と出てくるので、それをクリックしてみてください。
素材がそれぞれ編集できるようになります。
画像をアップロードする

画像をドラッグして、取り込みます。
今回は画像を背景として使いたいので、画像を選択した状態で右上の「配置＞背面へ」をクリックします。
これで、文字の後ろに画像が表示されるようになりました。
画像の大きさや位置を変える

画像を選択すると、四角に白丸が出てきます。
それを動かすと、画像の大きさを変えられますので、お好みの大きさにします。
また、画像の上でクリックを長押しすると画像が動かせるので、位置も動かしてみましょう。
文字を編集する

文字を編集します。
タイトルを打ち込んで、フォントや文字の大きさ、色などを、左上のコーナーを使って編集しましょう。
文字背景を透過する

文字の編集が終わったら、背景を透過させましょう。
右上のグラデーションっぽくなっているアイコンをクリックすると、透過度を示すバーが出てきますので、お好みの透過度に変えましょう。
透過はしなくても良いのですが、個人的には透過してある方がおしゃれ感が増す気がして、結構多用しています。
ここまでで、大体の基本的な機能はご紹介しました。
あとは、細かい部分を編集していき、見やすく素敵なアイキャッチ画像に仕上げましょう！
完成品をダウンロードする

完成したアイキャッチをダウンロードします。
右上の↓をクリック＞ファイルの種類などを指定＞ダウンロードボタンをクリックすると、ダウンロードが始まります。

圧縮する

iLoveIMGの「画像の圧縮」を選ぶ

アイキャッチ画像が出来たら、最後に画像を圧縮します。
トップページから「画像の圧縮」をクリックします。
なるべく早く表示するために、この作業はとても大切です。
私はアイキャッチに限らず、全ての画像を圧縮しています。
アイキャッチをドロップする

このような画面になったら、画像をドロップします。
アイキャッチを圧縮する

アイキャッチがブラウザ上に表示されたら、右下の「画像の圧縮」をクリックします。
画像の圧縮が開始されます。
圧縮したアイキャッチをダウンロードする

圧縮が成功すると、どのくらいサイズダウンしたかを表示してくれます。
しばらくすると、自動的にダウンロードが開始されるので、完了まで待ちましょう。