「アイキャッチ」は記事の顔。
ブログトップの一覧表示はもちろん、ツイッターなどSNSからの流入の際にもとっても大事ですよね。
当ブログ「エンくら」はよく外観を褒めていただくのですが、アイキャッチもブログの外観の一部だと思っています。
今回は、スクロールしたときに目に留まり、サイトの外観にも合う、おしゃれで簡単なアイキャッチの作り方について解説します。
アイキャッチとは…ブログ記事のトップ画像のこと
おなじみCanvaを使用して作っていきますよ!
- ブログ初心者
- ブログをおしゃれにしたい人
- Canvaの基本的な操作方法が知りたい人
- アイキャッチを作るのに時間がかかる人
おしゃれブログの基本は「統一感」
当ブログ「エンくら」では、カテゴリーごとにアイキャッチを変えていますが、統一感は損なわないようにしています。
カテゴリーごとにアイキャッチを変えているのは、雑記ブログという特性上、いろんな方が訪れることが想定されるから。
自分の読みたいカテゴリーをすぐに判断でき、直感的にブログを操作できるようにしています。
統一感を出しているのは、ブログの外観をおしゃれで落ち着いた印象にするためです。
- サイトに使われている配色を使う
- カテゴリーごとに色の割合を変える
- イラストの配色をできるだけ揃える
山吹色をメインに紙吹雪のような装飾でシンプルに。
![](https://enkura.net/wp-content/uploads/2021/09/8-1024x536.png)
空と大地をイメージ。直線を使うけど柔らかい印象を持たれるようにしました。
![](https://enkura.net/wp-content/uploads/2021/11/2-1024x536.png)
部屋(柱)とノートPCをイメージ。
配色は「暮らし」と似ているのですが、フォントを変更して差別化しています。
![](https://enkura.net/wp-content/uploads/2021/11/11-1024x536.png)
統一感のないアイキャッチの例
![](https://enkura.net/wp-content/uploads/2021/11/9ef19d2f2909f29d3757cf92db5e3420-1024x538.jpg)
![](https://enkura.net/wp-content/uploads/2021/11/6-1-1024x538.jpg)
![](https://enkura.net/wp-content/uploads/2021/11/5-1-1024x538.jpg)
![](https://enkura.net/wp-content/uploads/2021/11/7-1024x538.png)
それぞれ個別にみると綺麗なアイキャッチですが、並べると統一感がなくてごちゃごちゃした印象を受けます。
また、Canvaは使っているブロガーさんが多いので、テンプレートをそのまま使うとめちゃめちゃ被るのも微妙なところ。
![きゃりー](https://enkura.net/wp-content/uploads/2021/09/cb935c4962a439022196b9666880c774-e1631198296356.png)
ごちゃごちゃするし、他のブログと被るしテンプレートをそのまま使うのはおススメしません!
![](https://enkura.net/wp-content/uploads/2021/09/woman_question-e1632755256826.png)
じゃあどうすればいいの?
![きゃりー](https://enkura.net/wp-content/uploads/2021/09/7b1eea346e69699502cfc70e7b3cdb66-1-e1632755815992.jpg)
おススメは、テンプレートの改造です
テンプレートを自分のブログに合わせて配色を変えたり、写真の明るさを合わせると、一気に統一感が出て、おしゃれ度がアップしますよ!
アイキャッチの作り方
アイキャッチの大きさ
大きさはGoogleでもSNSでも切れずに表示される横1200ピクセル×縦630ピクセルで作りましょう。
拡張子はPNGがおススメです。
![](https://enkura.net/wp-content/uploads/2021/11/202111022220.png)
Canvaで作る人は
①デザインを作成を押す
②検索ボックスに「アイキャッチ」と入れて検索
③「はてなブログアイキャッチ画像」が出てきます。
ちょうどいい1200×630ピクセルのキャンバスが使えます!
もちろん、「カスタムサイズ」で作ってもOKです。
アイキャッチの土台を作る
アイキャッチの土台(背景部分)を作りましょう!
これさえ作ってしまえば、普段はイラストとタイトル文字を変えるだけでOKです。
![きゃりー](https://enkura.net/wp-content/uploads/2021/09/7b1eea346e69699502cfc70e7b3cdb66-1-e1632755815992.jpg)
普段はアイキャッチよりもブログ本文に力を入れましょうね!
- サイトのテーマカラーを使おう
- テンプレートを活用しよう
サイトのテーマカラーを使おう
エンくらのメインカラーはミントグリーンとオレンジ。
アイキャッチではそれに山吹色とネイビーをプラスして作っています。
![](https://enkura.net/wp-content/uploads/2021/11/34ea6dc6c5096f0475e9f9051f89b597-1024x536.png)
![きゃりー](https://enkura.net/wp-content/uploads/2021/09/7b1eea346e69699502cfc70e7b3cdb66-1-e1632755815992.jpg)
メインカラーのコードはメモしておきましょう!
ブログのカスタマイズの際にも使えるので便利ですよ!
配色を考える自信のない人はCanvaのこの記事↓が便利ですよ!
好みの色の組み合わせを探してみてください!
Canvaのテンプレートを改造しよう
Canvaには様々なテンプレートがあるので、それを活用したり、アレンジするのは一つの手だと思います。
テンプレートを選択する
Canvaのおしゃれなテンプレートって、意外と単純な図形の組み合わせだったりするので、簡単にアレンジできるんです!
今回はこのテンプレート↓を使います。最初に猫や写真は消してしまいます!
![](https://enkura.net/wp-content/uploads/2021/11/f80353e6df2a3df5636c59477c8ebcf9-1024x480.jpg)
画像の色をサイトカラーに合わせて変更していきましょう。
- 色を変更する画像をクリック
- 変更したい色を選択
- 好きな色を選択
- すべて変更ですべての画像に反映させる
![きゃりー](https://enkura.net/wp-content/uploads/2021/09/7b1eea346e69699502cfc70e7b3cdb66-1-e1632755815992.jpg)
④は超便利機能です!
![](https://enkura.net/wp-content/uploads/2021/11/c58680a336a77ab81a07f748b63ab720-1024x650.png)
文字を目立たせる
文字がない「写真だけ」「イラストだけ」のアイキャッチも見かけますが、文字があった方がSNSでシェアされた時に目立ちますし、画像検索からの流入も狙えるのでおススメ。
ただ、背景に柄や写真がある場合、ごちゃごちゃして文字が目立たなくなってしまいます。
そういう時は、文字を目立たせるための工夫をしましょう。
- 素材をクリック
- 線と図形から四角形を選択
- 好きな大きさで配置します
![](https://enkura.net/wp-content/uploads/2021/11/379f106d7830221ad9643a42ba282ea9-1024x431.png)
このままでも良いのですが、今回はこの四角形を透過させます。
- 格子模様のアイコンをクリック
- 透明度を決める
![](https://enkura.net/wp-content/uploads/2021/11/f8f55a29bee1afdd858591b64c8e69ed-1-1024x659.png)
完成したのがこちらの土台↓
![](https://enkura.net/wp-content/uploads/2021/11/aa5cd0b46792eea99bf10e59a4b3ea83-1024x538.png)
これに文字や画像を入れるとこんな感じになります。↓
![](https://enkura.net/wp-content/uploads/2021/11/165837b59ea5c606aac11e51ec9f97c4-1024x538.png)
Canvaは使っている人が多く、無料の素材をそのまま使用すると、めちゃめちゃ被ります。
![きゃりー](https://enkura.net/wp-content/uploads/2021/09/7b1eea346e69699502cfc70e7b3cdb66-1-e1632755815992.jpg)
背景同様に、イラストも色を変更することで差別化しましょう。
土台を使い回そう
一度土台を作ってしまったら、あとは文字とイラスト(もしくは写真)を変更すればOK!
複製ボタンを押すだけで全く同じ画像が2ページ目に追加されます。
![](https://enkura.net/wp-content/uploads/2021/11/6efa912fd48d4fda3fd23e836f0ffbe5-1024x556.png)
他のカテゴリーも同じ配色で雰囲気を合わせる
一つ出来上がったら、他カテゴリーのアイキャッチも作りましょう。
下の画像は先ほど「統一感のないアイキャッチ」で例に出したものを使用して作ってみました。
色を合わせるとかなり統一感が出ますよね?
↓OK
![](https://enkura.net/wp-content/uploads/2021/11/165837b59ea5c606aac11e51ec9f97c4-1024x538.png)
![](https://enkura.net/wp-content/uploads/2021/11/856fa7472f32b80bb12b32443754c418-1024x538.jpg)
![](https://enkura.net/wp-content/uploads/2021/11/f1a7307a056ff7dcef9cc78261f0d0da-1024x538.jpg)
![](https://enkura.net/wp-content/uploads/2021/11/1ffe91b5a68c2c60dffb7c53847513b4-1024x538.png)
![きゃりー](https://enkura.net/wp-content/uploads/2021/09/7b1eea346e69699502cfc70e7b3cdb66-1-e1632755815992.jpg)
フォントを同じ種類に揃えるのも統一感がでるよ!
↓NG
![](https://enkura.net/wp-content/uploads/2021/11/9ef19d2f2909f29d3757cf92db5e3420-1024x538.jpg)
![](https://enkura.net/wp-content/uploads/2021/11/6-1-1024x538.jpg)
![](https://enkura.net/wp-content/uploads/2021/11/5-1-1024x538.jpg)
![](https://enkura.net/wp-content/uploads/2021/11/7-1024x538.png)
まとめ:脱もったいないアイキャッチ
アイキャッチはトップページに表示されますから、「ブログの外観」という意識で雰囲気を合わせて作っていきましょう。
「プロが撮った写真だけ」のアイキャッチや、統一感がないアイキャッチはすごくもったいないです。
例えば、Twitterでシェアされた時にアイキャッチの画像ってとっても目立ちます。
タイトルもツイート文で表示されますが、画像にタイトルがあった方がパッと内容が分かり、スクロールしたときに目に留まりやすいです。
また、統一感がないアイキャッチは雑多な印象を受け、ブログというより「日記感」が出てきてしまいます。
日記から「役に立つ情報」を得ようと思いませんよね?
だからこそ、統一感を出したり、綺麗なアイキャッチを記事に付けるって結構大事なんです。
おしゃれで目立つアイキャッチを作って、読まれるブログを目指しましょう!
コメント