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

アイキャッチ画像の作り方ブログ運営全般

できるだけ簡単な「アイキャッチ画像の作り方」をご紹介します。

ひよこ先生
ひよこ先生

アイキャッチ画像は、慣れたら3分くらいで完成できます♪

  1. アイキャッチの画像サイズの決め方
  2. アイキャッチ画像の作り方「Canva(キャンバ)」使用
  3. 画像の圧縮方法
  4. アイキャッチ画像の作り方「PhotoScape(フォトスケープ)」使用
  5. アイキャッチ画像のSNSでの見え方

以上5つをご紹介します。

 

この記事ではアイキャッチ画像を1から作る方法をご説明しています。

自分で撮影した写真やダウンロードしたフリー画像に文字入れしたい場合は以下の記事を参考にしてください。

ブログに載せる写真に文字入れする方法。無料ソフトを使ってすぐできる!
ブログに載せたい写真に文字を入れる方法です。無料ソフトCanvaを使います。自分で撮影した写真・フリー画像などに文字入れが簡単にできます。

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

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

SNSで拡散されたとき、アイキャッチ画像が切れてしまう場合がありますが、私はあまり気にしていません。

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

結論から言うと「自分の好み」で良いですよ。このブログでは「16:9」を基準にしています。(ワイドTVの比率です。)

このブログのメインカラム(メインの記事が表示される部分)の横幅が750px なので、

16:9=「750px :422px」のアイキャッチ画像サイズにしています。

アイキャッチ画像のサイズに迷ったら、自分のブログのメインカラム(幅)に合わせて考えてみるといいかもしれません。

※比率換算はコチラのサイトが便利です↓

比率計算ツール

 

750px × 422pxでは画像データが重すぎるなぁ~っと感じる場合は、それよりも小さいサイズでもまったく構わないです。

ひよこ先生
ひよこ先生

アイキャッチのサイズは結局は自分の好みですね~。

 

簡単なアイキャッチ画像の作り方【Canva編】

アイキャッチ画像圧縮後

パソコンで作る場合、「Ctrl+Z」で画像が元に戻せます。なので、いろいろな機能を試してみてください。失敗してもすぐに元に戻せるので大丈夫です。

私の大好きな無料画像作成ソフトのCanva(キャンバ)です。ソフトをダウンロードしなくてもオンラインで操作できます。

Canva公式サイト

 

Canvaを初めて使う場合は「無料登録」をします。登録は簡単にできます。

登録が済んだら、

 

①右上の「デザインを作成」⇒「カスタムサイズ」を選択します。

アイキャッチ画像の作り方(Canva)

 

②「750px ×422px」と入力して「新しいデザインを作成」をクリックします。

アイキャッチ画像の作り方(Canva)

 

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

アイキャッチ画像の作り方(Canva)

今回は簡単にアイキャッチを作成するため、このテンプレートの中から選んで作成します。「無料」を選べばタダで使用できます。

 

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

「<」をクリックするとテンプレートを「非表示」にできます。

アイキャッチ画像の作り方(Canva)

画面が広くなりアイキャッチが作りやすくなりますよ^^

 

④真ん中の文字がクループになっているので、テキストの上でクリックし「クループ解除」をクリック。

アイキャッチ画像の作り方(Canva)

 

⑤「ジェイムズ・ヘリオット」の部分を右クリックして「削除」します。

アイキャッチ画像の作り方(Canva)

 

⑥文字を大きくします。

テキストをクリックして出てきた「○」の部分をドラッグして大きくします。

アイキャッチ画像の作り方(Canva)

アイキャッチ画像の作り方(Canva)

文字を好みの大きさにしたら、画面中央に動かします。(マウスで動かせます)

 

左上の数字の書いてあるボックスでも文字の大きさを変えられます。

アイキャッチ画像の作り方(Canva)

 

⑦文字を選択して好きな文言を入力します。

アイキャッチ画像の作り方(Canva)

アイキャッチ画像の作り方(Canva)

今回は文字の大きさを「48」にしました。(後からいくらでも調整できます)

 

⑧フォント(文字)を変えます。

左上のボックスから好きなフォントを選べます。

アイキャッチ画像の作り方(Canva)

アイキャッチ画像の作り方(Canva)

今回は「鉄瓶ゴシック」を選びました。

 

⑨他にも変更できますので、画面上のメニューをいじってみましょう。

アイキャッチ画像の作り方(Canva)

  1. 文字カラー変更
  2. 文字間隔・行間変更
  3. 縦書きにできます
  4. 効果が付けられます

パソコンの場合「Ctrl+Z」で画像を元に戻せるので、いろいろやってみて気に入った感じにしていきます。

いろいろいじってこのようになりました↓

アイキャッチ画像の作り方(Canva)

 

⑩画面左メニューの「テキスト」⇒「小見出しを追加」を選択すると、新たな文字入力ができます。

アイキャッチ画像の作り方(Canva)

文言を入力し直し「フォント」「文字サイズ」「色」「文字間隔」などを変更して以下のようになりました。

アイキャッチ画像の作り方(Canva)

 

⑪画像を加えてみます。

アイキャッチ画像の作り方(Canva)

左メニューの「素材」をクリック。

検索窓に「吹き出し」と入力します。

「無料」で使える吹き出し画像を選択すると画面上にあらわれます。

文字サイズを微調整して吹き出しの中に入れました。

ひとまずこれで完成にします^^

 

⑫アイキャッチ画像をダウンロードします。

画面右上の「ダウンロード」を押します。
ファイルの種類(保存形式)は「PNG」を選択し「紫色のダウンロードボタン」を押します。

アイキャッチ画像の作り方(Canva)

パソコンにアイキャッチ画像のデータがダウンロードされます。

次に、画像データを圧縮する方法です。

 

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

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

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

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

 

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

アイキャッチ画像圧縮方法

アイキャッチ画像圧縮方法

画像の圧縮が始まります。

しばらくして圧縮が終わるとパンダが喜んでくれます。

アイキャッチ画像圧縮方法
元画像サイズ「99.8K」⇒圧縮後「31.1KB」になりました。

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

Zip形式で保存されるので解凍します。

Zipファイル

元画像と圧縮後の画像を比べても荒いところはありません。

【これは圧縮後画像です】

アイキャッチ画像圧縮後

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

ブログ内の画像はデータが軽い方が表示スピードも速くなります。

アイキャッチだけではなく、ブログで使う画像はなるべく圧縮しておくと良いですよ。

 

アイキャッチ画像の作り方【PhotoScape編】

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

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

 

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

Canvaと同じく、パソコンの場合「Ctrl+Z」で画像を元に戻せます。いろいろな機能を試してみてください。失敗してもすぐに元に戻せます。

 

①画像編集をクリックします。

アイキャッチ画像の作り方(フォトスケープ)

 

②画面右下の「メニュー」⇒「新しい写真」を選択します。

アイキャッチ画像の作り方(フォトスケープ)

 

幅750・高さ422を入力し、カラーを選択して「OK」をクリックします。

アイキャッチ画像の作り方(フォトスケープ)

 

背景が出来上がります。

アイキャッチ画像の作り方(フォトスケープ)

 

③文字を入れます

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

アイキャッチ画像の作り方(フォトスケープ)

アイキャッチ画像の作り方(フォトスケープ)

↓(拡大)

アイキャッチ画像の作り方(フォトスケープ)

①テキストを入力できます。

②フォントの種類が選べます。

③文字の大きさを指定します。

④色が選べます。

※その他、太文字・斜体・文字の配置・縦書き横書き・透明度などが指定できます。

⑤□にチェックを入れると文字にアウトラインが付きます。

⑥□にチェックを入れると文字に影が付きます。

アウトラインの太さや影の透明度なども変えられるので、いろいろ試して調整してみてください。(※「Ctrl+Z」でいくらでも戻せます)

 

アイキャッチ画像の作り方(フォトスケープ)

文字の大きさは、黄色で囲んだ□の部分をドラッグして大小の調整もできます。

 

④アイキャッチに画像を入れます

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

アイキャッチ画像の作り方(フォトスケープ)

 

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

アイキャッチ画像の作り方(フォトスケープ)

画像が大きすぎるので調整します。※ひよこ先生の画像は背景が透明処理されたPNGです。

 

黄色で囲まれた□をドラッグすると、サイズが調節できます。

アイキャッチ画像の作り方(フォトスケープ)

 

ちょっと味気ないので、「フレームライン」を足してみました。

アイキャッチ画像の作り方(フォトスケープ)

こちらも慣れれば3分で完成です。

 

⑥パソコンに「保存」します。

アイキャッチ画像の作り方(フォトスケープ)

フォトスケープ保存形式

「JPEG品質」をチェックして「名前を付けて保存」します。

保存したらTinyPNGを利用してデータ圧縮します。(※Canvaと同じやり方です)

 

完成したアイキャッチ画像(データ圧縮後)です↓

アイキャッチ画像完成(フォトスケープ)

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

 

SNSで拡散されたときのアイキャッチ画像の見え方は?

SNSで自分のブログが拡散されたとき、アイキャッチ画像はどのように見えるのか?

それが分かるのが、サルワカさんのブログのアイキャッチ画像サイズチェッカーです。

16:9のアイキャッチ画像がSNSでどのように表示されるか調べてみました↓

アイキャッチ画像の見え方(ツイッター)

アイキャッチ画像の見え方(facebook)

アイキャッチ画像の見え方(はてブ)

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

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

 

まとめ

アイキャッチ画像サイズの決め方は人それぞれですが、このブログではだいたい「750px ×422px」にしています。

アイキャッチ画像作成は無料ソフトだけで十分できます。

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

私が作ったのはプロっぽくないですが…^^;

PhotoScape(フォトスケープ)も手軽で簡単に使えますよ。

 

アイキャッチ画像が完成したら、TinyPNGを利用してブログの表示スピードが遅くならないように、画像サイズを圧縮すると良いです。

 

また、アイキャッチ画像はSNSによって表示のされ方が少し違います。

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

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

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

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

ブログのアイキャッチとは?アイキャッチの意味ってあるの?
ブログのアイキャッチとはどんな意味があるのでしょうか?ブログ記事にアイキャッチがあることでどんな役割や効果があるのかお伝えします。実はアイキャッチ画像を作ることで、読んでもらえるブログ記事になりますよ。
タイトルとURLをコピーしました