おしゃれなアイキャッチ画像の作り方。素人でもぐっと良くなる!文字入れのコツ5つ

アイキャッチ画像 おしゃれ

記事内に商品プロモーションを含む場合があります

キップム
キップム

アイキャッチのデザイン、もっとおしゃれにしたいんだけど、なんだか上手くいかなくて…

yoko
yoko

その気持ちよくわかるよ。私が人生ではじめて作ったアイキャッチはこれだったから……。

アイキャッチ画像 おしゃれ
yoko
yoko

そして、こっちが、「もっとおしゃれにしたい!」と思って作り直したアイキャッチ。

アイキャッチ画像 おしゃれ
キップム
キップム

わぁ、グンと良くなってるー!!

yoko
yoko

ありがとう。どこをどう直したら2枚目の画像になったのかということを、今から説明していくね。

キップム
キップム

早く聞きたーい♡

スポンサーリンク

この記事はこんな人にオススメ

  • デザイン力をアップし、アイキャッチ画像を少しでもおしゃれにしたい人
  • デザイン初心者

この記事を読めば、わかること

・アイキャッチデザインが洗練される!文字入れのコツ 5つ

リ・デザインをしたときに、最初に注目し修正したのが「文字」だった。

あくまで私基準だけれども、「文字」に気をくばるだけで、クオリティが上がった!と感じている。

以下からは、デザインの超初歩的なレベルの話をしていくのだけども(ありがたいことにいくつかのブログやnoteでおしゃれなブログとして紹介してもらっているので)、アイキャッチや写真内に文字を入れたいと思ったその時に参考にしていただければ。

アイキャッチ画像を作る前に、まずしたい!2つのこと

 1. 参考にしたいアイキャッチを探す

「さあ、オシャレなアイキャッチ作るぞ!」 と思って、いきなり手を動かしてしまうと、デザイン迷子になってしまうと思ったので、悩んで時間を浪費することがないよう、まずは理想のアイキャッチを探すことから始めた。

眩いばかりのアイキャッチが揃っている monecre のサイトから、私が選んだのはこちら。何度見ても素敵!

アイキャッチ 画像 おしゃれ
画像引用元:monecre より

2. 1で選んだアイキャッチと自分のアイキャッチが「どう違うのか」を掘り下げる

キップム
キップム

自分の理想から遠い部分を1つ1つ細分化できると、修正すべき点がわかってくるよ!

素人目線でつぶさに観察した結果、

アイキャッチ画像 おしゃれ

  フォントを考えて選んでいる
  文字の間隔が意識的に整えられている
  文字が中央揃えになっている
  英語が入っている
  情報に優先順位をつけている 

ということに気がついた。

以下からは、理想に近づいていったプロセスを順序立てて書いていきたいと思う。

コツ1:フォントを選ぶ

アイキャッチ画像 おしゃれ

・・・・・・・・

まず1番最初にしたのは、画像の印象を決める大事な要素の1つ「フォント」を考えて選ぶこと。

指南書には、フォントにもそれぞれイメージ(例えば、明朝体は高級感・上質 / 丸ゴシック体は親しみやすい・優しいなど)があるので、デザインの目的にあったフォントを選ぼうと書いてあるものがほとんどだけれども、

本気で作る初めてのアイキャッチは、自分の「好き」を基準に決めた。なぜなら、おしゃれなブログへの道 1歩目 で書いたように、全体的なブログデザインは、自分の「好き」を詰め込んで作ったから。選んだのは、

スッと縦に長いデザインで、エレガントな印象の「ロゴたいぷゴシック-コンデンスド」

画像引用元:フォントな より
キップム
キップム

デザイン初心者さんは、最初、好き嫌いで選んでOKだと思うよ。

コツ2:文字の間隔を調整する

アイキャッチ画像 おしゃれ

・・・・・・・・

次に気を配ったのは、字間(文字と文字の間隔)の余白が等間隔に感じられるように調整すること。

地味な作業だけれども、文字をそのまま打ち込んだ物に比べると、見栄えが良くなりプロっぽいデザインに1歩近づける。

コツ3:揃える

アイキャッチ画像 おしゃれ

・・・・・・・・

続いて取り組んだのは、揃える。整列させるメリットは、統一感が生まれ、読者が認識しやすくなること。

左のような、「左揃え」のデザインはもっともベーシックで、レイアウトの基本なので初心者もチャレンジしやすい。

今回は、読者の視線を集めたかったので、堂々とした印象になる「中央揃え」に。

アイキャッチを作るときによく手に取る本『トレース&模写で学ぶ デザインのドリル』にも

デザインにおいて「揃え」は基本中の基本です。

要素を揃えて配置することで、見やすく、伝わりやすいデザインを作ることができます。

引用元:Power Design Inc.トレース&模写で学ぶ デザインのドリル』(ソシム株式会社)より

と書いてあるので、「揃える」はぜひ取り入れていきたい。

著:Power Design Inc.
¥1,480 (2023/10/02 16:16時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

こちらもオススメ

参考にするとググッとアイキャッチのクオリティが上がる雑誌読み放題サブスク(無料あり)もぜひ活用して欲しいな、と思う。

コツ4:英語を入れる

アアイキャッチ画像 おしゃれ

・・・・・・・・

雑誌を観察しているとタイトルに英語の文字が入っているものが多いことに気がついたので、あしらってみたら、日本語だけのものより目を引くデザインになった

コツ5:情報に優先順位をつける

アアイキャッチ画像 おしゃれ

・・・・・・・・

文字要素に優先順位をつける理由は、情報を整理しわかりやすくするため主役と脇役の差を出す方法はいろいろあるけれど、今回は基本的な

  • サイズで差を出す
  • で差を出す

にチャレンジした。具体的には、

A:おしゃれなブログへの道
B:I tried no.1

Bの文字サイズを小さくしたり、色を落としたりすることで、Aを目立たせることに成功。メリハリが出て、グッとオシャレ感が増した

アイキャッチ画像、完成!

アイキャッチ画像 おしゃれ

完成したのがこちら。

デザインし直した「文字」にサブタイトルをプラスし、自分で描いたイラストと好きな水彩素材を組み合わせた。

ちなみに使用フォントは、

I tried no.▶︎ The Woodlands(読みにくい文字があるので装飾的に使うのがおすすめ)

1 ▶︎ Times New Roman (新聞用の書体で可読性が高い)

好きなブログを観察しよう ▶︎ ロゴたいぷゴシック

*The Woodlands と Times New Romanは、macに組み込まれているフォント。

こちらもオススメ! ブログに使えるフリー画像・素材サイトを紹介せているので、気になる方は、ぜひ!

アイキャッチをおしゃれにしたい人は、この本がオススメ

洗練されたアイキャッチが作りたいとはいえ、デザイン初心者にはなかなか大変……

そんな時は、デザインの入門書を読んで、基礎を身につけるのが一番のオススメ。私が参考にした本はこちら。

著:Power Design Inc.
¥1,480 (2023/10/02 16:20時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

「構成」「色」「文字」「写真」4つの切り口から、デザインのコツを実例と言葉でわかりやすく説明してくれている。

「あ。これ、次のアイキャッチで試してみよう!」

と思えるアイデアいっぱいの実用的な一冊。

一番最初に読んだデザイン本がこれなんだけれど、一番最初に読む本として最適だったと思う。

おわりに

ブログを伸ばしていくのに磨くべきは記事の質なのは十分承知しているけれども、見た目もとても大事だと思っている。

なぜなら、デザイン事務所にいたときに実感した「ビジュアルの持つパワー」を信じているから。

私の試行錯誤と発見を整理するために書いたこの記事が、ほんの少しでも誰かの役に立ったら嬉しい。

デザイン・文章: yoko( @_yoko51

Comment