MENU
 参考デザインをジャンル別に見る場合はこちら


スクロールできます
Canva公式クリエイターページ
SWELLサイト型トップページTemplate販売ページ
You Tubeチャンネルはこちらから


ダサくならない!Canvaでおしゃれなアイキャッチを作るコツ11選|ブログデザイン

当ページは広告が含まれているリンクがあります。
Canvaアイキャッチのポイント11選
  • URLをコピーしました!

本記事では、Canvaでブログのアイキャッチ画像を作るときに知っておきたいデザインのポイント11選をご紹介します。


デザインのポイントを知っておくだけで、ダサく見えないおしゃれなアイキャッチが作れるようになりますよ。


本編では、下の比較画像のようにやりがちなNG例と、それを改善したOK例の対比でポイントをわかりやすく解説しています。

NG例・余白がない
OK例・余白あり


このサイトについて
  • SWELL×Canva
    ワードプレステーマSWELLとデザイン作成ツールCanvaでつくるブログデザインを公開しています

  • 好みで探せるデザイン
    ブログジャンルやテイスト別にお好きなデザインを探せます

  • 初心者さんにも優しい解説
    カスタマイズの方法やデザインの解説動画も掲載しています
Canva公式クリエイターのもふこです
Canva公式テンプレートはこちらから

Canvaでブログアイキャッチ等の公式テンプレを作ってます
クリエイターページのフォローをしていただけるととっても励みになります!

目次

Canvaのテキストとフォントの使いかた【ブログアイキャッチ】

まずは、アイキャッチにはかかせない文字入れのポイントから。



Canvaには数え切れないくらいたくさんのフォントがありますよね。


でも実は、使うと一気にダサく見えてしまう残念なフォントもあるって知ってましたか?


そんなCanvaでのフォント選びや、テキストの見栄えをより良くする方法など、テキスト入力で気をつけたいポイントを5つご紹介します。

1.変わったフォントは多用しない

NG例フォントの使いかた
OK例見やすいフォント選び




まず初めに大事なのがフォント選び。そこで気をつけたいNG例が、変わったフォントを多用してしまうことです。


フォントの主張が強すぎると、途端に見づらくなりせっかくのタイトル文字が頭に入ってきません。



ポイント使いにならいいのですが、テキスト全体に使うのはおすすめしません。



ここで、私が普段からよく使っているおすすめのフォントと、ちょっとイマイチだなと思うフォントを3つずつご紹介します。よかったら参考にしてくださいね。

canvaおすすめフォント
現在はNotoSansJPという表記になっています


ちなみにフォント名にある【UD】はユニバーサルデザイン(どんな人にでも見やすいデザイン)、【B】は太字です。


もふこ

私が一番よく使うフォントは「Noto Sans 」。


スタンダードなゴシック体でとても見やすいフォントです。


イマイチなフォントでご紹介した特殊な形のフォントは、使いどころが難しいので使わないようにしています。


2.文字間隔・行間隔を調整する

NG例・文字間隔を調整しない
OK例・文字間隔を調整する


日本語フォントは、デフォルトのままだと文字の間隔が詰まっているものが多いです。


テキストを入力したら必ず文字間隔まで調整するようにしておくと、見やすさが向上し見栄えも良くなります。


何行かに分かれる場合は行間隔の調整も一緒に行うようにしましょう。



文字間隔・行間隔の調整はどこからできるの?という方はこちらの動画を参考にしてください。

もふこさんによる文字・行間隔の調整


3.原色や真っ黒は使わない

NG原色や真っ黒を使う
OK例 色を合わせる


次は色の選び方です。



NG例のような原色は、目立たせたくてつい使いたくなってしまいますよね。



ですが、原色使いはダサ見えしてしまうこともあり注意が必要です。


Canvaのカラーパレットでは、基本カラーがこのように並んでいますが、私はこのまま使うことはほぼありません。


Canvaのカラーパレット
Canvaデフォルトカラー

真っ黒も使わず、目にやさしいグレーに近い黒を使うようにしています。



色を選ぶ時は一度デフォルトカラーを選択して、そこからレインボーの「新しいカラーを追加」のボタンをクリックし希望の色を探すようにしています。


Canvaカラー調整




もしくは、「写真の色」から選ぶとテキストが変に浮くことなく馴染むのでおすすめです。

Canva写真の色



もふこ

配色については「3色だけでセンスのいい色」という本をいつも参考にしています!

見ているだけでワクワクする色使いやデザインがたくさん載っていますよ。



4.エフェクトで湾曲させすぎない

NG例湾曲させすぎ
OK例湾曲は少しだけ


このCanvaのエフェクトって楽しくてつい使ってみたくなりますよね。私も初めてエフェクトの湾曲を使った時は「こんなことができるのか!」と驚きました。


ですが、何事もやりすぎは禁物です。


湾曲しすぎて、なんて書いてあるの?となってしまっては意味がないので、バランスを見ながらほんの少しのアクセントとして使いましょう。

5.エフェクトで浮き出しさせすぎない

NG例・浮き出しさせすぎ
OK例・デフォルトのまま


こちらもエフェクト関連ですが、浮き出しもつい付けたくなりますよね。



ですが、基本はつけなくてOKです。



付ける場合は、デフォルトのままだとけっこうぼやけて見えるので、浮き出しレベルを調整してみてください。




見やすさを最優先で考えましょう。

Canvaで写真を使う時のポイント【ブログアイキャッチ】


続いては、アイキャッチ全体に写真素材を使う時に気をつけたいポイント3つと、見やすくなるひと工夫をご紹介します。

1.写真の選び方に注意する

NG例・ダサい写真
OK例・綺麗な写真を選ぶ


こちらは基本中の基本ですが、やっぱり写真は綺麗でおしゃれなものから選びたいですよね。


Canvaの写真素材はだいたいが海外の画像なのでどれもおしゃれです。ですが、たまに解像度がとても低い写真や、色使いがなんかダサい…と思うものもあります。



そういった写真は避けて、センスの良い写真を使うだけでアイキャッチはおしゃれになりますね。


もふこ

とは言っても一番いいのは自分自身で撮ったオリジナルの写真です!

このあと出てくるポイントも参考にしながら撮り方も工夫してみてくださいね。


2.明るさや透明度を調整する

NG例・画像の透明度
OK例・透明度の調整


写真の明るさや透明度、しっかり調整していますか?



これがけっこう重要で、私は写真を使うたびに必ず明るさや透明度を調整するようにしています。


Canva透明度の調整




Canva画像の明るさ調整



NG例では、タイトル文字が写真の背景とかぶってとても読みにくいですよね。そんな時は、OK例のように写真の透明度を下げてみるとこんなに見やすさが変わります。



OK例では、透明度の調整に加えて、テキストに影も付けてより見やすくなるように調整してみました。

3.余白を意識する

NG例・余白がない
OK例・余白あり


こちらもデザインにおいてかなり重要な「余白」です。


アイキャッチはやはり文字を載せることが多いので、余白のない写真ははじめから使わないようにしましょう。


NG例では本当にタイトルテキストが見えづらいですよね。


もふこ

自分で写真を取る時も、あえて余白を入れるように撮っておくと、あとから使いやすくなりますよ。



Canvaフレーム
フレームも写真使いに便利です!




フレームってどこから出すの?という方はこちらの動画を見てみてください。写真や動画をフレームに入れる際の手順動画です。

もふこさんによるフレームの使いかた

【point】写真の上に文字を載せるときの一工夫

NG例・文字が読みにくい
OK例・長方形をプラス



ここで、ちょっとしたポイントです。



「ゴチャゴチャした画像なんだけど、どうしてもこの画像が使いたいんだ!」ってことあるかもしれませんね。



そんな時は、ちょっと一工夫。OK例のように無地の背景をタイトル文字の下に入れてみましょう。




これで視認性がだいぶ上がりました!余白がなくて困った時はやってみてくださいね。

Canvaの素材選びのポイント【ブログアイキャッチ】

続いては、Canvaの素材の選び方や、色の使い方についてのポイントを2つご紹介します。

Canvaの素材はかなりたくさんの数があり、見ているだけでも楽しいですよね。


ですが、統一感を意識しないと印象がバラバラで伝えたいことがよくわからないデザインになってしまいます。

1.イラストは同じシリーズで統一感を意識する

NG例・テイストがバラバラ
OK例・テイストを揃える


NG例、OK例ともに、「植物」というキーワードで検索した素材を使っています。



もうお気づきかと思いますが、NG例はテイストがバラバラでなにがなんだかわからないですよね。



素材の検索結果では、「自動おすすめ機能」や「似ているアイテムを表示」などから似たテイストの素材をかんたんに探すことができます。

Canva似ているアイテムを表示
iボタンから「似ているアイテムを表示」




また、作成者のリンクをクリックすると、同じ作成者の素材がたくさん出てきます。統一感を出すにはこの方法で使う素材を揃えるのが一番効果的です。

2.色は使いすぎない

NG例・色の使いすぎ
OK例・3色で統一


今度は色の統一感も意識してみましょう。


NG例では、元気いっぱいなカラフルな服を着た子どもたちのイラストですが、目がチカチカしてしまいそうですね。


落ち着いた印象にするには、3色以内でまとめると統一感が出ておしゃれに見えます。


応用例

また、応用で一部のみ見立たせたい場合はこんな風に色使いやトーンを変えてみましょう。

まとめ|Canvaでおしゃれなアイキャッチを作るコツ


最後に、今回ご紹介した11個のポイントを意識して、OK例とNG例を作ってみました。

ダサいアイキャッチ
OK例

パッと見ていかがでしょうか?


写真は前述の写真の選び方の項目でご紹介した有料素材を使ってみました。

NG例は、かなりダサいですね(汗)


どんな層をターゲットにしているのかもわかりにくく、この記事を読んでみよう!という気持ちを引き出すのは難しそうです。


対してOK例では、大人の女性をターゲットにしたアイキャッチにしてみました。



色の選び方もセンス良くというのはノンデザイナーにはなかなか難しいので、写真の色から選んでいます。


写真の色



どんなところを意識しているか見ていただき、この記事を参考にしてすてきなアイキャッチを作ってみてくださいね!


この記事の内容は、Youtubeでも解説しています。記事内では紹介しきれなかった解説もあるのでよかったら見てみてくださいね。




また、このブログでは、SWELL×Canvaでつくるブログデザインの参考アイディアや、実際に私が作っているCanva公式テンプレートをまとめた記事も公開していますので、参考になりそうなデザインをぜひ探してみてください。






ご質問がありましたらコメント欄から受け付けしています。


それでは、最後までご覧いただきありがとうございました!

SWELLのサイト型カスタマイズまとめ記事はこちらから


ブログトップページのデザイン 公開しています! (2)



Canvaで編集できるSWELLサイト型トップページのデザインテンプレートも販売しています



SWELLの装飾バリエーションを動画で解説しています


\ 他のデザインはこちらから! /

デザインをさがす



当サイトのテーマはSWELLを使用しています


  1. 取り入れた瞬間からおしゃれなブログに
  2. だれでもサクサク使える直感操作
  3. 他テーマからの乗り換えプラグインも充実
  4. サイトスピードが大幅アップ
  5. カスタマイズもかんたんで自分好みに!


\ Canvaの使い方解説はYouTubeから /

You Tubeチャンネル登録Canvaデザインハック
Canvaアイキャッチのポイント11選

この記事が気に入ったら
フォローしてね!

SNSでご紹介いただけると嬉しいです
  • URLをコピーしました!
目次