【今すぐ活かせる】アイキャッチ画像作成！検索上位のレイアウトとは?!

アイキャッチ・サムネイル画像が大切なのはわかっている。でも作ったことがない！そもそもデザインのセンスがない！サイトが重くならないか心配。フリーの素材をどこで見つけてどう活かしたらいいのかわからない。どんな風に文字をいれたらいいの？サイズは？どうやってつくるの？とお困りではありませんか？

そんなあなたに代わってアイキャッチ画像について調査しました。上位サイトのアイキャッチ画像についてもお話します。また「すぐに活かせる画像と文字レイアウト」についても紹介します。

今後も、ブログのアクセス件数を伸ばすために重要なポイントもお伝えしますので、内容がいいと思っていただけたらぜひ「お気に入り登録」をお願いします。

＜記事を読むメリット＞
アイキャッチ画像を魅力的に見せる技が学べる
文字レイアウトの実例がわかる
ブログのクオリティが上がる

＜読んでほしい人＞
ブログを通して人生を変えたい人
会社に頼らず、自分で収入を得たい人
サイトのアクセス数を伸ばしたい人

まずはチェックリストをご覧ください。それぞれの内容については、後程じっくり解説します。では、早速はじめましょう！

画像魅力度チェックリスト

あなたのアイキャッチ画像は…
1）ひと目で内容がわかる
2）ストーリーを連想させる
3）サイト内で統一感がある
4）部品が一定方向に揃っている
5）色を多く使いすぎていない
6）文字が読みやすい色合い
7）フォントがイメージに合っている
8）強調したい箇所がわかる
9）インパクトがある
10）表示速度を意識している

結論

・アイキャッチ画像はブログの顔
・読む意欲を高める工夫を全力で！
・ブログの強みは「画像＋テキスト」

デザインをかじった人なら「デザインの4原則。整列・近接・強調・反復…」について聞いたことがあるかもしれません。いろんなことを総合して、だから何がいいたいんだ！そんなんじゃなくて「手っ取り早く、今日からでも実践できることが知りたいんだよー！」という声に今回はお応えしたいと思います。難しいことは一切なしにして、レイアウト例を見ていきましょう。

上位サイトのレイアウト例

検索ワード：ブログで稼ぐ(2022.9月現在)

上位サイトでも、意外と「写真のみ」「イラストのみ」が多いようです。ブログ上位を狙う立場からすれば肩の荷がおりて気が楽になったかも?!でもそれは少しもったいない。なぜなら…

・細部(画像)にまでこだわると手を抜いていない感が生まれる
⇒読者に伝わる⇒ブログの信頼度が上がる

・他のブログとの差別化が図れる
⇒Instagramで証明されているように画像は人を惹きつける魅力があります。
ブログの強みは「画像＋テキスト」

アイキャッチ・サムネイル画像の役割

アイキャッチ画像の果たす役割とは…
・「の目（eye）を惹きつける（catch）」ため
・見る人の記事を読む意欲を高める
・記事への流入件数を増やす
・サイト内の回遊を促す

＜補足＞
サムネイル画像とは…
「親指（thumb）の爪（nail）」ほど小さい、内部リンクの記事などで表示される画像。
デザインを考える際は、見切れて表示されなくなるデザインは避けるほうがいい。

実はみんないろいろ考えてつくっている！ポイントはココ！

★ブログ(テキスト)の強みを全力でサポートする画像＝アイキャッチ画像

画像に情報量を付与すると…効果は？
・読み手側が求める内容か短時間で判断できる
・読者の想像力を掻き立てる⇒興味をもつ
・読み手にインパクトを与える
・強調したい内容が伝わる

画像に抱く印象
・サイト記事の統一感
・ブログのブランドイメージ
・書き手や記事の信頼性
・製作者への印象(例：LINEアイコンなど)
・メラビアンの法則
(初対面のときに相手に抱く印象)
　1）視覚情報(見た目) 55％
　2）聴覚情報(声) 38％
　3）言語情報(話す内容) 7％

メラビアンの法則について気になる方はこの記事もおすすめ
【つい読んじゃう！】読まれる記事と読まれない記事の差はココ！ - ブログ改善チェックリスト

画像をよりよく見せるには
・素材をそろえる(線を意識する)
・色を厳選して使う
・文字の読み安さを重視する
・フォントイメージを記事内容に合わせる
⇒ゴシック：カジュアル・力強さ・信頼感
⇒明朝体：高級感・繊細さ・大人っぽさ
⇒楷書体、行書体：伝統的・和風
⇒デザイン書体：個性的・遊び心
※表示速度を意識する

画像加工フリーツール

無料で25万点以上のテンプレート！100種類以上のデザインタイプ。
PCブラウザはもちろん、スマホアプリでも操作可能。テンプレートから選んで個性豊かなデザインを簡単に作ることができます。ダウンロード、SNSで共有、印刷など色々な媒体に対応！豊富なテンプレートを使いこなしてTwitterのヘッダーを今すぐ簡単にデザイン！

Canvaのオンラインプレゼンテーションテンプレート

無料でもできることいろいろ！
まずは気軽に画像加工フリーツールを触ってみましょう。

画像サイズ

Twitter…大サイズ「縦600px×横314px」小サイズ「縦144px×横144px」
Facebook…「縦374px×横195px」
LINE…「縦630px×横630px」
はてなブックマーク…「縦840px×横1200px」
YouTube動画のサムネイル…推奨サイズは「1280×720」（単位：ピクセル）
アスペクト比は「16：9」です。（※2021年10月時点）

フリー素材提供サイト

★無料でこのクオリティなら使わないのはもったいない！
ご使用前に必ず「利用規約」を確認ください。
(下記紹介URL：アフィリエイト設定なし)

・Pixabay (海外サイト：日本語対応)
　https://pixabay.com/ja/  
　※英語検索の方が使いやすい
　(商用利用可・加工可。クレジット(権利者情報)表記不要)

・写真AC（photoAC）
：無料版はDL回数制限あり
　https://www.photo-ac.com/main/guide/
　(商用利用可・加工可。クレジット（権利者情報）表記不要)

・ぱくたそ（PAKUTASO）
：会員登録なしで利用可能
　https://www.pakutaso.com/
　(商用利用可。クレジット（権利者情報）表記不要)

・O-DAN
：海外画像配信サイトをまとめて検索
　https://o-dan.net/ja/ 　
　※日本語検索可能　(商用利用可)

・いらすとや
 　https://www.irasutoya.com/
　(商用利用可。クレジット（権利者情報）表記不要)

・undraw
 　Illustrations | unDraw
　(商用利用可・配色変更可。クレジット（権利者情報）表記不要)

◆注意点◆
フリー素材のサイト全てに言えることですが、違法にアップロードされた素材である可能性は拭いきれません。心配な場合は「Google で画像を検索」で調べることをおすすめします。※商用利用可能＝利用規約の範囲

実践レイアウト

UIデザイン：自然と目を向けるような、視覚誘導を利用したデザイン(UI：ユーザーインターフェースの略)

＜原則＞視覚的な意識は左から右へ進んでゆく
①グーテンベルク・ダイヤグラム
⇒同じ種類の情報が均等に配置されている場合、視線は左上から右下に移っていく
　重要な情報は左上へ

②大→小へ
③太い→細いへ
④同形・同色の要素
⑤無意識に数字を順に追う
⑥余白と読み安さの関係
⑦明度と配色(目立つ領域)
⑧意識と目線
⑨目線の先を追う

実践！アイキャッチ画像作成

画像を作成する前に考えておきたいポイント
＜注意点＞
縮小されても文字が読みやすいか？
読み込み速度は遅くないか？
見きれない配置(SNS：中央配置が無難)

✔Cnavaには、自動表示機能「ガイド線」があります（ピンク色の線・点線表示）

見きれない配置のPoint！
ブログ「 縦：675px、横：1200px」の場合
約２割内側「縦：540px、横：1065px」
SNS「675pxの正方形」中央部分

レイアウト：いちばん簡単なのは「左余白」
同じ素材を使ったサンプル

タイトルの入れ方あれこれ

重たい画像を軽くするには

画像に凝ったはいいけど、検索後の表示が重くならないか心配。そんな方にはフリーで使えるおすすめサイト(非アフィリエイト)

・100％無料、使いやすい、サインアップなし
Bulk Resize Photos - 画像サイズ変更

時間有効活用の奥の手

制作された方は実感されているはずです…アイキャッチ画像をつくるには時間がかかる…。ですが！画像クオリティが上がるとブログのクオリティもアップするのは事実。時間を無駄にせずになるべくお得に「魅力的なアイキャッチ画像を手に入れたい！」
金銭的に余裕があるなら、自身の時間を有効活用するためにも外部委託を検討する価値があるかもしれません。単価だけでも検索してみては？

オンライン取引完結。クリエイターへの制作依頼から個人のお悩み解決までできる。
スキルのフリマ【ココナラ】

最後に…

オリジナルのアイキャッチを作成するのは、時間も労力も掛かって非常に面倒です。
しかしアイキャッチ画像を工夫すれば、独自性・個性をもたせることができ、ブログのブランドイメージも高くなります。また細部にも手を抜かない精神は、書き手や記事の信頼性にも繋がります。
アイキャッチをどう作成すればいいかわからない…そんな悩みがすこしでも解消されれば幸いです。サイトを見て勉強するあなたのブログは着実によくなっているはずです。あなたの明るい未来を応援しています。

今後も「ブログ改善」についてわかりやすく解説します。よろしければ、お気に入り登録をお願いします。それでは、また次回。