ブログの図解の作り方｜画像を入れる4つの場面と、写真・フリー素材の注意点

文章で粘るな。伝わらないところは図にしろ。

小説は読むのがしんどいのに、漫画ならスラスラ読める。そんな人、まわりにもいませんか？漫画は、頭で場面を組み立てなくても、絵を見た瞬間にイメージが飛び込んできます。

ブログも同じです。文章だけで伝えきれないイメージは、図解などの画像で見せてしまったほうが早く伝わります。要所要所に1枚入れるだけで、記事は一気に読みやすくなります。

とはいえ、どこに図を入れればいいのか、どう作ればいいのか迷いますよね。この記事では、図解を入れる場面の見分け方と作り方、写真や素材の注意点を、ビフォー・アフターとチェックリストつきで紹介します。

図解は「読まなくても、見ればわかる」ための画像

図解は、文章で説明していることを、四角や矢印、表などで形にした画像です。読者が頭の中で組み立てるはずだったイメージを、先に絵にして渡してあげるものだと考えてください。

たとえば、駅の乗りかえ案内を文章だけで説明されたら大変ですよね。「2番線に降りたら階段を上がって、右に曲がって、案内板が見えたら左に……」と書かれるより、構内図を1枚見たほうがすぐにわかります。図解がやっているのは、この構内図と同じことです。

ブログで使う画像は、大きく分けると3種類あります。

種類	中身	向いている場面
図解	四角・矢印・表で説明を形にしたもの	手順・比較・しくみの説明
写真・スクリーンショット	実物や画面をそのまま写したもの	レビュー・操作の説明
イラスト・素材	雰囲気や気持ちを表す絵	記事の印象づくり

この記事で中心にするのは図解です。写真やフリー素材を入れるときの注意は、後半でまとめて紹介します。

文字だけの記事は、スマホでは読む前に閉じられる

ブログを始めたころの私は、文章さえ丁寧に書けば伝わると思っていました。でも、自分の記事をスマホで開いてみると、画面いっぱいに文字が並んでいて、書いた本人なのに読む気がしませんでした。

文章を読むときは、書いてあることを頭の中で組み立てながら読み進めます。手順が5つ続く説明や、2つのものをくらべる説明だと、組み立てる量が多すぎて途中で疲れてしまいます。小説が苦手な人がつまずくのも、たぶんここです。

漫画が読みやすいのは、その組み立てを絵が代わりにやってくれるからです。ブログの図解も同じで、伝わりにくいところに1枚入れるだけで、読者は頭で考えずにイメージを受け取れます。それ以来、私は「文章で説明しきれない」と感じたところには、粘らずに図を入れるようにしています。

図解を入れるのは「手順・比較・関係・数字」の4つの場面

図解は、どこにでも入れればいいわけではありません。文章だけで十分に伝わるところに図を入れても、スクロールが長くなるだけです。入れるのは、次の4つの場面です。

場面	たとえば	図の形
手順	やることが3つ以上、順番に続く	番号付きの流れ図
比較	ビフォー・アフター、AとBのちがい	左右に並べた図・表
関係	全体と部分、原因と結果	矢印でつないだ図
数字	割合・変化・ランキング	グラフ

迷ったときは、書き終えた文章を読み返してみてください。自分で書いたのに、意味をつかむまでに2回も3回も読み返した段落があれば、そこが図にする候補です。

「1つの記事に写真は何枚まで載せていいの？」と迷うかもしれません。枚数に決まりはありませんが、このブログでは、h2の見出し1つにつき図を1枚までにしています。見出しの直後に、その見出しで言いたいことを1枚の図にして置くと、図を見るだけで中身がつかめます。

図解の作り方は4ステップ

図解と聞くと、絵が描けないと無理だと思うかもしれません。でも、ブログの図解に絵の上手さはいりません。四角を並べて矢印でつなぐだけで、十分に伝わります。

STEP1：この図で言いたいことを1文にする

最初に、図を見た読者に何をわかってほしいのかを1文で書きます。「記事を書く手順は5つある」「AよりBのほうが安い」のような短い文です。この1文が、そのまま図のタイトルになります。

1文にならないときは、言いたいことが2つ以上まざっています。その場合は、図を2枚に分けてください。

STEP2：図の型を選ぶ

言いたいことが決まったら、さきほどの4つの場面に合わせて型を選びます。

• 手順なら、上から下（または左から右）に流れる図
• 比較なら、左右に並べた図か表
• 関係なら、四角を矢印でつないだ図
• 数字なら、棒グラフや円グラフ

STEP3：手書きで並べてから、ツールで清書する

いきなりツールを開くと、色や飾りに気を取られて手が止まります。まずはメモ帳や紙に、四角と矢印だけで並べてみてください。5分もあれば形が決まります。

形が決まったら、Canva・PowerPoint・Googleスライドなどで清書します。どれも無料で始められて、四角・矢印・アイコンをならべるだけで図が作れます。WordやExcelで作った図を画像にすると、文字がぼやけることがあるので、清書はスライド系のツールがおすすめです。

STEP4：文字を減らす

図の中の文字は、1つの枠に2行までにしてください。

スマホで見ると、図は画面の横幅いっぱいに縮んで表示されます。パソコンでは読めた文字も、スマホではつぶれて読めません。文章で書いたことを全部図に入れようとせず、言葉は短く、くわしい説明は図の下の本文にまかせます。作り終えたら、自分のスマホで図を開いて、文字が読めるか確かめてください。

写真・フリー素材を入れるときに確かめる4つのこと

図解だけでなく、写真やフリー素材を入れるときにも気をつけたいことがあります。とくに初心者のうちは、次の4つを確かめてください。

利用規約を読む

「フリー素材なら、ブログで使っても著作権は関係ない」と思いがちですが、実際は配布しているサイトの利用規約しだいです。「フリー」と書いてあっても、商用利用はできない、加工してはいけない、クレジット（作者名）の表記が必要、といった条件がついていることがあります。

とくにブログで広告やアフィリエイトをしている人は、商用利用ができるかを必ず確かめてください。Googleの画像検索で出てきた画像を、そのまま保存して使うのはやめましょう。

内容と関係ない画像は入れない

「画像があったほうが読みやすいらしい」と聞いて、記事の内容と関係ないフリー素材を見出しごとに貼ってしまう人がいます。でも、パソコンを打っている人の写真を見ても、読者は何もわかりません。画像は、読者の理解を助けるものだけにしてください。

画像を軽くする

スマホで撮った写真は、そのままだと1枚で数MBあります。重い画像が何枚も入ると、記事の表示が遅くなり、読者は待ちきれずに戻ってしまいます。横幅は1200px前後にして、TinyPNGなどの圧縮サービスで1枚200KB前後まで軽くしてから入れるのがおすすめです。

代替テキストを入れる

代替テキスト（alt）は、画像に何が描いてあるかを文字で書いておく欄です。通信が遅くて画像が表示されないときや、目の不自由な人が読み上げ機能で記事を聞くときに、この文が読まれます。Googleも、この文を手がかりに画像の中身を判断します。

WordPressなら、画像を選んだときに出てくる「代替テキスト」の欄に、「記事を書く手順を5つのステップで並べた図」のように、画像の内容を1文で書いておきます。

もう1つ、スクリーンショットを入れるときは、見せたい部分だけを切り抜いて、押してほしい場所を赤い枠で囲みましょう。画面全体のままだと、読者はどこを見ればいいのか探すことになります。メールアドレスや口座の残高など、人に見られたくない情報が写っていないかも、公開前に必ず確かめてください。

ビフォー・アフター：文字だけの手順説明を図にする

このシリーズで紹介してきた「記事を書く手順」を例に、文章だけの説明を図にしてみます。

直す前	直した後
5つの手順が1文につながっている	1つの手順を1行に分けた
いくつ目の手順か、読みながら数える	番号で、いま何番目かがわかる
全部読まないと流れがわからない	流れ図を見るだけで全体がつかめる

直す前の文は、まちがったことは書いていません。それでも、読者は「えっと、3つ目は何だっけ」と読み返すことになります。流れ図にしておけば、その読み返しはいりません。

そのまま使える図解・画像のチェックリスト

図解や画像を入れたら、公開する前に次の8つを確かめてください。

• その図で言いたいことを、1文で言えるか
• 手順・比較・関係・数字のどれかに当てはまるか
• 図の中の文字は、1つの枠に2行までになっているか
• スマホで開いて、図の文字が読めるか
• 内容と関係ない画像が入っていないか
• フリー素材の利用規約（商用利用・加工・クレジット）を確かめたか
• 画像は1枚200KB前後まで軽くしたか
• すべての画像に代替テキストを入れたか

まとめ：伝わりにくい1か所を、まず図にしてみる

今日から使えるのは、この3つです。

• 図にするのは、手順・比較・関係・数字の4つの場面
• 言いたいことを1文に決めてから、四角と矢印で並べる
• 写真や素材は、利用規約・重さ・代替テキストを確かめてから入れる

最初から全部の見出しに図を入れなくてもかまいません。まずは、いま書いている記事を読み返して、自分でも2回読み返した段落を1つ探してみてください。そこを四角と矢印で並べてみると、文章で粘っていたときよりずっと伝わる形になるはずです。

次の記事では、記事一覧で読者の目に止まる、アイキャッチ画像の作り方を紹介します。【アイキャッチ画像の作り方の記事へのリンク】