デザイン

【Canva】アイキャッチに文字を追加するときの5つのポイント

こんにちは! Webデザイナーのアズサ(@azusascom)です。

前回のCanva記事「画像をアップロードして簡単におしゃれなアイキャッチをつくる方法」に続いて、Canvaを使いこなすぞ企画第2弾!

他の人のブログを読みますが、おしゃれな画像を使ってるのに追加してる文字が画像と合ってないこともしばしば。「もったいない」と思うことが正直あります。

そこで今回は、アイキャッチに文字を追加するときのポイントをご紹介。

ポイントをおさえれば、あなたのアイキャッチはもっとおしゃれになりますよ。

Canva

画像にテキストを追加するときのポイント

ポイントは以下5つ。

  1. 画像とフォントのイメージを合わせる
  2. 読みやすい色にする
  3. 改行は区切りのいい部分で
  4. 余白を取る
  5. スペースを調整する

画像は写真でもイラストでも、ポイントは同じです。

1.画像とフォントのイメージを合わせる

画像を見て「ポップな感じ」とか「かっこいい感じ」というイメージを持ちますよね。

同じように、フォントにもイメージがあるんです。

では、実際にフォントを比べてみましょう。

以下①~③のフォントについて、どんなイメージを持ちましたか?

フォントのイメージ比較

おそらく、以下のようなイメージを持ったのではないでしょうか。

  1. ポップ・かわいい・丸い感じ【コーポレート・ロゴ丸】
  2. スマート・かっこいい・シンプル【刻ゴシック】
  3. 上品・きれい・和風【こころ明朝体】

フォントと画像のイメージが一致してないと、ちぐはぐな印象になってしまいます。

フォントと画像のイメージが一致してない画像

「かわいい画像×スマートなフォント」で、しっくりこない感じがしませんか?

【例:かわいい画像×ポップなフォント】

かわいい画像とポップなフォント

【例:かっこいい画像×スマートなフォント】

かっこいい画像×とスマートなフォント

上の2つの画像のように、フォントと画像のイメージを一致させればおしゃれな画像になるんです。

2.読みやすい色にする

アイキャッチに文字をのせるとき、重要なのが読みやすさです。読んでもらえなかったら、文字をのせる意味はないですよね。

以下のように文字の色を選ぶのがおすすめ。

  • 背景色が白・淡い色:濃い色や鮮やかな色の文字色
  • 背景色が濃い色・鮮やかな色:白やアイボリーなどの白に近い色

【例:読みやすい色】

画像をアップロードして簡単におしゃれなアイキャッチをつくる方法

【例:読みにくい色】

白い背景色と読みにくい文字色

白い背景に淡い色の文字だと目立たないですね。

【例:読みやすい色】

鮮やかな背景色と読みやすい文字色

【例:読みにくい色】

鮮やかな背景色と目がチカチカする文字色

鮮やかな背景色に鮮やかな文字色の場合、目がチカチカしてしまいます。白い文字がおすすめ。

配色としては嫌いじゃないですがw

中には、白い文字も濃い色の文字も合う背景色があります。

黄色の背景と白い文字色
黄色の背景と茶色の文字

上の2つの画像の場合、好きな方を選ぶといいですね。

3.改行は区切りのいい部分で

文字が長くて一行では収まらない場合、改行しますよね。

アイキャッチは、本で例えると表紙になります。文章ではないので、区切りのいい場所で改行するのがおすすめです。

本の表紙:100倍クリックされる超Webライティング実践テク60

上の画像は本の表紙です。単語の途中で改行してないですね。

【例:区切りのいい場所で改行】

【Canva】ファイルの種類を使い分けて画像を保存する方法

文字の横幅はそろえなくていいので、区切りのいい部分で改行するのがおすすめです。

4.余白を取る

文字の上下左右に余白があると、パッと見ただけでも文字を認識しやすくなります。

【例:余白がある】

文字が中央:余白がある画像

【例:余白がない】

文字が中央:余白がない画像

読みやすいのは余白がある方ですよね。余白がないとぎゅうぎゅうというか、余裕がない感じです。

余白を取った上で、文字もなるべく大きくするのがおすすめです。

画像の端に文字を入れる場合も同じです。

【例:余白がある】

文字が端:余白がある画像

【例:余白がない】

文字が端:余白がない画像

また、Canvaでは下の画像のように、テキストボックスを動かすとガイドラインが表示されます。

Canva画像編集ガイドライン

ガイドに合わせて配置するだけなので簡単です。ぜひ活用してみてくださいね。

5.スペースを調整する

Canvaの編集画面には「スペース」という項目があります。

スペース項目では、文字間隔と行の高さが調整できます。どちらの数値も、大きすぎても小さすぎても文字が読みにくくなってしまうんです。

【例:スペースが狭すぎる】

Canvaのスペースが狭すぎる画像

窮屈な感じで読みにくいですね。

【例:スペースが広すぎる】

Canvaのスペースが広すぎる画像

間延びするというか、しまりがない印象です。

以下が標準値なので、スペースが狭すぎる・広すぎると感じたら確認してくださいね。

  • 文字間隔:0
  • 行の高さ:1.4

【例:ちょうどいいスペース】

Canvaのスペースがちょうどいい画像

広すぎず、狭すぎずのスペースがいいですね。

ポイントをおさえて画像をおしゃれに

今回は、アイキャッチに文字を追加するときのポイントをお伝えしました。

画像にテキストを追加するときのポイント

  1. 画像とフォントのイメージを合わせる
  2. 読みやすい色にする
  3. 改行は区切りのいい部分で
  4. 余白を取る
  5. スペースを調整する

文字を入れるときのひと手間で、画像はランクアップします。

ぜひ試してみてくださいね。

Canva

Canvaについては「【Canva】テンプレートで簡単!ブログのアイキャッチデザイン例5選+α」という記事でアイキャッチデザイン例をご紹介してます。

デザインの幅が広がるので、よかったら覗いてみてくださいね。

ではでは。

稼ぐ力を身につけて運命を変えよう!
ビジネスの勉強、試してみる価値あるかも。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です