あわ丸
つくり方のコツってあるのかな？
そんなノンデザイナーの方に向けた、簡単にアイキャッチのクオリティを上げるコツを紹介します。
ちょっとしたコツで
アイキャッチを印象的でおしゃれにする方法😺 pic.twitter.com/gzefPhLIf7— 猫森うむ子🐱フリーランス15年×図解ブログ (@umuco_digital) January 8, 2021
こんにちは！猫森うむ子（@umuco_digital )です。
アイキャッチづくりのポイントは３点あります。
・適切なサイズでつくる
・目的にあった画像選び
・文字や素材の効果的な配置
それでは詳しく解説していきましょう！
ブログ関連まとめ記事（随時更新）／興味のある方はブックマークにぜひ！
【保存版】ブログの始め方・運営・集客・収益化までの方法を39記事で完全図解【まとめ】
詳しいプロフィール Twitter @umuco_digital
アイキャッチとは
画像や動画などで人の目を引きつけるものをアイキャッチといいます。
広告業界で幅広く使われる言葉ですが、一般的にはブログやWebマーケティングなどで使用される印象的な画像を指します。
この記事では、ブログに使用するためのアイキャッチ画像のつくり方について解説していきます。
アイキャッチの役割
アイキャッチの役割は大きく分けて２つあります。
SNSなど外部のメディアで目を引きつける
ブログやサイトのブランドイメージをつくる
ブログでブランディングする方法はこちらの記事で詳しく解説しています。
【信頼性とPVを上げる】ブログで効果的にブランディングするための８つのコツ 
【ブランディングとは？】個人のための５つのブランド戦略！わかりやすく解説【やさしいWebマーケティング⑥】SEOにも効果的なアイキャッチ
ブログ集客や収益化を目指している方にもアイキャッチは必須です。
検索キーワードによっては画像検索のデータが上位に表示されます。画像から記事を選ぶユーザーの目に留まるアイキャッチをつくることでSEO効果を発揮します。
また、画像の代替テキストにキーワードを入れることも重要です！
つく蔵
うむ子
関連記事
【図解・まとめ】SEOとは？超初心者のためのSEOの始めかたガイドそれではアイキャッチをつくる上でのポイントを解説します。
適切なサイズでつくろう
アイキャッチ画像のサイズは以下の２つのポイントを意識しましょう。
サイズを意識するポイント
運営しているブログやサイトの表示サイズに合わせる
SNSにシェアしたときの表示を確認する
アイキャッチの適正サイズは、運営しているブログによって異なります。
アイキャッチ画像は記事だけでなく記事一覧などでも表示されるため、小さくても目に留まるものを意識しましょう。
あわ丸
うむ子
つく蔵
トリミングを意識しよう
記事一覧やTwitterやfacebookなどのSNSでシェアされる際、アイキャッチ画像の一部が切り抜かれます。
SNSでは上下が切り取られがちです
記事一覧では正方形に切り抜かれることが多いので、文字などの大事な部分は、なるべくアイキャッチ画像の中心に配置しましょう。
デザインツールはPhotoshopがおすすめです
【初心者でも簡単】Photoshopとは？独学１週間で簡単にできる１０のことSNSでのアイキャッチの表示をあらかじめ確認
Twitterの表示を確認する
確認したいアイキャッチがある記事のURLを入力し、Preview cardをクリックします。
facebookでのアイキャッチ表示を確認する
確認したいアイキャッチがある記事のURLを入力し、デバックをクリックします。
アイキャッチが表示されない場合は、「もう一度スクレイピング」をクリックします。
うむ子
表示速度を意識しよう
アイキャッチ画像のサイズが大きすぎると、記事ページが重くて表示されるまでに時間がかかってしまいます。
表示速度が２秒増えると、離脱率が５０％も増えるというデータがあります。
サクサク表示されるよう、アイキャッチのデータを軽くしておきましょう。
登録不要で使用できます。画像の荒れが目立たない程度に圧縮してくれます。
関連記事
【SEO】サイト表示速度を改善する８つの方法をわかりやすく解説【WordPress】目的にあった画像を選ぶ方法
目的にあった画像を選ぶには、注目を集める、イメージで伝える、ブランドイメージをつくるの３つを意識しましょう。
アイキャッチ画像におすすめの厳選素材ダウンロードサイト
【初心者が失敗しない】ブログ読者が増えるおしゃれな画像フリー素材＆有料素材サイト画像選びに自信がないという方はこちらの記事もどうぞ
【図解】センスを磨く方法！３つのコツをわかりやすく解説【はじめてのデザイン】サンプル画像をつかって解説します。
注目を集める画像選び
主役がわかりやすい写真を選ぶ
アイキャッチは小さく表示されるので、主体が目立つと目に留まりやすくなります。
印象的な色を取り入れる
SNSなどのタイムラインで流れてしまわないよう、色の効果を活用しましょう。
顔の写真は目に留まる
女性の顔（比較的アップ）の写真などは、注目の効果が抜群です。
小さくなっても目に留まる画像を選ぶ
サイト内では、記事一覧などの表示がかなり小さくなる場面があることを考慮しましょう。
内容をイメージで補足する画像選び
世界観が伝わる画像を選ぶ
言葉だけでは表現しきれないような雰囲気を画像で補います。
訴求したい内容にあった画像を選ぶ
伝えたい内容を補ったり、イメージさせるような画像を選びましょう。
ブランドイメージをつくる画像選び
画像の統一感を意識する
全てのアイキャッチ選び、ブログ内の画像選びはなるべくテイストを揃えましょう。
ブランドコンセプトにあった画像を選ぶ
ブランドが伝えたい世界観、テーマカラーを意識した画像を選びましょう。
うむ子
画像を選ぶ際のポイントやデザインのコツを、サンプル画像をつかって紹介します。
印象をコントロールする素材選び
意図的にイメージをつくりあげる画像選び
質感で訴えかける
視覚以外の五感要素を感じさせる画像は印象に残りやすい傾向があります。
光と陰でドラマティックに
情緒（感情）にアプローチする効果があります。モノクロは光りと影が際立ちます。
トレンド感のある画像をつかう
メジャー感や今っぽさ、未来的な印象を与えます。
透明感でスタイリッシュに
洗練、ミニマルな印象を与えることができます。色数をおさえましょう。
ポップなイラスト素材をつかう
クリエイティブ感、今どき感を印象づける効果があります。
象徴を印象的につかう
想像力（連想）によって、情報を補う効果があります。記憶のアンカリングにも最適。
想像力や好奇心に訴えかける画像
イマジネーションやアイデア、ワクワク感をうむ画像はユーザーのアクションを促します。
疑似体験の効果
自分も体験してみたい！という想像力を駆り立てる効果があります。
ストーリーをイメージさせる
見る人の想像力をかき立て、引き込む力があります。
配置（構図）を意識してみよう
アイキャッチに適した印象的でバランスのよい構図
写真の選び方や文字を配置する位置などに活かしてみてください。
日の丸構図
センターに視線が集中するので、伝えたいことがわかりやすくインパクトが強い。
三分割構図
定番ですが簡単にバランスよく決まります。画像の主体や文字の位置をライン状や交差している場所に配置。
黄金比（フィボナッチ）
自然界にある比率と同じで、広がりと躍動感とバランスが共存。美しく洗練されている印象。
対比構図
画像や文字などで対比をつくると、全体のバランスをとるのに役立ちます。
対角線構図
斜めに入るラインを意識。文字も対角線状に配置するとバランスが取れます。
三角構図
安定感を感じさせる構図。底辺に角度があると躍動感も感じさせる。
放射構図
手前から奥へ視線を誘導する構図。平面状に奥行きができるので目を引きます。
文字の配置にこだわろう
読みやすく文字を配置する方法
背景がシンプルな画像を選ぶ
あらかじめ文字を入れる位置を考えてから画像を選ぶと簡単です。
背景を暗くする（明るくする）
文字の色が目立つように背景の素材の色を工夫します。
文字のサイズ、文字間隔を変える
文字の太さ、サイズ、文字間隔、行間などで印象が変わります。
ふちどり
ふちどりや影はスタイリッシュさがダウンするので工夫が必要です。
文字自体をデザインにする
文字そのものを印象的なデザインとして使用する方法もあります。
半透明の背景を置く
写真に重なるように半透明の画像を入れます。
キャッチコピーにもこだわろう
効果的なキャッチコピーのタイプ
経験上、記事のタイトルよりもキャッチコピーを置いたときのほうが、開封率やPVが伸びました。
ブログのテイストにマッチするようであれば、チャレンジしてみてください。
「言語化力」を強化してキャッチコピーを磨きましょう。
【保存版】言語化とは？実践方法と文章化５ステップをわかりやすく図解で解説
欲求（本音）に訴えかける
インパクトを残したければ、ドキッとするようなキャッチコピーがおすすめ。女性に響きます。
端的に内容を表現する
読む前に内容が理解できるので、興味をもっている人の目に留まりやすい。
逆説的な言葉をつかう
読者の常識を覆すような、意外性のある言葉をつかいます。
読者の背中を押す言葉
ユーザーが一歩踏み出せるように後押しするような言葉をつかいます。
トレンドデザインを取り入れる
トレンドデザインをすこし取り入れることで、ブランドイメージが引き上がります。
アイキャッチにマッチするトレンドデザインを活用
3Dデザイン
質感が印象的なものや、写真との組み合わせでトレンド感がアップします。
流体シェイプ
液体が波打つような曲線。ダイナミックにつかうと印象的。Webサイトなどにも。
手書きイラスト＆ラインアート
デジタルの世界で目を引く手描きテイスト。写真などに合わせてもかわいい。
幾何学デザイン
シンプルで記号的な図形。レトロカラーとの組み合わせも今っぽい。
レイヤーデザイン
平面の空間に奥行きをつくり、吸い込まれるようで印象的です。
グラデーション
流体シェイプ、幾何学デザイン、イラストなどと組み合わせてより効果的に。
アイソメトリックイラスト
斜め上からの視点で描かれた立体的なイラスト。視点が印象的。
巨大タイポグラフィー
大きく配置されたフォント自体が印象的なデザイン。
ミニマルデザイン
色や形などの要素を最小限にしたミニマルテイスト。質感などの違いで今っぽくなります。
他にもある目を引くデザインのコツ
印象的なデザインを簡単につくるアイデア
補色をつかう
色相環で反対にある色をつかうと印象的です。
余白で印象的に
主体の周囲に十分な余白があると印象的です。フラットデザインにも合います。
文字を載せない
アイキャッチはタイトルと一緒に表示されるので、あえて文字を載せずイメージだけにするのもスッキリします。
大胆なトリミング
被写体の一部をクローズアップすると、ライブ感がアップします。
風景＋大胆な透かし
定番デザインですが、文字の配置が簡単な便利デザイン。自然の風景などでもつかえます。
フォント選びにこだわる
読みやすいフォント、目に留まるデザインフォントなど目的に合わせて選んでみましょう。
うむ子
アイキャッチ画像を作成するツール
アイキャッチを作成するのにおすすめのツールはAdobe PhotoshopとAdobe Illustratorです。
【初心者でも簡単】Photoshopとは？独学１週間で簡単にできる１０のことどちらも本格的なデザインツールですが、初心者にも使いやすく便利な機能が満載です。
Adobe Creative Cloudのコンプリートプランでは、どちらのツールも自由に使えるのでおすすめです。
【Adobe Creative Cloud】コンプリートプランがおすすめな理由【評価＆安く買う方法】Adobe系が少しハードルが高いという方はCanva Proがおすすめです。
あわせて知りたいデザイン基本テクニック
デザインが整う４つの基本的な原則を紹介。
【デザインの４原則】印象的で「伝わる」デザインの基本ルールを初心者にもわかりやすく解説ブログやSNSで活かせる図解テクニックを解説。
【保存版】図解の作り方６ステップ！画像23枚でデザインのコツを徹底解説まとめ
おしゃれなアイキャッチ画像をつくるポイントは以下の３点です。
・サイズ選びを意識すること
・記事を視覚的に補足するものを選ぶこと
・画像の選び方やデザインによる印象の違いを知ること
みなさんのブログライフに役立てていただけると嬉しいです。
関連記事
【信頼性とPVを上げる】ブログで効果的にブランディングするための８つのコツブログ関連まとめ記事（随時更新）／興味のある方はブックマークにぜひ！
【保存版】ブログの始め方・運営・集客・収益化までの方法を39記事で完全図解【まとめ】
当ブログでは「有料級を無料で！」をモットーに良質なコンテンツづくりを目指しております。
記事が面白かった、役に立ったという方は、応援いただけますと励みになります！
