千葉県船橋市のホームページ制作・マーケティングの株式会社ノベルティ

COLUMN

コラム

2022.03.10

【今すぐ実践できる!】目を引くアイキャッチをつくるコツ

飯野のか

デザイン

こんにちは!いいのです。

今回は、ブログやコラムのアイキャッチについて書いていこうと思います。

目を引く・ちょっとイケてる・おしゃれなアイキャッチをつくりたい!

そんな方に向けて、普段私が意識していること、実際にやっていることをまとめてみました。

初心者の方でも今すぐ実践できるポイントもありますので、ぜひ覗いていってください!

 

目次

「いい感じ」にするって難しい

私は入社して、1年で200個近くアイキャッチをつくってきました。

最初はなかなか「いい感じ」にできず、時間がかかったりモヤモヤしたり。

そんな状態から、先輩デザイナーから1つ1つ丁寧なフィードバックをもらう中でなんとなく自分でコツが掴めてきたと感じています。

その「なんとなく」やっているいい感じのアイキャッチにするコツを、普段の制作を振り返りながら解説していきます。

 

アイキャッチ制作のコツ

アイキャッチはその名の通り、「見る人の注意を引きつけること」です。

数ある記事の中で、いかにその記事を開いてもらえるか、興味をもってもらえるかを考えてアイキャッチ画像をつくります。

①メリハリをつけよう!

まず最初にやることは、どこを目立たせるか・どこを引くかを考えるこです。

例えば、この記事のタイトル

「【今すぐ実践できる!】目を引くアイキャッチをつくるコツ」の場合、

今すぐ実践できる

目を引くアイキャッチを作るコツ

にまず分けられます。

手順1

 

次に、アイキャッチはエリアも限られているので、できるだけ文章量はコンパクトにします。

今すぐ実践できる」を「今すぐ実践可」に

助詞の「を」を削る(あるいはフォントサイズを小さくする)

手順2

これはデザインによって、あった方が収まりのいいときもあるので、文字を組みながら調整してみてください。

 

それでも、見る人はアイキャッチ内のすべてのテキストを読んでくれるとは限りません。

重要度を考えて、メリハリをつけていきます。

「アイキャッチ」がメインワードになるので、一番大きく配置。

「目を引く!」を強調させたいので、ふきだしに入れる

「今すぐ実践可」は記事に興味を持ってくれた人に伝わればいいので、端の方に配置

手順3

 

<完成!>

【今すぐ実践できる!】目を引くアイキャッチをつくるコツ

パッと見ただけでなんの記事か分かるのが理想です。

②前後の記事のアイキャッチから方向性を決めよう!

このノベルティのブログもそうですが、いくつも記事があるサイトのアイキャッチを作る場合、前後のアイキャッチを確認します。

記事を一覧で見たときに、同じようなカラーやレイアウトのアイキャッチが続いていると、それぞれの記事が埋もれてしまいます。

つくるアイキャッチの文章量も関係してきますが、ある程度前後の記事から、「今回はこんなレイアウト&カラーでいこう」「このレイアウトorカラーが続いているから控えよう」と考えておくと良いです。

③参考のアイキャッチを探してみよう!

まだ慣れないうちやなかなかアイデアが浮かばないときは、参考になるアイキャッチを探すと良いです。

最初のうちはまだデザインの引き出しが少ないので、プロのデザイナーが作ったアイキャッチのレイアウトやフォント、カラー配色を参考すると「いい感じ」に近づけます。(パクリすぎない用注意!)

なかなかアイデアが浮かばないとき(私もあります)も、インプットが足りていない!と思って参考を探しまくります。

 

私はPinterestでいいなと思ったアイキャッチをボードにまとめています。

一度ピンを保存すると、「似ているピン」やホームから自分好みのピンが表示されるようになるので、参考も見つけやすくなります。

いつか使えそうだな~と思うものもどんどん保存しておくと良いですね!

④イメージに合うフォントを選ぼう!

かっちりしたイメージ、砕けたイメージ、柔らかいイメージなどなど。

イメージによってフォントを使いわけています。

フォントの違い

フォントによってイメージが大分変わります。

「おすすめフリーフォント」「かわいいフォント」などで検索してフォントも工夫してみましょう!

アイキャッチに使う際は、商用可能なものを選んでください。

フォント探しにおすすめなサイトはこちら

⑤タイトルから連想してあしらいやイラストを選ぼう!

参考アイキャッチを探して、「イケてる」デザインにしようとするだけでなく、あしらいやイラストを使って記事の内容を想像しやすくしてあげると、より伝わりやすいアイキャッチになります。

例えば、「今すぐ実践できる!」部分にはスピード感の出るあしらいをつけたり、

「アイキャッチ」の部分は目立つあしらいをつけてみたり。

ワードから連想してあしらいやイラストを探してみると取り入れやすいと思います。

⑥配色は最後に考えるのがおすすめ!

使う色が決まっていない場合は、まずは色を使わず白・黒・グレーなどで仮でつくっておいて、レイアウトが定まってきてから色をつけるのをおすすめします。

なんとなく色を置きたくなってしまいますが、そうすると微妙な配色になってしまったり、途中で変えたくなってきて迷走してしまったりします。

また、Pinterestなどで探したアイキャッチの配色を参考にしたりすると、だんだん色彩感覚も身についてきて色選びも上達すると思います。

 

悩んだときに!いい感じになる小技

なんかもうちょっとなんだけど…

ちょっと寂しい気がする…

そんなときによくやる小技を、実際のアイキャッチを用いて紹介します!

背景に素材をもってくる

イラストを背景に入れてみたり↓

連想したイラストを使ってわかりやすく!
連想したイラストを使ってわかりやすく!

 

パターン素材を使ってボーダーを入れてみたり↓

広報強化!のテキストを目立たせてメリハリを!
広報強化!のテキストを目立たせてメリハリを!

 

「紙 背景」「布 背景」「かわいい 背景」などで検索して素材を探したりもします。

ふきだしやシェイプに助詞を入れる

下のように、「の」などの助詞をふきだしや丸にいれたりして動きや賑やかさを出します。

スライダーを連想したデザイン
スライダーを連想したデザイン

アクセントに手書きフォントを使う

サブタイトルやアクセントに手書きフォントを使うと、メリハリやこなれ感が出ます!

手書きフォントに合わせて手書きのあしらいも入れています!
手書きフォントに合わせて手書きのあしらいも入れています!

 

こちらはサブタイトルに↓

イラストのテイストに合わせて、背景に水彩の素材を!
イラストのテイストに合わせて、背景に水彩の素材を!

フチをつける

なんかスペース余ったり、寂しい、というときはフチをつけたりします。

上下にいれてみたり↓

あしらいやフォントで疾走感をイメージ
あしらいやフォントで疾走感をイメージ

 

左右に入れてみたり↓

ネギを連想してイラストをテキストに組み込みました
ネギを連想してイラストをテキストに組み込みました

 

全体にいれて囲ってしまうのも!

あしらいを追加

ちょっと空いた余白にふきだし線をいれたり↓

背景にパターン素材をつかったり、少しず写真や背景を重ねて立体感を!
背景にパターン素材をつかったり、少しず写真や背景を重ねて立体感を!

「シンプル あしらい」「かわいい あしらい」で検索してちょっとしたあしらいを入れるだけでにぎやかになります。

 

おわりに

どうでしたでしょうか??

アイキャッチ制作の参考になったら嬉しいです。

 

最後まで読んでいただき、ありがとうございました!!

飯野のか

デザイナー

都会のOLを目指していたら、いつのまにかwebデザイナーの道へ。
デザインって難しいけどたのしい!日々アンテナを張って、
身の回りにある素敵なデザインを探しています。
來來來世は坂道アイドルになるために徳を積んでいる途中。
HOME | コラム | 【今すぐ実践できる!】目を引くアイキャッチをつくるコツ
CONTACT

お問い合わせ

お見積りの依頼やWEBに関する
お悩みがございましたら、
お電話かメールからお問い合わせください。

047-405-2227

お電話対応可能時間 平日/10:00~17:00

〒273-0005 千葉県船橋市本町5-1-1 船橋AUビル4階

船橋情報配信メディア

トコトコふなばし船橋情報配信メディア|トコトコふなばし

【船橋トコトコ大冒険メディア】として船橋の地域情報メディア、トコトコふなばしを運営。

船橋の観光スポットやイベント、グルメなど船橋の魅力を、熱く!ディープに!紹介しています。

また、船橋で活躍されている個人・企業の皆様への取材も実施しています。

船橋情報配信メディア|トコトコふなばしのとこっとちゃん

トコトコふなばしのキャラクター

とこっとちゃん

船橋に迷い込んでから船橋が気に入ってしまったトコ!

船橋を散歩しながら船橋のいいトコを紹介しているトコ。

船橋市内での取材はボクも行くトコよ~♪