「わかりやすい図を作るには、配色のセンスとデザインツールを使いこなす技術が要る」。見本として目にする図解の多くはデザイナーが仕上げたもので、色づかいや装飾の差が、そのままわかりやすさの差に見えるからでしょう。資料の図を自分で作ることになり、まずテンプレートや配色の見本を探し始めた方もいるはずです。
しかし、SEO記事に載せる図を1枚ずつ設計してきた弊社の立場から言えるのは、図のわかりやすさは、飾る前に見せる関係を1つに決めた時点でほぼ決まるということです。配色や図形の整え方は、選んだ関係を読み違えさせないために後から行う作業にあたります。
本記事では、図にする関係の決め方から、関係ごとに選ぶ図の型、レイアウト・配色・図形の整え方、図を人に頼むときの伝え方まで、記事の図を作ってきた制作会社の視点で順を追ってお伝えします。
- わかりやすい図とそうでない図の差は、1枚で見せる関係が1つに絞られているかどうか
- 図で伝える一文が順番・違い・階層のどれを言っているかで、6つの図の型から選べる
- レイアウトは読む順に並べ、端と間隔を揃え、要点の要素だけを大きくして整える
- 配色は色数を絞り、色ごとの意味を決め、色だけで区別しないようにする
- 図を人に頼むときは、見た目の希望より先に、図で伝える一文と要素どうしの関係を渡す
わかりやすい図とわかりにくい図の違い
わかりやすい図とわかりにくい図の違いは、見た目の美しさではなく、何と何がどんな関係にあるかを一目で読み取れるかどうかにあります。図は、文章では順に説明するしかない関係を、位置と矢印で同時に見せるための道具です。
1枚に「流れ」と「比較」と「分類」を同時に詰めると、読み手はどの関係から読めばよいか分からず、図の中の文字を一つずつ読むことになります。1枚の図で見せる関係は1つに絞ります。わかりにくい図には、次の共通点があります。
- 1枚の図で、手順の流れと項目の比較を同時に見せようとしている
- 要素ごとに色が違うのに、色の違いが何を表すかが決まっていない
- 四角・丸・吹き出しなど、同じ役割の要素に別々の図形が使われている
- 矢印が太く目立ち、矢印でつないだ要素より先に目に入る
- 図の中の文章が長く、図を見るより読むほうに時間がかかる
わかりやすい図を作る4つの手順
わかりやすい図は、図で伝える一文を書き、関係の型を選び、紙にラフを描いてから清書する4つの手順で作ります。いきなりツールで図形を並べ始めると、図形を置きながら内容を考えることになり、要素が増えるたびに配置をやり直す手間が生まれるためです。
「受注から納品までは5つの工程を順に進む」「A案はB案より費用が高いが期間が短い」のように、図を見た人に持ち帰ってほしい内容を一文にします。書いた文に「また」が入り、内容が2つに分かれるなら、図を2枚に分けます。
一文が順番を言っているならフロー図、違いを言っているなら比較表、含む・含まれるを言っているならツリー図のように、一文の述語から図の型を決めます。
要素の数と並び、矢印の向きだけを紙に描き、色や図形の形はまだ決めません。ラフの段階で要素が多すぎると分かれば、清書の前に削れます。
ツールで清書したら、図だけを別の人に見せ、最初に書いた一文と同じ内容を言えるかを確かめます。言えなかったときは、相手が読み取った内容と一文がずれた箇所を直します。
伝えたい関係で選ぶ図の6つの型
図の型は、一文が表す関係によって、順番・繰り返し・比較・階層・重なり・因果の6つから選べます。型を先に決めると、要素をどこに置き、矢印をどちらへ向けるかが型に沿って決まります。
伝えたい関係 | 図の型 | 向いている内容 |
|---|---|---|
順番がある | フロー図・ステップ図 | 申込みの手順、業務の工程、年表 |
繰り返す | サイクル図 | PDCA、毎月回す業務 |
違いを比べる | 比較表・マトリクス図 | 料金プランの比較、2つの軸での位置づけ |
含む・分かれる | ツリー図・ピラミッド図 | 組織図、課題の分解、優先度の段階 |
重なる | ベン図 | 2つの条件を両方満たす範囲 |
原因と結果 | 相関図・因果図 | 関係者の関わり、問題の原因のつながり |
型選びで迷いやすいのが、比較表とマトリクス図の使い分けです。料金・期間・対応範囲のように比べる項目が3つ以上あるなら比較表を選びます。「費用が高いか低いか」と「期間が長いか短いか」のように、2つの軸の上で位置を見せたいならマトリクス図が向いています。
Web担当者PowerPointのSmartArtやテンプレートの図を使えば、それだけでわかりやすくなりますか。
Writers-hub編集部
SmartArtやテンプレートは、型を決めた後の清書を速くする道具として便利です。ただ、テンプレートの装飾や要素の数は見本の内容に合わせて作られているので、自分の一文に出てこない要素や色は消してから使ってください。
見やすいレイアウトの3つの整え方
見やすいレイアウトは、読む順に並べる、端と間隔を揃える、大きさで優先度を示す、の3つで整います。3つとも、読み手が図のどこから読み始め、どこで読み終えるかを1通りに決めるための整え方です。
読む順に左から右、上から下へ並べる
横書きの資料を読む人は、左から右、上から下へ目を動かします。手順の最初の要素を左上に、最後の要素を右か下に置くと、矢印が少なくても順番が読み取れます。流れの途中に右から左へ戻る矢印があると、読み手はそこで読む向きを探し直します。
端と間隔を揃えて余白を取る
要素の左端や中心を揃え、要素どうしの間隔を同じにします。間隔が不揃いだと、近くにある要素どうしが1つのまとまりに見え、作り手が意図していないグループ分けとして読まれるためです。図全体の周りと、図形の枠と文字の間にも余白を取ります。
大きさで優先度を示す
結論や中心になる要素を大きく、補足の要素を小さくします。全部の要素が同じ大きさだと、読み手は要点がどれかを図から読み取れず、1つずつ順に読むしかありません。
図の配色を決める3つのルール
図の配色は、色の数を絞る、1つの色に1つの意味を持たせる、色だけで区別しない、の3つのルールで決めます。色を足すほど、読み手が「この色は何を表すのか」を考える回数が増えるためです。
基本色と強調色に絞る
文字と線にはグレーか黒、要素の地には基本色を1色、いちばん見せたい箇所には強調色を1色使うところから始めます。色を足すのは、色で分けたい分類が増えたときだけです。画面の設定で最も鮮やかな赤や青は、面積が大きいと文字より先に目に入るので、彩度を少し落とした色を選びます。
1つの色に1つの意味を持たせる
「赤は問題点」「青は自社」のように色の意味を決めたら、同じ資料の中では変えません。1枚目で赤を強調に使い、2枚目で赤を競合他社に使うと、読み手は2枚目の赤も強調だと読み違えます。
色だけで区別しない
色の違いだけで分類を示すと、色の見え方が違う人には区別がつきません。日本眼科医会によると、日本人では男性の20人に1人、女性では500人に1人の割合で色覚異常の人がいます。色で分けた要素には、ラベルの文字や図形の形、線の種類の違いも添えます。
※ 出典：日本眼科医会「色覚異常といわれたら」
Webのアクセシビリティの国際的なガイドラインであるWCAG 2.1は、図やグラフの理解に必要な線や図形について、隣り合う色とのコントラスト比を3対1以上にすることを求めています。白い背景に薄いグレーの線を引く場合は、線の色を濃くするか太くします。
※ 出典：ウェブアクセシビリティ基盤委員会（WAIC）「達成基準 1.4.11: 非テキストのコントラストを理解する」（W3C「Understanding WCAG 2.1」の日本語訳）
図形・矢印・文字の整え方
図形・矢印・文字は、同じ役割の要素に同じ図形を使う、矢印と線を要素より控えめにする、文字を短く大きくする、の3点で整えます。
同じ役割の要素には同じ図形を使う
工程はすべて角丸の四角、判断はひし形のように、図形の種類を役割ごとに1つに決めます。同じ役割の要素に四角と丸が混ざると、読み手は形の違いに意味があると考えて探し始めます。角丸の四角を使うなら角の丸みを揃え、色は枠線と塗りのどちらか一方だけに付けると、要素の境目が二重に見えません。
矢印と線は要素より控えめにする
矢印は要素どうしの関係を示す補助なので、要素の枠より細く、色も文字より薄いグレーにします。太い矢印や色付きの矢印は、矢印でつないだ要素より先に目に入り、読み始める場所がずれます。
図の中の文字は短く大きくする
図の中の文字は要素の名前と数字だけにし、説明の文章は図の外の本文に書きます。Web記事の図はスマートフォンの画面幅まで縮小されるため、パソコンで読める大きさの文字でも、スマートフォンでは読めなくなることがあります。清書した図は、スマートフォンの画面幅に縮小して、全部の文字が読めるかを確かめてください。
図の作成を人に頼むときに渡す4つの情報
図の作成をデザイナーや外部に頼むときは、配色や雰囲気の希望より先に、図で伝える一文、図の型、要素どうしの関係、図を置く場所の4つを渡します。見た目の希望だけを渡すと、作り手は内容の関係を推測して描くことになり、整って見えても伝えたい関係と違う図が上がってきます。
- 図で伝える一文（例「受注から納品までは5つの工程を順に進む」）
- 図の型（フロー図、比較表、ツリー図など）
- 要素の名前と、どの要素からどの要素へ矢印を引くか
- 図を置く媒体と大きさ（スライド1枚全体、記事の本文の幅など）
色の指定が要るのは、会社のロゴの色や資料全体で決めた配色がある場合です。会社の配色に合わせるときも、「強調は会社のロゴの色、ほかはグレー」のように、どの要素に何色を使うかの役割で伝えます。
記事に入れる図まで、社内で手が回っていますか
Writers-hubの記事コンテンツの制作支援では、構成の段階で図にする箇所と図で伝える内容を決め、作図から本文の執筆までをまとめて進められます。ライターと作図の担当を別々に手配している場合は、制作の体制からご相談ください。
わかりやすい図のデザインでよくある質問
わかりやすい図のデザインについてよく受ける質問は、使うツール、1枚に入れる要素の数、本文との書き分けの3つです。
図は、普段資料を作っているツールで作れます。PowerPointなら図形とSmartArt、Googleスライドなら図形の挿入、ブラウザ上で作るならCanvaやdraw.ioが使えます。
要素の数に決まった上限はありません。目安にするのは数より、図で伝える一文に出てくる要素だけになっているかです。一文に出てこない要素は、本文か別の図に移します。
図で見せた要点は、本文にも書きます。図は関係を一目で見せ、本文は理由や条件を説明するという役割の違いがあり、画像を読み込めない環境や読み上げ機能を使う読者は本文から内容を受け取るためです。Web記事の画像に付ける代替テキストの書き方は、画像SEOとは？で解説しています。
まとめ｜わかりやすい図は飾る前に関係を決める
わかりやすい図のデザインは、配色や装飾より先に、図で伝える一文と、一文が表す関係の型を決めるところから始まります。色・図形・矢印は、選んだ関係を読み違えさせないために整えます。図に入れる要素は一文に出てくるものだけにし、色だけで区別せず、スマートフォンの画面幅でも文字が読めるかを確かめてから使います。
私たち合同会社Writers-hubは、SEO記事の制作で、本文とあわせて記事に載せる図の設計も手がけています。記事の中で図にする箇所の選び方や、図と本文の書き分けで迷ったときは、今ある記事をもとにご相談いただけます。
自社の記事のどこを図にすればよいか、迷っていませんか
公開中の記事を見ながら、手順・比較・階層のうち、本文だけでは読み取りにくい関係がどこにあり、どの型の図にすればよいかを一緒に整理します。
