ライティング講座

ブログ記事内で画像はどう使う?サイズや設置場所、圧縮方法などを解説

画像、写真

あなたは、ブログ記事を執筆している時に、画像の使い方に困った事はありませんか?

 

僕は結構あります…。

特にブログ初心者の頃は、画像を選んで持ってくるのに無駄に時間をかけてしまっていました笑。

 

そこで今回は、僕が月15万稼ぐサイトを構築する際に意識していた「画像の使い方」をまとめていきます!

まずは、画像を入れる意味や役割を解説した後、その使い方(設置場所・サイズ・容量圧縮)についても解説していきますので、ぜひ参考にしてみて下さい。

ブログ記事内の画像の役割4つ

ブログ記事における画像の役割は4つあって、以下の通りです。

  • 記事内容の理解を助ける
  • 記事内容をイメージさせる
  • 内容に区切りをつける
  • 読者に飽きさせない

1、記事内容の理解を助ける

先生、黒板、教える
記事内容が少しややこしかったり、難しい内容である場合には、特にこの使い方が有用です。

 

図や表などとも併用しつつ、画像を使って記事を説明するわけです。

ただ、このように画像を用いて説明する際も、必ずその付近に文章での説明も加えましょう。

 

なぜなら、記事を見てもらうためには、あくまでSEO対策が必須だからです。

グーグルのAIがいくらすごいとは言え、その画像内の情報の価値を正確に判断するのは難しいです。

そのため、キーワードも用いたわかりやすい文章で、記事に価値がある事をしっかりとアピールしましょう。

2、記事内容をイメージさせる

イメージ、アイデア、想像
これは、1つ目の役割と似ていますが、もう少しラフに捉えて大丈夫です。

なんとなく、記事内容とマッチした画像を挿入する、というぐらいに考えましょう。

これだけでも、記事を流し読みする読者に対して、どこに何が書いてあるかの印になるので、とっても効果的です。

 

なんか、そんな適当でいいのかよって思われたかもしれませんね笑。

 

でも正直言って、画像の良し悪しは、SEO的にも読者目線的にも、そこまで大きな問題ではありません。

昔の僕がそうだったのですが、画像選びにこだわって時間を割きすぎてしまうのは、本来の目的からそれています。

(ここではあくまでブログで稼ぐという目的を想定しています)

画像に悩む時間があれば、記事本文の質をアップさせましょう。

3、内容に区切りをつける


この使い方では、記事の内容が切り替わったタイミングで画像を入れていきます。

設置場所に関してはまた後で説明しますが、簡単に言ってしまえば、見出しが変わるタイミングで画像を入れて区切りをつけるって事です。

 

この使い方も、2つ目と同様に、読者の流し読み対策になっています。

興味が湧いた見出しがあったとしても、ぱっと見でその先にずっと文字が並んでいたら、読み進める気がなくなってしまいますよね。

そのため、「この見出しは次に画像がある所でひと区切りだよ」ってわかりやすくしてあげるイメージです。

 

現代はどんどん文字を読む習慣がなくなってきていて、心理的なハードルも高いのも間違いないです。

画像をうまく使って、そこを解消してあげましょう。

4、読者に飽きさせない

子供、興味、好奇心
この使い方は、本当に気軽に考えていただいて大丈夫です笑。

いくら良い画像が見つからなくても、何かしら画像を入れておきましょうって事です。

さすがに、記事内容と全く無関係というのは良くないですが、少しでもイメージが合うものであれば大丈夫です。

 

特に若い読者層は、文字ばかりの画面をみると、「難しそう」「めんどくさそう」と感じて、すぐにページを閉じてしまいます。

視覚的に飽きさせないという単純な目的のためにも、画像は必須です。

画像の設置場所

オーダン
先ほどからもうネタバレ済みですが笑、

おすすめの設置場所は、見出し名のすぐ下です。

 

理由としては、その設置場所ならば、画像の役割4つを自動的にカバーできるからです。

 

見出しは基本的に、記事内容の区切りですよね。

だから、見出し毎に画像を入れれば、③内容の区切りをクリア。

かつその見出し内容と合った画像を用いる事で①理解を助ける②内容をイメージがクリア。

さらにさらに、余程見出しが多くない限り、適度な画像の数になるので、④視覚的な飽き対策もクリアです。

 

もちろん、細かい見出しが多い場合には、臨機応変に対応しましょう。

画像のサイズとその変更方法

サイズ、大きさ、メジャー
画像のサイズは、設置場所や容量圧縮に比べると、重要度がかなり低いです。

そのため、自分で一度プレビューしてみて、一番読みやすいと思うサイズにするだけでも十分だと思います。

 

一応参考までに、私の場合は、画像の横幅を500pxに設定して、横長の画像しか使わないことにしています。

特にこだわりがなく、サイトレイアウトもシンプルなのであれば、私の設定を真似していただければ大丈夫です。

簡単な画像サイズ設定(Wordpress)

たまに、「画像のサイズ変更にはペイント等の別アプリを使う」と紹介しているサイトもありますが、そんな面倒な手間は必要はありません。

 

ワードプレスなら、「設定」→「メディア」から、サムネイルサイズ・中サイズ・大サイズのpx数を自由に設定できます。

私の場合は、大サイズの設定を、縦横どちらも500pxにしておいています。

あとは、いざ画像を設置する際に、毎回「大サイズ」を選択していれば、いちいちサイズ設定を変えるワンクリックの手間もなくなります。

 

このような、意外と見逃しがちなワードプレスの基礎設定については、以下の記事でまとめて紹介しています。

他にも不安な点があればぜひ ⇒ 【稼げるブログ開設講座⑤】ワードプレスの初期設定

画像の容量圧縮は必須事項

サイズ、大きさ、小さく、圧縮
Googleアナリティクスなどでサイトの分析をしていると、サイトの表示スピードを確認できます。

実際に見てみると、3秒とか4秒とかで、大した差じゃないなと思ってしまいがちです。

でも実は、この数秒の差が、すっごく重要なんです…。

 

以下は、グーグルによる信憑性の高い予測データです。

  • 表示速度が1秒から3秒に落ちると、直帰率が1.3倍に
  • 表示速度が1秒から5秒に落ちると、直帰率は1.9倍に
  • 表示速度が1秒から6秒に落ちると、直帰率は2倍以上に

ご覧の通り、めちゃくちゃ影響が大きいですよね…。

 

直帰率は、SEO上のサイトの評価にも大きく関わってくる大事な数字です。

そのため、サイトの表示スピード改善はサイトを伸ばす上で必須事項です。

 

では、具体的にどうやって改善すればいいのかというと、そこでキーになるのが画像の容量圧縮です。

やはり、テキストに比べて、画像は圧倒的にデータが大きいです。

そのため、必然的に表示には時間がかかるんです。

画像の容量圧縮方法(Wordpress)

画像の容量を圧縮するなんて、とっても難しそうですよね。

でも、ワードプレスなら簡単に済みます。

(ワードプレスはGoogleも推奨しているブログ作成ソフトなので、正直、ご利用でない方はすぐに移行のがオススメです。)

 

「EWWW Image Optimizer」というプラグインを導入するだけです。

具体的なプラグインの導入・設定方法に関しては、現在、別記事を作成中です!

もうしばらくお待ちください。

有料画像じゃないとダメ?

悩んでいる大学生
たまに、使うのは有料画像じゃないとダメですか?といった質問を見るのですが、決してそんなことはありません。

特に、ブログ初心者の方にとっては必要ありません。

 

先述の通り、SEO的にも、読者目線的にも、画像自体の質はあまり重要ではありません。

しかも、今は無料画像サイトがとっても豊富で、質の高い画像がたくさんあります。

おすすめの無料画像サイトはこちらに

フリー画像サイト、雰囲気別3選!【会員登録なし】

 

また、画像を探すのにひたすら時間を割くのも本末転倒です。

ネットから最適な画像を引用するのもいいですが、手間がかかりすぎるようなら、無料画像をもっとうまく使いこなす事をお勧めします。

 

いかがでしたでしょうか?

この記事では、画像の使い方に関してかなり詳しく解説致しましたので、何度も読んで理解を深めていくのがいいと思います!

それでは、最後までご覧いただきありがとうございました。

 

初心者~月収10万円までの攻略情報を無料プレゼント

ワードプレスの立ち上げ方~売れる文章の書き方までを30本以上のコンテンツにまとめた攻略本を期間限定で無料でプレゼント。 今なら特典として「誰でも確実に3万円稼げるノウハウ」を解説した動画もお渡ししています。

※とりあえず無料で受け取る場合はコチラをクリック↓

【管理者きりやまのプロフィール】

kiriyama-maru

1999年2月15日生まれ。

古着/甘いもの/ゲームが大好き。満員電車/人混み/人に縛られる生活が嫌い。

 

慶應大学在学中、目標もなく、怠惰でつまらない生活に嫌気がさし、何かしなきゃと思い始める。

その後、2年の秋に、趣味だったゲームに関する個人サイトを立ち上げ。

1年後に月15万を稼ぐサイトに。

3年の冬には、法人メディアからSEO/ブログ運営のコンサルティングを依頼され、3ヶ月60万円で契約。

今は、アルバイトや細かな節約などに縛られず、自由に好きな服を買い放題の生活を送ってます!

もっと詳しく