Canvaでお洒落なアイキャッチ画像って、どう作るんだろう？
ブログ初心者でもできる、簡単で魅力的な画像の作り方が知りたい。
こんな疑問に答えます。
結論から言うと、ポイントは5つです。
- 誰に何を伝える画像か決める
- 既存のデザインを参考にする
- デザイン４原則を使う
- Canvaの配色ツールを使う
- 構図を使う
ブログを書きはじめてから2ヶ月と6日で、月間1万PVを達成しました。
短期間で達成できた要因は、SNSで多く人が拡散してくれたからです。
記事が拡散され多くの人に読んでもらうには、思わずクリックしたくなる「アイキャッチ画像」を作ることが大切です。
そこで、私のようなデザイン初心者でも無料版のCanvaで、思わず目を引く画像作成のコツを解説します。
とても簡単にできるので、ぜひ取り組んでみてください。
なぜアイキャッチ画像が重要か？
アイキャッチ画像とは、読者の目を引きつけるための画像で、言わばブログ記事の宣伝ポスターです。
数ある記事の中から選んでもらうには、瞬間的に情報が伝わるデザインかが重要です。
またSNSで記事が読まれ、拡散されるためにも、視覚的に情報を伝えるアイキャッチ画像はとても有効です。
ついクリックしたくなるアイキャッチ画像を作ることができれば、
- サイト内回遊率UP
- PV数増加
- 収益増加
にも繋がります。
私はCanvaの無料版で画像を作成しているよ♩
登録すればすぐ使えるので、ぜひ試してみてね！
【作成前】どんな人に何を伝えたいかイメージする
アイキャッチ画像を作成する前に、情報を3つに整理することが大切です。
- どんな人に
- 何を伝えたいのか
- どう印象付けたいのか
例えばこの記事に当てはめてみましょう。
- どんな人に読んで欲しいか
→ブログ初心者でアイキャッチ画像の作成に困っている人
- 何を伝えたいのか
→コツを掴めば誰でもオシャレな画像が簡単に作れること
- どう印象付けたいのか
→canva特色の青系統で「お洒落」と印象付けたい
この情報を、アイキャッチ画像に伝えてもらいます。
既存のデザインを参考にする
ブログ初心者が一番手っ取り早く、魅力的なアイキャッチ画像を作るには、既存のデザインを参考に作成することです。
人気ブロガーを参考に
トップブロガーのアイキャッチ画像や挿入画像は、とても参考になります。
私がよくチェックしている、画像が素敵な人気ブロガーは、下記の方々です。
アイキャッチ画像だけでなく、挿入画像、画像を差し込みタイミングなども真似できるポイントです。
もちろん丸パクリはNGだよ。
多方からインスピレーションをもらう
他にも下記の媒体から、デザインのインスピレーションをもらっています。
- Googleの画像検索
- 街中のポスター
- デザイン本
例えばGoogle画像検索で「アイキャッチ画像」と検索すると、多くの画像が出てきます。
気になる画像を数点選び、
- 色の使い方
- 素材(写真や画像)の選び方
- 文字のフォントや大きさ
などを組み合わせると、理想とするアイキャッチ画像が簡単に作れます。
オススメ本「思わずクリックしたくなるバナーデザインのきほん」
Amazonベストセラー本に選ばれた「思わずクリックしたくなるバナーデザインのきほん」は、大変参考になります。
ネット上のバナーに特化した本で、思わずクリックしてしまうデザインのコツを紹介しています。
私も色んなテクニックをこの本から学び、活用しています。
真似するだけで魅力的なアイキャッチ画像が作れるので、ブロガーにオススメな一冊です。
この1冊さえあれば、もうデザインに困らないよ♩
デザイン4原則を使う
デザイン4原則とは、誰でも簡単に魅力的な画像を作ることができる、デザインの基礎です。
- 近接
- 整列
- 反復
- 対比
4原則ができていないと、読者に何を伝えたいか分からない画像になるため、注意が必要です。
凄く簡単なことだけど、意識するだけで変わるので、ぜひやってみてね。
それぞれ解説します。
近接：関連するものは近く配置
近接とは関係する情報を近づけることにより、関係性をだす効果があります。
下記の画像のように、文章同士の距離感を変えることで、読者に情報の関係性を伝えます。
なぜ距離感が関係するかと言うと、人間には、近くにあるものをグループと見る習性があるからです。
- 公園で男女が隣に座っているとカップルと思う
- 子供たちの集団を見ると友達グループだと思う
上記の例も、近接効果です。
例えば、3つの情報を画像で伝えてみます。
- プリンの画像
- プリン(名称)
- 300円
左のBEFOREの画像を見ると、3つの要素が離れているため、パッと見た時の関係性が分かりません。
しかし、AFTERの画像は3つの要素が近いため、情報が関連していると分かります。
- 関連する要素は近づけて配置
- 関係性が薄いものは離して設置
ポイントを意識するだけで、読者が情報の関係性を瞬時に理解できる画像を作ることができます。
近接の関係にある箇条書きを使う際は、縦に並べよう。
自然と視線が上から下へ流れるよ。
整列：見た目を整え配置することで統一感を出す
関連する情報同士、統一感を出すことで、直感的に情報を伝えることができます。
- 配置(〜揃え)
- フォント
- サイズ
- 配色
上記がバラバラな画像だと、読者は情報を理解するのに時間がかかります。
下の画像を見ると、配置もフォントもバラバラで、何が重要なのか判断が難しいです。
そこで中央揃えにし、文字のフォントや大きさを整え、色も３色までにしました。
先ほどと打って変わり、関連する情報同士がすぐに分かり、読者に負担なく伝えることができます。
Canvaの定規・ガイド線を使い整える
Canvaの定規・ガイドを使うと、綺麗に文字や画像を整えることが出来ます。
①ファイルをクリック
②定規を表示・ガイドを表示を両方クリック
③定規が上、左側に表示される。
④定規の上にカーソルを置き、ガイド線を引きたいところまでドラッグで引っ張る。
⑤消したいときは、逆にガイド線を定規までドラッグで引っ張る。
定規・ガイド線を使うと、簡単に配置を整えることが出来るのでオススメです。
- 関連する情報はフォントや文字のサイズを統一させる
- 目に見えない線で揃えることを意識する
横書きの場合、人の視線は左上→右上→左下→右下と流れるよ。
これを「Zの法則」と言い、流れに沿って情報を配置すると、読みやすくなるので覚えておこう！
反復：特徴的なものを繰り返し使う
デザイン上の特徴を繰り返し使うことを、反復と言います。
- 色
- 字体(フォント)
- 線
- レイアウト
- 配置
上記のような要素を繰り返すことで、デザインに一貫性が生まれます。
「近接」の説明時に使ったプリンの、
- 画像の大きさ
- フォントの大きさ
- フォントの強弱
を他の食べ物でも同様に繰り返し使うことで、パッと見ても分かりやすいメニュー表を作れます。
反復は共通のルールを使い、デザインの統一性を作りますが、少しだけアクセントをつけることで目立たせることもできます。
ケーキに「オススメ」とつけるだけでも、読者の視線をケーキに誘導することができます。
- 共通のルールを繰り返すことで、統一感が生まれる
- 共通のルールの中にアクセントを加えると、読者の視線を誘導できる
対比：情報の優先度を明確にする
対比は、重要な箇所を目立たせることで、情報の優先度を明確にします。
- 文字の大きさ
- 文字の色
- フォント
- 装飾や背景色
など、各要素の違いをハッキリさせることで、デザイン全体にメリハリをつけることができます。
下記画像は中央揃えではありますが、どこが重要か分かりません。
そこで、文字の大きさや装飾にメリハリを出します。
「添削講座で学んだポイント5選」の文字の大きさを一番大きくし、かつ点線を引いたことで目立つようになりました。
要素の違いを明確に表すことで、読者に伝えたい情報の優先度を表現出来ます。
- 情報に優先度をつける
- 優先度により、文字装飾やフォントの大きさで強弱をつける
枠線や吹き出しを使って文字を囲むと、それぞれの文字が独立しスムーズに読めるよ。
文字のエリアを明確化することで、一目で情報が伝わるデザインに。
Canvaの配色ツールを使う
デザイン初心者の私たちにとって、配色は難易度が高いため、ルールを守って配色することでイメージが伝わりやすくなります。
オススメはCanvaの配色ツールを使うことです。
Canvaでブランドを構築して、魅力的なロゴを数分でデザインしましょう。今すぐ開始！
自動でイメージ色を提案する「Color palette ideas」
Canvaの配色ツールColorsの、左から2番目「Color palette ideas」を使うと、自動でイメージにあった配色を提案してくれます。
>>Canvaの「Color palette ideas」へ飛ぶ
作成したい画像をイメージしたキーワードを、検索欄に英語で入力します。
冬のイメージ→winter
クールなイメージ→cool
お花のイメージ→flower
今回作成するアイキャッチ画像は、Canvaをイメージしたのでメインカラーの「blue」と入力しました。
すると、候補となる配色がたくさん出てくるので、その中から自分のイメージにあった色を探していきます。
これだけで、テーマに沿った配色を見つけることが出来ます。
配色のバランスは7:2:1
配色が決まったら、次は色を使う割合です。
割合を7:2:1の3色にまとめると、デザイン初心者でも簡単に配色が出来ます。
ベースカラー：7割
メインカラー：2割
アクセントカラー：1割
上記の割合が、美しくバランスよくまとまります。
4色以上使う場合、メインカラーを10％づつに分けるなど、基本の割合をベースに各エリアを分割するといいよ。
写真やイラストの配色を調べる「Color Palette Generator」
イメージから配色を決めるだけでなく、使用する
- 写真
- イラスト
に含まれる色から選ぶことで、全体の印象も変わってきます。
写真やイラストに使われている配色は、CanvaのColorsの一番左にある「Color Palette Generator」で調べられます。
＞＞Canvaの「Color Palette Generator」へ飛ぶ
「Color Palette Generator」をクリックし、「Upload an image」ボタンを押し、配色を調べたい写真をアップロードします。
すると、写真の下に使われている配色が表示されます。
写真の色とマッチするため、違和感なく画像作成ができます。
構図を使う
構図を使うと、簡単にバランスの取れた画像を作成できます。
構図の基礎である、下記2つを解説します。
- 日の丸構図
- 3分割法
とても簡単なので、ぜひ取り入れてみてください。
「日の丸構図」は誰もが使いやすい
日の丸構図とは、画像の中心に重要な要素を配置する構図で、主役を目立たせる効果があります。
下記のアイキャッチ画像も、中心に文字を持ってくることで、主題を目立たせています。
画像いっぱいに情報を詰め込んでしまうと見づらいため、上下左右にある程度余白を持たせます。
また、SNSで記事がシェアされた際、アイキャッチ画像を縮小したOGP画像が表示されます。
その際端が削られ、画像の中心部分のみ表示されるので、注意が必要です。
重要な用途を中心に置くことで、
- 読者の視線が集めやすい
- 誰もが簡単に使える
- OGP画像でも重要なことを表示できる
上記のメリットがあり、簡単にできるのでブログ初心者にオススメです。
「3分割法」で目立たせる
3分割法とは、画像を縦横3分割し、線や重なる点の部分に目立たせたい要素を配置することです。
3分割法を意識することで、バランスの取れた画像を作成することが出来ます。
３分割法を意識した配置をする際、Canvaの定規・ガイド線を使い整えると便利です。
デザインで迷ったら、どちらかの構図を使っておけばOK！
スマホで見やすいアイキャッチ画像
パソコンでアイキャッチ画像を作ることが多いため、必ずスマホ表示でも画像が見やすいか確認が必要です。
- 文字が読みやすいか
- 何の画像か伝わるか
なぜなら読者のほとんどは、スマホで記事を読むからです。
このブログも、8割以上がスマホで見られています。
記事投稿前にスマホで記事を確認する方法は、下記の通りスマホのブラウザからWordPressを開いて確認します。
スマホのブラウザでWordPressにログイン＞投稿から下書きの記事を開く＞プレビューボタンを押す
簡単に出来るので、ぜひ試してみてください。
まとめ：ブログ画像の作成は知識が大切
ブログをはじめると、
- アイキャッチ画像
- 挿入画像
- ブログやSNSのカバー画像
など、思った以上に、たくさんの画像をデザインする機会にめぐり合います。
私のようなデザイン初心者が、画像作成をする際大切なのは、センスよりもデザインの基本的な知識だとブログ運営を通じて実感しました。
今回は、下記のポイントをまとめました。
- 誰に何を伝える画像か決める
- 既存のデザインを参考にする
- デザイン４原則を使う
- Canvaの配色ツールを使う
- 構図を使う(日の丸構図・3分割法)
特に、デザイン4原則や構図は覚えてしまえば、今後ずっと使っていけます。
私は以前趣味で写真撮影をしていた際、構図の使い方を知り、劇的な変化に感動しました。
抑えるポイントがあるだけで、素人でもある程度のものを作ることは充分可能です。
デザイン展に出品するためでなく、私たちが作るべきは、読者に記事への興味を持ってもらうための画像です。
ぜひ今回紹介したことを、活用してみてくださいね。
イナコ(@inacoblog)
応援のポチを押していただけると嬉しいです!!
↓↓
にほんブログ村ブログ村をされている方はぜひフォローもお願いします♩
↓↓
