こんにちは。フルバランスの安恵です。
ブログやWebサイトの記事のアイキャッチ画像は読者にとって記事の印象を決める要素のひとつです。しかし、いざアイキャッチ画像を作ろうとすると、どんなアイキャッチを作ればよいのか悩む方も多いのではないでしょうか。
そこで、今回は初心者でも簡単に読者に印象づけることのできるアイキャッチ画像を制作するポイントをご紹介します!

アイキャッチとは

アイキャッチとは、「目をひきつけるもの」という意味で、Webサイトやブログで読者の注意を引く為に使う記事の顔となる画像のことを「アイキャッチ画像」といいます。
読者に興味を持ってもらえるようなアイキャッチ画像を置くことで記事を読んでもらいやすくなるので、ブログを書く際にはアイキャッチ画像を設定しましょう。

画像作成のためのソフトの選び

アイキャッチ画像を制作するためには写真やイラストの加工や、文字の装飾が必要になります。ここではPhotoshopとIllustratorを使う方法で説明します。(なおこれらのソフトは有料です)

Photoshopは写真の補正や加工が出来ます。
自分で撮影した写真やフリー素材の画像を使用して好みのデザインに色彩や明度を調節することが可能です。

Illustratorはロゴやアイコン、線、イラストの作成やテキストの編集が出来ます。
文字に影や縁取りができるので、目立たせたい文字の装飾に向いています。
図形や描画のレイアウトするならIllustratorが向いています。

作りたいイメージにあったソフトを選びましょう。

手書きラフイメージの作成

ソフトを選んだらラフを書いてみましょう。

実際のデザインデータの作成に入る前に手書きのラフを描いてみましょう。大まかなイメージを手描きすることでアイディアが整理され、文字の大きさや写真の使い方の参考になります。この作業によってレイアウトのイメージがはっきり見えてくるでしょう。

写真・イラスト素材集め

ラフ画像のイメージがついたら、次は素材集めが必要です。
素材には自分で撮影した写真や描いたイラストを使用するのもいいでしょう。
しかし、全て自分で用意しなくとも無料で好みの素材を見つけることができます。
今回はアイキャッチに使用できるフリー素材サイトをご紹介いたします。

写真フリー素材

PAKUTASO

高画質、高解像度の写真を無料で配布してる写真素材サイトです。
素材の種類が豊富で自然や建物・町並み・食べ物の素材など一通りの素材が揃ってます。会員登録も不要で、無料で利用することができます。

写真AC

ビジネスで使われる写真素材が多いのが特徴です。
写真素材のダウンロードには無料の会員登録が必要となります。また、無料会員の場合は待ち時間やダウンロード数の制限、検索の制限などが課されています。
これらの制限は有料会員に登録することによって解除出来ます。

Pixabay

160万枚以上もの高クオリティの写真が揃っており、カテゴリーごとに検索できます。
筆者の一番おすすめの画像素材サイトです。
会員登録も不要で、無料で利用することができます。

O-dan

海外の無料写真素材サイトです。世界中の無料写真素材を検索してその中から理想の一枚を探すことができます。
日本語で入力した検索ワードを自動的に英語解釈してくれる機能があり非常に便利です。
会員登録も不要で、無料で利用することができます。

イラストフリー素材

イラストAC

他のサイトと比べて素材数が多いのがイラストACです。
イラストのタッチも様々で目的に合ったイラストが見つかるはずです。
背景や装飾用なども配布してあります。
ダウンロードには無料の会員登録が必要です。

いらすとや

季節のイベント・動物・子供などのかわいいイラストがたくさん見つかるフリー素材サイトです。

シルエットデザイン

今、流行しているフラットなデザインや吹き出し、リボンなどの装飾も豊富に揃ってます。検索したらどれもオシャレで使いやすいデザインばかりです。

Linustock

線のみでモノクロのとにかくシンプルでオシャレなイラストばかりです。
「加工しやすい」「使いやすい」「見つけやすい」を追求して生まれたサイトです。

たくさんあるフリー素材の中から、自分がデザインしたイメージに近い素材を探してみましょう。

初心者は、ここを工夫すべき!

画像素材のトリミング(注目したい部分の切り取り)

画像素材から、記事のタイトルのイメージから連想できる部分を切り抜き、見せたい箇所を強調します。これにより、ただ素材を置いたような素人感が減り、インパクトの強いアイキャッチが作れます。

例えば、こちらのひまわりの写真。
写真全体を使うのではなく、ひまわりの花の部分だけを切り抜くことで、夏らしいアイキャッチを作るときにデザインのワンポイントとして使うことができるようになります。


このように自分の使いたい部だけ綺麗に切り抜くことが出来ます。

メインメッセージにテキスト加工をする

タイトル文字を大きくする、枠線をひく、といった装飾して、強弱をつけてキーワードを目立たせましょう。
強調したい単語は大きく、助詞は小さくなど、表現したい事の重みに合わせて、文字のサイズや、加工を調整しましょう。

線をひいたり、四角形で囲ったりすることで、文字に意識をむけることができます。

イメージに合わせた配色の選定

無作為に選ぶのではなく、タイトルや記事の趣旨に合った色を選ぶようにしましょう。
その時に、なるべく原色を使わないようにしましょう。

原色は幼稚なイメージやキツイ印象を与えてしまいます。


https://emiki73.com/blog-eyecatch-6060

上のサイトのアイキャッチのように色彩を工夫することで、優しい印象を与えてとても見やすくなります。
原色は目をひきやすい色なのでポイントとして使用するか、彩度を落として見やすく調整しましょう。

まとめ

アイキャッチで読者の興味を得ることができれば、記事を読んでもらえる可能性が高くなります。
記事の内容を写真やイラストを使って解りやすく表現し、文字や装飾に配色を工夫してキーワードを目立たせるのがポイントです。
これからアイキャッチ作りをする方は是非参考にしてみてください。

この記事を書いた人

安恵 綾子
安恵 綾子
Webデザイナー
IllustratorとPhotoshopのスキルを上げるために勉強中。
音楽鑑賞と散歩が趣味です。