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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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