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

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

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

yoko
yoko

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

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

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

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

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

yoko
yoko

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

キップム
キップム

早く聞きたーい♡

スポンサーリンク

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

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

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

・アイキャッチデザインが洗練される!文字入れのコツ 5つ
 
デザイン力がアップする方法(おまけ)

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

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

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

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

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

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

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

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

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

キップム
キップム

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

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

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

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

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

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

コツ1:フォントを選ぶ

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

・・・・・・・・

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

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

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

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

画像引用元:フォントな より

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

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

・・・・・・・・

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

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

コツ3:揃える

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

・・・・・・・・

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

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

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

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

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

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

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

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

こちらもおすすめ

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

コツ4:英語を入れる

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

・・・・・・・・

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

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

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

・・・・・・・・

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

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

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

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

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

初心者におすすめ、デザイン力がアップする方法

素敵なデザインを見つけて、とにかく真似をしよう!

ブロガーとして圧倒的な実績を持つマナブさんも

本気で成長したいなら、結論は「真似が最強」です。

引用元:マナブ【重要】最速の成長法は「真似」です、完全に断言します【道が開ける】より

と言っている。また、イラストもプロ真似をしたらグンと成長した実体験があるので、デザインも同じ法則が当てはまると私は思っている。

・・・・・・・・

ここからちょっと精神的な話になるのだけれど、「真似」というとネガティブなイメージがあると思う。

真似をしたら、「パクリと言われるのではないか、、、」と心配になる人も中にはいるのではないだろうか。イラスト初心者だった昔、私もそうだったので気持ちがよくわかる。

確かに1つのアイキャッチだけを参考に、制作をしたらどうしても似てくる。でも、いくつかの画像を参考にし

  • アイキャッチAの構成が好き
  • 雑誌Bのコピーに使われているフォントが好き
  • 写真は自分が撮ったものを使おう

などなど。心のアンテナが反応するいろんな「好き」や「気になる」を掛け合わせて、自分なりに考えて生まれた作品は、あなたの立派なオリジナルになると私は思う。

キップム
キップム

自分で考えることを怠らないのが大事だよ。

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

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

完成したのがこちら。

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

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

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

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

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

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

おわりに

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

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

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

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

Comment