デザインスキル皆無でも! それっぽいアイキャッチ画像を作る着眼点とビフォーアフター

このサイトもようやく20記事に到達したわけですが、記事を作るうえで意外と大変なのがアイキャッチ画像! なんです。

デザインの経験もセンスもない私は、自分で作ったアイキャッチ画像を一晩経って見返すたびに

とーこ

なんてダサいんだ・・・

と絶望してきました。

いや、使わせていただいている素材自体は悪くないんです。
私が料理するとなぜか、素材を活かせない出来になってしまうんです。

作っている時は「ふ~・・・なんとか今回も頑張ったぞ!」とそれなりに納得してアップロードしてるんですよ?

そのはずなのに、時間が経てば経つほど出来栄えが恥ずかしくなるという、真夜中に書いて渡してしまったラブレターみたいになってきています。

これ以上記事が増える前になんとか手を打たねばならないと思い、あらためてアイキャッチ画像の作り方を見直すことにしました。

デザインスキル皆無の私でも「それっぽくなる」方法になっていますので、同じ悩みをお持ちの方の参考になれば幸いです。

目次

私のアイキャッチのここがダサい

まず現実を直視していきます。

特に出来栄えに納得がいっていないアイキャッチをがこのあたり。(2021/2/28時点)

ざっと見た感じ、

  • 配色にまとまりが感じられない
  • フォント選びが場当たり的
  • 写真(イラスト)と文字の両方の主張が強すぎてごちゃごちゃしている
  • 作るのに時間がかかってしまっている
  • 総じて統一感がない

・・・我ながら思うほどのいいとこなしです。

そこで今回私が目指すのは、「トップページを見ただけでおしゃれだけどスッキリ感漂う」! そんなサイトです!

とーこ

ハードル高すぎ

と一瞬頭をよぎったのはおいといて。

少しでもダサさを克服できるなら、というワラにもすがる思いで見直していきます。

改善ポイント

前提として、アイキャッチ作成には無料で機能豊富なCanvaを使っていきます。

おしゃれにスッキリ」! を合言葉に、直す箇所を項目ごとに分解しました。

背景選び① 写真かイラストか?

最初の悩みどころ、アイキャッチに使う素材についてです。

背景の選択肢としては、写真を使うか、イラストを使うか、のどちらかに大きく分けられます。

じゃあどちらを使おうか? と考えてみると・・・

  • テーマ・雰囲気・感情に合う「実物」がある → 写真を探しやすい
  • テーマ・雰囲気・感情に合う「実物」がない → (写真が探しにくいので)イラストで探したい
  • 画像より文字が大事なもの → どちらでも構わない

このように、「そもそも写真があるかないか?(探しやすいかどうか)」が判断基準の一つとなりそうです。

このサイトで運営しているカテゴリー(タグ)について、上記のルールを当てはめてみました。

写真を使うイラストを使うどちらでも
読書(本の表紙画像を用意)お金をふやす(実物がないため)資産・保有銘柄報告(資産報告年月がわかればよい)
手帳(手帳画像を用意)手帳以外の時間管理(実物がない概念のため)趣味の時間(写真があれば使う。なければイラスト)
ライフプラン(楽しい!って感じの人物写真が使えそう)ブログ運営(実物がないため)

絶対この通りにする! というものではなく、写真とイラストどちらでいくべきか? という方向性を決めておき、迷う時間を少なくすることが目的です。

また、カテゴリー(タグ)検索したとき同系統のアイキャッチ画像が並ぶので、統一感が出る効果も期待しています。

背景選び② 写真の場合

文字を入れなくてもそのまま使えるくらい訴求力があるのが必要条件だと思っています。
逆に言えば、アイキャッチ画像を写真で作る場合は「いかに写真を主役にするか」を考えた方がいい、ということです。

写真で視覚に訴えた方が文字を読むよりも早く伝わりますので。

そして「主役になる写真とは何か」を考えると、最適なのは人物写真です。
風景や静物よりも、人間(動物)の動きや表情に視線が向きやすいですよね。

しかし例外として、文字の方を目立たせたい場合のアイキャッチ写真は、わき役として映えるものが適しています。

例えば、下記の記事のアイキャッチ画像は、資産報告の年月がわかればよかったので、背景には星空の風景写真を使い、文字が目立つようにしました。

背景選び③ イラストの場合

テーマに合う実物がない場合は写真が撮れませんので、テーマのイメージをイラストで表現した方が時短になります。

写真と同様、「人物を使ったイラスト」の方がイラストの主役度は高くなるでしょう。

下の記事では、お札のイラストがメインですが、より人物の部分に目が行くと思います。

また、イラストを使う場合でも、パターン素材を選ぶと文字の方が目立ちます。
下記の記事では、水彩ストライプの素材を使いました。

文字選び① 文字の配置

ここからは文字について考えていきます。

まずは文字の配置です。目立たせたいのは文字か画像か、でパターンを絞っておくと時短になります。

シェイプの中に文字を入れる

四角や丸のシェイプの中に文字を配置するデザイン。

中央寄りにするほど、スペースが大きくなるほど、文字の主役度がアップします。

シェイプは白のべた塗りを透過するのが基本。

後述しますが、色選びはこれまた難題なので。
「迷うくらいなら白!」と決めておいた方が無難です。

コマ割りして文字を入れる

写真やイラストにスペースを割きつつ、文字を添えることもできるデザイン。

どちらかと言えば写真が主役っぽく見えます。

フラットな印象でスッキリ感があります。

余白に文字を入れる

文字エリアを設けず、写真やイラストの余白に文字を配置するデザイン。
上の画像では、文字を入れるならこのへんかな? と思った部分を水色にしています。

写真やイラストに文字を直接乗せる時は、シェイプの中に文字を入れるのとは違って、より色選びが大事になってきます。

文字もちゃんと読めて、かつ背景ともうまいことなじむようにしなければなりません。
意外とデザイン上級者向けかと思います。

あえて文字は入れない

背景選びで書いたように、写真やイラストがそれ単体で主役になる時は、文字を入れない選択肢も。

キャッチコピー作りや色選びに自信がない場合は、むしろこの方がいいかもしれません。
関連記事などアイキャッチ画像がずらっと並ぶページでも、文字が多くてうるさく感じることもありません。

文字選び② 文字色

次に悩ましいのが文字色
写真と違って自分で決めなければいけないため、配色センスが問われてしまう難所です。

そこで私は、自分のセンスを信用しないで色を決められるよう、COOLORSというジェネレーターを使うことにしました。

こちらのサイトでは、5色の「イイ感じ」な配色を作ってくれます。

とーこ

早速作って行きましょう!

ジェネレーターを起動

トップページの「Start the generator!」をクリック。

ジェネレーション画面が開きます。すでにランダムで5色が配置されています。

色を選んで固定

今回は文字色1色を決めたいので、他の4色をあらかじめ決めておく必要があります。

私は下記ルールで、4色を決定しました。

  • サイトのメインカラー1色(サイト全体ともなじむようにしたいので) この色→ 
  • 背景写真またはイラストで使用している色3色 

色の設定のしかたもカンタン。
カラーコードが記載されているので、それをクリックすると入力する吹き出しが開きます。

画像では6桁のカラーコード(HEX)で指定していますが、RGBやCMYKでも設定可能です。

下の画像は、4色の設定ができたところの画面です。

各色のカギマークをクリックして活性化させておくと、その色は固定させることができます。

これで準備OKです。

スペースキーをクリックしてジェネレート!

カギマークで固定された色以外の1色(ここでは一番右側の色)がジェネレートされます。

背景と近い色がジェネレートされてしまった場合など、素人目線でも「さすがにこの色は・・・」と思ったら、もう一度スペースキーを押せば、別の色を探してきてくれます。
ワンタッチなので手間なし。

もし何色か試してみてもしっくりこなかったら、無彩色(白~グレー~黒)にしちゃえば大ハズレはないかな。

この配色で作ってみた画像がこちらです。

ほどよく馴染んでいるでしょうか?

写真が背景の場合は、文字を入れたい部分で広い面積を占める色をジェネレーターで設定しないと意味がないので注意してください。

とーこ

ジェネレーター超便利!

文字選び③ フォント

文字の最も大事な要素ともいえるのがフォントです。

なんのフォントを使うかで、アイキャッチ画像をぱっと見たときの印象が全く異なってきてしまいます。

ところで私は、中学の美術で「ゴシック体」「明朝体」を習ったくらいの知識しかありません。
やはりフォントについても、ある程度これ! と決めてしまった方が時短になりますし失敗も少なくなりそうです。

今回は合言葉「おしゃれにスッキリ」ですので、フォントも同じ目線で選びます。

私の考える「おしゃれにスッキリ」をもう少し具体的に言語化したら、

  • 文字の太さが一定 → ゴシック体基調
  • 適度な余白がある → 細めの線、端が丸っこくない

という感じ。

この条件でCanvaでデフォルトで使えるフォントを探してみると・・・

けっこう絞り込むことができました。

常にこの中から選ぶようにすれば、「おしゃれにスッキリ」な印象が狙え、かつサイト全体での統一感も見込めそうです。

実際に修正してみたビフォーアフター

改善点が見えてきたところで、これまで作った記事のアイキャッチ画像を実際に作り直してみます。

ビフォーアフター① 書評記事のアイキャッチ

目立たせたいのは、本の表紙画像です。
しかし、背景も柄物(ウッドデッキみたいなもの)を使っているので、全体として主張が強い雰囲気です。

そこで背景を無地(黒板)に変更しました。

「RECOMMEND」の文字が白でチョーク風になっていることもあり、黒板に書いたような印象になりつつ、本の表紙画像がちゃんと目立つようになっているのではないでしょうか。

ビフォーアフター② 振り返りフレームワーク記事のアイキャッチ

これ、そもそもこの鳥の意図が不明ですよね。

とーこ

なんか鳥が「振り返ってる」ように見えたから、テーマに合ってると思って・・・!

そして目に痛い原色の背景・・・なんの工夫も感じられない文字エリア・・・
完全に夜のラブレター案件です。

とにかく根本的に見直しました。

カテゴリーは「アウトプット」ですので、何か考えてそうな人のイラストを採用。

配色もジェネレーターに決めてもらいました。少なくとも目に痛いことはなくなったはず。

ビフォーアフター③ 手帳開封レビュー記事のアイキャッチ

フォントと配色の見直しは当然として、迷ったのは画像の右上部分の余白です。

このブログでは記事の一覧表示をしたとき、カテゴリ名がアイキャッチの右上に表示されるようになるため、その部分に文字を置くことができません。

なので、ビフォー画像では余白をあけていたわけです。

ですが一覧からその記事に飛ぶと、アイキャッチ画像はそのまま表示されるので「なんか右上の余白が気になる」状態でした。

そこで「2021手帳開封レビュー」の上下にイラストフレームを設けることにしました。

これでカテゴリ名が重なっても問題ないし、不自然な余白もなくなりました。

まとめ

アイキャッチ画像は記事の顔!
クオリティが低いとそれだけでUターンともなってしまいかねません。

私のようなデザインに自信のない人は、極力「考えない」ことが大事です。
無駄に考えると意図せずダサさが出てしまいますので・・・。

この記事で紹介したように、パターンを決めておいたり配色をジェネレーターに任せたりと、判断をシステマティックにして、せめて大ハズレにならないように気をつけましょう。

とーこ

資金ができたら、ココナラなどでデザイナーさんに外注してみたいですね

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

「やりたいことだけやる毎日」を叶えるべく、収入複線化を目標にして試行錯誤中。
「時間をふやす」「お金をふやす」ためにやっていること・学びから考えたことなどを中心にアウトプットしていきます。
ふやして余った時間とお金は、文房具に全賭け。手帳大好き!

目次
閉じる