【②背景編】もう迷わない!アイキャッチ画像に使用する「背景画像」の選定基準!【らくらくデザイン講座】

アイキャッチ画像 背景 写真 選び方
初心者ブロガー

ブログのアイキャッチ画像を作る際に、、、

後ろの背景画像はどういったものを使えばいいですか?

あと、文字が見えにくくなっちゃった時は、どう対処すべきですか?

 

 

『らくらくデザイン講座』にようこそ!

年目ブロガーの よぴ です(‘◇’)ゞ

講師として、当記事で解説致します。

 

本日のテーマは「背景画像の選定基準+文字を見やすくする小技」。

 

アイキャッチ画像を作る上で、

一番最初に行う作業が「背景写真の選定」

ここをミスっちゃうと、いっさいがっさいが台無しに。

 

そこで当記事では、、、

 

・どんな背景写真を選ぶべきか

・迷ったときに使える「考え方」

・文字を見やすくする「施し方」

 

にフォーカスしてしくフル伝授していきます!

 

 

当記事がオススメな人

・最近ブログを始めた初心者の方

・背景写真の選び方が分からない方

・アイキャッチ画像を自作してみたい方

 

 

よぴ

当記事および当講座はデザイン系の情報商品にて、

80件以上の販売実績がある筆者が書いています!

 

 

☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

 

当記事は、『らくらくデザイン講座』の一部になります。

全体の記事(ブクマ推奨)はコチラ!

↓ ↓ ↓

【無料講座】初心者OK!すぐ出来るアイキャッチ画像の作り方【Canva】

前回の講座記事はコチラ!

↓ ↓ ↓

【①準備編】アイキャッチ画像作成に必須!揃えたいオススメ無料Webツール6選!【らくらくデザイン講座】

 

☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

 

もう迷わない!アイキャッチ画像に使用する「背景画像」の選定基準!

アイキャッチ画像 背景 写真 選び方

 

それでは、、、

 

「背景画像の選定基準」

「迷った時の立ち戻り方」

「文字の可視性の上げ方」

 

を順繰りに見ていきます!

 

当記事で背景をマスター!

1.背景画像の選定基準

2.迷った時の立ち戻り方

3.文字の可視性の上げ方

 

アイキャッチ画像を、、、

「0から」製作したい方は、、、

まずは上記のつを覚えてしまいましょう!

 

以下、一つ一つサラッと解説していきます。

 

前提ッ

当記事、および当講座では、作成ツールCanva(キャンバ)を推奨しています。

無料版・有料版とありますが、まだ登録していない方は「無料版」にINしてください。

※ちなみに、講師の僕は「有料版」を愛用中&激推奨しています。その理由は記事の最後で!

 

 

1.背景画像の選定基準

 

ズバリ、どういった背景を選べいいでしょうか?

と画像デザインの初心者にわれるとしたら、

僕は迷わずにこのようにえるでしょう。

 

 

よぴ

出来うるかぎり、「ごちゃごちゃしてない写真」を選んでください。

 

 

なぜなら、「文字入れ」がしにくくなるから。

基本、アイキャッチ画像には「文字入れ」を行いますが……。

主従の関係で言うと、文字 > 背景 であると断言しても構いません。

 

「文字入れがしにくくなる」=「文字が映えづらい(見えづらい)」。

ということは、どうしても 背景 > 文字 の主従関係になってしまうんですね。

これから自分の渾身の〈記事〉や〈動画〉を見てもらいたいときに、それでは本末転倒。

 

なので、、、

 

 

大鉄則

★文字やアイコンが主役

→背景写真は脇役程度にとどめる。

→ごちゃごちゃしたものは選ばない。

 

 

この考え方をインストールしましょう。

 

では、「ごちゃごちゃしている写真」とはどんな画像か。

例題として、以下の画像のようなものだと捉えてください。

※『Canva』内にある画像で「カフェ」と検索してみました。

 

 

 

アイキャッチ画像 作り方

画面のほぼすべてを「物体」で占有してしまっています。。。

アイキャッチ画像 作り方

店構え的にはイイ感じですが、色味などごちゃごちゃしすぎ。。。

 

 

 

反対に「ごちゃごちゃしてない写真」は、というと、、、

 

 

 

アイキャッチ画像 背景 写真 選び方

左側のスペースが大きく空いています!

アイキャッチ画像 背景 写真 選び方

内観の写真ですが、かなりスッキリしています!

 

 

 

前者と後者の画像。

どちらが文字をれやすいか。

これはもう、一目瞭然ですよね?

 

というわけなので、画像デザインの初心者は、、、

後者のような「スッキリした背景写真」を選んでください。

あくまでも、〈背景画像〉は脇役なので、主張させすぎないように!

 

 

2.迷った時の立ち戻り方

 

とはいえ、、、

「検索した画像がどれもごちゃごちゃ……。」

といったパターンも、には出てくると思います。

 

どれもごちゃごちゃしてしまう場合は、、、

とにかく「自然系」の画像にしておきましょう。

「自然系」の背景画像は極めてシンプルだからです。

 

また、たとえ、どんなテーマの記事や動画であっても、、、

「自然系」であれば 不自然になるということはありません。自然だけに。

ここで、先ほどの〈主役は文字〉という大鉄則な考え方を思い出してください。

 

そして、「自然系」の背景画像とは、、、

 

 

「自然系」のKW

・山

・川

・海

・森

・空

・星

 

 

いちおう、『Canva』内にある画像を表示しておきます。

 

 

 

アイキャッチ画像 背景 写真 選び方

アイキャッチ画像 背景 写真 選び方

アイキャッチ画像 背景 写真 選び方

アイキャッチ画像 背景 写真 選び方

アイキャッチ画像 背景 写真 選び方

アイキャッチ画像 背景 写真 選び方

 

 

 

また、読者や視聴者の心理的にも、、、

「自然系」の写真をがる人など ほぼほぼいません。

変な写真や謎のこだわりをかまして 滑っちゃうよりは大分マシ。

 

というわけで、「迷ったら自然系」をチョイスしましょう!

 

 

3.文字の可視性の上げ方

 

さいごに、入れる文字を「見やすくする方法」。

「主役は文字」が大鉄則なので、見やすくするのも重要。

※専門用語的に〈可視性〉〈可読性〉とも言ったりします。

 

まずは、以下の画像をご覧ください。

 

 

 

アイキャッチ画像 背景 写真 選び方

背景画像が「明るい」時に「白文字」を使ったパターン。

アイキャッチ画像 背景 写真 選び方

背景画像が「暗い」時に「黒文字」を使ったパターン。

 

 

 

続いて、以下の画像も。

 

 

 

アイキャッチ画像 背景 写真 選び方

背景画像が「明るい」時に「黒文字」を使ったパターン。

アイキャッチ画像 背景 写真 選び方

背景画像が「暗い」時に「白文字」を使ったパターン。

 

 

 

どちらがやすかったですか?

圧倒的に後者でしたよね。

理由があります。

 

 

文字を見やすくするには?

★背景写真の明暗と〈反対〉の文字色にする

→背景が暗めなら、「白文字」をチョイス。

→背景が明るめなら、「黒文字」をチョイス。

 

 

では、「どうしても逆転させたくないとき」はどうでしょうか?

たとえば、〈明るい背景〉〈白系統の文字色〉を使いたい場合など。

じつは、こういった際にも「文字を見やすくするテクニック」は存在します。

 

 

 

アイキャッチ画像 背景 写真 選び方

背景画像の「明度」をいじって、明るい背景をウンと暗くするパターン。

アイキャッチ画像 背景 写真 選び方

背景画像の「明度」はいじらずに、文字の下に「反対色の図形」を敷くパターン。

 

 

 

 

文字色を逆転させたくない時

パターン①:背景画像の「明度」を下げる。

パターン②:文字下に「反対色図形」を敷く。

 

操作ッ

パターン①の場合、『Canva』側での操作方法は、、、

背景画像をクリック→「画像を編集」→「明るさ」をマイナスにする。

 

パターン②の場合、『Canva』側での操作方法は、、、

左バーの「素材」→「線と図形」→正方形を選択→引き延ばして暗色にする。

 

※『Canva』のくわしい操作方法については、当講座の最終講義(=卒業式)でレクチャーします。

 

 

【まとめ】本日の講座内容のおさらい

 

ということで、本日の講座は以上です。

【背景編】ということで、ぜひ、今日の内容をインストしていってくださいね。

忘れないように、記事中に出てきた【ノウハウ】や【テクニック】をもう一度おさらいしましょう。

 

 

よぴ

背景画像は、出来うるかぎり、「ごちゃごちゃしてない写真」を選んでください。

 

大鉄則

★文字やアイコンが主役

→背景写真は脇役程度にとどめる。

→ごちゃごちゃしたものは選ばない。

 

迷ったら「自然系」

・山

・川

・海

・森

・空

・星

 

文字を見やすくするには?

★背景写真の明暗と〈反対〉の文字色にする

→背景が暗めなら、「白文字」をチョイス。

→背景が明るめなら、「黒文字」をチョイス。

 

文字色を逆転させたくない時

パターン①:背景画像の「明度」を下げる。

パターン②:文字下に「反対色図形」を敷く。

 

操作ッ

パターン①の場合、『Canva』側での操作方法は、、、

背景画像をクリック→「画像を編集」→「明るさ」をマイナスにする。

 

パターン②の場合、『Canva』側での操作方法は、、、

左バーの「素材」→「線と図形」→正方形を選択→引き延ばして暗色にする。

 

※『Canva』のくわしい操作方法については、当講座の最終講義(=卒業式)でレクチャーします。

 

 

上記の内容を活かして、アイキャッチ画像を自作してみてください♪

 

 

 

【無料キャンペーン中!】Canva Proに課金すればオールインワンで使えます!

アイキャッチ画像 無料ツール おすすめ

 

ここまで「背景写真」の〈選定基準〉を見てきましたが、、、

 

無料版Canvaを使う人

イイ感じの「写真」を見つけたけど、王冠マークで「👑プロ」って表示されます……。

せっかく見つけたのに、使いたい場合は「有料」になっちゃうんすね……。

 

と、がゆい思いをした方もいると思います。

そういったときは、、、前回の講座記事【①準備編】で紹介した、、、

『O-DAN(オーダン)』ぱくたそ(PAKUTASO)で検索して引っ張ってきましょう。

 

初心者の場合、まずは『Canva』『O-DAN』『ぱくたそ』を横断してください。

「完全無料」で行く場合なら、このサイトをフル活用すれば、なんとかなりますので。

僕も、期は「完全無料」にこだわっていたので、Canvaを飛び出してO-DANでしてましたよ笑

 

まあ、ぶっちゃけ。無料に拘泥すると……。

かなりメンドクサイし、時間もかかりますねorz

画像デザインをちゃんとやろうとすればするほど、に。

 

なので、どうしても「効率化」したい場合は、、、

奥の手として、『Canva Pro』にアップグレードさせましょう。

月額1500円を課金すると、無料版では使えなかった「有料部分」がフル開放されます。

 

 

『Canva Pro』の凄いところ

◎使用できる「全」素材が1億点以上

◎61万点以上のおしゃれテンプレート

◎写真背景をワンクリックで透過できる機能

◎作成画像をワンクリックでサイズ変更できる機能

◎5人まで共有して使用できるのでチーム利用も可

◎フォルダ機能が無限解放されるので「超」効率化

 

 

その他、細かい機能はほどあります!

年近く課金しているですら使いきれないほどに……。

断言してもいいですが、もう無料版Canvaには「絶対に」戻しません。

 

 

よぴ

素材面でも機能面でも、ものすっごくなんです。

実際に、現在のデザインは『Canva』だけでってますからね。

最初こそ、「月1500円はちょい高いゾ」と敬遠してましたが、マジ情弱でした笑

 

 

30日間の無料トライアル期間がありますので、

ぜひ一度、『Canva Pro』を試してみてください。

※もし使ってみて微妙なら、期間中に解約しましょう。

 

 

\30日間無料トライアル中!/

 

 

 

【無料講座】初心者OK!すぐ出来るアイキャッチ画像の作り方【Canva】

ブログ アイキャッチ画像 作り方 Canva

 

はい、お疲れ様でした。

当記事はこれで以上となりますが、、、

【らくらくデザイン講座】はまだまだ続きます(‘◇’)ゞ

 

「ブロガー仕様のアイキャッチ画像を作れるようになりたい」

 

って方は、次回の講座記事へとお進みください♪

回の講座記事で、最後の方には スペシャルな〈卒業記念品〉も!

順番に読んでいくと、、、 最終的にはアイキャッチ画像を作れるようになりますよ。

 

 

所要時間ッ

全記事の読了で30分くらい、

1画像の作成で30分くらい、

計1時間が目安のミニ講座です。

 

 

☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

 

当記事は、『らくらくデザイン講座』の一部になります。

全体の記事(ブクマ推奨)はコチラ!

↓ ↓ ↓

【無料講座】初心者OK!すぐ出来るアイキャッチ画像の作り方【Canva】

次回の講座記事はコチラ!

↓ ↓ ↓

【③構図編】1パターンだけ!アイキャッチ画像の「文字組み」はコレだけ覚えればOK!【らくらくデザイン講座】

 

☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

よぴ 公式LINE 友達登録

【募集中】いっしょに自己アプデしたい方は「公式LINE」までどうぞ!

 

悪習慣を断ち、良習慣を育てる。

お互いにお互いをアップデートしていける場所を目指して。

 

\ 自分にコミットしようッ! /

 

 

よぴ 応援 支援 ネットショッピング

【カンタン】お買い物ついでに僕を応援してください!!!

 

楽天やAmazonでお買い物する際に、、、

カンタンに「募金的支援」ができちゃいます♪

 

\ いつもありがとうございますッ! /