「デザインのプロの技を盗む」ブログ記事のクオリティーを劇的に高めるための5つの画像最適化

他人のブログを見ていると、目に見えて「このブログ記事の画像はぼやけてるな」とか「ちょっと説明が分かりにくい」と感じることがあるでしょう。その一方で、「このブログ記事の画像はなんでこんなにきれいなんだろう」とか「シンプルな説明なのにちゃんと理解ができる」と感じることもあると思います。

その違いはいったいなんなんだろう・・？

デザインのプロは、まったく同じ記事内容でも「画像の選び方」や「画像の使い方」、そして「画像の作り方」次第でブログ記事の印象はまったく変わり、伝わり方にも大きな違いが出てくるということを知っています。

そのためここでは、デザインのプロがブログ記事を作るときに「どんなことを意識して画像を選んでいるのか？」、「どんなことしてクオリティーの高い画像を作っているのか？」を解説しながら”5つの画像最適化”についてまとめました。ぜひプロの技を盗んで自身のブログ記事のクオリティーを劇的に高めてください。

記事全体を1枚の紙面のように捉えて印象やサイズ感を整える

特別な文章力や多彩な言葉の表現手法を持っている人でなければ、なかなか”読ませる記事”を書くことはできません。しかし、テキストだけでは伝わりにくいことも、記事中に適切なイメージ画像を挿入することで”読みやすい（理解しやすい）記事“にすることはできます。

「デザインは装飾」だと考えているデザイナーもいますが、プロのデザイナーは「デザインは言語を超えた感覚を共有するための手段」「視覚的に伝えるメッセージ」といった自分なりの哲学をもっているので、1つの画像を選ぶ際にも分かりやすさや伝わりやすさを意識して画像を選んだり、ブログ記事全体を1枚の紙面のように捉えて印象やサイズ感を整えます。

イラストや外国人、日本人などテイストのまったく違う画像を採用すると、記事の統一感が失われてしまうケースがあるので、彩度や明度、コントラストやテイストの近い画像を採用し記事全体の統一感を意識する。

記事に挿入する画像サイズは記事カラムサイズに統一しておく

記事内容の補足として使う図や表などの画像の場合、”画像の高さ”は必要に応じて変わってきますが、文章内容を伝えやすくするイメージ画像は、あらかじめ縦横の画像サイズ（特に横のサイズ）を決めておくと良いでしょう。

複数の優良素材サイトを知っておこう！

記事内に複数の画像を挿入する際には、画質、彩度やコントラスト、写真の印象など”統一感が出るように画像を選ぶ”必要がありますが、1つの素材サイトから探そうとすると時間がかかりますし、いくら探しても見つからないことがあります。そのため、有料・無料問わず複数の優良素材サイトを知っておきましょう。

記事内の画像がぼけてしまうときの対処法

ブログ記事内の画像は、ダウンロードした素材をそのままアップロードするのではなく”適切なサイズにリサイズ”します。特に有料素材の場合には小さいサイズのほうが価格が安いので、小さくて安い素材を拡大して使いたくなるものですが、画像を拡大してしまうと確実に画質が劣化してしまうので拡大はNGです。

素材画像を拡大して使わない

風景や人物などのイメージ素材画像を使いたい場合には、一回り大きめの素材画像をダウンロードしてから最適なサイズに縮小して活用するようにしましょう。

管理画面などのキャプチャー画像は縮小もダメ！

ブログ投稿画面の使い方などを紹介する記事を作るときには、管理画面のキャプチャーを撮って解説したい場合があります。

風景や人物などの素材画像の場合には、ブログのカラムサイズに合わせてリサイズ（縮小）しても画質の劣化はほとんど知覚させませんが、1pxのラインを含むキャプチャー画像の場合には、わずかでも縮小するとラインがぼやけてしまうので、極力縮小させずにキャプチャーしたそのままのサイズで使います。

しかし、キャプチャーした画像を等倍でブログ記事に挿入しようとすると、画像をカットする必要が出てきます。（できれば切れさせずに収めたい・・）

ブラウザを縮めて（広げて）ジャストサイズのキャプチャーを撮る

ブラウザのサイズでキャプチャーの体裁を調整できる場合には、ブログ記事カラムサイズに合うように、ブラウザを縮めたり広げたりしながらジャストサイズのキャプチャーを撮りましょう。

すると、拡大も縮小する必要がなくなり、↓のような劣化のないジャストサイズの画像を作ることができます。

PCのキャプチャー画像を撮る際には背景を入れない

PCツールのチュートリアル記事を作る際には、PCの全体や一部をキャプチャーする必要がありますが、デスクトップの背景画像を入れてしまうと、視線が散漫になって要点が伝わりにくくなってしまいます。

アクティブウィンドウだけをキャプチャーする

winの場合であれば「Alt」＋「PrintScreen」で、アクティブウィンドウだけをキャプチャーすることができるので、それぞれのアクティブウィンドウのキャプチャー画像を合成して1つの画像を作ります。

ドロップシャドウはなるべく使わずシンプルに見せる

ブログ記事に挿入したい画像の一部と記事カラムの背景が同色（白など）の場合には、境界を示す必要があるのでドロップシャドウを使いたくなりますが、シャドウが大きすぎたり濃い場合には、美しさが表現できなくなることがあります。（特にドロップシャドウが途中で切れてしまうのはナンセンスですね）

ドロップシャドウではなくラインを使う

背景との境界を示す場合には1pxの薄めのグレーなどで表現するのがベター（ケースバイケースになりますが）でしょう。

画像内には極力説明文を入れずに伝える

ブログの投稿画面などの使い方やPCツールのチュートリアルを伝える画像を作る際、画像内に必要事項を記載しなければ要点を伝えることが難しいケースがあります。しかし、説明文が多くなるほど画像内のテキストと競合したり、ごちゃごちゃした画像になってしまいます。

GIFアニメーションを活用する

実際の使い方をGIFアニメーション（動き）で見せることができれば、画像内に説明文を入れなくても要点を伝えることができますし、画像もスッキリしますね！

このようなGIFアニメーションを作りたいときは、こちらの記事で解説しているので参考にしてください↓

ここでは、デザインのプロがブログ記事を作るときの「5つの画像最適化」について解説してきましたが、1つ1つ素材を選んだり、適切な画像を作るためには少し手間がかかるものもあります。でも「読者のために分かりやすく伝えたい」というあなたの想いはきっと届くはずなので、ぜひプロの技を盗んでブログ記事のクオリティーを高めましょう。

WordPress初心者の人でも簡単に美しいブログを作ることができるTCDテーマの活用ポイントは、こちらで解説しています↓