おしゃれなアイキャッチ画像の作り方&デザインのコツ8つ

おしゃれなアイキャッチ画像の作り方

今回は、アイキャッチ画像の作り方を解説します。デザインのコツもまとめているので、ブログやWebメディアを運営している方はぜひ参考にしてみてください。

1. アイキャッチ画像のデザインツールは?

アイキャッチ画像を作るためのツールはたくさんあります。

photoshop Photoshop

Photoshop(フォトショップ)を使えば写真をアーティスティックに加工したり、手描きのイラストを取り入れたりなどと、多様な表現ができます。しかし、有料です(参考)。また、ブログのアイキャッチ画像は基本的にイラストや写真をレイアウトをするだけで十分かと思います。購入してまで、フォトショップを使う必要はないでしょう。

illustrator Illustrator

当サイトでのアイキャッチ画像制作に使っているのはIllustrator(イラストレーター)です。フォトショップよりも、イラストレーターの方がアイキャッチ画像を作るような、レイアウト作業に向いています。ただし有料です。


canva Canva

個人的にいちばんおすすめなのがCanvaです。無料の範囲で、十分におしゃれなアイキャッチ画像を作ることができます。ソフトをインストールする必要もありません(Web上で使えます)。操作方法も簡単です。

サルワカくんの顔(通常)
サルワカくん

というわけで、後ほどCanvaを使ってアイキャッチ画像を作る方法を解説していきます。

Canvaに登録をしよう

Canvaを使う方は、会員登録をして基本的な使い方もざっくりと押さえておきましょう。こちらの記事を参考にして頂ければと思います。

2. アイキャッチ画像のデザインのコツ

作り方を解説する前に作るときの「コツ」や「心構え」をまとめておきます。

2-1. 美しい写真を使う

アイキャッチ画像に写真を用いる場合には、写真の質にこだわりましょう。

美しい写真を使う

インパクトが無く、何を表しているのか分かりづらい写真は使わないようにしましょう。

美しい写真を使う

写真はできる限り、美しいものを選びます。これだけで印象はガラッと変わります。

写真はどこで探す?

unsplash

美しい写真を探すならUnsplashがおすすめです。無料かつ商用利用も可能な最強の写真素材サイトです。

2-2. シンプルな写真の方が文字をのせやすい

明るい部分と暗い部分の差が激しい、複雑な写真を使うと文字をのせたときに見にくくなります。

複雑な写真は使わない

色の変化が激しいため、文字をのせても一部が見えづらくなってしまいます。

Fafa 6

シンプルな写真を選んだ方が文字はのせやすく、見た目もスッキリします。文字をどこに入れられるかを、考えた上で写真を選びましょう。

2-3. 文字を目立たせる工夫をする

それでも、複雑な写真を使いたいときには一工夫を加えましょう。

背景写真を暗くする

背景を暗くする

この例では、背景の写真を暗くすることで白文字を強調しています。また、太字にすると埋もれにくくなります。

文字を縁取り

枠線を使う

文字の縁取りをするのも写真を埋もれさせないための1つの手段です。ただし縁取りをすると「シンプルさ」や「スマートさ」は失われるので注意しましょう。

文字の背後を塗りつぶす

文字の背後に色を塗る

文字の背後に色をつけるのも良いでしょう。ポイントは、写真の色味に近い色で塗ることです(馴染みやすくなります)。ただし、写真が大きく隠れてしまうので写真を活かしたいときにはあまりおすすめできません。

2-4. おしゃれなアイコンを使ってみる

アイコンを使ってみる

制作時間1分のアイキャッチ画像です。背景に色を塗って、文字とアイコンをのせただけです。きれいなアイコンを使うと、それだけで良い感じになるんですよね。

なお、この例のアイコンはフリー素材サイトの「FLAT ICON DESIGN」のものを使いました。アイコンを探すときには、こちらの記事で紹介しているサイトを活用するのがおすすめです。

レイアウトに気をつける

あまり良くない例

なお、レイアウトのバランスが悪いと、いくら良いアイコンを使っても台無しになってしまうので注意しましょう。

きれいに整えて並べるのが大切です。また、文字やアイコンなどのパーツどうしの間にはある程度スキマを開けるようにしましょう。

2-5. おしゃれなイラスト素材を使ってみる

イラストを使った例

おしゃれなイラストをのせるのも良いかと思います。こちらは並べただけですが、良い素材を使うとそれなりに良く見えるものです。

イラストだけをのせる例

もはやイラストだけで、文字を入れなくても良いかもしれませんね。どちらにせよ、アイキャッチ画像はタイトルと一緒に表示されるわけなので。

背景に円をつけてみる

物足りない場合には、イラストの背後にちょっと色を変えた円をのせるのも簡単にできる1つの表現かと思います。

なお、無料で使えるハイクオリティなイラスト素材は、こちらの記事でまとめています。

2-6. 色の使い方に気をつける

色の使い方に気をつける

文字色や背景色の選び方を間違えると、どれだけ良い素材とレイアウトであっても台無しになってしまいます。

おしゃれなイラストを使う

違和感のない色の選び方をしましょう。イラストの一部に色を合わせると、よく馴染んだりします。

原色を使いこなすのは難しい

なお、原色に近い色(絵の具の「青」とか「赤」みたいな色)を使うのはなかなか難易度が高かったりします。慣れないうちは、控えめな色を選ぶのが良いでしょう。

色を使いすぎない

たくさんの種類の色を使うと統一感のない印象となってしまいます。使用する色数は多くなりすぎないようにしましょう。

こちらのページで、コピペで使える配色パターンをまとめています。よかったら参考にしてみてくださいませ。

2-7. 文字をデザイン要素として使ってみる

写真・アイコン・イラストなどを使わなくても、文字だけでインパクトのあるアイキャッチ画像を作ることもできます。

文字を使う

例えば手書きフォントを大きく使うとインパクトのあるデザインになります。英語だとフォント種類がたくさんあって楽だったりします。

和風フォントを使う

日本語だと渋いフォントを使うと、日本語の醍醐味を活かしつつ、インパクトを出すことができます(「修造」に使っているのは青柳隷書しもというフリーフォントです)。

なお、手書きにする文字は長くしすぎないようにしましょう。一部の言葉をどかんと見せる…というイメージです。文字のデザイン(タイポグラフィ)については、こちらの記事で詳しく解説しています。

2-8. 画像のサイズに気をつける

画像サイズに注意

FacebookやTwitterで記事がシェアされるときに、アイキャッチ画像の一部がサイズ調整のために自動で切り抜かれる(トリミング)ことがあります。このように文字やイラストの一部が切れてしまったりするわけですね。

正方形にトリミング

また、正方形に自動でトリミングされて表示されることもあります。ブログ内の関連記事なんかでも自動で正方形に調整される…ということはよくあるかと思います。

できれば、長方形・正方形どちらに自動トリミングされても、大切なパーツが切れてしまわないようにレイアウトしましょう。

画像サイズに注意

おすすめは、画像サイズを横長の長方形にすること。また、正方形におさまるようにアイコンや文字を配置することです。
上と下ギリギリには見せたいものを配置しないにしましょう。

アイキャッチ画像チェッカーでチェック

SNSでシェアされたときなどに「アイキャッチ画像がどのようなサイズで、どのように表示されるか」をまとめてチェックできるツールを作りました。

アイキャッチ画像チェッカー

画像を選ぶとFacebookやTwitter、はてなブックマークなどでシェアされたときの表示を確認できます。アイキャッチ画像制作時には、ぜひご活用くださいませ。

3. ブログ向けアイキャッチ画像の作り方例(Canva)

それでは、ここからCanvaを使ったアイキャッチ画像の作り方例を解説していきます。とくにCanvaでしか出来ないような特別な操作はしないので、他のツールでも同じように作成できるかと思います。

サルワカくんの顔(通常)
サルワカくん

Canvaをはじめて使う方は、Canvaの使い方に一度ざっと目を通しておくことをおすすめします。

手順1:テンプレートを選ぶ

テンプレート一覧

Canvaにはテンプレート一覧ページなるものがあります(2017年7月時点では英語未対応)。ここからアイキャッチ画像作成に使えそうなにテンプレートを探していきましょう。

今回は下のウサギがかわいいテンプレートを使うことにします。色合いも目に優しくて良い感じ。[Edit this template]をクリックすると、編集が開始されます。

edit this template

編集画面が開く

編集画面が開きました。ここから、フォントや色合いを変えたり、アイコンなどを挿入していきましょう。

手順2:テキストを変える

文字をダブルクリック

まずはテキストを変えましょう。変えたい文をダブルクリックします。

文字を変える

編集モードになるので、好きな文章を入力します。
ところが日本語を入力すると、ものすごく味気ない文字になってしまいました。

サルワカくんの顔(通常)
サルワカくん

これは使用中のフォント種類が日本語には対応していないためです。これでは困るので日本語のフォントを選びましょう。

文字の設定

テキスト編集モードの際に表示される上部バーで、文字のもろもろの設定ができます。

使いたいフォントを選ぶ

フォント一覧のうち、右側に「文字もじモジ」と表示されているのが日本語フォントです。今回は「Rounded M+ Heavy」を選んでみます。

フォントが変わった

さきほどと比べるとグッとそれらしいテキストになりました。かわいさを出したいときには、太めのフォントが合いますね。フォント選びはとても大事。

下のテキストも編集して色を変える

同じ要領で下のテキストも変えます。フォントはさきほどと同じ。色は背景色に近づけ、サイズを少し大きめにしました。

手順3:不要なテキストを消す

ジャマなテキストを消す

このあたりの小さめのテキストは、このままだとSNSでシェアされたときにはみ出てしまいそうですし、消してしまいましょう。クリックして…

ゴミ箱に入れる

右上のゴミ箱マークをクリックします。これで選択したテキストが削除されます。

テキストが消えた

すっきりとしました。ただちょっと物足りないので、吹き出しを挿入して、このリスちゃんに喋らせてみましょう。

手順4:吹き出しを挿入してみる

使いたい吹き出しを選ぶ

今回は、吹き出し素材サイト「吹き出しデザイン」から使えそうな吹き出し画像を探すことにします。背景が透明なPNG形式でダウンロードしましょう。

吹き出し画像をアップロード

Canvaの編集画面の左側の①[アップデート]タブから②[画像をアップロード]をクリックし画像を選びます。
一覧に追加されるので、③挿入したい画像をクリックします。

吹き出しを背後に持ってくる

画像を背後に持ってくる

吹き出しが前面にデカデカと配置されて文字が後ろに隠れてしまいました。吹き出しを背後に持ってくるため[配置][背面に移動]を連打します。

余分な塗りを消す

吹き出しがなじんだ

リスや文字の背後の吹き出しが配置されたものの、背景色とかぶって目立ちません。そこで薄い塗りを消してしまいましょう

背景の塗りが消えた

背景の塗りが消えて良い感じになりました。

レイアウトを整える

レイアウトを整えます。これで完成でも良いのですが、何となく「なぜただのリスが喋ってるの?」という感じなので、「リスがアイキャッチ画像を作った感」を出してみましょう。

手順5:ブラシのアイコンを追加

ブラシのアイコンをのせる

さきほども紹介したFLAT ICON DESIGNでブラシのアイコンをダウンロードします。背景が透明なPNG形式を選びましょう。

完成したアイキャッチ画像

さきほどと同じ手順でCanvaに画像を挿入し、リスの手にあたりに配置してみます。ちょっと手のあたりに持ってる感がありませんが、まぁ良しとします。きっとそこまで細かいところは見ないでしょう。

手順6:完成した画像をダウンロード

画像ファイルを保存

アイキャッチ画像が出来上がったらダウンロードします。画面上部の①[ダウンロード]を選び、②ファイルの種類はPNGにして③[ダウンロード]をクリックします。これでダウンロードが開始されます。

ファイル形式について

今回の例のような写真が使われていない画像の場合には、PNG形式を選ぶとボヤけにくくなりおすすめです。逆に写真をのせる場合にはPNGを選ぶとファイルが重くなりすぎてしまうので、JPEGにするのがおすすめです。こちらの記事の冒頭で、それぞれの形式の特徴をまとめています。

PNGで保存するときのテクニック

PNGを選んだ場合、テンプレートによっては小さい画像サイズでダウンロードされてしまうときがあります。そんなときは、一旦PDFで保存して、PDFtoPNGでPNG画像に変換すると大きめの画像サイズで保存することができます。

4. アイキャッチ画像の表示をチェック

アイキャッチ画像サイズチェッカーでSNSでシェアされたときに、どのように表示されるのかをチェックしてみます。

アイキャッチ画像サイズチェッカー

こちらはTwitterの場合。吹き出しの上側が切れてしまいますが、このくらいなら許容範囲ということで。

中途半端に切れてしまうようであれば、Canvaに戻って画像を再調整しましょう。

5. ブログ記事を重くしないために画像を圧縮しよう

PNG画像の場合、圧縮するとファイルのサイズをグッと小さくできます。CompressPNG(無料・登録不要)を使うと、サクッと圧縮ができるのでおすすめです。

サルワカくんの顔(喜)
サルワカくん

今回の場合、156KBから91.5KBになりました。41%の容量ダウンです。

最後に

というわけでアイキャッチ画像の完成です。作り方は人それぞれかと思いますが、少しでも参考になれば幸いです。

こちらの記事もどうぞ


サルワカ