脱初心者！おしゃれなアイキャッチ画像のデザインのコツ。

✔︎ 本ページはプロモーションが含まれています

のざきち

こんにちは！のざきち（ @nozakichicken ）です。

ブログやSNSのアイキャッチなんとなく作ったりしていませんか？

うさぎさん

うーん、アイキャッチなんだかうまく作れないんだよね…

のざきち

そこで今回はブログの顔とも言える「アイキャッチ」の作り方と、初心者ぽいデザインを脱出するためのコツを実践を交えながらご紹介していきます！

この記事はこんな方にオススメ！

デザイン初心者だけどデザインに興味がある
アイキャッチをおしゃれにしてみたい
ダサくなってしまうからコツが知りたい

デザインのセンスがなくても、デザイナーでなくても、これから紹介する5つのコツを意識すれば必ずいい感じのアイキャッチを作れるようになれちゃいます。これを読んであなたのデザイン力が少しでも上達しますように…！

おしゃれなアイキャッチの必要性
アイキャッチデザインのコツ
日頃からのインプットが大切
さいごに

おしゃれなアイキャッチの必要性

のざきち

突然ですが質問です！
皆さんはどっちらのアイキャッチの記事のほうが読みたいですか？

うさぎさん

これは右だね…！

ほとんどの人が右の方がクリックしたくなるかと思います。（好奇心であえて左を選ぶ人はいるかもしれませんが…）

ブログやSNSにおけるアイキャッチは画像はただあればいいだけの飾りではなく、SEO対策をする上でクリックされるかどうかの重要なポイントにもなってきます。

のざきち

この記事では、アイキャッチデザインにおける要点をかいつまんで説明していきますので、デザイナーじゃない方でもぜひコツを掴んでみてくださいね！

アイキャッチデザインのコツ

ブログなどのアイキャッチのデザインにおけるコツは、以下の５つです！

色選びのコツ
フォント選びのコツ
「揃える」を意識する
優先順位を意識する
余白を意識する

① 色選びのコツ

原色や純色は使わない

上記バナーで使っているような光の三原色である赤緑青や、彩度と明度が100%になる純色（カラーピッカーの右上の色）はそのまま使うと目がチカチカして非常に見えにくいです。

のざきち

デザイン初心者の場合は、上記のバナーような色は使用を避けるのが無難です！

色は３色までを意識する

初心者さんでやりがちなのが強調したいがために色を使いすぎることです。しかし色を使いすぎるとどれが重要なのかわからなくごちゃごちゃした印象になります。

そうならないように、テーマカラーを３色以内で決めるように意識しましょう。

70：25：5の法則

基本カラー3色を「70%：25%：5%」の
比率で配色すると、バランスの取れた美しい配色になります。

70%：ベースカラー（基調色）
25%：メインカラー/サブカラー（主役色/補完色）
05%：アクセントカラー（強調色

デザイン初心者の方でもおしゃれな配色ができるカラーパレットツール・配色パターン見本サイトをまとめた記事も公開しているので、配色に迷ったら是非ご覧ください ▼

もう迷わない！デザインの参考になるおすすめ配色サイト【グラデーションもあるよ】

デザイン初心者の方でもおしゃれな配色ができるカラーパレットツール・配色パターン見本サイトをまとめました。

▼ 配色は奥深いので、興味を持ったら書籍で勉強してみるのも効果的です。

見てわかる、迷わず決まる配色アイデア3色だけでセンスのいい色 [ ingectar-e ]

楽天ブックス

￥ 1,980（2023/06/22 07:27時点）

Amazon

楽天市場

Yahoo!ショッピング

実践：色を変えてみよう

では、先ほどのアイキャッチをより良くしていくためには「どこ」を改善したらいいのか？一緒に見ていきましょう！

▼ なんだかすごいカラフルだったタイトル文字を思いっきり白・黒・水色の３色にしてみましょう。

変更箇所

ベースカラー：白（ #ffffff ）
メインカラー：黒（ #303030 ）
アクセントカラー：青（ #31a5bf ）

うさぎさん

目がチカチカしていたのが見やすくなった気がする！

のざきち

色味を抑えただけで、ぐんと印象が変わりましたね。

でもまだまだ改善余地はありそうです…！

② フォント選びのコツ

イメージに合ったフォントを使ってみる

実はフォントにはそれぞれのイメージがあります。

例えば明朝体は「高級感」「大人っぽい」といったイメージ、ゴシック体は「シンプル」「カジュアル」といったイメージがあります。

好みのものを使うで問題ないかと思いますが、色々ありすぎてどれ使ったらいいか難しい！という初心者の場合は個性的なフォントよりも、一番インパクトありかつ読みやすい「ゴシック体」がオススメです。

下記の記事では、デザイナーがよく使うおすすめフォントを紹介しています。基本となるフォントばかりですが迷った際に是非ご覧ください ( ^^ ) ▼

デバイスフォント・Googleフォント・Adobeフォント・フリーフォントの中からよく使う日本語フォントを厳選してみました！

デザイナーが日頃よく使う英語のフォントを厳選してみました。ベーシックなものばかりですのでぜひ覚えたいところです！

多くても３つまでを意識する

フォントも色と同じく使いすぎるとごちゃごちゃした印象を与えてしまいます。

アイキャッチに入れる分量であるならば、メインのタイトルとサブタイトル、装飾のフォントを変えるなど、多くても３つまでを意識するとよいでしょう。

▼ フォントに興味を持ったら、書籍で勉強してみるのも効果的です。

見てわかる、迷わず選べるフォントの組み合わせマネするだけでセンスのいいフォント（見てわかるシリーズ） [ ingectar-e ]

楽天ブックス

￥ 1,980（2023/05/06 00:32時点）

Amazon

楽天市場

Yahoo!ショッピング

実践：フォントを変えてみよう

▼ 不揃いだったフォントを読みやすいように揃えてみましょう。

使用フォント

メインタイトル部分：コーポレート・ロゴＢ
初心者向け・デザインのコツ（ポイント部分）：コーポレート・ロゴ（ラウンド）

うさぎさん

文字が読みやすくなった！

のざきち

フォントをバラバラにせずに揃えてみると、全体の統一感が出てきますよね。

③ 「揃える」を意識する

とにかく「揃える」を意識する

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

文字は適当に置いたりせずに、中央揃えや左揃えなどで揃えることによって統一感が出て一段と見やすくなります。文字も画像も、どこかに基準を設けてそこに合わせる意識をするといいでしょう。

おしゃれだと思ったアイキャッチやバナーなどは必ずどこか揃っていますので、トレースをしてデザインの感覚を磨いてみるのもオススメです。デザインのトレースについて詳しく書いた記事はこちら▼

すぐできる！バナートレース（模写）のやり方【未経験からWebデザイナーへの勉強法】

バナートレースってよく聞くけど何から始めたら良いかわからない方のために、実際のバナートレースのやり方をわかりすく解説していきます。

実践：揃えてみよう

▼ 文字があっちこっちいってたので、思いっきり中央揃えにしてみましょう。

変更箇所

文字を中央揃えにして、画像に対しても中央揃えに。
吹き出しが違和感あったので、思いっきり削除。

うさぎさん

ちょっとの変化だけど、揃えたらよりキレイに見える！

のざきち

デザインは引き算が大切。
ふきだしなどの装飾もうまく馴染まないと思ったら無くしてみるのもありですね。

④ 優先順位を意識する

ブログや本に「大見出し・小見出し・本文」があるように、アイキャッチも文字数が少ないとはいえ「一番伝えたいことは何か？」の優先順位を意識することは大切です。

優先順位をつけるとメリハリのあるデザインになり、伝えたい順番をコントロールすることができます。

例えば左のアイキャッチだと、文字が多く全体的にのっぺりとしたデザインになります。

優先順位を意識した上で右に修正してみると、「役立つ記事」が目立つ主役なので文字を大きくしてみます。その次に「Webデザインの勉強に」は引き立てる脇役でわかりやすく吹き出しにして、最後に英字「Web Design」の装飾でおしゃれさも演出しています。

実践：優先順位を意識して大きさを変えてみよう

▼ 主役・脇役を考えながら文字を大きくしたり、目立たせたりしてみてましょう。

変更箇所

メインタイトル部分
・一番伝えたい「おしゃれなアイキャッチの作り方」を一番大きく。
・さらに「アイキャッチ」を目出させるために文字色をアクセントカラーに変更。
サブタイトル部分
・「もうダサいとは言わせない」をメインタイトルより小さく。
カテゴリー（装飾部分）
・「初心者向け！デザインコンテンツ」を「Design」に変更してポイント装飾に。
・「Design」の文字を読みやすく囲ってみる。

うさぎさん

伝えたいことが一発で分かって、より見やすいアイキャッチになった！

のざきち

ちょっと変更箇所が多かったけど、「タイトル（特にアイキャッチの文字）→サブタイトル→カテゴリー」の順番で主役と脇役が分かれて、よりパッと見ても分かりやすくなりましたね！

⑤ 余白を意識する

文字や装飾の周りには、十分な余白がないと窮屈な印象になってしまいます。余白を設けることで文字が読みやすくなり、ぱっと見でも内容が入ってきやすくなります。

心にゆとりを持つように、デザインにもゆとりを持ってみましょう。枠線と文字の余白だけでなく、文字自体の間隔を調節するだけでも印象が変わります。

▼ 余白についてはこちらの本もすごく分かりやすいのでオススメです。

けっきょく、よはく。余白を活かしたデザインレイアウトの本 [ ingectar-e ]

楽天ブックス

￥ 1,980（2023/06/22 10:09時点）

Amazon

楽天市場

Yahoo!ショッピング

実践：余白とってみよう

▼ 読みやすいゆとりを持たせるために、余白を設けてみましょう。

変更箇所

メインタイトル部分：白帯部分の幅を広げる。
サブタイトル部分：文字間隔を広めにとる。
カテゴリー（装飾部分）：黒帯部分の幅を広げる。

うさぎさん

余白を設けただけで、読みやすさがこんなにも変わってくるんだ！？

のざきち

今まで紹介してきた５つのコツを押されたら、かなりいい感じになりましたね！

これでももちろんかなり改善されてきました！最後に今までの総復習としてブラッシュアップをして、よりおしゃれなアイキャッチデザインを目指していきましょう！

応用編：もうちょっとブラッシュアップしてみる

今までご紹介してきた５つのコツを踏まえながら、
実践編で作ってきたアイキャッチをさらによりよくしていきたいと思います！

▼ 文字情報の優先順位を意識したデザインに変更してみましょう。

変更箇所

写真（背景）部分
・白帯他と写真が目立たなくもったいないので、写真を暗くしつつ帯を取る。
メインタイトル部分
・背景が暗くなったので、タイトルを白にしてコントラストで目立たせる。
・一番強調したいのは「アイキャッチ」なのでアクセントカラーで帯を入れる。
サブタイトル部分
・メインタイトルと区別つけるために、文字は黒にして白の境界線を入れてみる。
カテゴリー（装飾部分）
・「Design」の囲みの色を変更。文字部分を透過してみる。
文字部分
・助詞のひらがなを20%ほど小さくする。
（文字に強弱がついてメリハリのあるデザインに）