アイキャッチの作り方がわからない
アイキャッチを作るのが面倒臭い
何のためにアイキャッチを作らないといけないの
ブログを初めてアイキャッチをどうやって作ったら良いのか迷う方も多いですね。
アイキャッチってポイントを抑えないと検索にマイナス影響になるので、実はSEO対策で重要な要素の1つなんです。
ヤマヒ|山口博道(ヤマグチヒロノリ)
Webマーケターサロン ヤマヒ塾の塾長・現役Webマーケター。Webメディアを運営するスタートアップ企業の元経営者。現在は企業にSEO研修・コンサルティングをしつつ、自身のサイトを運営。Webマーケティングの情報をSNSで初心者向けに発信 ▷プロフィール詳細
Twitter▶︎@yamahi_official / YouTube▶︎ヤマヒ塾 /サロン▶︎ヤマヒ塾
アイキャッチは、私も最初、canvaを使って文字を打ち替えて、なんとなく整った風の画像を作っていたのですが、今考えるとあれはダメでした。
だから、canvaのテンプレートを使って、テキストを打ち替えただけの画像だとSEOの評価に悪い影響を与えてしまう可能性があります。
だからといって、アイキャッチに時間をかけてカッコいい画像を作る必要もないんです。
デザインはこだわりだしたらキリがないですし、忙しい中ブログを頑張っているにとって、スピーディーにSEOの要点を抑えたアイキャッチを作ることが大切ですよね。
今回、初心者が抑えるべきポイントを紹介しながら、アイキャッチの作り方を解説していきます!
※動画で解説してるのでいるのでラジオ的に聞いていただくことも可能です。
ブログのアイキャッチの作り方(1)なぜ必要なのか?
まずは、アイキャッチがなぜ必要なのか、その役割について理解をしましょう。
- 目線を奪って興味を引く
- 知りたいことがあると認知
「興味を引いて、探している情報がありそうだ」とユーザーが感じれば、その記事を読み進めてくれます。
来たユーザーの期待に答えられる記事だと認識してもらうことで、離脱を防ぐのです。
それでは、2つの役割について解説していきます!
目線を奪って興味を引く
まず1つ目に、ユーザーの興味を引くというアイキャッチの役割があります。
知りたいことが書いてあると認知
2つ目は、知りたいことが書いてあると認知することです。
アイキャッチを通じて、ユーザーが探している情報が「ここありそうだ」と感じてもらうことが大事です。
自分の探している情報とのマッチングを確認すれば、ユーザーは記事を読み進めてくれます。
ブログアイキャッチの作り方(2)デザイン
次に、デザインについての以下、3つのポイントを解説してきます。
- デザイン性の高さは必要ない
- フリー素材そのままは最悪
- 大事なのはオリジナリティ
それでは、それぞれを簡単に解説してきます!
デザイン性の高さは必要ない
1つ目のポイントは、「デザイン性の高さは必要ない」ということです。
アイキャッチを作るというと、デザイン性を気にする人がいます。
凝りに凝ったデザインのアイキャッチ作っても、パパッと手間をかけずにつくっても、検索順位に関わってくるのはデザイン性の高さを直接評価されることはありません。
初心者は、多くの場合、凝ったデザインを作るためにたくさんの時顔を費やしても無駄になりますので、時間をかけずに要点を抑えたアイキャッチを作ることを目標にした方が良いです。
フリー素材そのままは最悪
2つ目のポイントは、「フリー素材そのままは最悪」です。
よく見かけるアイキャッチに、フリー素材をそのまま使ったものがあります。
フリー素材をアップして掲載しても「コピーしたコンテンツ」「他サイトから持ってきた画像」という判断をGoogleがして悪い評価をされてしまう可能性があります。
フリー素材は、あくまで素材として加工を加えて活用することが大切です。
大事なのはオリジナリティ
3つ目のポイントは、「大事なのはオリジナリティ」です。
つまり、他にない画像を掲載することということです。
自分で撮影した写真や描いた絵などがあればそれが良いですが、そういったものを用椅するのは大変ですよね。
本記事の後半で、具体的な作り方についても解説していますので、ぜひ最後まで読んでいただければと考えます。
「フリー素材を加工しただけでも、オリジナルになるの?」
と思った方もいるかもしれません。「オリジナルかどうか」という判断は、Googleがオリジナルと判断するかどうかで決まります。
Googleがオリジナルと判断しているかどうかは、Google画像検索をすることで判別することができます。
すでに掲載している画像をチェックする場合は以下のようにやって確認してください。
画像の上で右クリックをして、「Googleで画像を検索」をクリック
検索結果の「一致した画像を含むページ」に自分のブログのURLだけが出てくれば問題ないです。
なお、フリー素材や会社が提供する素材をそのまま利用するとこの部分に画像提供元が出てきてしまいます。
ブログアイキャッチの作り方(3)手軽に作るオススメの方法
ここでは、アイキャッチを手軽に作るオススメの方法をご案内します。
全体の方針
全体の工程について、私の考え方をお伝えしたいのですが、最初は「手間をかけずに簡単に自分でオリジナルの画像を作る」という方針で進めていくことをオススメします。
そして、実際にその記事が上位化して、ライバルサイトよりも質の高いページを作りたいと考えるようになったら、自分の手間か、お金かけて外部のデザイナーに制作をしてもらいましょう。
手軽な加工方法
おすすめの手軽にできる加工方法は、フリー素材に少し背景などを加えて、文字を加えるという方法です。
具体的には以下のような画像です。
これを作成するために利用しているソフトはいわゆるパワーポイントに代表されるような、プレゼンテーションソフトです。
画像加工にオススメのソフト
プレゼンテーションソフトでの加工をオススメしているのですが、私が使っているのは「キングソフト」というソフトです。
一般的には、パワーポイントが有名ですし、私のパソコンはMacなので、標準で「keynote」というプレゼンテーションソフトが入っています。
キングソフトは、パワーポイントとほぼ同じ機能が搭載された中国の企業が作ったプレゼンテーションソフトです。
パワーポイント、keynoteという選択肢がある中でキングソフトを使っている理由は以下です。
パワーポイント
機能的には問題なく、特に文字装飾の機能が充実しておりアイキャッチ作りに向いています。
しかし、買い切りモデルがなくなり、今は office365で毎年料金がかかるし、金額が高いことがネックです。
(参考)Office 365 Solo:12,984/年 (税込)
keynote
Macであれば標準でついているので追加での費用がかかりませんが、文字の装飾についての機能が弱いのがネックです。
シンプルさをを大切にするAppleらしく、文字を強調するような装飾の機能がほとんどありません。
例えば、以下の「SEO」「超基本」「勉強せずにづつけても無駄」といった装飾は、keynoteでは出来ません。
キングソフト
キングソフトは、15年以上前からからパワーポイントをはじめとするマイクロソフトのオフィスシリーズの格安互換ソフトを展開している会社です。
Microsoftでいう、パワーポイント、エクセル、ワードの3つが一つにまとまった WPS Office というソフトがオススメです。
パワーポイントが使えれば、使い方は全く一緒で、特に不自由を感じることありませんでした。
WPS Officeの価格は、
- 1年版 3,164円(税抜)
- 買い切り 7,091円(税抜)
とMicrosoftに比べてかなり安くなっていますし、30日無料でお試し利用ができて良いです。
キングソフト・WPS Office ▶︎ https://www.kingsoft.jp/office/
※ リンクが切れている30日無料でお試し利用キャンペーンが終わった可能性があります。
フリー素材サイト
オススメのフリー素材サイトは以下です。特徴も書いたので参考にしてみてください。
pixaboy
海外の会社だが、著作権許可やクレジット記載が不要なので安心して使える。
pixaboy ▶︎ https://pixabay.com/ja/
PhotoAC
日本の会社でラインナップが広い。加工や商用利用も大丈夫。
PhotoAC ▶︎ https://www.photo-ac.com/
freepik
写真だけでなくベクター画像も強いし、充実している。
無料利用の場合、クレジット記載という画像が多いので注意。
freepik ▶︎ https://www.freepik.com/
ブログアイキャッチの作り方(4)画像のサイズ
次にブログのアイキャッチのサイズについてを解説します。
画像のタテヨコ比
ウェブサイトで掲載する画像のサイズは「16:9」という比率が標準です。
この比率で作ると、パソコンでもスマートフォンでも、色々なところで表示されるサムネイルが綺麗に表示されます。
そのため、アイキャッチは、16:9の比率で作ることをオススメします。
また、h2やh3にアイキャッチを入れる場合は、そのルールも決めておくと全体的に統一感のあるサイトになります。
画像サイズのルール
以下は、実際に私がウェブサイトを作るときのアイキャッチや見出し画像のサイズルールです。よかったら参考にしてみてください。
・アイキャッチ
TOP 760px × 428px
・見出し画像(2パターン)
h2 760px × 400px
h3 760px × 300px
または
h2 760px × 300px
h3 760px × 250px
それでは、最後に画像の圧縮についてご紹介いたします。
ブログアイキャッチの作り方(5)画像の圧縮
アイキャッチを作ったらサイズの圧縮とリサイズをしましょう。
画像が重たいを表示速度が遅くなり、Googleの評価が上がりません。
ファイルの重さ
画像圧縮は色々なウェブサイトで無料でできますが、私のオススメは以下のsqooshというサイトです。
sqoosh ▶︎ https://squoosh.app/
こちらは、Googleが運営している画像圧縮サービスなので、SEO対策で利用するなら一番いいです。
サイズ圧縮の目処ですが、「50kB以下」を基準に考えるのがオススメです。ブログにアップロードする全ての画像は「50kB以下」にするようにしましょう。
ファイル形式
画像の形式は「Moz.JPEG」という形式が、一般的な .jpeg です。迷ったらこちらを使いましょう。
これらを反映すると、Sqooshの設定は以下のような設定になります。
よろしければ参考にしてみてください。
まとめ
本記事では、ブログのアイキャッチの作り方を解説しました。
ポイントとしては、手間をかけすぎずに、でもオリジナルにはこだわるという点です。
また、横幅を統一することで綺麗なサイトになりますし、16:9という比率でアイキャッチを作ることで、サムネイルとして外部に表示される時などにも綺麗に表示されます。
最後に、画像が重たいとSEOの評価が下がってしまいますので、必ず圧縮して50kB以下にするということを忘れないでください。
▽ 次へ
▽ 講座一覧に戻る