MENU

当サイトはリンクフリーです

当ブログ内の記事本文や図解等は、以下の注意事項を守っていただければご自由にお使いいただいて結構です。

【注意事項】

  • 引用元として当サイト名を記載の上、対象記事へリンクしてください。
  • 添削記事などの紹介者のアイコンは転載不可です。

ご不明な点があれば、twitterのダイレクトメールまでお願い致します。

著者

どんぐり所長

Nobilista公認バッジ

愛用 順位チェックツール

オリジナルグッズ購入

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

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

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

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

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

アベマキ
アベマキ

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

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

目次

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

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

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

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

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

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

項目票数割合
得意34票22.4%
苦手81票53.3%
どちらでもない37票24.3%
アンケートの票数

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

アンケートでのご意見

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

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

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

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

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

どんぐり所長
どんぐり所長

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

オンラインデザインツール「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なら、画像やイラストが気にせず使える!

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

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

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

どんぐり所長
どんぐり所長

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

テキストが載せやすい写真の選び方

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

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

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

写真とテキストエリアを6:4で分けたデザイン
中央に丸形のテキストエリアを設置したデザイン
中央に四角のテキストエリアを設置したデザイン
中段に帯状のテキストエリアを設置したデザイン

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

どんぐり所長
どんぐり所長

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

写真をモノクロにする

無料サイトで被リンクゲット
合格したら何するん?

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

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

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

どんぐり所長
どんぐり所長

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

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

フレームで切り抜いた使った猫ちゃん

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

これ以外にもフレームがたくさん

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

検索結果の画像は記事内の画像が正方形に切り抜かれる

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

「SWELL」「Cocoon」で検索して出てきた当サイトの記事

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

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

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

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

テキストの選定と配置

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

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

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

キーワードを洗い出す

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

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

簡単なのは「箇条書き」

箇条書きの例

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

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

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

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

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

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

フォントの選び方

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

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

迷ったらゴシック体

ゴシック体

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

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

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

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

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

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

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

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

Canvaは標準でふちどり機能がありません。それっぽい文字を作る事ができますのでご紹介しておきます。

色に拘る

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

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

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

お茶と葉っぱから色を取った

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

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

どんぐり所長
どんぐり所長

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

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

サイト配色に合わせる

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

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

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

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

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

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

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

装飾素材を手に入れる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • アイキャッチ制作はCanvaを使おう
  • アイキャッチのサイズは「1200px × 630px」
  • テキストの載せやすい写真を選ぶ
  • 読みづらい写真なら「ふちどり文字」か「テキストボックス」
  • 検索結果の画像に対応した「正方形」に収まるようなテキスト配置
  • テキストエリア内は余白を意識する
  • フレームに写真をいれて、テキストエリアを確保
  • Youtube型はテキストを大きく目立たせる!
  • キーワードを洗い出して、無駄な文字を省く
  • 長文にしない
  • 簡単なのは「箇条書き」
  • ブログ配色にアイキャッチも併せるとスッキリ
  • フラットデザインに挑戦しよう!
  • それでもデザインに困ったら「ブログデザイン部」で相談しよう!

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

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

推奨ザインツール

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

Canvaを詳しく知る

おすすめWordpressテーマ

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

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

SWELLを詳しく知る

トップページへ戻る

お気軽にコメントください

コメントする

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

目次