【ブログ画像】無料で入手する方法から著作権まで完全解説

ブログのコンテンツは主にテキストと画像で構成されていますよね。

ということは、テキストの書き方と画像の使い方をマスターすることは質の高い記事を書く上で必須事項ともいえます。

このページではブログで使う画像について、役割・入手方法・使い方などを完全解説します。

このページの内容(目次)

ブログで使う画像は5種類。効果や役割を解説します。

まず最初に、ブログで使用される画像の種類を解説します。

大きくわけて、下記の5つに分かれます。

ブログで使われる画像の種類
  • アイキャッチ画像
  • イメージ画像
  • 図解
  • 装飾画像
  • ogイメージ

順に解説します。

なんだ、知ってるよ、という方が大半だと思いますが、効果や役割を改めて再認識することで、今まで無意識的に使用していたものを意識的・効果的に使うことができるようになるはずです。

アイキャッチ画像

使われるところ

記事リストや新着一覧・関連ページ・人気記事など記事が並ぶところにサムネイル画像の形式で表示されます。

役割・目的

記事詳細ページに誘導する(クリックさせる)・記事詳細ページの導入部分に大きく表示し、ページの概要を伝えることで入口ページになった際の直帰率を下げる

作成時の注意点

一覧としてずらっと並びますので、容量には特に気を付ける方がいいです。ブログのメインカラム一杯くらいの横幅の画像サイズにする方がベターです。

ブログのアイキャッチ画像の作り方【ツールやデザインのコツ】

イメージ画像

使われるところ

主に見出し(h2)の下などに使用します。

役割・目的

本文に関連するイメージ画像を表示することで、読み疲れを緩和し、続きを読まれやすくします。デザイン的に優れているものを選んだり、同じテイストの画像を選ぶことで統一感を生むことも可能です。

作成時の注意点

まず、容量に注意が必要です。フリー素材や、有料素材など、素材を使うことが多いですが、減色・圧縮せずに使用すると無駄に大きいサイズの画像を使うことになり、ページの速度を低下させてしまいます。

また、ページの内容と全く関係のない「雰囲気画像」を選んでしまいがちですが、できるだけ内容に即したものを選ぶ方が良いでしょう。

図解

使われるところ

文中や見出し(h2またはh3)の直下が中心。

役割・目的

説明の補足・理解の促進のために、文章で説明するよりも画像で表した方がわかりやすい時に使用します。

ユーザーは文章を読みたいのではなく、課題を解決したいだけなので、極論を言えば図解だけ見て課題が解決できるならその方が好まれる傾向があります。

作成時の注意点

過剰に色を使いすぎると逆にわかりづらくなったりしますので、使用する色数は押さえて作成した方が良いでしょう。

グラフにする場合は割合を示すなら円グラフ、推移を示すなら折れ線グラフ、比較をするなら棒グラフといったように、目的にあったグラフ形式を選びましょう。

装飾画像(ロゴ・アイコンなど)

使われるところ

Favicon・吹き出しやランキングの順位画像など、小型でワンポイントの装飾を行う場所で使用します。

役割・目的

通常のテキスト部分と違う箇所であることを示す装飾に使われることが多いです。

作成時の注意点

記事装飾は同じテーマを使用しているユーザーと重複しやすくなっています。例えば吹き出しにデフォルトのアイコンを持っているテーマだと、そのテーマをそのまま使うユーザーは少なくありません。

記事装飾はブログのデザインを決定づける一つですので、できるだけオリジナリティの高い素材を使用するのがベストです。

ブログのロゴの作り方

ogイメージ(og:image)

使われるところ

<head>タグ内の、メタタグで使用します。

役割・目的

SNSで記事が共有された際に、記事を表す画像として読み込まれます。テーマによってはアイキャッチ画像と共有になっている場合もあります。

作成時の注意点

主にFacebookとTwitterを意識して、1200×630のサイズで作成すると良いです。この画像サイズだと、共有された際に綺麗に表示されます。

ブログで使う画像形式

画像のファイルフォーマットはたくさんあって、特に初心者にとってはどの画像形式を使うべきなのかわからないかもしれません。

画像フォーマットの特性を踏まえ、どういうときにどの画像を使うのが良いのかは以下の通りです。

写真はJPG、文字中心はPNG

PNGとJPGどちらがいいか

JPG画像は、以下のような特徴があります。

  • 多くの色が使われている、濃淡のある画像(つまり写真)に向く
  • 圧縮率を下げることができ、ファイルサイズを押さえやすい
  • テキストや線画、イラストなどではぼやけやすい

一方PNG画像には下記のような特徴があります。

  • テキストや線画に向いている(ぼやけにくい)
  • 写真のような画像ではファイルサイズが大きくなりやすい
  • 透明を扱うことができる
  • 色数を指定すればファイルサイズをかなり抑えることができる

上記のような特徴から、色数の多い写真を扱う場合はJPGが適しており、解説画像などで文字が多く含まれているような画像の場合はPNGが適しています。

以前はGIFが使われることも多かったのですが、最近ではほぼPNGに置き換わっています。

新しいフォーマットのWebP・AVIFは「まだ」導入しなくてもOK

次世代の画像フォーマットとして、WebPやAVIFという形式があります。

これまで画像フォーマットによってできることが違っていたのですが、全部を1つの形式でできるようにしつつ、高い圧縮率を実現することができる技術として注目されています。

WordPressの最適化プラグインの中にはWebPに対応したものもあります。

主な特徴としては以下の通りです。各ファイル形式の特徴のいいところどりをしたような仕様です。

  • 高い圧縮率がある(JPGの置き換え ※画質を落とさずJPGより30%近く削減可能)
  • 透過に対応(PNG・GIFの置き換え)
  • アニメーションに対応(GIFの置き換え)
  • 可逆圧縮に対応(PNGの置き換え)
  • AVIFはWebPよりもさらに圧縮でき、扱える色空間が増えたフォーマット。

パッと見るといいことづくめですので、すぐに使うべき、と思うかもしれません。

確かにこれまで「どの形式にしようかな」と悩んでいた部分がなくなり、一本化できるのはいいことです。

ただし、最近のフォーマットなので、ようやく最新のブラウザで対応したばかり、という感じになっています。また、画像加工ソフト側でまだ対応されておらず、手軽に作成することができません。

こういった「置き換え技術」は普及するまでにかなりの時間を要することが多いです。できることのやり方を変えたところでそこから得られるメリットが少ないためです。

JPG:今よりファイルサイズを少なくできるが、これ以上スピード狂になる必要も、効果も認められない

PNG:今PNGでできているのでわざわざ作成が難しいWebPにするメリットは何もない

上記のような感じになので、現時点では「まだ」採用する必要はないと判断します。

ただ、今後の流れとして、JPGもPNGも「かなり古いフォーマット」であるという点は気を付けておくべきで、より良い技術があるなら使っていこうという流れにはなっているという点だけ覚えておきましょう。

タイミングとしては、Photoshopあたりが正式対応して、手軽に作成できるようになったら本格普及する、と見ています。

ブログ画像の5つの入手方法

ブログで使用する画像の入手方法は、自分で作るか、他人が作ったものを利用するか、のどちらかです。

大きくわけると5つに分かれます。

フリー素材サイトで入手する

フリー素材を提供しているサイトで入手する方法です。

商用利用可能な画像をダウンロードできるサービスも年々増え、クオリティも以前に比べれば格段によくなっています。

有料素材サイトで購入する

フリー素材サイトでも質の高い画像を入手することは可能ですが、一方で検索性が低いため見つけづらいという欠点があります。

その点、有料素材を利用するとちょうどほしい画像が見つかりやすいです。品質的にもフリー素材サイトと比べると有料素材サイトの方が優れていることが多いです。

写真を撮影する・スクショを取る

写真撮影する方法

物販アフィリエイトでレビュー記事を書く際などには必須になるのが写真撮影。

最近のスマホは非常にカメラの性能が上がっているため、下手に一眼レフで撮影するよりも「それっぽく」写せる場合もあります。

スクリーンショットを取る

Web上のサービスを紹介する場合などにはスクリーンショットを取るなどして画像を作成します。

スマホの画面が必要な場合とPCの画面が必要な場合がありますのでお使いの端末でのスクショの取り方を確認しておきましょう。

ゼロから作成する

Photoshopやイラストレーターなどを使い、自分でゼロから図を書く方法です。

自力で絵を描ける人でなければスクショや素材を使うなど、複数の方法を組み合わせて作る場合がほとんどでしょう。

私の場合はAdobe系のソフトの操作が苦手なため、もっぱらPowerPointで作成したものをスクショを取っています。

広告主が提供している素材を利用する

商品によっては広告主がある程度の素材を用意してくれている場合があります。また、広告主のサイトで使用されている画像はすべて利用可としている広告主もいるので、詳細を確認すると良いでしょう。

許可されている範囲を超えて使用したり、無断で使用したり、まるで広告主が運営しているようなサイトに見せかけたりすると非承認扱いになる場合もあるので注意が必要です。

画像の使い方【4つの注意点】

ブログの画像を使う際に、注意をしておくべきポイントが4点あります。順に解説しますね。

ALTタグを忘れずに設定する

画像のALT属性はテキストで何の画像かを説明するものです。

画面に表示されるわけではないので設定を忘れがちですが、SEO的にもアクセシビリティ的にも設定しておくことは重要です。

基本のルールとして必ず設定するようにしましょう。

容量が小さくなるよう減色・圧縮する

特に素材を使用する際や、スマホのカメラで撮影した画像を使用する際に起こりがちなこととして、オリジナル画像のまま使用してしまう場合です。

自分が作成した画像でないものは基本的にどれも画質が高く設定されていて、色数も本来使用しないほど使うことが多いため、必ず減色し、ロスレス圧縮をするなどしてサイズが小さくなるようにしましょう。

おすすめの方法としては、TinyPNGを使用すると無駄なサイズを削減してくれますのでブログにアップする画像は必ずTinyPNGで処理をしたものをアップすると良いです。

適切なサイズにリサイズする

こちらも特に素材・撮影した画像を使用する際におこりがちです。

オリジナル画像は横幅が3000ピクセルといったようにかなり大きい画像になりがちです。ブログで使用する画像はそこまでのサイズは必要ではなく、せいぜい800pxもあれば十分です。

著作権・クレジット表示に注意する

フリー素材を使用する際の注意点です。

フリー素材は多くの場合商用利用可となっていますが、クレジット表示が必要になっていたりする場合があります。

クレジット表示などを適切にしないまま使用していると、利用期間に応じて高額な使用料を請求される場合があるため、十分注意して利用してください。

ダウンロード時に使用条件についての記載があるはずです。

まとめ

ブログで使う画像について整理しました。

ブログ記事はデータベース内に保存されているため、実体ファイルがないですが、WordPressでは画像はデータベースに格納されず、実体ファイルでの管理になります。

アップロード時には自動でファイルが作成されるなど、挙動を把握しておかないと、あとで整理する必要が生じた際に苦労することになります。

この機会に画像の取り扱いについて正しい知識を得ておきましょう。

このページの内容(目次)
閉じる