- デザインに関するスキルはないけど、おしゃれなアイキャッチ画像を作りたい
- 無料でオリジナルのアイキャッチ画像を作りたい
- できるだけ時間をかけたくない
という初心者ブロガー向けに記事を書きました。
僕は今回説明するやり方で、アイキャッチ画像を３分くらいで作っています。
それでも「アイキャッチ画像をどう作成しているの？」とよく問い合わせをいただきます。
難しいテクニックは必要なく無料でできます。
オリジナルのアイキャッチ画像はGoogleにも評価されやすいため、SEO対策にもなります。
それでは、一緒に作っていきましょう！
※あくまで無料で簡単に作りたい初心者向けであり、本格的なアイキャッチ画像を作りたい人向けの記事ではありません
簡単にアイキャッチ画像を作るための全手順
僕がアイキャッチ画像を作る手順です。
- web上でフリー画像素材を探す
- Canvaで画像を加工
- TinyPNGで画像を圧縮
今回は以下のアイキャッチ画像を作っていきます。
順番に解説していきます。
STEP1. web上でフリー画像素材を探す
まず自分の記事向けの画像素材を探します。
ネット上で勝手に画像を取ってきて加工する行為は著作権法に抵触するため絶対にやめましょう。ネットで画像を取得する場合は、著作権上問題ない画像であるか必ず確認しましょう。
アイキャッチ画像を作るとき、著作権フリーで利用できる代表的なサイトは以下の通りです。
無料で使える画像素材サイト（例）
今回はイラストACから画像を取得します。
「フラットデザイン PC」と検索バーから検索すると、上のような候補が出てきます。
この中から１つ選択してダウンロードします。
STEP2. Canvaで画像を加工
Canvaはグラフィックデザインを無料で加工できるwebサービスです。
めちゃくちゃ高品質で、本当にこれが無料で使えるの？と思ってしまうほど。
有料サービスもありますが、無料サービスで十分です。
2-1. 無料ダウンロードした画像をCanvaにアップロード
まずは先ほど無料で取ってきた画像を、Canvaにアップロードしていきましょう！
初めて利用する場合は左下の登録ボタンで会員登録します。
既に登録済みの場合は右上の「ログイン」から入ります。
Googleアカウントを持っている人は「Googleで登録」が一番簡単だと思います。
メイン画面に入ったら、左のメニューバーから「デザインを作成 → カスタムサイズ」を選択しましょう。
サイズは「830×580」で設定します。
これはTwitter等でリンク作成するときに、見切れずに綺麗に見えるためです。
どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。 今までブログのアイ…
次にメニューバーの「アップロード」を選択します。
「画像または動画をアップロード」を選択し、先ほど無料で取得した画像をアップロードします。
上図のようになるので、アップロードした画像を選択します。
すると、編集画面（右側）にアップロードした画像が反映されます。
このままだと余白がある状態なので、画面いっぱいまで画像を大きくしちゃいましょう。
編集画面の画像を選択し、両端を操作してサイズを変更します。
2-2. 画像をプロ仕様のように見せる
画像を少し白っぽく見せることにより、プロがデザインしたようなおしゃれ感のある画像に仕上げることができます。
※ただし好みが分かれるので、必要なければこのステップは飛ばしてください
メニューバーにある「素材」を選択し、グレーの四角形を選択します。
選択したグレーの四角形を、先ほどの画像を覆いつくすようにサイズを大きくします。
そうすると上図のように青いＰＣの画像が見えなくなり、画面がグレーの四角形でいっぱいになります。
グレーの四角形の図を選択したまま、編集画面の左上にある「背景色」を選択し、「白」の選択します。
編集画面の右上にある「透明度」をクリックし、透明度のバーを「30」くらいに設定します。
そうすると先ほど選んだ画像が少し白っぽくなり、少しおしゃれ感が増します！
イラストの場合はこの加工は行わない方が好みの方もいると思うので、完全に好みです。
一方で写真を使った場合は、白っぽくすることで確実におしゃれ感が増します。
また、文字が目立ちやすいという効果もあります。
2-3. タイトル文字を挿入する
メニューバーの「素材」からグレーの四角形を選択し、先ほどのステップと同じ手順で編集画面に挿入します。
今度は画面すべてを覆うのではなく、中央部分のみに画像を重ねます。
透明度は「90」くらいに設定しましょう。
次にメニューバーにある「テキスト → 見出しを追加」を選択します。
記事タイトル（挿入したい文字）を入力していきます。
僕は「こころ明朝体」を選んでいます。
強調したい文字に色を付けていきます。
まず強調したい文字部分を選択します。
次に上のバーにある「文字色」を選択します。
すると左側にカラーパレットが出てくるので、自分の付けたい色を付けます。
ちなみに僕はブログ全体に統一性を持たせるため、青色は「#3390f9」にしています。
以上で画像自体は完成となります！
右上にあるダウンロードボタン（「↓」の記号）をクリックし「JPG」を選択します。
※PNGよりもJPGの方が容量が小さいため、JPGがおすすめです
ダウンロードボタンを押してダウンロードしましょう。
参考）作成したデザインの再利用
ここまで「けっこう面倒だな…」と思われた方も多いと思います。
しかし、一度ここまで作ってしまえばデザインを再利用することができます。
右上に「ページをコピー」ボタンをクリックすると、同じデザインが複製されます。
複製されたデザインの画像と文字だけ差し替えれば、すぐに新しいアイキャッチ画像を作成することができます。
STEP3. TinyPNGで画像を圧縮
作成した画像は少し容量が大きいので、画像を圧縮します。
TinyPNGにアクセスしましょう。
「Drop your .png or .jpg files here!」と書いてあるところに先ほどダウンロードした画像をドラッグ＆ドロップします。
そうすると画像が圧縮されます。
右横にある「download」ボタンでダウンロードします。
今回の僕の画像の場合は24%が圧縮されたことになりますね！
まとめ：オリジナルのアイキャッチを作ってブログを楽しもう！
初心者でも簡単におしゃれなアイキャッチ画像を作る手順を説明しました。
- web上でフリー画像素材を探す
- Canvaで画像を加工
- TinyPNGで画像を圧縮
もちろんブログ記事内の画像にも応用ができますので、ぜひ利用してみてください。
ブログ全体のデザインを変える場合は、有料テーマがおすすめです。
ワードプレスでブログを始めたけど、テーマが多すぎて選べない 評判の良いテーマを知りたい 初心者向きのテーマを使いたい そんな要望に応える記事を作りました。 「結局どのテーマがいいの？」とテーマ探しのループにハ[…]
