【アイキャッチ画像の作り方】アイキャッチは3分で完成できます

アイキャッチ画像の作り方 ブログ準備・書き方

ブログを始めて間もない頃は、アイキャッチ画像をどうやって作ったらいいのかわからなくて困りました。慣れるとアイキャッチ画像って3分くらいでできます(^^♪

無料ツールを利用して、慣れたら3分でできるアイキャッチ画像の作り方、画像の圧縮方法をご紹介します(※画像を圧縮するとデータが軽くなり、ブログの表示スピードが速くなります)

アイキャッチ画像の最適なサイズは?

アイキャッチ画像サイズの決め方

まず、アイキャッチ画像で迷うのがサイズ。サイズはいくつにすればいいのでしょうか?

ツイッターやFacebookなどによって表示されるサイズが違ってきます。インターネットで調べると、人それぞれに自論がありますね。

自分でどこを一番重視するか?でいいと思います。私は「16:9」を基準にしています。

現在一般的に使われている、テレビ画面、YouTube画面、アニメ・ドラマDVDなどの比率です。なので私はこれを基準にすることにしました。

このブログのメインカラム(メインの記事が表示される部分)の横幅が830px なので、それを考慮して830px × 470pxのアイキャッチ画像サイズにしています。

厳密には横幅は466.875pxなのですが、切りのいい470pxにしています。自分のブログのメインカラム(幅)に合わせて考えてみるといいかもしれません。

サルワカさんのブログのアイキャッチ画像サイズチェッカーを利用して、上の画像がSNSでどのように表示されるか調べてみました。
アイキャッチ画像サイズ

アイキャッチ画像サイズ

アイキャッチ画像サイズ

はてなブックマークでは画像の右端からカットされます。

画像の中心の方に重要な内容(文字など)を配置すれば、切れることがなさそうですね。

アイキャッチ画像を作る【Canva編】

私の大好きな無料画像作成ツールのCanva(キャンバ)です。オンラインで操作できます。

Canva公式サイト

 

Canvaを初めて使われる方は無料登録をします。登録は簡単にできます。

登録が済んだら、「カスタムサイズ」からサイズを入力します。

「830px ×470px」と入力して「新しいデザインを作成」をクリックします。アイキャッチ画像を作る

 

 

画面左側にテンプレートがたくさん表示されます。

今回はこのテンプレートの中から選んで作成します。「無料」を選べばタダで使用可。
アイキャッチ画像作成

 

 

テンプレートで気に入ったものをクリックすると、右のキャンバスに表示されます。
アイキャッチ画像作成

 

 

テキストを選択して入力すると、文字を変えられます。
アイキャッチ画像作成

 

 

文字の大きさやフォントも好みで変更できます。
アイキャッチ画像作成

 

 

①文字(フォント)選択
②文字サイズ
③文字カラー
④文字間隔・行間隔
他にも変更できますので、画面上のメニューをいじってみましょう。アイキャッチ画像作成

 

 

画面左メニューの「テキスト」⇒「テキストボックスの追加」を選択すると新たなテキスト入力ができます。

「素材」をクリックして表示された素材を使うこともできます。
ハートCanvaも使ってみました。アイキャッチ画像作成

 

 

画面上のダウンロードから、完成したアイキャッチ画像をダウンロードします。
保存形式はJPGでいいでしょう。アイキャッチ画像作成

 

 

完成したアイキャッチ画像です。慣れれば3分で完成です。
アイキャッチ画像完成

Canvaには無料で使えるテンプレートが豊富にあるので、それを利用して変更を加えていくと、簡単にプロのようなデザインができます。

私が作ったのはプロっぽくないですが…(笑)

アイキャッチ画像を作る【PhotoScape編】

もう1つ簡単に使える無料ソフトPhotoScape(フォトスケープ)を使って、アイキャッチ画像を作ってみます。

PhotoScapeは無料でダウンロードできます。
PhotoScapeダウンロードはコチラ

 

ダウンロードしたらインストールします。特に難しいところはなくインストールできると思います。インストールできたら起動させましょう。

画像編集をクリックします。
アイキャッチ画像を作る

 

画面左下の「メニュー」⇒「新しい写真」を選択します。
アイキャッチ画像を作る

 

幅830・高さ470を入力し、カラーを選択して「OK」をクリックします。
アイキャッチ画像を作る

 

背景が出来上がります。
アイキャッチ画像を作る

 

画面左下の「オブジェクト」⇒「T」を選択するとテキスト入力ができます。
アイキャッチ画像を作る

 

テキストを入力してフォントの種類・サイズ・色などを指定をします。アイキャッチ画像を作る

 

 

①テキストを入力
②フォントの種類・文字サイズ・文字カラー・太文字・斜体・文字の配置・縦書き横書き・透明度などが指定できます。
③チェックを入れると文字にアウトラインが付きます
④チェックを入れると文字に影が付きます
アイキャッチ画像を作る

 

調整していきます。
アイキャッチ画像を作る

 

画面左下の「オブジェクト」⇒「写真(山の絵)」⇒「photo」をクリックすると、パソコンに保存してある画像を画面上で使うことができます。
アイキャッチ画像を作る

 

 

私の好きな「ひよこ先生」を入れてみます。画像を選択して「開く」をクリックします。
アイキャッチ画像を作る

 

画像が大きすぎるので調整します。※ひよこ先生の画像は背景が透明処理されたPNGです。
画像の四隅の□をドラッグするとサイズが調節できます。
アイキャッチ画像を作る

 

 

完成したアイキャッチ画像です。こちらも慣れれば3分で完成です。
アイキャッチ画像を作る

 

PhotoScape(フォトスケープ)はPhotoshop(フォトショップ)ほど細かい高度な画像処理はできませんが、複雑でない分扱いやすいです。

 

アイキャッチ画像を圧縮する【TinyPNG利用】

出来上がった画像を圧縮してデータを軽くします。ブログの表示スピードも遅くならずに済みますね。

かわいいパンダのキャラクターのTinyPNGを利用します。パンダは1度に20枚までは無料で画像圧縮できます。

パンダのキャラクターTinyPNGの公式サイトはコチラ

 

赤枠をクリックしてパソコンに保存してある画像をドラッグ&ドロップするか、開きます。画像圧縮パンダ

 

 

先ほど作ったアイキャッチ画像を圧縮してみます。元サイズは367KBです。パンダ画像圧縮

 

画像の圧縮が始まります。しばらくして圧縮が終わるとパンダが喜んでくれます。
圧縮後は88.4KBになりました。

「すべてをダウンロードする」で自分のパソコンに保存できます。
パンダ画像圧縮

 

元画像と圧縮後の画像を比べてみましょう。
【元画像】
アイキャッチ画像圧縮前

 

 

【圧縮後画像】
アイキャッチ画像圧縮後

ほぼ変わりません。圧縮しても画像が荒くなったり気になるところもありません。

ブログ内の画像はデータが軽い方が表示スピードも速くなります。アイキャッチだけではなく、ブログで使う画像はなるべく圧縮しておくと良いです。

 

まとめ

アイキャッチ画像サイズの決め方

アイキャッチ画像はSNSによって表示のされ方が変わります。

アイキャッチ画像サイズの決め方は人それぞれですが、私は830px × 470pxにしています。

オレンジ枠内に収めるとツイッターやFacebookの大きなサイズでの表示は切れません。小さな表示の時は切れてしまう場合があります。

どうしても切れるのが気になる方は、赤枠の内側に収めると安心です。ちょっと窮屈になりますので、私はあまり気にしていませんが…

サルワカさんのアイキャッチ画像サイズチェッカーを利用して、自分で作ったアイキャッチ画像をチェックしてみるといいかもしれません。

アイキャッチ画像作成は無料ツールだけで十分できます。余裕ができたら有料のPhotoshopやイラストレーターなどを使ってみてもよいと思います。

画像が完成したら、ブログの表示スピードが遅くならないように、画像サイズを圧縮するとベストです。

以上が私のアイキャッチ画像の作り方でした。

コメント