【6/21〜22】年に1度の「Amazonプライムデー」開催!「買ってよかった」おすすめ商品まとめ

目を引く!ブログアイキャッチ画像を作るテクニック3つ【デザイナー歴10年の私が解説】

目を引く!ブログアイキャッチ画像を作るテクニック3つ【デザイナーが解説】 稼ぐ!デザイン
Sponsored Links

ども。グラフィックデザイナーの「さん太(@PonkotsuSanta)」です。

さん太
さん太
ブログを始めてからというもの、他の人のブログをチェックする機会が増えました。
タメになる情報を無料で公開してくれている素晴らしいブログがたくさんあり、いつも学ばせていただいています。

ただ……一つ残念に思うことが。

すごく内容の良いブログなのに、画像の「見せ方」が惜しいなぁ…と感じることがしばしばあります。

特にブログ記事の「看板」ともいえるアイキャッチ画像。

何となく画像を選んで、タイトル文字を乗せただけにしていませんか?

実は、いつもの画像に「ひと手間」加えるだけで、劇的に見栄えを良くすることができるんです。

※アイキャッチ画像とは、ブログ記事の左側などに出ている画像です。

【浪費癖バイバイ】賢く買い物する7つの戦略
資本主義の「罠」にはまらないためには、賢く買い物をする「戦略」を持つことが大切です。本記事では、浪費を防いで賢く買い物をする「7つの戦略」をご紹介します。
モニカ
モニカ
(おれはブログ書かないから関係ないかな…)

そう思っている方も、SNSのカバー写真や、プレゼン資料などでも使えるテクニックなので、覚えていて損はありません。

さん太
さん太
「デザインはよくわからない!」という方に向けて、なるべく専門用語を使わずに、実例で説明しますね!
【本記事はこんな方に役立ちます】
・少しの手間でプロっぽい画像を作りたい
・参加者の目を引くようなプレゼン資料を作りたい
・読みたくなるようなブログのアイキャッチ画像を自作したい
Sponsored Links

3つの「メリハリ」で注目度アップ

人の目を引きつけて「注目」してもらうためには、簡単にいうと「メリハリ」を利かせる必要があります。

ビジネス書を読んでいると、大事なところは太字になっていたり、マーカーが引いてあったりしますよね?

それと同じで、目立たせたい部分には「メリハリ」をつけてやります。

明るさのメリハリ

明るい背景や画像に、明るい文字を置いてしまうと、背景と文字がなじんでしまって見づらくなってしまいます。

例えば下記の場合、ショッピングに関する記事なので「女性向けを意識してパステルカラーを使おう!」と考えたとします。

すると優しい印象にはなるものの、文字色のメリハリがなくなり、文章が目に入ってきません。

パステルカラーでまとめるとメリハリが無くなってしまう

右の「After」では、文字色を暗くしてやることで、しっかり文字が見やすくなりました。

色のメリハリ

次に注意したいのが「色の使い方」です。

黒やグレーなどのモノトーンは使いやすく、他の色に合わせやすいメリットがあります。

クールな印象を与える一方で、「無機質で近寄りがたい」イメージを与えるので、使いどころには注意します。

下記の例では、「明るさのメリハリ」はきいていますが、全体的にホラーな画像になっています(汗)。
モノトーンカラーの使い所に注意する

人間は本能的に「暗いもの」よりも「明るいもの」を好む傾向があります。
そのため、特に「黒」の使い方には注意してください。
背景に真っ黒やネイビーなど「暗色」を多用すると、全体的に暗く沈んで印象を見る人に与えてしまい、コンテンツ自体にネガティブなイメージをもたれる可能性もあります。

逆に色数をむやみに増やすと、色と色がケンカして見づらくなります。

先と同じ画像で色数を変えたものがこちら。クリックしたくない毒々しさを放っていますね…。
色数をむやみに増やすと、色と色がケンカして見づらくなる

そのため、モノトーン+モノトーン以外の1色を「差し色」として使うパターンが効果的です。

差し色とは、鮮やかな色味をワンポイントで加える配色のテクニックです。
特にモノトーンを基調にしたデザインはシンプルで洗練されているイメージを出せる反面、「単調でつまらない」絵面になってしまいます。
そこに差し色を加えることで、単調さをやわらげ視聴者の「目を引く」効果を狙えます。

今回の例だと、写真の女性に「赤」と「青」の色があるので、「赤色」を差し色として使うことにしました。

また、赤が引き立つように、背景はわずかに青系のグラデーションをかけています。

スマホやパソコンの画面で見る「赤色」は、鮮やかすぎて目に優しくない強い印象を与えるので、鮮やかさを少し落としてやると落ち着いた印象にまとまります。

赤色は鮮やかさを少し落としてやると見やすくなる

文字や画像サイズのメリハリ

3つ目は、文字や画像の「大きさ」です。

下記、左側の例は「よく見かける」タイプの画像ですが、タイトルが少し長いので、要点がすぐ目に入ってきません。

文字や画像サイズのメリハリをつける

スマホの画面は小さいので、スマホでブログやWebサイトを見る方にとって、小さい文字の羅列は読みにくいです。

この場合は、要点である「7つの戦略」を強調するとメリハリがきいて目を引く画像になります。

また左の例は、人物写真が大きいので、どうしてもそちらに注意が向いてしまいます。

人は無意識に「人物の顔に注目する」習性があるためです。

そこで、文字をメインで読んでほしい場合は、人物の写真を小さくしてバランスを取ります。

Sponsored Links

見せたいポイントを強調するコツ

人が短い時間で処理できる情報には限界があります。

そのため「あれもこれも」と情報を詰め込んでしまうと、見づらい画像になってしまいます。

上手に情報を「引き算」して、見せたいポイントが引き立つように工夫しましょう。

キーワードを絞り込む

人が一瞬で認識できる文字数は、個人差がありますが大体10文字くらいと言われています。

そのため、画像に入れる文字は「キーワード」を中心にできるだけ短くします。
画像に入れる文字は「キーワード」を中心にできるだけ短くする

タイトルやネーミング。キャッチコピーの付け方についてはこちらの記事が参考になります。

印象に残る!覚えやすく「強い」ネーミングの法則&コツ
せっかく価値ある商品やサービス、サイトをつくっても「ネーミング」がパッとしないと覚えてもらえません。忘れられない「強いネーミング」をつくるテクニックとコツについて私が活用しているノウハウを紹介します。
【悪用厳禁】人の本能を刺激する「売れる」キャッチコピーの法則と作り方
難しいテクニックや言葉選びのセンスがなくても「人間の本能」を刺激して「心を動かす」コピーが書ける、法則と作り方について解説します。

下記も、記事タイトルそのままではなくてキーワードを絞り込んで強調したもの。

これだけ文字数を削っても、意味は十分伝わります。
文字数を最低限にする

モニカ
モニカ
(どこかで見たことあるようなタイトルだな…)
【家計の黒字化】毎月の収支を「必ずプラス」にする8つの原則
私が年収200万円時代から「毎月数万円ずつ」貯金できた基本の考え方をまとめました。家計が赤字の月が多い方、家計のやりくりが難しいと思う方に参考になると思います。

背景画像に文字を埋もれさせない

写真に文字を重ねるとき、そのまま文字を乗せただけでは読みづらくなります。

そんな時は、背景に半透明な四角形などを置いてやると、背景を残したまま文字が見やすくなります。
背景に半透明な四角形などを置いてやると、背景を残したまま文字が見やすくなります。

デザイン外注で失敗しない15のポイント【センスは関係なし】
今回は主にデザイナーに仕事を依頼する人向けに「デザイン外注で失敗しないポイント」を網羅的に書いていきます。「デザインは芸術的センス」だと思われがちですが、デザインはアートではないので、きちんとセオリー(基本原則)があります。逆にセオリーを押さえず私はセンスがあるから大丈夫!と信じている人ほど実際は売上に結びつかなかったりしますので要注意です。
Sponsored Links

文字(フォント)や写真選びのコツ

アイキャッチ画像の印象を大きく左右するのが「文字フォント」と写真(またはイラスト)です。

今は無料のフォント画像素材のサイトが充実していて「何を基準に選んだらいいかわからない」という方も多いと思います。

膨大ぼうだいな素材の中から、効果的なものを手早く選び出す、ちょっとしたコツをご紹介します。

フォントの選び方

フォントの種類はたくさんありすぎてどれを使っていいか迷いますが、大きく分けるとたった2つ。

「明朝体」と「ゴシック体」です。

昔、学校の美術の授業でも出てきた言葉ですね。
「明朝体」と「ゴシック体」

明朝体は、繊細さ、優美さ、品の良さ、伝統的、女性的なイメージを与えます。

ゴシック体を使うと野暮ったくなる場面も、スマートな印象にしてくれます。

明朝体は、繊細さ、優美さ、品の良さ、伝統的、女性的なイメージを与えます。

一方で、明朝体はどうしても弱さやはかなさを感じさせてしまいます。

逆にインパクトのあるデザインにしたい場合は、ゴシック体を使います。

インパクトのあるデザインにしたい場合は、ゴシック体を使います。

ゴシック体は、強さ、自信のある様子、ポップさ、モダン的、男性的なイメージを与えます。

また、同じフォントでも、文字自体の太さを変えらることで与える印象が変わってきます。

細い文字 → 繊細さ、上品さ、高級さをを感じさせる
太い文字 → インパクト、自信の強さを感じさせる

下の画像は、文字の太さを変えただけですが、受ける印象はまったく違うものになります。
文字の太さを変えただけで、受ける印象はまったく違うものになる

写真(イラスト)の選び方

次に写真やイラストの選び方です。

「アイキャッチ」というからには、なるべく目を引く画像を選びたいもの。

その時の判断基準として、「見なれない」画像や「ちょっとおもしろい」画像を選ぶのがポイント。

人はどうしても、見なれないもの、違和感を感じるものに注目してしまいます。

下の例は、左の画像でも悪くはないのですが、シュールで面白い写真を見つけたので、こちらをベースにしました。
面白い画像を使う

また、無機質な「モノ」の写真よりは、「動物や人物」が写っている写真の方が注目を集めやすくなります。
「動物や人物」が写っている写真の方が注目を集めやすい

見る人の「目を引きやすい」画像を順番に並べると以下のようになります。
①視線をこちらを向けた人物
②横を向いた人物
③後ろを向いた人物
④視線をこちらを向けた動物
⑤横や後ろを向いた動物
⑥静物(物撮り写真)
⑦風景
⑧色だけの画像(ベタ色やグラデーション)

また、シリアスなテーマは、そのまま現実感のある写真を使うとイメージが暗くなりすぎます。

そんな時は、コミカルなイラストや動物の写真と組み合わせて、悲壮感をやわらげるのも手です。

シリアスなテーマはコミカルなデザインにする

モニカ
モニカ
質のいい写真が無料でたくさん揃ってるサイトってどこかないか?

私がブログ用によく使う無料素材サイトが「pixabay」

無料サイトでありがちな「撮りっぱなし」の写真ではなく、使いやすくトリミングしたり加工されたクオリティの高い写真素材が揃っています。

海外発のサービスながら、日本語で画像検索できるのも助かります。

【pixabay:高品質なフリー画像素材】

さん太
さん太
ちなみに本記事のアイキャッチ画像も「pixabay」から拝借して、今回ご紹介したテクを使って作りました。

本記事のアイキャッチ画像

無料で使えるグラフィック作成ツールは「Canva」がおすすめ

デザイナーが主に使うグラフィック制作ツールはAdobeアドビ社のIllustratorイラストレーターPhotoshopフォトショップですが、どちらも高額。

ブログのアイキャッチ画像を作るだけであれば、無料でできるデザインツール「Canva」がおすすめです。

さん太
さん太
例えば、本ブログの画像も一部は「Canva」を使って作っています。
Canvaで作ったブログのアイキャッチの作例

Canvaで作ったブログのアイキャッチの作例

「Canva」はプロ用ツールほど凝ったグラフィックは作れませんが、上記レベルの画像であればほんの数分で作れてしまいます。

参考:無料のデザイン作成ツール「Canva」

さん太
さん太
「グラフィックデザイン」は実益を兼ねた趣味として以下の記事でも取り上げているので、「Canva」をきっかけにデザインの楽しさに触れていただけたら、デザイナーとしても嬉しいです!
【コスパ最強の趣味】一生続けられる&お金のかからない「大人の趣味」14選
30種類以上の趣味を経験してきた私が今でも続けている「コスパが最強」「やめるのがもったいない」と考える「大人の趣味」を厳選。その理由も含めてご紹介します。
Sponsored Links

【まとめ】少しの手間で目を引く「魅せる」画像は作れる

以上、「目を引く」アイキャッチ画像を作るテクニックについて、実例を混じえつつ紹介しました。

アイキャッチ画像はプロに外注すると何千円もかかってしまうので、自分で少しでも良いものが作れると助かりますよね。

今回のコツを実践するだけで、今までのアイキャッチ画像が見違えるものになると思います。

ブログを見ていると、何となく写真を選んで文字を置いているな、というアイキャッチがたくさんあります。

つまり「少しの手間」をかけるだけで、その他大勢から抜きん出て「目を引く」画像になるのです。

さん太
さん太
文章を書くのに疲れたら、ぜひ「息抜き」としても楽しみながら作ってみてくださいね!
タイトルとURLをコピーしました