ブログに画像って必要なの？
適当に貼っちゃっていい？
ブログ記事における『画像』の役割は、記事本文に比べて『箸休め』的に思われがちですが、それは間違いです。
画像を適切に扱うことで、以下のようなメリットを享受することができます。
- 読まなくても内容が伝わるアイキャッチにより、クリック率がUP
- 整理されたインフォグラフィックで説得力UP
- 魅力的な画像を目当てに画像検索によるアクセスUP
- 自作の画像がWEBでシェアされサイトの評価UP
- 記事のオリジナリティ性を高め、検索エンジンからの評価UP
- 記事の読み込み速度UPで検索エンジンからの評価UP
- 効率的なツールの活用で作業スピードUP
などなど、画像がSEOに果たす役割やメリットは決して小さくはありません。
わかりやすく画像で解説することでページの滞在時間や精読率が上がれば、検索エンジンからの評価も上がり、上位表示されやすくなるでしょう。おまけに、広告のクリック率や単価向上も期待できます。
正しい画像の扱い方を学ぶことで、あなたの記事はより評価されやすくなります。
ぜひこれから紹介するポイントを実践されてみてくださいね。
画像がもたらすSEO効果
記事の本文内に差し込む画像は、「文章飽きてきた…」ユーザーへの気分転換になりますし、簡潔にまとめられたインフォグラフィックや参考画像は、記事の説得力を補強する強力なツールとなり得ます。
魅力的なアイキャッチ画像でユーザーのハートをキャッチできれば、サイトへの滞在時間伸び、検索エンジンからの評価を上げることができます。
また、画像の良し悪しは記事の滞在時間に影響を与えるだけではありません。正しくaltタグ（代替テキスト）を記述することで、検索キーワードからのみならず、画像検索からの流入が期待できます。
ほんのちょっとの手間が、
サボってるライバルとの
差別化になるんですよ〜
というわけで、アイキャッチ・画像の正しい活用法を知っておくことはそれだけでライバルとの差別化になりますので、
記事書くだけで力尽きそう
から、あともうひと踏ん張り！頑張っていきましょう。
アイキャッチってなに？
アイキャッチとは、
という意味です。
検索ユーザーがあなたのブログ記事をクリックした際に、一番最初にアイキャッチに目を止めます。
そこで、
- 記事の質問に関連性の高い画像
- 適当に選んだ無関係なフリー画像
だったら、効果的な印象を与えるのは確実に前者です。
よって、
- 記事の内容を魅力的にアピールする
- 記事を読むことで得られるポジティブなイメージ
- 質問の核心に迫る答えを暗示する
といった目的を持ってアイキャッチをデザインしていくことで、
- 記事のクリック率が上昇する
- 記事の滞在時間が上昇する
- 冒頭部分での離脱率が改善される
とメリットありまくりなので、ここはある程度意識して記事を作成していきたいですね。
アイキャッチが表示される場所はどこ？どんなとき？
アイキャッチは以下の状況でユーザーに表示されます。
- ブログに訪れたユーザーが最初に目にする画像
- ブログ記事そのもののサムネイル画像
- SNSに投稿した際のサムネイル画像（OGP）としても機能する
特にTwitterやFacebookでシェアする場合、アイキャッチ画像の出来不出来でクリック率は大幅に変わります。
ユーザーはタイムラインに流れてくるツイートの内容より、インパクトの大きい画像に反応して記事URLをクリックする傾向にありますので、SNS受けする「わかりやすい・魅力的な」アイキャッチはPV数や収益に直結すると言っても過言ではありません。
画像編集ツールのおすすめ2選
画像編集と聞くと「Photoshopなんて持ってないし…」と思われる方もいるかも知れませんが、以下の2つのツールは無料で画像を編集する事が可能です。
CANVA
ブログに使う画像を編集するツールの代表選手として、今最も使われているのは間違いなく「CANVA」でしょう。
アイキャッチに限らず、Twitterのヘッダー、ブログのキーヴィジュアル、プレゼンやセミナー資料、バナー作成など、おそらく全てのクリエイティブはCANVAさえあれば全てできるであろう高機能ツールです。
使い方もそれほど難しくなく、構成やデザインのテンプレートも豊富ですので、既にあるデザインを活用してパパっと画像を編集することができますよ！
有料版は年額15,000円（月1,200円ちょい）となっており、お値段しっかり。
ヘビーユーズするのであれば契約してみても良いかもしれませんが、そこまでこだわらないよ〜という場合は無料版のみでも十分使えます。
PhotoScape
PhotoScapeはMacとWindowsではかなり見た目や機能に差があります。
- Mac版＝photoscape X
- win版＝photoscape
どちらもつかってみましたが、同じ開発元のツールなのにMac版の方が多機能で洗練されています。（なんでや）
ただ、Windows版でもリサイズやトリミング、文字入れ、変形などは普通にできます。画像を軽量化する上では非常に便利なのでインストールしておいて損はありません。
こちらはCANVAのようなデザインツールというよりかは、
- 文字入れ
- リサイズ
- トリミング
がメインの活用法になるでしょう。
一応、すべての機能を使いこなせればかなりハイクオリティなデザインが制作できるみたいですが、マスターするのが大変なので普通にCANVA使っといたほうがカンタンですね。僕は上記以外の目的では使用してません。
こちらもPRO版がありますが、無料バージョンで十分です。
フリー素材画像を手に入れる7つのサイト
おしゃれな海外のフリー画像を手に入れたい場合は、O-DANを活用しましょう。
O-DANとは、フリー素材画像の検索エンジンで、Pixabay、Unsplash、Picjimbo、Kaboompickなど、ほぼ全ての海外素材の画像を一度に検索することができます。
これほんとうに無料でいいの？？
なクオリティの画像がとんでもない数出てきますので、記事のコンセプトに合った画像をチョイスしていきたいですね。
編集ツールでキャプションを入れるとより「これは◯◯を解説する記事だよ」が伝わりやすいでしょう。
日本人の画像やアイコン、イラストはこちら
海外画像がいまいち馴染まないな〜という場合は、日本の画像素材サイトも。
プロフィールやアイコン素材であれば、
などがおすすめです。
探せば他にも大量に見つかりますが、ここで時間をあまり消費しても先に進みませんのでほどほどにしておきましょう。
フリー画像を使う際の注意事項
また、もうひとつ注意しておきたいのは、
『フリー素材だからって何しても良いわけじゃない』
ということです。
これを、クリエイティブ・コモンズ・ライセンス（CCライセンス）と呼びます。
例えば以下のようなことです。
- ロゴやトレードマークに使用しない
- 商用利用不可
- 帰属表示が必要（photo by ◯◯）
- 違法性・アダルト性の高いサイトでの使用禁止
- 誹謗中傷目的で使用、悪意のある改変を行う
などなど。
真面目に調べてみると、画像提供サイトごとに規約が違っていたりして結構めんどくさかったりします。笑
しかし、ネット上の記事の多くは「なんとなく使ってる」人が非常に多いです。
実際海外の著作者からクレームが入った話は聞いたことがありませんし、「まあ大丈夫でしょ」っなる気持ちもわかりますが、CCライセンスをスルーして画像を使い続けることは「まさかの落とし穴」が隠れていることだけは覚えておきましょう。
なんだかんだで自作がやっぱりおすすめ
個人的には、画像はなるべくCANVAで自作するのがおすすめです。
理由は、フリー素材は既に世の中に溢れかえっていて検索エンジンからは「独自性」の評価を得ることができないためです。
ほんの少しでもライバルに差をつけたいのであれば、たった画像一枚でもオリジナリティを追求していきたいですね。
画像サイズは100KB以下を目標に
読み込み速度が遅いサイトは稼げません。
記事に埋め込む画像はなるべく軽量化してアップロードしましょう。ページの読み込み速度が遅いと検索エンジンからもユーザーからも嫌われます。
目標は100KB以下、できれば50KB前後が望ましいです。
2017年Googleの統計によると、読み込み時間「1秒」に対し、
- 3秒かかると32％が離脱する
- 5秒かかると90％が離脱する
- 6秒かかると106％が離脱する
- 10秒かかると123％が離脱する
という調査結果が出ています。
画像はサイズが大きいほど解像度が増し見栄えが良くなるものですが、読み込み速度が遅いと画像を見る前に離脱してしまいますので注意しましょう。
というのも、Googleはユーザーの『時間』を何より大切に考えているため、必要以上にユーザーの時間を奪うページ・サイトを評価しない傾向があるからです。
これは自分のサイトのコアウェブバイタルを測定するPage Speed Insightでも確認することができます。
Googleはウェブページの重要指数『コアウェブバイタル』と定義し、以下の3項目をサイトの評価に加えています。
- LCP（Largest Contentful Paint）コンテンツの読み込み速度の指数
- FID（First Input Delay）最初に表示される画面の読み込み速度
- CLS（Cumulative Layout Shift）レイアウトのズレの度合い
細かいことはここでは割愛しますが、中でも記事内の画像がLCPに影響し、アイキャッチはFIDに影響を及ぼします。サイトの読み込み速度の低下はユーザーの離脱を招き、検索順位の低下に直結しますので常に意識しましょう。
記事を読む読者が
「サクサク読める」
「高画質な画像」
どっちを期待しているかを
想像することが大切です。
そんなわけで、画像は適切なサイズに整えてあげることが大事なんです。ただし、圧縮しすぎてザラザラになってしまった画像はむしろコンテンツの魅力を削いでしまうので、良い塩梅を見つけてください。
ちなみに余談ですが、俳優の阿部寛さんのHPはプロのエンジニアが感動するほどの爆速ページです。目指そう。
画像は具体的にどれくらいの大きさにすればいいの？
ブログにアップロードする画像は、
- アイキャッチ＝1,000〜1,200px
- 記事内の画像＝700〜800px
あれば十分です。それ以上だとどうしてもKBが大きくなりやすく、それ以下だと画質の劣化が目立ってきます。
アイキャッチの画像サイズは横幅1,000〜1,200pxにしよう
アイキャッチに使用する画像サイズは1,000〜1,200px程度に抑えましょう。
一番最初に目に触れる画像だから
きれいに見て欲しい！
と適当に貼り付けるのは単なる書き手側のエゴです。
あくまでも「画像の美しさ＜＜表示の速さ」を念頭に、「読みやすい！」に重点を置いて記事を作成していきましょう。
なお、2022現在、ブログを訪れるユーザーの7〜9割はスマホユーザー（記事のテーマにもよる）です。よって、PCユーザーよりもスマホユーザーの見え方やユーザビリティを優先したほうが多くの人に価値を届けられますね！
記事本文に差し込む画像は横700〜800px程度でOK
記事本文に差し込む画像は、基本700〜800px程度でOKです。
多くの場合、画像に高解像度を求めることはそうそうないはずですし、PCよりも圧倒的に小さいスマホの画面であれば多少粗くても問題ありません。
ただし、「その画像そのものがメインコンテンツ」である場合は話は別です。
ワイは広瀬すずのめっちゃ可愛い画像が見たいんや！
なのになんでこんなザラザラなんや！
というケースもあるかもしれません。
こんなときは多少画質にこだわって、拡大表示して見たいユーザーの期待に答えた方が良いですよね。
読者があなたの記事になにを期待しているか、果たすべき役割を常に意識しながら臨機応変に対応していきましょう。
画像圧縮ツールはTinypng（通称 パンダのやつ）
画質を落とさずに画像を軽量化する際に、「画像圧縮」は必須のプロセスです。
圧縮をかけるとかけないとで画像サイズは2倍〜3倍程度変わることもザラです。マストでやっていきましょう。
画像を圧縮する方法はフリーソフトやブラウザなど様々ですが、いつでもどこでも使えるブラウザ圧縮がおすすめです。
やり方もドラッグアンドドロップのみと非常にシンプルですし、一度に最大10枚まで圧縮を行えます。それ以上の枚数をやる場合は都度ページを更新してリセットすればOK。
もちろん、無料で使うことができます。ブクマして使い倒しましょう。
画像まとめてリサイズするなら「Bulk Resize」
画像を一枚一枚リサイズするのが面倒な場合は、Bulk Resizeで一括変換できます。
使い方はカンタン。ただフォルダから画像をドラッグ＆ドロップするだけ。
まとめて一括でポイっと投げちゃえば、あとは設定した通りのサイズに自動で変換してくれます。
アップロードした画像には必ず「altタグ＝代替テキスト」を記述する
ダウンロードした画像をWordPressのメディアライブラリにアップロードする場合、代替テキスト（alt（オルト）タグとも呼びます）は面倒でも必ず記述しましょう。
代替テキストを記述する方法は2通りあります。
- 画像を挿入する際のメディアライブラリで記述する
- ブロックエディタなら右の『歯車』で開くサイドバーにあるaltテキスト欄に記述する
クラシックエディタ、あるいはテンプレートによっては②はできないかもです。その場合はライブラリで記述していきましょう。
代替テキストの記述方法は、「検索キーワードを使う」「タイトルをそのままコピペする」などネットには誤った情報が流れていますが、正しくは「画像を簡潔に説明する」これだけで、それ以外を考える必要はないです。
あるいは、ストックフォトで有名なadobestockでは、こんな感じで代替テキストが設定されています。
この画像は英語ですが、翻訳すると「タブレットで作業しながら、ノートで進捗プロセスを計画している女性ライター」となります。かなり詳細かつ簡潔に、「画像が見えない人向けに」情景描写していることがわかります。
これをやるとやらないとで、記事の評価や検索流入の数字は変わってきますので、1つ1つの画像に入力するのは面倒でもしっかり手間ひまかけていきましょう。
画像の拡張子は『WebP』が2022最新にして最適
現在「次世代の画像フォーマット」としてGoogleが推奨しているのは『WebP（ウェッピー）』です。
なにそれ？って感じですが、かつて、画像の拡張子といえば「image.jpg」みたいにjpgやpngが一般的でした。
しかし、WEBページに関して言えばこれらはもう時代遅れです。
細かい説明は省きますが、Webpはjpgやpngに比べて画像をよりコンパクトに圧縮できるため、ページの読み込み・表示速度に優れているとしてGoogleは推奨しているわけです。
具体的なやり方については以前セミナーで解説しました。以下の動画を参考にWebPの設定を行ってください。
以下資料です。
2022現在、Googleが推奨する画像の圧縮形式はjpgでもpngでもなくwebpです。
語句の意味や説明は省きますが、理由は『より軽い』ことで表示速度にメリットを与えるからです。
「なんか難しそう…」
と感じられるかもしれませんが、一度プラグインの設定を済ませてしまえば、アップロード自体はjpg、pngで行っても、アップロードの過程でwebpに自動変換されるので大丈夫。
まとめブログに画像をアップする流れ
以上が、ブログ記事の魅力を120％アップさせる画像の使い方の解説です。これは初級編なのでもっと細かい所の補足もありますが、それはまた別の機会に。
では、流れのおさらいをしましょう。
- 画像をDLしたら
- BulkResizeでサイズを縮小したのちに
- Tinypngで圧縮をかけて
- WordPressにアップロードする
- 代替テキストはきちんと記述する
- 画像の圧縮はプラグインを使ってWebPにしておく
慣れれば考えなくても出来るようになります。しっかり手間ひまかけてPVと収益UPを狙っていきましょう！