アイキャッチ画像毎回作るの面倒。
簡単な作り方を教えて！
記事によってデザインがバラバラ。
時間かけずに統一感を出せるコツを知りたい！
今回はWebデザイナー３年目の私がアイキャッチ画像を簡単に作る方法を紹介します♩
アイキャッチ画像作成よりも記事に集中したい！っていうかたにオススメです◎
- デザイン未経験でもアイキャッチ画像を時短で作る方法
- 時短＋統一感をだすためのデザインテンプレ
- どうしても作れない時のお助け方法
この記事は「とにかく時短したい！デザインわからない！けど統一感を出したいんだ！」という方向けです
デザインの細部までこだわりたい。デザインについて学びたい。という方向けではないのでご了承ください。
2024/3/5 〜 Adobe CC公式が値上げになりました！
年間プラン一括払いは72,336円 → 86,880円に。
Adobeマスター講座はまだ価格据え置き状態ですが、今後値上げになる可能性大ですので購入予定の方はお急ぎください！
＼半額以下！86,880円→39,980円で買える ／
INDEX目次
この記事を読むと作れるアイキャッチ画像【テンプレート】
この記事を読むと、以下の３パターンのブログのアイキャッチ画像を作れます。
まるッとパクってOKです！
（文字は変えてください）
アイキャッチ画像はブログのサポート役💡
読者はアイキャッチ画像の品定めはしない！細部までこだわらなくて問題ありません◎
（ブログジャンルがデザインの場合は例外です）
テンプレートは３つあれば十分だと思います。
なんで３パターンだけでいいの？
ブログのトップページって横３列が多いから！
このブログも３列です。
- タイトル文字は32文字くらい
- 画像はフリー素材サイトからダウンロードしたものを使用する
- アイキャッチ画像のサイズは1200 × 630px（SWELL推奨サイズ）
フリー素材サイトからダウンロードして使用する場合は、利用規約をよく読み守ってくださいね。
ブログのアイキャッチ画像の必要性
アイキャッチ画像はクリックを促進する重要な要素です◎
- 記事を目立たせる
- ソーシャルメディアでのシェア時に引き立つ
- 視覚的に興味を引く
アイキャッチ画像は最初に目に入る情報で、記事を際立たせ、読者の注意を引くために必要です💡
以下のブログ、どちらが読んでもいいかな？と感じますか？
きっとアイキャッチ画像がある方ではないでしょうか☺️
アイキャッチ画像がないと「この記事大丈夫？」と不安になりますよね…。
ブログは「読まれない」が前提です！
流し読みが圧倒的に多いため、アイキャッチ画像でパッとブログの内容を伝えて離脱を防ぎます◎
ブログの信頼性を高めて、記事を読んでもらう大切な入り口です！
ブログのアイキャッチ画像を時短で作る方法
アイキャッチ画像を時短で作るコツは「要素の固定」です！
フォント・色・構成・画像を同じにするだけで時短＋統一感を作れますよ◎
統一感が出るとブログの完成度がグッと上がります✨
上記で使用している色は３色（黒#3a3a3a / 黄色#ffca26 / 白#ffffff）です。
*文字フォントはイメージが湧きやすいようにそれぞれ変えています。
下記で、作成のポイントやブログに使用するときに決めた方がいいことを紹介しますので、ぜひ活用してください◎
使用フォントを固定
使用するフォントを決めておくだけでめちゃくちゃ時短です◎
日本語・英語、各１〜２種類に絞り、１つの画像につき３種類までがごちゃごちゃしないポイント！
いろいろなフォントを使用するとデザインがまとまらない＋文字が読みづらくなります！
フォントにはそれぞれイメージがあって、明朝体は「高級感」「大人っぽい」、ゴシック体は「シンプル」「カジュアル」といったイメージがあります。
迷って決められない…！という方はハッキリ読みやすい「ゴシック体」がオススメです。
ゴシック体
❶ 游ゴシック体
WindowsとmacOSに標準搭載されているベーシックなフォントです。
❷ 秀英丸ゴシック
❺ 秀英角ゴシック銀
明朝体
❶秀英明朝
❺貂明長
❸游明朝体
筆記体
❶おおにし
❷恋心
❸ペンレター
当ブログのアイキャッチ画像の使用フォントはこちら↓
日本語：秀英丸ゴシック
英語：Brandon Grotesque
親しみやすさと文字の読みやすさで決めました♩
使用する色を固定【３色まで】
ブログのアイキャッチは「パッと読みやすい」が重要です！
使いすぎるとごちゃごちゃした印象を与えてしまうので、使用する色は３色までがオススメです◎
白＋黒＋好きな色（ブログにあう色）
好きな色は、ブログの見出しに使用しているカラーだとより統一感が出ます◎
写真で使用されている色はカウントしなくてOK！（写真の上に黒の透明フィルターをかけるから）
デザインの基本：効果的なカラーバランス
- ベースカラー（基調色）70%
- アクセントカラー（強調色）5%
- サブカラー（補完色）25%
面積比を決めてデザインするとバランスの取れた美しい配色になります💡
ですが・・・
デザイン初心者の方が色の比率まで意識すると、時短じゃなくなるので「ふーん」くらいで問題ありません。
配色に興味を持ったら書籍を読んでみると勉強になりますよ♩
アイキャッチやバナーは、色やフォントを固定するだけでも整いやすくなりますが、タイトル文字の見せ方でクリックされやすさも変わります。文字まわりのデザインに迷う方は、バナータイトルのあしらい例も参考になります。
構成パターンは３パターン
構成はテンプレート化がオススメです。
- 枠をつける
- 文字は左揃え or 中央揃え
- 文字を強調したい時は四角形を文字の下に敷く
- 装飾は吹き出しだけ
読みやすいデザインには人の目線の流れを意識した「Zの法則」があります。
写真 or イラストを使用する
アイキャッチ画像は、画像があると伝えたいことが直感でわかりやすくなります。
写真を使用するか、イラストを使用するか、どちらかに統一すると素材探しの時間短縮に繋がります。
どうしても作れない時のお助け方法
- 時間がない
- 作るのが嫌い
こんな方はプロに任せてしまいましょう！
ココナラで「ブログ アイキャッチ」と検索すると作ってくれる人をすぐ見つけられますよ♩
プロにお願いするレベルのブログじゃないんだけど…
依頼していいの？
心配しないで大丈夫！
ブログを始めたばかりでも、アイキャッチに時間を割くより、記事に集中した方がブログは成長します。
逆に、アイキャッチ画像作成をしていてWebデザイン楽しい！って思ったら、Webデザインの勉強をしてみるといいかもしれません◎
Webデザインを学ぶと副業にできるだけじゃなく、自分のブログにも活かせるのでブログ× Webデザインは相性抜群だと思ってます☺️
＼ Webデザインに興味が出たら／
まとめ
この記事がアイキャッチ画像作成に悩んでいる方の参考になれば幸せです♡
これからもブログ運営、楽しみながら頑張っていきましょう！
2024/3/5 〜 Adobe CC公式が値上げになりました！
年間プラン一括払いは72,336円 → 86,880円に。
Adobeマスター講座はまだ価格据え置き状態ですが、今後値上げになる可能性大ですので購入予定の方はお急ぎください！
＼半額以下！86,880円→39,980円で買える ／
友だち追加