文字だけでは説明しにくいことを「図」を使って説明する機会もあるでしょう。今回は説明用の図を作る際に、押さえておくと失敗しにくいポイントを解説します。
解説図版とは
Web記事で使用される主な図版は、下記の３つに大別されます。
- 解説図版 => 説明図・概念図・グラフ・チャートなど
- イメージ図版 => 商品画像・イメージ写真やイラストなど
- キャプチャ図版 => ソース・ソフト操作のスクリーンショット
今回はこの中の「解説図版」について見てみましょう。
解説図版を作成・挿入する目的は「文章だけではわかりにくい情報を、わかりやすく表現する」ことです。このため、文章と同等もしくはそれ以上に、シンプルかつ簡単にわかる図を作成する必要があります。
また、図は文章よりも目を引きます。 文章が良くても図版のクオリティが低いと、ユーザーがサイト全体の信頼感を低く見てしまうかもしれません。
失敗しないために、解説図版作成のポイントを押さえておきましょう。
テキスト部分
情報の優先順位を考え、シンプルに
説明の図を作る時には、載せる情報の優先度を確認しましょう。
画像テキストは荒れたり、文字が潰れたりしやすい性質もあります。 同じ言葉であったり、無駄な修飾語を省くことでテキスト量を絞ります。 優先度の高いテキストを際立たせることで、分かりやすさ・見やすさが向上するでしょう。
サイズ・書体を多用しない
フォントや文字サイズを多用すると、図に統一感がなく、わかりにくくなってしまいます。
使用するフォントや文字サイズは絞りましょう。
- 書体は欧文和文それぞれ1種類
- 文字サイズは見出し用・注釈用の２種類
２種類、２サイズ以内に収めると失敗が少ないです。 左のNO GOOD例のような、文字の変形も避けたほうが良いでしょう。
文字サイズについては、大見出し・小見出し（本文）・注釈と３サイズが使われている解説図も多く存在しています。厳密なルールはありませんが、使用するサイズ・フォントが増えるほど難易度が上がるということは念頭に置いてください。
図形・グラフの表現
図形はシンプルかつ「安定感」のあるものを
解説図版は「文章よりもわかりやすく表現」するために使用します。 このため、使用する図形も極力シンプルなものの方が適しているでしょう。
加えて、使用する図形は見ている人に違和感を与えない形が良いです。 正円、正三角形、正方形のように、均等な形のほうが安定感を与えます。 縦もしくは横に引き伸ばされるほど、不安定な印象を持たれやすいとも言えます。
正円、正三角形を使っている右の図のほうが、安定して見えるのではないでしょうか。
上図の矢印も、分解すれば長方形+三角形。 右の図は矢印の先が正三角形に近い形ですが、左は引き伸ばされています。
また、長方形を使用する場合も、見慣れたアスペクト比、もしくは黄金比や白銀比のような美しく見える比率を使うと安定して見えます。 比率はアスペクト比計算ツールなどを利用すると簡単に求めることができます。
グラフとテキストを繋ぐ線は最小限
グラフでは、何のパーセンテージなのかを説明するテキストが必要です。 細かい部分は線を引いて、説明のテキストを入れます。
この線が長すぎたり、バラバラの方向に向いていたりすると、グラフは見にくくなってしまいます。線は短く、角度も90度・45度・0度の３つに絞ると良いでしょう。 また、グラフ（オブジェクト）内にテキストが入る場合は、線を引かずに書きます。
矢印は目立たせない
矢印は小さく、控えめな配色であっても目を引きます。 図で重要なのは矢印ではなく、各項目。矢印はその関係性を示すアイテムです。
矢印が強調されていると、視線は真っ先に矢印に向かいます。 ですので、説明アイテムである矢印は控えに表示しましょう。 矢印であること、どちらを向いているかが分かるレベルくらいで良いです。
二重・三重に情報を囲まない
情報を整理するためには、関連性のある情報をグループ化します。 情報を「グループ」と認識させるために、最も簡単な方法は「囲む」ことです。
しかし、囲みが多すぎると、図版はわかりにくくなってしまいます。
上図のような場合、右の例でも構成はわかりますよね。 何重にも情報を囲むのは避け、なるべく簡潔な表現を心がけましょう。
囲む以外に「近づける」「色を揃える」などグループに見えるような表現はあります。 グループを表現したいけれど図が煩雑になる……という場合は、複数の表現を併用すると良いでしょう。
線を使いすぎない
線も情報の整理・区切りとしてよく使われます。 グループを見せる、表組みを作る、色々な場面で「線」を使いますね。
しかし、線を使いすぎると、図が見にくくなります。 肝心の情報にも、目が行きにくいのではないでしょうか。
線が無いほうがシンプルです。 整列や近接などの表現で情報の区分けが出来ている場合、必要のない線は無くしましょう。 太すぎる・濃すぎる線の使用も避けます。
平面的な表現を基本にする
図版の構成要素を3D表現にしたり、影をつけたりするのは避けましょう。
下図、左側の例は、人の部分が3D表現になっています。 しかし、矢印は平面なので違和感がありますね。
このように、図の中でも奥行き感などが乱れることで、図の印象がチグハグになります。 影や立体感を付けてしまうと、図そのものが見にくくなる場合も多いです。
立体的に見せる必要がない場所では、平面的な表現を心がけましょう。
吹き出しはツノを小さく・角丸は控えめ
吹き出しを使う場合は、ツノを小さめに作ると綺麗に見えます。 ツノ部分が長すぎたり、大きすぎたりすると、ごちゃついた印象を与えがちです。どこに対する説明（吹き出し）かも、わかりにくくなってしまうでしょう。
また、角丸を使う際にはRを付けすぎないのもポイント。 丸みが強いと、大雑把・子供っぽい印象に繋がります。円にツノを付けたようなポップなデザインにしたい場合以外は、角丸は3px前後と控えめに設定しておきましょう。
トンマナに沿わせる
トンマナは「トーン＆マナー」の略で、デザインや広告業界でよく使われる言葉です。 デザイン・配色・表現スタイルなどに一貫性をもたせるルールのことを指します。
掲載サイトのトンマナを意識する
ここまでは解説図版作成時に失敗しにくいポイントを紹介しました。 これらのポイントは基本として意識すべき点ですが、図を掲載するサイトに合うように作成する必要があります。
例えば、立体表現が基本となっているサイトもあります。 そのようなサイトで、完全にフラットなアイコンや図を使うと浮いてしまいます。サイトに馴染むように、立体表現で図を作る必要があるでしょう。
https://1154.jp/solution/ecossnet/index.html
企業サイトの場合は、下サイトのようにロゴのデザインとトンマナが近いことも多いです。 デザイン・カラーリングに迷った時はロゴを見てみるとヒントになります。
https://www.sapporo-apollo.co.jp/outline/
このようにサイト全体のイメージを崩すこと無く、図を作成する必要があるのです。 図版は「サイトに加えても浮かないデザインか」が第一と言えます。
使用する色に注意する
トンマナを崩さず、統一感を保持したまま図を作成するには、配色も重要なポイントです。 サイトのイメージカラー、コーポーレートカラーを中心に考えましょう。 既存のサイトであればクライアントからの指示、そのサイトで使われている配色を確認して下さい。
ベースカラー、アクセントカラー、ポイントカラーの3色に絞るという手法を取り入れると、統一感が出て綺麗にまとまります。
グラフなど多くの色が必要な場合は、アクセントカラーやポイントカラーにしている色の濃淡で表現します。
隣り合う部分の色が近くなりすぎるのを避けましょう。 明確に差がわかるようにします。
実習
執筆中の記事に合うような、説明図版を1つ以上作って挿入してみて下さい。 チャートやグラフなどの種類は問いません。
まとめ
解説図版を作るポイントを沢山紹介しました。 突き詰めると下記の２つに集約されます。
- トンマナを意識する
- シンプルな表現を意識する
作っていると装飾を増やし、個性的な表現をしたくなりますが、まずは「シンプルで分かりやすい」図版を作成してみましょう。 作ってしまったものを削るのは結構難しいですが、アクセントを加えるのは簡単にできます。