ブログ運営を応援するブログ「ぶろやる」

完全保存版!ブログ画像の注意事項とおさえるべき知識

今回の記事ではブログにおける画像の注意すべき点とおさえておくべき知識についてまとめています。

ブログを見たときにユーザーの目に最初に飛び込んでくるのは、画像や写真といった視覚イメージです。

ブログにおいてタイトルや見出しも大切な要素ですが、視覚イメージから入る情報量は文字の比ではありません。

愛知大学法科大学院の伊藤博文教授の論文において、文字の情報量を1とすると画像は560倍、動画は1,125,000倍であると説明されています。

そんな魅力的な画像という武器を有効に使わない手はないですよね。

 

  この記事を読めば以下の内容を理解できます。

  • ブログ画像に求める役割
  • ブログで使える画像を入手する方法
  • ブログで画像を使用する際の注意事項
  • ブログ画像をおしゃれにする参考サイト

 

それでは、早速ブログ画像について紹介していきます。

ブログ画像の役割とは?

ブログ画像の役割

まずは「ブログ画像」がどのような役割をもって使われているのかを理解していきましょう。

  1. アイキャッチ画像:記事の顔
  2. 見出し用画像:各章の顔
  3. 図解やグラフ:理解度を高める

それでは、それぞれの役割について詳しく紹介していきます。

①アイキャッチ画像とは?

アイキャッチ画像」とは、記事の内容を一目で説明するための顔となる役割を持つ画像をいいます。

Googleの検索やブログ内の新着記事・関連記事で表示されるため、多くの場所でユーザーの目にさらされる最も重要な画像です。

一目見てユーザーに興味を持ってもらえる画像にしなければなりません。

厳しめに言うと記事の内容をイメージできない画像は、読者にスルーされまったく意味をなさないものとなります。

②見出し用画像とは?

見出し用画像」とは、各見出し(章)ごとに設置する画像のことをいいます。

ブログの記事がすべて文字で構成されていると、読者は読み疲れをおこしブログから離脱する確率が高まります。

読者の疲れを防止する役割の画像として挿絵的に利用しましょう。

③図解やグラフとは?

図解やグラフ」とは、読者の理解を深めるための役割をもつ画像です。

冒頭で紹介したように文字より視覚イメージの方が情報量が多いため、スムーズに読者に記事の内容を理解をさせることが可能になります。

図解やグラフをうまく利用することで読者へ正確に記事の内容を説明することを心がけましょう。

最初は画像をうまく使いこなすことはとても難しいです。毎記事、注力することで慣れてくるのでがんばっていきましょう。

最終的には画像だけで記事の内容の意図がなんとなく分かるように貼れることを目標にしてください。

ブログに画像を何枚入れるべきか?

ブログ画像は何枚使う?

記事を書く上で悩むポイントの一つに、一記事に画像を何枚使ったらいいかではないでしょうか?

筆者は3年間ブログを運営してきたことで、ブログ画像は記事の内容により枚数を変更すべきであると結論付けました。

  各記事の種類ごとにおすすめの画像量を紹介。

記事の種類 記事の内容 アイキャッチ 見出し画像 図解やグラフ
レビュー記事 商品のレビュー記事 必要 不要でも可 大量
ハウツー記事 ソフトの使い方などの記事 必要 不要 大量
オピニオン記事 意見や考え方の記事 必要 必要 不要
エッセイ記事 日記、報告書、体験談 必要 必要 不要
トレンド記事 時事記事、流行記事 必要 必要 不要
まとめ系記事 複数ブログの内容をまとめたもの 必要 必要 不要

特筆すべき点はレビュー記事とハウツー記事は見出し画像を入れず、説明用の画像を多くいれれるべきであるということです。

見出し画像も入れて、説明用の画像や写真まで入れてしまうと区切りが分からなくなり逆に見にくくなってしまいます。

  ブログ画像の枚数まとめ

  • アイキャッチ画像は必ず入れる
  • 見出し画像はレビュー記事とハウツー記事以外は必ず入れる
  • レビュー記事とハウツー記事は説明用の画像を大量に使う

ブログ画像を入手する方法

ブログ画像の入手方法

ブログで使用する画像を入手する方法として考えられるのは

  1. 有料画像サイトで購入
  2. フリー画像サイトで入手
  3. 自分が撮影した写真を使用
  4. ネット上の画像を利用

このうち④のネット上の画像を利用するは、著作権や肖像権のルールを守らず勝手に使うと違法行為となります。
※詳しくは後述します。

①~③のうち気になる点について以下にまとめました。

有料と無料どちらを使うべきか?

ブログ初心者ほど有料画像を使うべきと考えています。

なぜなら、多くの方は文章のみで他のブログと差別化させることは不可能だからです。唯一差別化できるのが画像です。

わたしも自分で文章力があるとは思っていないので、メインのブログでは有料画像を使わせていただいています。

  ブログ歴3年の筆者がおすすめする有料画像サイト

  • Shutterstock:世界トップクラスの有料素材サイトです。画像数、クオリティーどれをとっても最高レベルがそろっています。
  • PIXTA:日本人モデルの画像を使いたい場合はPIXTAがおすすめ。日本人モデルで有名なフリー画像サイト「ぱくたそ」と差別化することができます。

 

shutterstock
shutterstock
PIXTA
PIXTA

 

そうは言っても収益の上がっていないブログで最初から有料画像を使うのはハードルが高いのも現実です。

いきなり有料画像を使えないって方は、次で紹介するフリーの画像サイトでおしゃれ・高品質の画像を探しましょう。

オシャレなフリー画像サイト

フリー画像は探せばかなりの数のサイトを見つけることが可能です。

中でもオシャレなフリー画像を探すのであれば以下の3サイトがおすすめです。

  • O-DAN:40サイト以上(Unsplash・Pixabay・PIXELSなど)の画像を一気に検索することが可能です。まとめ検索できるO-DANは一押しです。
  • FLAT ICON DESIGN:フラットデザイン専門のフリー画像サイト。すべてフラットデザインにしているブログも多く人気は高いです。
  • ぱくたそ:日本人モデルのフリー画像を使いたいなら「ぱくたそ」一択です。ただし、多くのブログで利用されている被るのが嫌って方は有料のPIXTAを使うことで差別化ができます。
  • いらすとや:イラスト画像の豊富さはフリーの域を超えています。イラストを多く利用する方はぜひつかってください。

 

O-DAN
O-DAN
flaticondesign
FLAT ICON DESIGN

 

ぱくたそ
ぱくたそ
いらすとや
いらすとや

上記以外のサイトも知りたい方は ブログの画像をフリー(無料)で探せる驚愕の64サイト【初心者用】 で、日本で使えるフリー画像サイトを一気にまとめているので利用してみてください。

ネット上の画像を利用する場合の注意事項

ブログ画像を利用するうえで注意しなければならないのが「著作権・肖像権」についてです。

ルールを守らず無断で画像や写真を利用してしまうと「著作権侵害」となり訴えられる可能性もあり、最悪の場合ブログを閉鎖しなければならなくなります。

前章で紹介したブログ画像の入手方法を再度紹介。

  1. 有料画像サイトで購入
  2. フリー画像サイトで入手
  3. 自分が撮影した写真を使用
  4. ネット上の画像を利用

③は著作権が自分にあるため問題にはなりませんが、案外理解されていないのが①と②です。

有料で購入した画像も、フリーサイトで入手した画像も著作権自体を作者が放棄しているわけではありません。あくまで契約の範囲内での利用が許可されているだけです。

基本的には各サイトの規約を読み、どこまでの範囲で使用することができるのかを把握しておくことが重要です。

そして、もっとも注意しなければならないのが、④のネット上の画像を利用する場合です。

ネット上の画像の著作権は先方にあるので本来は使うことはできません。無断で使ってしまうと「著作権侵害」となってしまいます。

そんな時は「引用」という手段を正しく利用することで、著作権侵害とはなりません。

詳しくは、ブログに画像を引用する場合の7つの注意事項と方法 で紹介させていただいています。


ブログに画像を貼る時の手順【SEO対策】

ブログ画像を使用するまでの手順

ここからは、「画像をブログに貼る際の手順」を順に紹介していきますね。

紹介する方法を実践するだけで検索エンジンでの評価も高まるので、SEO対策したい方はぜひ試してみてください!

  1. 画像を適正サイズに変更する
  2. 画像を軽量化するため圧縮する
  3. Alt属性のを記載する

それでは、それぞれの内容を確認していきましょう。

手順1:画像を適正サイズに変更を行う

まずは使用する画像のサイズを適切なサイズに変更しましょう。

なぜなら、適切なサイズに調整しておかないと画像が見切れてしまったり、デザインのバランスが崩れてしまうからです。

画像のサイズはワードプレスのテーマによって異なるので、各テーマの適正サイズを確認するようにしましょう。

  • AFFINGER5:横640px×縦396px
  • JIN:横760px×縦428px
  • SANGO:横680px×縦390px

 

画像に文字を入れたりしている場合に基準のサイズが間違っていると、適切な比率に自動変換されずバランスが崩れてしまいます。

見出し用画像は多少ずれても問題ありませんが、アイキャッチ画像はずれてしまうと文字切れをおこしたりするので注意が必要です!

手順2:画像を圧縮する

画像ファイルのサイズが大きすぎると表示されるまでに時間を要することとなり、読者が離脱してしまう可能性が高まります。

また、SEO的にも画像データが重たすぎると検索順位が下がってしまう要因にもなりますので、重たいデータの画像は圧縮して軽くしましょう。

Googleが推奨している1ページのデータ量は1.6MBといわれており、10MBを超えるとクローラーされないようです。

GoogleのクローラーがダウンロードできるWebページのサイズには限界があることをジョン・ミューラー氏が発言されています。

参照元:John Mueller on English Google Webmaster Hangout

スマホで撮影した写真を直接貼ってしまうとそれだけで1MBを超えてしまうので、必ず行うべき作業の一つと言えます。

ブログ画像のサイズ調整や圧縮方法については、ブログの画像サイズの悩み即解決!超絶簡単なサイズ変更と軽量化法も で詳しく解説しています。

スマホの画像をブログで紹介したい場合は、ブログにスマホ画像を貼る場合のサイズや見せ方を改善する4つの方法! で解説しています。

手順3:Alt属性を設定

画像サイズの調整と圧縮が終われば、あとはブログに貼り付けるだけになります。

ただ最後に設定をしなければならないのがAlt属性へ情報を入力する作業です。

Alt属性とは、画像の意味を説明するための「テキスト情報」のことをいいます。

Alt属性を付けなければならない理由は以下のとおり。

  • 画像の内容を検索エンジンに認識してもらうため
  • Googleの画像検索に表示させるため
  • 音声ブラウザを利用される方に画像内容を伝えるため

 

Alt属性の記入方法

 

上の画像であれば「フリー画像サイト59選」と記入しておくことで、画像の内容を認識されます。

画像の内容がわかれば良いので、難しく考えず画像からイメージできる内容を簡単に記載しておけば問題ありません。

記事作成時には、「サイズ調整⇒データ量圧縮⇒Alt属性への記入」の一連の手順を行うことを忘れないようにしてくださいね!

ブログ画像のデザインについて勉強できるおすすめサイト

ブログ画像のデザイン参考サイト

ここからはブログに貼る画像のデザインを勉強する際に役立つサイトを紹介していきます。

サルワカ

サルワカさんのサイト画像

言わずと知れたサルワカさんのサイトです。

Photoshopの使い方をマスターしたければ、オンライン講座や本を買うよりもサルワカさんのサイトを見るのが一番勉強になります。

マテリアルデザインで統一されており、マネできるスキルがあればぜひマネしたいサイトですね。

レク.ログ

レク.ログのサイト画面

2年前で更新はストップされていますが、わたしが一番好きなデザインのブログです。

パープル色で統一されており使用されている写真もクオリティーの高いモノが多く、写真でのブログを作るのであればとても参考になります。

更新されていないブログを見ているのはレク.ログだけです。

could

couldのサイト画面

デザインの勉強をするならcouldもおすすめです。

デザインのルールやダメデザインのパターンなどデザインを勉強するときに役立つ情報がかなり豊富です。

記事内のイラストの挿入の仕方やどのようなイラストを使っているかなど記事を読んでいるだけで勉強になります。

PhotoshopVIP

photoshopvipのサイト画面

デザインの勉強するなら絶対見るべきサイトはPhotoshopVIPでしょう。

最新のデザインに関する情報を入手することができます。フリーフォントや素材などをデザインする際に役立つ情報がたくさん公開されています。

時間があるときは頻繁に訪問して勉強させていただいています。

 

ブログ画像のデザインは、人それぞれ好き嫌いがありますので自分の好きなブロガーさんを参考に勉強していくようにしましょう。

ブログ画像の知識・注意事項まとめ

今回はブログ運営を行ううえで必ず利用するブログ画像について詳しく紹介していきました。

紹介してきた中で特に覚えてもらいたい事項を最後にまとめておきます。

  • ブログ画像は著作権侵害にならないように注意する
  • ブログに挿入する前に「サイズ調整・圧縮・Alt属性」の作業を行う
  • デザインは常に勉強しよう!参考になるサイトは自分が好きなサイトでOK
最新情報をチェックしよう!