ブログやYouTubeに使うアイキャッチのデザインがうまくできないという初心者向けに簡単におしゃれに見える方法をご紹介。
私がアイキャッチ画像の作成に使用しているのはAdobeCCですがCanvaなどを利用してもOK
アイキャッチはアクセスアップ効果もあるので見やすいアイキャッチを作成してみてくださいね!
アイキャッチの強調したい部分だけ色を変える
![アイキャッチ画像デザイン例](https://321web.link/wp-content/uploads/2020/04/8cf91382-eyecatch1-color.jpg)
一番強調したいキーワードや数字の色を変えて目立たせるとインパクトの出るアイキャッチ画像になります。
タイトル文字の色を変えて強調
![アイキャッチ文字の色を一部だけ変えると目立つ](https://321web.link/wp-content/uploads/2020/04/3ef83ced-eyecatch1-color-1.jpg)
この記事を例に出すなら『アイキャッチ』や『7』ですね。
目立たせたい箇所の色を変えてみると記事の内容が視覚的に伝わりやすくなります。
ブログで装飾するのと同様にアイキャッチでも目立たせたい単語に色を付けると視線を捉えやすくなりますよ。
- 数字
- 結論
- 固有名詞
- キーワード
目立たせたい文字や、読者に響きそうな文字をピンポイントで色を変えてみましょう。
1文字ごとに変えたりするのもあり
![1文字ごとに変えたりするのもあり](https://321web.link/wp-content/uploads/2020/07/ae3bd3a9-mojikougo-1.jpg)
応用編として文字を1文字ごとに変えるという方法もあります。
文字を交互に変えることで楽しい雰囲気がでるのでデザインの雰囲気に合わせて利用してみてください。
![アイキャッチの文字色変更例](https://321web.link/wp-content/uploads/2020/07/39fb7384-eye-1.jpg)
- 強調が目立たなくなる
- 3色以上になると見にくい
- デザインがうるさくなりがち
色のバランス、配色も意識してみよう
色の選び方はたくさんありますがアイキャッチでは目を引くことを重視しているので色のコントラストが際立つ色を使用するのがおすすめ。
下図のように背景と文字の色の組み合わせによって見やすさや印象が大きく変化します。
![明度と色相が近い色の組み合わせ](https://321web.link/wp-content/uploads/2023/02/haisyoku-ng-meido.png)
![明度差をつければ見やすくなる](https://321web.link/wp-content/uploads/2023/02/haisyoku-good-meido-1.png)
![原色は目に負担が強い](https://321web.link/wp-content/uploads/2023/02/haisyoku-ng-saido.png)
![彩度を下げて目に優しい配色に](https://321web.link/wp-content/uploads/2023/02/haisyoku-good-saido.png)
落ち着いた印象のアイキャッチにしたいのであれば色のトーンを揃えたり彩度を落とすと良いでしょう。
色のバランスを意識するだけでアイキャッチがグッとおしゃれになるので配色も意識してみてください。
![](https://321web.link/wp-content/uploads/2021/01/colorschume-eyecatch-500x263.jpg)
その他、色のバランスだけでなく読者に与えたいイメージに合う色を使うのもおすすめです。
アイキャッチ文字をふちどりする
![アイキャッチデザインー縁取り](https://321web.link/wp-content/uploads/2020/04/a6ae4c48-eyecatch-2.jpg)
タイトルに入れる文字をふちどりするだけで文字の読みやすさが圧倒的に上がります。
ふちどりカラーは背景に合わせよう
![明るい背景と暗い背景、比較](https://321web.link/wp-content/uploads/2022/03/dark-bright-c.png)
ふちどりをする際のコツは背景に合わせて色を決めるということ。
- 背景が暗い場合:白
- 背景が明るい場合:黒
このように使い分ければ見やすくなります。
慣れてきたら他の色を使ってみてもいいですね。
Canvaでふちどりする方法
![canvaふちどり](https://321web.link/wp-content/uploads/2020/04/7c381c82-canva-futi4.jpg)
IllustratorやPhotoshopの場合は簡単にできますがCanvaでは簡単にふちどりができません。
別アプリで作成して合成とかだと面倒なので、同じ文字を複製してちょっとずらしてあげれば縁取りっぽい感じになります。
後ろのテキストをずらすとシャドウ風になり、一回り大きいサイズにするとふちどりになります。どちらも一瞬でできるのでお試しあれ。
![](https://321web.link/wp-content/uploads/2020/06/da9ecbaf-photoshop-texteffect-500x263.jpg)
![](https://321web.link/wp-content/uploads/2022/06/Illustrator-text-border.png)
アイキャッチ文字の大きさを変える
![アイキャッチの文字の大きさを変える](https://321web.link/wp-content/uploads/2020/04/4676f6ca-eye-catch-large2.jpg)
文字の大きさを変える際のポイントは下記の3つだけ抑えておけばとりあえずOK
- 強調したい部分を大きく
- 助詞を小さく
- 単位を小さく
順番に解説していきます。
強調したい部分を大きく
強調したい部分を大きくしてみましょう。
これは先程あげた色を変えた場所と同じ感じで強調したい部分の文字サイズを一気にあげてみましょう。
こんなふうに極端に大きくしてみるとインパクトも上がります。
![アイキャッチデザイン](https://321web.link/wp-content/uploads/2020/04/6e169e82-eye-catch-moji-2.jpg)
助詞を小さく
![助詞を少し小さく](https://321web.link/wp-content/uploads/2020/07/858d941e-josi.jpg)
助詞を小さくすることで文字がより強調されます。
具体的例を出すと下記の赤文字部分のような箇所です。
- ○○が××な理由
- ○○の××を解説
- ○○は××に最適
- ○○を××する方法
助詞の大きさが小さくなることで主語や動詞が目立つようになります。
![漢字だけ少し大きく](https://321web.link/wp-content/uploads/2022/07/kanji.png)
また、漢字だけ大きくひらがなはすこし小さくしてもバランスが良くなるので試してみてください。
文字のかたまりとして認識しやすくするために助詞以外のひらがなは少し小さくする程度にし、あまり小さくしすぎないほうが読みやすいです。
数字を大きく単位を小さく
![数字を大きく単位を小さく](https://321web.link/wp-content/uploads/2022/07/tani.png)
数字を使用する場合には数字を大きく、単位を小さくすることで数字を目立たせることができます。
特に欧文フォントと組み合わせた場合は漢字よりも数字のほうが小さく見えてしまうので文字サイズを調整してバランスをとってください。
細かいポイントですが文字の大きさを微妙に変えることでデザイン全体の質が上がります。クオリティを上げるための細かいポイントは以下の記事でも解説しているので参考にしてみてください。
![](https://321web.link/wp-content/uploads/2020/07/b30cbfd4-godisinthedetails-500x263.jpg)
文字の背景に図形をかぶせる
![アイキャッチタイトルを目立たせる方法](https://321web.link/wp-content/uploads/2020/04/6d02670c-eyecatch-3-s.jpg)
文字の背景に白や黒の長方形などの図形を設置することで写真の上でも読みやすくなります。
背景は透過してもしなくてもOK
下記の例では文字の後ろにある図形の不透明度を変更しています。
![アイキャッチ背景の不透明度について](https://321web.link/wp-content/uploads/2020/04/650e5986-eye-catch-toumei-2.jpg)
- 透過:圧迫感が減る・写真が目立つ
- 不透過:文字がより目立つ
背景は不透明度を変えることで背景の写真がうっすら見えるので圧迫感が減ります。
一方、透過なしにすることで文字がくっきり見えるようにもなりますのでお好みで不透明度を変更してみましょう。
四角や丸で囲う
![四角や丸で囲う](https://321web.link/wp-content/uploads/2021/05/design.png)
文字の背後に四角や丸のシェイプを配置するパターン。
文字だけでちょっとさみしいかなっていうときは文字全体ではなく、1文字づつ配置してみるのもいいですよ。
写真を塗り潰すのはNG
![アイキャッチNG例](https://321web.link/wp-content/uploads/2020/04/24b8821e-eyec-ng.jpg)
たまにシェイプで写真を全部塗りつぶして文字を入れている人いるんですが、これやるくらいなら『文字なし』or『写真なし』にしましょう。
- 写真を活かすのか?
- 文字を活かすのか?
- または両方活かしたいのか?
中途半端にならないよう、どれかに絞ったほうが伝えやすいアイキャッチになりますよ。
![写真を小さくして左側に文字を配置した例](https://321web.link/wp-content/uploads/2020/04/55f2f59b-eyeca2.jpg)
写真の外に大きな枠を作って文字のスペースを確保する
![スペース確保したアイキャッチ例](https://321web.link/wp-content/uploads/2021/12/eye-c.jpg)
写真のスペースがない場合は思い切って写真の左上に空きスペースを作ってしまうのもあり。
- 写真の左上斜めにシェイプを配置
- 大きな文字を半分だけ重ねる
- シェイプで囲った文字を重ねる
![](https://321web.link/wp-content/uploads/2021/12/eye-c-space.jpg)
- 画像を中心に配置し
- 上下左右に余白を作る
- 上下左右に文字を入れる
写真の上に文字を入れるよりも文字が見やすくなり、スッキリとした雰囲気のアイキャッチに仕上がります。
文字と背景写真のコントラストを上げる
![アイキャッチの写真のコントラストを変える](https://321web.link/wp-content/uploads/2020/04/601e6a32-eyecatch-3-photo.jpg)
文字の背景に入れる写真を暗くしたり明るくしたりして、コントラストを上げることで文字が目立つようになります。
文字が白なら背景を暗く
白文字を利用する場合は背景を暗くすることで文字が目立つようになります。
不透明度30%の黒レイヤーをかぶせてみるとこのようになります。
![アイキャッチデザインはコントラストが大事](https://321web.link/wp-content/uploads/2020/04/d3c92f6a-eyecatch-con.jpg)
単純に背景が暗くなっただけでですが文字の視認性が大幅にあがりましたよね。
逆に黒文字の場合は背景を明るくしてあげて文字が見やすくなるように調整してあげればOKです。
![背景を明るくしてコントラストを強調](https://321web.link/wp-content/uploads/2022/03/light-p.jpg)
写真の明るさを変えることで読みやすくなりますが、基本的には「明るい×明るい」や「暗い×暗い」は避けて「明るい×暗い」や「暗い×明るい」にしたほうが良いでしょう。
写真の雰囲気を変えたくない場合
![文字を見やすくする方法 グラデーション重ね合わせ](https://321web.link/wp-content/uploads/2020/09/eye-catch-moji.jpg)
全体を暗くしたり明るくするのがお手軽ですが『写真の雰囲気を変えたくない』という場合はグラデーションを利用して文字の背景のみを自然に濃くしてみましょう。
この方法を利用すれば写真と文字、両方を活かしやすくなりますよ。
アイキャッチ文字を傾ける
![アイキャッチ文字を傾けた例](https://321web.link/wp-content/uploads/2020/07/c2440aeb-shatai-6.jpg)
ただ文字を並べただけのアイキャッチ画像でも文字を傾けてあげるだけで動きが生まれます。
超簡単なので適当に傾けてみましょう。
文字を斜体にするのもGood
![斜体テキスト](https://321web.link/wp-content/uploads/2020/04/69cfe878-syatai-3.jpg)
上記の例では文字全体を傾けていますが水平位置は動かさずに文字を斜体にしてもOKです。
全体を傾けてみたり文字だけ傾けてみたりといろいろ試してみると動きが出てインパクトのあるアイキャッチになります。
ちょっと物足りないなと思ったら一部分だけでも良いので何かしら傾けてみましょう。
立体的に斜めにするデザイン
![立体的に斜めにするデザイン例](https://321web.link/wp-content/uploads/2020/07/3cc1afc7-eye-2.jpg)
背景に合わせて文字を斜めに配置するというパターンもあり。
これはPhotoshopが必要になりますが、斜め上から見たようなデザインにしてみるのも面白いですよ。
タイトルの文字を揃える
![タイトルの文字を揃える](https://321web.link/wp-content/uploads/2020/04/3266f51c-eye-catch-design2.jpg)
これは単純に文字の大きさを上の文字に合わせて揃えましょうというだけの話。
超簡単にそれっぽくなるのでよく使っています。
行を増やせば文字も大きくなる
タイトルを1行で収めようとすると文字が小さくなり、視認性が悪くなります。
具体例を出します。
1列の場合
![文字整列比較1](https://321web.link/wp-content/uploads/2020/04/46cd7320-eyecatch-p2.jpg)
文字を一列で収めた場合はこのようになります。
- 人の上に文字が被ってしまう
- 文字の背景色が変わるため縁取りが必要になる
できれば人の上に文字を被せずに作っていきたいところなので文字を改行してみます。
改行して列を揃えた場合
![アイキャッチの文字列を改行した場合](https://321web.link/wp-content/uploads/2020/04/dddea385-eyecatch-design3.jpg)
改行して列を揃えてみました。
どうでしょうか?圧倒的にこちらのほうがインパクトがありますよね。
改行を増やすことで文字の大きさを上げることが可能になるので見にくいなと思ったら思い切って改行してみると視認性が大幅に向上しますよ。
文字を揃えるとスッキリする
![アイキャッチの文字を揃える](https://321web.link/wp-content/uploads/2020/04/40d77c1f-gridline.jpg)
やっぱり文字が揃っていると見た目がとってもスッキリします。
ガイド線を引いてみてその中に収まるように文字を入れていくと簡単に整ったデザインにすることが可能。
大雑把でもいいのでバランスを整えてみると良い感じになりますよ。
おしゃれなアイキャッチ画像をデザインするコツまとめ
![アイキャッチ画像をおしゃれにデザインするコツまとめ](https://321web.link/wp-content/uploads/2020/04/85d08000-eyecatch-main.jpg)
以上、簡単にアイキャッチ画像を作る方法でした。
今回ご紹介した7つの方法は下記の通り。
- アイキャッチの強調したい部分だけ色を変える
- 文字と背景写真のコントラストを上げる
- アイキャッチ文字の大きさを変える
- アイキャッチ文字をふちどりする
- 文字の背景に図形をかぶせる
- アイキャッチ文字を傾ける
- タイトルの文字を揃える
このようにちょっとしたコツを取り入れるだけで簡単に見やすいアイキャッチタイトルが出来るので是非ブログに使ってみてください。
初心者がアイキャッチを作る際に失敗しがちなデザイン
初心者がデザインするときにやらかしがちなミスがあります。
余白や色などちょっと気をつけるだけで見た目が良くなるのでぜひ参考にしてみてください。
![](https://321web.link/wp-content/uploads/2020/05/b705e8a1-anatanodesign-500x263.jpg)
クリックされるアイキャッチを作りたいなら
ついついクリックしちゃうアイキャッチってありますよね。
人間の心理を利用したデザインを行うことでクリック率を大幅に上げることが可能です。
アイキャッチに取り入れられるものもあるのでデザインの参考にしてみてください。
![](https://321web.link/wp-content/uploads/2020/06/e74dc079-desigin-psycho-500x263.jpg)
タイトルは「文章」が大事
どれだけ魅力的なアイキャッチを作ったところで、記事のタイトルに魅力がなければクリックしてもらえません。
魅力的なキャッチコピーはどう作ればよいのか?
だれでもかんたんに作れるコツを以下の記事で解説しています。
![](https://321web.link/wp-content/uploads/2021/06/catchcopy-500x263.jpg)
アイキャッチのサイズに注意
アイキャッチをデザインする際はサイズにも注意してみてください。
ブログのテンプレートだけでなくTwitterにシェアした時に文字が切れないようにしましょう。
せっかくのアイキャッチも意図しない場所でトリミングされちゃうと残念ですからね。
![](https://321web.link/wp-content/uploads/2020/04/7cac82f5-eyecatch-bestsize-500x263.jpg)
アイキャッチの文字の色配色を簡単に
Adobe Colorというツールを利用すれば超かんたんに良いバランスの配色が作れます。
テンプレートから選ぶことも自分でカラーホイールを動かして作成することも出来るので是非利用してみてください。
![](https://321web.link/wp-content/uploads/2020/04/7353c965-adobe-color-500x263.jpg)
アイキャッチを作るならやっぱりAdobeCCが最強
無料ソフトでも作れますがPhotoshopやIllustratorは業務用ソフトと言うだけあってめちゃくちゃ楽に作れます。
例に出したようなアイキャッチも簡単なものなら10分かからずサクッと出来ちゃいます。
今ならAdobe Creative Cloudが超格安で手に入りますのでデザインの勉強をしたい人は有料ソフトも検討してみてください。
![](https://321web.link/wp-content/uploads/2019/09/eda8a378-adobe-cc-ac19-500x263.jpg)
コメント