ブログ ブログの疑問

【初心者向け】ブログ画像の選び方と適切な設置場所について解説します。

2020年9月24日

【初心者向け】ブログ画像の選び方と適切な設置場所について解説します

悩んでいる人
ブログを始めてみたけどどんな画像を選べばいいの?記事にあう画像を選んだ方がいいの?どこに挿入するの?

 

本記事では、このような疑問について解説します。

 

筆者の情報

  • 2020年9月ブログスタート
  • 最高収益月1.3万円
  • 30代のフリーランスブロガー

 

ブログの質や見やすさを向上させるために必要な要素は「画像」です。

 

画像がないブログは読者を飽きさせてしまい、魅力も半減してしまいます。

 

早いうちに本記事の内容を理解しておくことで、他のブロガーと差をつけ上達することも可能ですので、ブログの画像選びに困っている人はサッと読んでパパッと実践してみてくださいね。

 

本記事の内容

  • ブログに合った画像の選び方・適切な設置場所
  • 記事が見やすくなる画像の入れ方
  • フリー画像3サイトのご紹介(最後に有料2サイトもあり)

 

ブログ画像の選び方と適切な設置場所について解説

ブログ画像の選び方と適切な設置場所について解説

 

まずはじめにお伝えしたいのは「記事内の添付画像はとても重要」ということ。

 

ブログ初心者の方は、あまり意識せずに画像を挿入している方も多く見受けられますので、少し意識してみてください。

 

それでは、早速お伝えしていきますが、画像の三原則を最初にお伝えしますね。

 

  1. 記事の内容にあった画像を選ぼう
  2. 画像の拡張子は「JPG」にしよう
  3. 設置場所は基本見出し2にしよう

 

ひとつずつ解説していきます。

 

①:記事の内容にあった画像を選ぼう

 

あたり前ですが、ブログの記事の内容に合った画像を選びましょう。

 

あまり気にせずに適当な画像を選んで挿入してしまっている人が多くいるので正直もったいないです。

 

パソコンについて記事を書いたらパソコンの画像、マウスについて記事を書いたらマウスの画像。それぞれの内容に合った画像を選ぶようにしましょう。

 

そして挿入する画像は記憶に残りやすい画像がオススメです。

 

例えば、同じデザイナーのイラスト画像を選び、一体感を持たせたり、画像の色合いを合わせるなどするとGOOD。

 

 

②:画像の拡張子は「JPG」にしよう

 

拡張子は、画質が綺麗な「JPG」ファイルにしましょう。

 

ボケてる画質だと、せっかく執筆した記事の見栄えが悪くなってしまいます。さらにJPGは、画像自体の容量が軽いのでおすすめ。

 

拡張子が「PNG」の場合は、画像の容量が大きいためオススメしませんが、100KB以下なら問題無しです。

 

ブログ豆知識

「記事の表示速度は3秒以内」が理想とされており、3秒を越えるとブラウザバックされることがあります。画像の容量が軽ければ軽いほど良い、ということを覚えておきましょう!

 

 

③:適切な画像の設置場所は「見出し2(h2)」

 

適切な設置場所は、h2見出しの後が基本です。

この記事の場合は、

  • ブログ画像の選び方と適切な設置場所について解説
  • 画像のSEO対策について
  • 記事が見やすくなる画像の入れ方
  • まとめ

上記が見出し2(h2)になるので、基本ココに画像を挿入しています。

 

なぜ見出し2の後がベターかと言うと一般的に見出し2の後に画像を挿入することがルールになっているから。

 

見出し3や4の後に入れてはいけない訳ではないですが、ごちゃごちゃするし、画像をたくさんいれると読み込みも遅くなるのでオススメしません。

 

記事が見やすくなる画像の入れ方

記事が見やすくなる画像の入れ方

記事を見やすくするための画像の入れ方は以下の2つです。

 

  • 統一感を出す
  • 画像のサイズは同じにする

 

それぞれ解説します。

 

統一感を出す

 

ブログ全体でも、記事単位でもいいですが、なるべく統一感を意識して画像をいれましょう。

 

統一感があると記事全体のクオリティが高くなり、あなたのブログの「色」もでます。

 

統一感を出す方法としていちばん簡単なやり方は、「イラスト」か「写真」で分けることです。

 

イラストと写真を交互に使用すると統一感が失われてしまいますので、どちらか一方だけを使用して仕上げるとGOODです。

 

画像のサイズは同じにする

 

画像のサイズは統一しましょう。

 

基本的には1200x600くらいのサイズが最適ですが、画像の大きさがすべて同じであれば特に縦横をキッチリ1200x600にしなくても大丈夫です。

 

「何の画像なのか」が認識できれば問題ありませんので、極端に小さいとか大きい!とかでなければOKです。

 

画像のSEO対策について

画像のSEO対策について

 

ここからは個人の裁量になりますが、ブログで検索上位を狙うならやっておべき内容についてお伝えします。

 

アイキャッチ画像は記事の内容をイメージできるものにしよう

 

アイキャッチ画像とは、ブログタイトルと一緒に表示される画像のことです。

 

パッと見で記事の内容がイメージできる画像か、自分で作成しましょう。

 

無料画像加工ツールのcanvaが使いやすく、人気があるので使ってみてください。

 

アイキャッチ画像のNG例

 

初心者の方でアイキャッチ画像に内容を盛り込みすぎて、何を伝えたいのかワケのわからないアイキャッチになってしまっているケースがあります。

 

下の画像は僕がパパッとサンプルで作ったのですが、なんだか良くわからないし見た目も悪いですよね。。

 

アイキャッチNG例

 

上記のような加工をするのであれば、何も加工していない画像を添付するほうがマシです。

 

情報はシンプルに伝えたほうが、読者にも正確に伝わりますよ。
イス

 

画像の代替テキストとタイトルについて

 

WordPressで画像を登録するときに情報を入力する画面になると思いますが、この時に代替テキストに画像のタイトル、タイトルに画像の名前を入力しましょう。

 

 

難しくてよく分からないという方は、代替テキストに『見出し2』と同じ文字、画像のタイトルは画像のイメージを英語で入力してください。

 

  • 代替テキスト:見出し2の文字を入力
  • タイトル:英語で画像のイメージを入力

 

「タイトル」の方の入力は、例えば黒い犬の画像の使用する場合はblack-dogみたいな感じでオッケーです。

 

この画像に名前を設定する事を「alt属性」と呼びます。

 

alt属性とは

alt属性はHTMLとXHTMLで使われるHTML属性。HTML要素が表示できないときに代わりにレンダリングされるテキストを指定する。 ウェブページを読み上げるスクリーンリーダーがAlt属性を読み上げることで、ウェブページの内容を聞いている利用者もそのHTML要素の内容を理解できる。

引用:Wikipedia

 

カンタンに説明すると、画像が表示されなかった時に、かわりに文章で画像のイメージを検索エンジンに伝える役割をしてくれます。

 

細かいですがココまで徹底するとSEOに効果的と言われているので、やらないよりはやったほうが良いって感じです。

 

おすすめフリー画像サイト3選

 

僕が実際に利用している商用利用OKの画像サイトを3つ紹介します。

 

どのサイトも数万〜数十万点の画像があるので画像選びには困らないですよ。

 

pixabay

僕が一番利用している無料サイトです。商用利用無料です。

O-DAN

超有名無料サイトです。画像数は一番多いです。

Unsplash

オシャレで雰囲気ある画像が多いサイトです。もちろん無料。

 

まとめ

 

ブログ画像の選び方と、適切な設置場所について解説しました。

 

もう一度お伝えしますが、画像選びはとても重要な項目なので適当に選ばないようにしましょう。

 

正直画像選びに30分くらいかけても全然いいレベルですが、良い画像が見つからなくても後から画像の変更はできるので悩みすぎて時間をかけすぎも注意です。

 

ちなみに、無料画像サイトは他のブロガーの方も利用しているので画像がかぶる事がわりとあります。

 

他のブロガーと差別化をはかりたいなら有料画像サイトのSnapmartAdobe Stockなども検討してみるとよいと思います。

 

今回はここまでとなります。

 

ブログ初心者が1ヶ月までに意識してやるべきたった7つの事【経験談有り】
ブログ初心者が意識してやるべきたった7つの事【急成長できます】

続きを見る

  • この記事を書いた人

イスさん

会社員10年超え→脱サラ→2021年8月にフリーランスへ転身 | ブログの疑問や悩みを解決できる情報をお伝えしています | 長野県出身 | 30代

-ブログ, ブログの疑問