ノベルティメディア
media【今すぐ実践できる!】目を引くアイキャッチをつくるコツ
![【今すぐ実践できる!】目を引くアイキャッチをつくるコツ](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2F39ceb9604cbf490e81238ee00b5adb8c%2Fmember_iino.jpg&w=64&q=75)
![【今すぐ実践できる!】目を引くアイキャッチをつくるコツ](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2F5b1240584ff74e00bada611d8be6b0bc%2F2022_03_%25E3%2581%2582%25E3%2581%2584%25E3%2581%258D%25E3%2582%2583%25E3%2581%25A3%25E3%2581%25A1%25E3%2583%2595%25E3%2582%2599%25E3%2583%25AD%25E3%2582%25AF%25E3%2582%2599_%25E3%2582%25A2%25E3%2583%25BC%25E3%2583%2588%25E3%2583%259B%25E3%2582%2599%25E3%2583%25BC%25E3%2583%2588%25E3%2582%2599-1-%25E3%2581%25AE%25E3%2582%25B3%25E3%2583%2592%25E3%2582%259A%25E3%2583%25BC-2.jpg&w=1920&q=75)
こんにちは!いいのです。
今回は、ブログやコラムのアイキャッチについて書いていこうと思います。
目を引く・ちょっとイケてる・おしゃれなアイキャッチをつくりたい!
そんな方に向けて、普段私が意識していること、実際にやっていることをまとめてみました。
初心者の方でも今すぐ実践できるポイントもありますので、ぜひ覗いていってください!
「いい感じ」にするって難しい
私は入社して、1年で200個近くアイキャッチをつくってきました。
最初はなかなか「いい感じ」にできず、時間がかかったりモヤモヤしたり。
そんな状態から、先輩デザイナーから1つ1つ丁寧なフィードバックをもらう中でなんとなく自分でコツが掴めてきたと感じています。
その「なんとなく」やっているいい感じのアイキャッチにするコツを、普段の制作を振り返りながら解説していきます。
アイキャッチ制作のコツ
アイキャッチはその名の通り、「見る人の注意を引きつけること」です。
数ある記事の中で、いかにその記事を開いてもらえるか、興味をもってもらえるかを考えてアイキャッチ画像をつくります。
①メリハリをつけよう!
まず最初にやることは、どこを目立たせるか・どこを引くかを考えることです。
例えば、この記事のタイトル
「【今すぐ実践できる!】目を引くアイキャッチをつくるコツ」の場合、
①「今すぐ実践できる」
②「目を引くアイキャッチを作るコツ」
にまず分けられます。
![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2F2823bd517b064ac9a5df4193f6b88b9c%2F2022_03_%25E3%2581%2582%25E3%2581%2584%25E3%2581%258D%25E3%2582%2583%25E3%2581%25A3%25E3%2581%25A1%25E3%2583%2595%25E3%2582%2599%25E3%2583%25AD%25E3%2582%25AF%25E3%2582%2599_%25E3%2582%25A2%25E3%2583%25BC%25E3%2583%2588%25E3%2583%259B%25E3%2582%2599%25E3%2583%25BC%25E3%2583%2588%25E3%2582%2599-1-%25E3%2581%25AE%25E3%2582%25B3%25E3%2583%2592%25E3%2582%259A%25E3%2583%25BC-5.jpg&w=1920&q=75)
次に、アイキャッチはエリアも限られているので、できるだけ文章量はコンパクトにします。
「今すぐ実践できる」を「今すぐ実践可」に
助詞の「を」を削る(あるいはフォントサイズを小さくする)
![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2F7948413770d44bdf8e207597c7735b2a%2F2022_03_%25E3%2581%2582%25E3%2581%2584%25E3%2581%258D%25E3%2582%2583%25E3%2581%25A3%25E3%2581%25A1%25E3%2583%2595%25E3%2582%2599%25E3%2583%25AD%25E3%2582%25AF%25E3%2582%2599_%25E3%2582%25A2%25E3%2583%25BC%25E3%2583%2588%25E3%2583%259B%25E3%2582%2599%25E3%2583%25BC%25E3%2583%2588%25E3%2582%2599-1-%25E3%2581%25AE%25E3%2582%25B3%25E3%2583%2592%25E3%2582%259A%25E3%2583%25BC-4.jpg&w=1920&q=75)
これはデザインによって、あった方が収まりのいいときもあるので、文字を組みながら調整してみてください。
それでも、見る人はアイキャッチ内のすべてのテキストを読んでくれるとは限りません。
重要度を考えて、メリハリをつけていきます。
「アイキャッチ」がメインワードになるので、一番大きく配置。
「目を引く!」を強調させたいので、ふきだしに入れる
「今すぐ実践可」は記事に興味を持ってくれた人に伝わればいいので、端の方に配置
![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2F5b2384085dc44ae5be4f6843dfd071d7%2F2022_03_%25E3%2581%2582%25E3%2581%2584%25E3%2581%258D%25E3%2582%2583%25E3%2581%25A3%25E3%2581%25A1%25E3%2583%2595%25E3%2582%2599%25E3%2583%25AD%25E3%2582%25AF%25E3%2582%2599_%25E3%2582%25A2%25E3%2583%25BC%25E3%2583%2588%25E3%2583%259B%25E3%2582%2599%25E3%2583%25BC%25E3%2583%2588%25E3%2582%2599-1-%25E3%2581%25AE%25E3%2582%25B3%25E3%2583%2592%25E3%2582%259A%25E3%2583%25BC-6.jpg&w=1920&q=75)
<完成!>
![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2F5b1240584ff74e00bada611d8be6b0bc%2F2022_03_%25E3%2581%2582%25E3%2581%2584%25E3%2581%258D%25E3%2582%2583%25E3%2581%25A3%25E3%2581%25A1%25E3%2583%2595%25E3%2582%2599%25E3%2583%25AD%25E3%2582%25AF%25E3%2582%2599_%25E3%2582%25A2%25E3%2583%25BC%25E3%2583%2588%25E3%2583%259B%25E3%2582%2599%25E3%2583%25BC%25E3%2583%2588%25E3%2582%2599-1-%25E3%2581%25AE%25E3%2582%25B3%25E3%2583%2592%25E3%2582%259A%25E3%2583%25BC-2.jpg&w=1920&q=75)
パッと見ただけでなんの記事か分かるのが理想です。
②前後の記事のアイキャッチから方向性を決めよう!
このノベルティのブログもそうですが、いくつも記事があるサイトのアイキャッチを作る場合、前後のアイキャッチを確認します。
記事を一覧で見たときに、同じようなカラーやレイアウトのアイキャッチが続いていると、それぞれの記事が埋もれてしまいます。
つくるアイキャッチの文章量も関係してきますが、ある程度前後の記事から、「今回はこんなレイアウト&カラーでいこう」「このレイアウトorカラーが続いているから控えよう」と考えておくと良いです。
③参考のアイキャッチを探してみよう!
まだ慣れないうちやなかなかアイデアが浮かばないときは、参考になるアイキャッチを探すと良いです。
最初のうちはまだデザインの引き出しが少ないので、プロのデザイナーが作ったアイキャッチのレイアウトやフォント、カラー配色を参考すると「いい感じ」に近づけます。(パクリすぎない用注意!)
なかなかアイデアが浮かばないとき(私もあります)も、インプットが足りていない!と思って参考を探しまくります。
私はPinterestでいいなと思ったアイキャッチをボードにまとめています。
一度ピンを保存すると、「似ているピン」やホームから自分好みのピンが表示されるようになるので、参考も見つけやすくなります。
いつか使えそうだな~と思うものもどんどん保存しておくと良いですね!
④イメージに合うフォントを選ぼう!
かっちりしたイメージ、砕けたイメージ、柔らかいイメージなどなど。
イメージによってフォントを使いわけています。
フォントによってイメージが大分変わります。
「おすすめフリーフォント」「かわいいフォント」などで検索してフォントも工夫してみましょう!
アイキャッチに使う際は、商用可能なものを選んでください。
⑤タイトルから連想してあしらいやイラストを選ぼう!
参考アイキャッチを探して、「イケてる」デザインにしようとするだけでなく、あしらいやイラストを使って記事の内容を想像しやすくしてあげると、より伝わりやすいアイキャッチになります。
例えば、「今すぐ実践できる!」部分にはスピード感の出るあしらいをつけたり、
「アイキャッチ」の部分は目立つあしらいをつけてみたり。
ワードから連想してあしらいやイラストを探してみると取り入れやすいと思います。
⑥配色は最後に考えるのがおすすめ!
使う色が決まっていない場合は、まずは色を使わず白・黒・グレーなどで仮でつくっておいて、レイアウトが定まってきてから色をつけるのをおすすめします。
なんとなく色を置きたくなってしまいますが、そうすると微妙な配色になってしまったり、途中で変えたくなってきて迷走してしまったりします。
また、Pinterestなどで探したアイキャッチの配色を参考にしたりすると、だんだん色彩感覚も身についてきて色選びも上達すると思います。
悩んだときに!いい感じになる小技
なんかもうちょっとなんだけど…
ちょっと寂しい気がする…
そんなときによくやる小技を、実際のアイキャッチを用いて紹介します!
背景に素材をもってくる
イラストを背景に入れてみたり↓
![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2F4e97b19a87c44fc1b739322eca3ad2b0%2F2022_03_%25E3%2581%25AF%25E3%2581%2597%25E3%2582%2582%25E3%2581%25A8%25E3%2581%2595%25E3%2582%2593-1_%25E3%2582%25A2%25E3%2583%25BC%25E3%2583%2588%25E3%2583%259B%25E3%2582%2599%25E3%2583%25BC%25E3%2583%2588%25E3%2582%2599-1-%25E3%2581%25AE%25E3%2582%25B3%25E3%2583%2592%25E3%2582%259A%25E3%2583%25BC-4.jpg&w=1920&q=75)
パターン素材を使ってボーダーを入れてみたり↓
![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2F814b6639cd734a5fa6a524b5c32a2ad2%2F2022_02_%25E3%2581%25AF%25E3%2581%25AA%25E3%2581%2595%25E3%2582%2593-2_%25E3%2582%25A2%25E3%2583%25BC%25E3%2583%2588%25E3%2583%259B%25E3%2582%2599%25E3%2583%25BC%25E3%2583%2588%25E3%2582%2599-1-%25E3%2581%25AE%25E3%2582%25B3%25E3%2583%2592%25E3%2582%259A%25E3%2583%25BC-2-1.jpg&w=1920&q=75)
「紙 背景」「布 背景」「かわいい 背景」などで検索して素材を探したりもします。
ふきだしやシェイプに助詞を入れる
下のように、「の」などの助詞をふきだしや丸にいれたりして動きや賑やかさを出します。
![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2F236d5130b1b64f3393c2666dd86cfe0c%2F2020.10.1-3-1024x683.jpg&w=2048&q=75)
アクセントに手書きフォントを使う
サブタイトルやアクセントに手書きフォントを使うと、メリハリやこなれ感が出ます!
![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2Fb5084d1b760a412c9ebb4ca08e3adcaa%2F2022_05_%25E3%2581%25AF%25E3%2581%25AA%25E3%2581%2595%25E3%2582%2593-1_%25E3%2582%25A2%25E3%2583%25BC%25E3%2583%2588%25E3%2583%259B%25E3%2582%2599%25E3%2583%25BC%25E3%2583%2588%25E3%2582%2599-1-%25E3%2581%25AE%25E3%2582%25B3%25E3%2583%2592%25E3%2582%259A%25E3%2583%25BC-2.jpg&w=1920&q=75)
こちらはサブタイトルに↓
![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2F03fb5d273dbf4d5e9c66ef03a39691b4%2F2022_05_%25E3%2581%25AF%25E3%2581%25AA%25E3%2581%2595%25E3%2582%2593-4-2_%25E3%2582%25A2%25E3%2583%25BC%25E3%2583%2588%25E3%2583%259B%25E3%2582%2599%25E3%2583%25BC%25E3%2583%2588%25E3%2582%2599-1-%25E3%2581%25AE%25E3%2582%25B3%25E3%2583%2592%25E3%2582%259A%25E3%2583%25BC-2.jpg&w=1920&q=75)
フチをつける
なんかスペース余ったり、寂しい、というときはフチをつけたりします。
上下にいれてみたり↓
![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2Fa79c8b1f2efd49b9a95da9eebe8a546e%2Fsplit-text-1024x640.jpg&w=2048&q=75)
左右に入れてみたり↓
![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2F123b3974110a4c928214d18be335e69b%2F2022_03_%25E3%2581%25AF%25E3%2581%25AA%25E3%2581%2595%25E3%2582%2593-3.jpg&w=1920&q=75)
全体にいれて囲ってしまうのも!
あしらいを追加
ちょっと空いた余白にふきだし線をいれたり↓
![](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F806a9cf3faa34477a12eaa88601b1d05%2F0808a273f6644320ac5371c47d6ee1b9%2F2022_03_%25E3%2581%25AF%25E3%2581%25AA%25E3%2581%2595%25E3%2582%2593-5_%25E3%2582%25A2%25E3%2583%25BC%25E3%2583%2588%25E3%2583%259B%25E3%2582%2599%25E3%2583%25BC%25E3%2583%2588%25E3%2582%2599-1-%25E3%2581%25AE%25E3%2582%25B3%25E3%2583%2592%25E3%2582%259A%25E3%2583%25BC-3.jpg&w=1920&q=75)
「シンプル あしらい」「かわいい あしらい」で検索してちょっとしたあしらいを入れるだけでにぎやかになります。
おわりに
どうでしたでしょうか??
アイキャッチ制作の参考になったら嬉しいです。
最後まで読んでいただき、ありがとうございました!!
Webプロモーション・業務改善は
ノベルティひとつで完結
はじめての依頼にも
全力でサポートさせていただきます
おすすめ記事/ PICKUP
記事カテゴリー/ CATEGORY
企業の課題はノベルティひとつで完結
ホームページ制作などのWeb制作をはじめ、
システム開発やマーケティング支援などワンストップで対応
まずはお気軽にお問い合わせください
お電話またはメールでお気軽にお問い合わせください。