【ブログアイキャッチの作り方】デザインのポイントを解説

アイキャッチを作るのは楽しい！そう思いませんか？なぜなら、格好良い・綺麗なアイキャッチができればブログが楽しく華やかに、また権威性高く見えるから。

例えば、あなたがお悩みを解決する為に調べにいったサイトが、綺麗で整っていればどう思いますか？しっかりしたサイトと感じたあなたは、悩みの解決法を読み進めることでしょう。

そんなデザインの入り口であるアイキャッチ。作るのが楽しくでしょうがないですよね！

でも、アイキャッチ作るの苦手なんです…。

アベマキ

わかります。良いと思って作っても何かピンとこない。それは、ちょっとした工夫や注意点ですぐ直ります。あなたも素敵なアイキャッチを作る事ができるんです！

ぜひ、最後まで読んで、素敵なアイキャッチを作れるようになってくださいね。

アイキャッチに悩むブロガーは多い

「記事を書くのは好きなんだけど、アイキャッチを作るのが苦手すぎて困っています。」こういうお声をよく頂きます。

ブロガーという職業柄、文字を書く事に対しては覚悟を決めて始めていますよね。しかし、実際にはイラストや画像などをたくさん用いる事で良いブログが出来上がっていきます。

「ブログにもデザインセンスがいるなんて聞いてない…。」そんな声が聞こえてきそうです。

では、実際にアイキャッチ作成を苦手だと感じているブロガーはどの程度いるのでしょうか。今回、twitterを利用してアンケートを行ってみました。

twiiterアンケート「アイキャッチを作るのは得意？」

「どちらでもない」は、アイキャッチに悩んでいないと考えれば、半数以上の人がアイキャッチに悩んでいるようです。

アンケートでのご意見

どのように苦手なのか、ご意見を頂きました。

みなさん、お悩みのようですね…！

アイキャッチのお悩みを解決

みなさんのお悩みは多種多様。いまいちうまくできない。同じ出来栄えになってしまう。そもそも、デザインが思いつかない…。

この様なお悩みを解消する為に、「アイキャッチのつくりかた」をまとめました。

どんぐり所長

あなたのお悩みが解消されますように！

オンラインデザインツール「Canva」

何をするにもまずは、デザインツールがなければ作品を作れませんよね。PhotoshoフォトショップpやIllustratorイラストレーターは、高いし難しそう…。

ハイ、大丈夫！無料で使える、最強のオンラインデザインツールをご紹介します。それがこの「Canvaキャンバ」。

ブロガーに大人気のこのツールは、無料で無数の写真やイラストが使えます。しかも、クラウド上にデザインを保存できるので、ログインさえすればいつでもデザインすることが可能。自分のパソコンを持ち歩かなくてもいいんです。

最近はプレゼンで使う会社も増えてきていますので、操作を覚えておいて損はないツールですよ！

CanvaPROならもっと便利に

有料の「CanvaPROキャンバプロ」にグレードアップすれば、さらに多くの写真とイラストが使用でき、写真の切り抜き機能も使えるようになります！

価格は年契約で12,000円（税抜き）と高く感じますが、ひと月にすればたったの1000円。

どんぐり所長

PROを使いだしたら、これなしでは生きていけない体になってしまいました。

Canva for Teamsでもっとお得に

もっとお得に使う方法もあります。「Canva for Teamsｷｬﾝﾊﾟ ﾌｫｰ ﾁｰﾑｽ」プランをご利用になれば、5人で費用を分割してお安く使用することができます。こちらの費用は年額18,000円（税込）で、割り勘にすればひと月300円で使えちゃいます。

どんぐり所長

割間の方法だけ注意して決めてくださいね。

アイキャッチのサイズ

アイキャッチを作るうえで、まず設定しなければならないのが画像のサイズ。

アイキャッチの推奨サイズは、WordPressワードプレステーマによって異なります。あなたのご使用のテーマで調べてみてくださいね。

もし、指定がないのなら、おすすめサイズ「1200px × 630px」で作成しましょう。横幅が1200pxあれば、ワンカラムの記事でも綺麗に表示させる事ができます。

Canvaで作成する場合は、「デザインの作成」を押したあとの検索バーに「はてな」と入力してみてください。「はてなブログ　アイキャッチ画像」という検索結果がでてくるので選択してください。この画像サイズが1200px×630pxになります。

どんぐり所長

サイズが小さすぎると、画面表示されたときに画像がボケてしまいますよ！

写真と配置パターンを決める

アイキャッチを美しく見せるには、配置パターンを覚えておく必要があります。使用したい写真やイラスト、またはブログ内でのテンプレートのようなルールに基づいて決めていきます。

写真を手に入れる

アイキャッチで使用する写真はどこで手に入れるのか？

ネットでいい写真をみつけたから、それを保存して使用…それは絶対にダメです。画像には全て著作権があります。

イラストや写真はダウンロードできるサイトで手に入れる様にしましょう。有料のサイトが多いですが、無料で手に入れられるサイトもあります。

また、「商用利用可」の写真が手に入れられるかを確認してください。商用利用とは商売に利用してもよいかどうか。ブログも、もちろん商用利用です。

Canvaの写真は基本的に商用利用化です。ただし、無加工のまま商品に印刷して販売するような行為は禁止です。使用した写真に必ずなにかしらの加工を施すようにしましょう。

どんぐり所長

CanvaPROなら、画像やイラストが気にせず使える！

テキストが載せやすい写真を選ぶ

テキストをどのように配置するか。これは非常に難しい問題です。特に写真の上にそのままテキストを乗せてしまうと、往々にして読みづらくなります。

人物などが左右にずれていて、テキストエリアが開けている写真を選ぶと文字がのせやすくなります。

どんぐり所長

テキストが乗せやすい写真を選ぶと、とても楽です！

写真の上にテキストが載せづらいならテキストボックスを活用

写真の上に直接テキストを乗せてしまうと読みづらい。そんなときは、素材を作ってテキストボックスを作ります。

文字が映える色の素材を設置する事で読みやすくなるものです。

テキストボックスの設置方法によって、もとの写真の良さを消してしまう場合がありますので、注意して設置しましょう。

どんぐり所長

テキストボックスを使えば、ハッキリ文字が読めるように配置できます。

写真をモノクロにする

写真の上にテキストを乗せて読みづらいなら、思い切って写真をモノクロにするのも手です。

モノクロにすることで、写真に乗せるテキストや素材の色が非常に映えるようになります。

見た目も格好よく仕上がりますので、おすすめの手法です。

どんぐり所長

モノクロだと色が減ってスッキリ！色が映えてとてもお洒落になります。

写真をフレームに入れてみよう

写真をフレームに入れてしまえば、廻りをすべてテキストエリアとして使うことができます。フレームも面白いものからお洒落な物まで揃っています。

検索結果の画像に対応した正方形型にする

Googleグーグルの検索結果に、徐々に画像が表示されるようになってきているのにお気づきでしょうか。今後、すべての検索結果に画像が表示されるようになる時代が近づいてきています。

それならば、今から準備しておくべき。検索結果の画像は正方形に切り抜かれます。テキストを追いかけて、テキストのある場所を切り抜いてきますが、例外もあります。中央にテキストを集めておくのが一番安心ですね。

Youtubeのようなテキストを目立たせる配置

Youtubeはサムネイルの小さな画像で見る動画を決めるため、テキストを大きく目立たせる必要があります。

ブログでも同じような手法を用いて目立たせる事も可能です。

テキストの選定と配置

アイキャッチにおいて、文字は非常に重要です。なぜなら、その文字で読者を惹きつけられるが決まるから。

例えば、これは？と思うような文が書いてあると、記事を読みたくなりませんか？それだけアイキャッチのテキストは重要です。では、どのように配置したらよいのでしょうか。

キーワードを洗い出し選択する

アイキャッチに記事タイトルをそのまま入れている人、多くありませんか？記事タイルにはキーワードがふんだんに使用されている為、そのまま入れがちです。しかし、それはNG。

アイキャッチの長文は誰も読みません。キーワードを洗い出して厳選してください。本当に見せたいテキストだけにする事で、やっと読んでもらえるのです。

簡単なのは「箇条書き」

キーワードを洗い出しても、それを文章にしてしまうと読みづらくなってしまいます。

あなたはよく、「○○の、おすすめ○選！」という文章をアイキャッチに載せていませんか？この「の」が曲者でどうしても改行したくなりますよね。そうなったらデザイン的には壊滅的です。

なるべく、文章にならないように「箇条書き」のイメージを持つと配置がしやすいです。

テキストボックスに配置する時は余白を確保

どうしてもテキストを大きくしたくて、横幅いっぱいに広げがちですが、スッキリ見せるためには余白が必要です。左右はもちろん、上下左右にも余白をとるようにしましょう。

余白がある事で落ち着き感がでます。あなたの好みのバランスになるように、いろいろ試してみてくださいね。

フォントの選び方

フォントには沢山の種類があります。可愛いフォントや格好いいフォント。どうしても使用したいけど、読みづらい…。そんなことありませんか？

写真の上に乗せるとただでさえ読みづらいので、フォントはしっかりと選択する必要があります。

迷ったらゴシック体

デザインに自信のない方は、太目のゴシック体を使うのがおすすめです。

理由は、視認性が高いから。ゴシック体を使用すれば、写真の上でも読みやすいテキストが作りやすいです。

アルファベットは英字フォントを使用しよう

アルファベットは日本語フォントの中に入っている物よりも、専用の欧文フォントの方がお洒落なものがたくさんあります。

Canvaにもたくさんの欧文フォントが用意されています。面倒くさがらすに、探して試してみましょう！

それでも見えづらいなら「ふちどり文字」

ふちどり文字や浮き出しエフェクトを使えば、写真の上でも文字が読み取りやすくなります。

ただし、ふちどり文字をやりすぎるとダサくなりますので注意して使いましょう。

色に拘る

アイキャッチにおいて色はとても大切なファクチャー。なぜなら、色によって読者の行動まで変わってしまうからです。

青なら落ち着いて、赤なら情熱をもった印象になります。色の印象で読者の気持ちまで変わる可能性があります。

写真やイラストから色を取る

写真やイラストを使用する場合、そこから色を取るとまとまりやすくなります。

なぜなら、使用色数を減らせるから。色は使えば使うほど賑やかでうるさくなっていきます。白黒を除いた使用色数を３色までに抑えたい所です。

どんぐり所長

Canvaなら写真からの色取得が簡単！

テキストや素材の色を変更したい場合、Canvaなら自動的に写真の使用色を候補にだしてくれます。その中から色を選択することで、簡単に使用色彩数を減らすことができます。

サイト配色に合わせる

色に拘るなら、ブログのトップページの配色と合わせるのもよいですね。

アイキャッチの色まで統一して、サイト全体の使用色を減らす事ですっきりした印象にする事ができます。

Canvaなら、色番号を入力して色を決めることができます。サイトカラーにあわせたアイキャッチや見出し素材などを作って統一感を出していきましょう。

フラットデザインに挑戦する

フラットデザインに挑戦するのもいいですね！

フラットデザインとは、モバイル端末など小さい画面でも見やすいように、平面的に仕上げたデザインの事。iPhoneやウインドウズなどもフラットデザイン化していますね。

フラットデザインは彩度を落とした色使いが特徴。彩度を上げるとリアルよりになるので避けましょう。

装飾素材を手に入れる

Canvaにも素材がたくさん用意されているのですが、いまいち良いものが無い素材もあります。その場合は、専門のサイトへダウンロードしにいきましょう！

サイトの利用規約を守れば、実質無料で使用できるサイトもたくさんあります。ルールに従って使用させて頂きましょう。

アイキャッチをたくさん見て好みのデザインを探そう

デザインはまず真似をするところから。

真似はよくないよ！というあなた。デザインの引き出しがたくさんないと、自分がどんなデザインをしたいかすらわかりません。

私もはじめはヒドイものでした…！

まずたくさんの参考をみて、自分がどういうデザインを作りたいのか認識しておく必要があります。

その為にも、自分が「奇麗だな」「お洒落だな」と感じるデザインを探して、まずは徹底的に真似してみるべきです。

どうしてそのデザインが奇麗なのか、お洒落なのか。真似をすることでコツがわかってきます。

あなたの気に入るアイキャッチを探すならブログをたくさん見ていけばよいのですが、いろんなサイトを見て歩くのは大変です。アイキャッチを一挙に集めた企画記事を作成していますので、ぜひご覧くださいね。

あわせて読みたい

ブログデザインはアイキャッチから！ブロガー渾身の222作品掲載 ついに…ついにフォロワーさんが3,000人を突破致しました！これも日頃より支えて頂いている皆様のおかげです。本当にありがとうございます。 有益な事を呟こうとしてして…

アイキャッチに悩んだら ブログデザイン部

ここまでアイキャッチの作り方を解説してきました。それでも上手にアイキャッチが作れない…そういうあなたはどうすれば良くなるのか指摘してもらう仲間が必要かもしれません。

ブログデザイン部では、デザインの悩みや相談をすることができます。部員同士で意見を出し合って、よりよいデザインを作っていく場としてDiscodeに掲示板を用意しています。

ここでは、デザインだけでなく、ブログの悩みや雑談、ボイスチャットまで可能。同じ志を持つ仲間と交流を持つことができます。

ぜひあなたも参加して、ブログ仲間とお洒落なブログを作っていきませんか？

ブログデザイン部はこちら

あわせて読みたい

ブログ仲間をみつけたいなら！＃ブログデザイン部 ブログを続けていく中で、モチベーションが下がることがないですか？PVが伸びない。エラーがでて解消方法がわからない。ブログの運営方法がわからない…。 こう言うとき…

アイキャッチの作り方に関するQ&A

ブログのアイキャッチを作るのにおすすめのデザインソフトはありますか？

Canvaがおすすめです。無料で使えて、素材やフォントも豊富。クラウド保存なので、ログインすればどこでもデザインが可能です。

アイキャッチ用の写真やイラストは、ネットで見かけたものを保存して使用してよいですか？

他人のブログやサイトから無断で画像を使用する事は、著作権上問題があります。必ず、O-DANなど、商用利用化の画像サイトより取得しましょう。もしくはご自分で用意されるのもよいですね。

ごちゃごちゃしてお洒落になりません。

多くの場合が、文字で説明しすぎ、色を使いすぎです。表記するテキストは必要なものだけに絞ってください。色については、モノクロカラー以外を3色までに抑えると見映えがよくなります。

【まとめ】ブログアイキャッチの作り方

たくさん書きましたが、出来ることから試してみましょう。ひとつ、ひとつに意味がありますので、いくつか作っているうちに感覚がわかってくるもの。

ぜひ試して、良い作品ができたら教えてくださいね！

推奨デザインツール

当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。

あわせて読みたい

【CanvaPRO】有料プランと無料プランを徹底比較！ Canvaをお使いのあなた。写真やイラスト素材を選ぶときに、ほとんどが有料のマークが付いていてイライラ…こんな経験していませんか？ 有料のCanva Proにすれば、このイ…

Canvaを詳しく知る ➤

おすすめWordpressテーマ

私は、導入するだけで一気にお洒落になるWordpressテーマ「SWELL」をおすすめします。デザイン性はもちろん、その操作性は特筆ものです。

SWELLを愛用する私が実際に使用してきた内容を加えた、詳しい記事を書いています。ぜひご参照ください。

あわせて読みたい

大人気テーマ【SWELL】愛用者がその実力を本音レビュー お洒落なブログを作りたい─あなたはそうお考えではないですか？ お洒落にするにはデザインセンスが必須。確かにそういうところもあります。なら、デザインのセンスがな…

SWELLを詳しく知る ➤