アイキャッチ画像を無料で簡単に作る方法

今回の記事はブログ上で使うアイキャッチ画像の作り方について。

アイキャッチ画像とは記事タイトルの下に表示される画像のこと。

私はこのブログの記事では設定していますが、塾の記事ではほとんど気にしていません…。

ま、塾のブログは生徒、保護者、あとは塾を検討している人たちに、自分の思いとか、塾の動きを多少伝えられればいいかな、という目的なので…。

アイキャッチ画像、作るの大変なんですもん!

時間かかるんですもん!

ただ、アイキャッチ画像はブログ訪問数には結構影響する要素らしく…。

設定しないよりは設定した方がいいとの話。

しかも、できるだけ素材そのままではなく、オリジナル感を出すために加工をすることが推奨。

ダメなヒトダメなヒト

おいおい、俺たちはウェブデザイナーではないど?田舎の学習塾講師だど?

そんなことも言ってられない時代なのかもしれませんね…。

一億総クリエイター時代、我々塾講師も画像加工をする時代なのです!

ということで、今回はできるだけ簡単に、しかも無料でアイキャッチ画像を作る方法を紹介します。

ど素人の私がやっている方法なので、必ず皆さんにもできるはず!

canvaを使う!

ほとんど使ったことがありませんでしたが、前回の記事に挿入した画像から手を出し始めました。

無料で簡単に、ということであればcanvaはおススメです!

①まずは登録

名前と使用目的、メールアドレス、パスワードを入れたらすぐに登録完了です。

速攻で使用可能になります。

②デザイン作成

canva1

canvaに入ったらまず「デザインを作成」をおします。

いろんなサイズがありますが、今回はカスタムサイズを選びました。

アイキャッチ画像のサイズとして適切なのは16:9だということで、760px:428pxにします。

③画像を選ぶ

canva2

画面左上のテンプレートを選択し、検索窓に「空」と入れました。

すると「空」に関連する画像(テンプレート)が表示されます。

今回は無料使用なので、画像の右下に”無料”とあるものから選びます。

④文字を入れる

canva3

次に画像に文字を入れます。左の「テキスト」をクリック。

するとテキストを編集できるテキストボックスが画像内に表示されます。

画面上部分でテキストのフォント、サイズ、色などを変更できます。

⑤文字の背面に枠を入れる

canva5

文字が目立たない場合には、文字の背面に四角の帯などを入れるとよいでしょう。

左の「素材」から四角形のものを選びます。

canva6

四角形の帯が作れますが、文字の前面に出てきてしまいます。

画面上の編集メニューの「配置」をクリックし、「背面へ」を選択。

canva7

さらに「透明度」を調整するとそれなりの感じになっていきます。

アイキャッチ画像の文字は中央へ

ここで一つ注意。アイキャッチ画像の文字(テキスト)はある程度中央へ寄せましょう。

記事一覧などで表示されるときには、画像全体は表示されず、中央が切り取って表示されるので、ある程度中央に寄せておかないと文字が切れてしまいます。(よく分からん、という人は”とにかく文字をある程度中央に寄せる”ということを意識してもらえれば。)

⑥ダウンロード

canva8

最後に画面右上の「パブリッシュ」を選択して「ダウンロード」をクリックしたら終わり。

アイキャッチ画像が出来上がりです。

アイキャッチ画像

ま、なんとなく見たことあるような感じのそれなりのものができますね。

私もまだまだ慣れてないですけど、慣れてくれば相当速く作れそうです。

inkscapeを使う!

私の本命はこちら。

canvaは無料版だとフォントの種類、変形などで機能が限られてしまいます。

(それでも十分すぎる機能があると思いますが…。)

より、オリジナリティを出すということではinkscapeに分があるかと。(ただし、時間がかかるので今後はcanvaの使用回数が増えていくような気はしますが…。)

inkscapeの詳しいことは別の記事に譲ります。

今回はアイキャッチ画像を私がどう作っているかに絞って説明を差し上げます。

①アイキャッチ画像の枠を作成

インクスケープ①

まず左の四角形を作るツールを選択し、横1200px:縦630pxの枠を作ります。

これがアイキャッチ全体の枠になります。

②画像をインポート

インクスケープ②

上のメニューから「ファイル」を選択し、「インポート」をクリック。

画像を挿入してください。

インクスケープ③

サイズが合わないと思いますので、上のメニューで「オブジェクト」を選択。「変形」をクリック。

インクスケープ④

「拡大縮小」「比率を維持して拡大縮小」にチェックをいれて「適用」ボタン。

適当なサイズになるまで「適用」ボタンを押してください。

③文字を入れる

インクスケープ⑤

後は文字を入れます。左のメニューの「A」というところがテキストボックスの編集です。

また、アイキャッチ画像の背景枠の色を変えたいときは、枠を選択した状態で下の色(今回は白)の部分をクリックしてください。(クリックで変わらない場合は、枠を選択した状態で好みの色を左下のフィルの部分までドラッグしてください。)

④画像をエクスポート

まず、全ての画像(枠も含めて)選択状態にしておいてください。

インクスケープ⑥

上のメニューの「ファイル」から「PNG画像にエクスポート」をクリック。

インクスケープ⑦

まず、右の「エクスポート先」の指定と画像の名前を決定。

その後「エクスポート」ボタンをクリック。これでアイキャッチの画像の出来上がりです。

ここで注意。管理人は何度となく「エクスポート」のボタンを押し忘れせっかく作った画像が消えるという事態を経験しています。(「エクスポート先」をクリックすると次の画面で保存ができたかのような錯覚を感じるのです…。)皆さんは、そんなマヌケなことがないように必ず「エクスポート」ボタンを押してください。

ということで、説明をしてきましたが明らかにインクスケープよりもcanvaの方が手間がかからないのが分かったと思います。だから多くの人がcanvaを使うのでしょうけど…。

ま、canvaにしてもインクスケープにしても画像編集ソフトは多少は使えた方がいいです。なぜなら、ブログのアイキャッチ画像に限らず、ホームページのトップ画像の編集やチラシ作成でも使える技術だからです!

個人塾経営者として勝ち残るためにも、画像編集の技術を少しは身につけておいた方が絶対にいいですよ!