図解やグラフの見た目をそろえる｜資料とサイトの図の決めごとと頼み方

会社案内のパンフレットや提案書、ホームページに載せる図解やグラフは、文章より一目で伝わる利点があります。ただし、ページごとに色や線の太さ、書体がばらばらだと、かえって読みにくくなり、「ちゃんと作られていない資料」という印象につながります。

この記事では、図解やグラフの見た目をそろえる考え方と、図解・グラフ・表の使い分け、外部の制作会社やデザイナーに依頼するときに伝えるべきことをまとめます。

図解・グラフ・表は役割が違う

数値や情報を見せる方法には、主に3つがあります。役割を混同すると、作っても伝わらない図ができあがります。

種類	向いていること	例
表	正確な数値をそのまま比較して見せる	料金プランの比較、仕様の一覧
グラフ	数値の大小・推移・割合を直感的に見せる	売上の推移、顧客の年代の割合
図解	手順・関係性・仕組みなど、数値以外のつながりを見せる	業務の流れ、組織の関係、サービスの仕組み

同じ元データでも、「正確な数字を見比べてほしい」なら表、「増えている・減っているという傾向を一目で伝えたい」ならグラフ、「どういう仕組みで動いているか」を伝えたいなら図解、というように、伝えたいことに合わせて形を選ぶのが先です。1枚の資料に表・グラフ・図解を詰め込みすぎると、どこを見ればよいか分からなくなるので、ページごとに主役を1つに絞ります。

色をそろえる

図解やグラフの色がページごとに違うと、同じ資料の中なのに別の会社が作ったように見えてしまいます。色のそろえ方の基本的な考え方は次のとおりです。

• コーポレートカラーを中心に使う：メインの色・補助の色を、ロゴや名刺と同じ組み合わせにする。色の決め方はコーポレートカラーの決め方にまとめています
• グラフの色数を絞る：項目が多いグラフほど、似た色が並んで見分けにくくなります。重要な項目だけ色を付け、残りはグレーの濃淡でまとめる方法もあります
• 色だけで情報を区別しない：色の見え方は人によって違います。グラフの線や項目には、色に加えて文字や記号を添えると、より多くの人に伝わります。詳しい考え方は色の見え方の違いに配慮した配色｜カラーユニバーサルデザインの基本で説明しています

書体をそろえる

図解の中の文字がページごとに違う書体だと、資料全体の統一感が崩れます。見出し用・本文用・数値のラベル用など、使う書体の役割を決めておきます。印刷物とサイトの両方で図解を使う場合、書体の候補はホームページのフォントの選び方も参考にしてください。グラフの軸や凡例の文字は、本文より小さいサイズになることがあるので、印刷したときにも読める太さ・大きさを確かめておくと、配布資料にしたときに困りません。

図解の中の線・形のルールを決める

色と書体のほかに、次のような細かいルールもそろえておくと、担当者や外部の制作会社が変わっても同じ見た目を保てます。

項目	決めること
線の太さ	矢印や囲みの線の太さを統一する
角の形	四角い枠の角を丸くするか、直角のままにするか
矢印の形	流れを示す矢印の形（三角・線のみなど）を1つに決める
アイコンの使い方	案内用のアイコンやピクトグラムを使うかどうか。使う場合の作り方はアイコン・ピクトグラムをそろえるを参照
イラストの要素	人物やキャラクターを描き込むかどうか。描く場合の頼み方はイラストを頼むときの費用と著作権、キャラクターとして育てる場合は会社やお店のキャラクターを作るときを参照

外部に頼むときに伝えること・用意するもの

図解やグラフの制作を外部のデザイナーや制作会社に頼むとき、どちらが何を用意するかをはっきりさせておくと、やり取りがスムーズになります。

用意するもの	どちらが用意するか
載せる数値・データそのもの	依頼する側
数値の出典（どこの数値か）	依頼する側
伝えたい内容・構成の案	依頼する側が伝え、制作側が整理を手伝う
色・書体・線のルール	既存のルールがあれば依頼する側が渡す。無ければ制作側と一緒に決める
図案としての表現	制作側
数値の正確さの最終確認	依頼する側

依頼する側が気をつけたいのは、数値やデータの出典を明確にしておくことです。 自社で調査していない数値を、あたかも自社調査のように見せることは避け、出典（官公庁や業界団体の統計など）を明記します。制作側に「見栄えよくしてほしい」とだけ伝えると、元の数値の意味が変わってしまう図ができることがあるため、伝えたい結論（何を一番見てほしいか）まで共有すると、仕上がりの精度が上がります。

依頼する前の整理シート

外部に依頼する前に、次の項目を整理しておくと、見積もりの依頼や打ち合わせがスムーズになります。

• 伝えたい内容は、表・グラフ・図解のどれに向いているか
• 載せる数値とその出典を用意した
• 使う色・書体のルール（コーポレートカラーなど）を伝えられる状態にした
• 使う場所（印刷物か、サイトか、両方か）を決めた
• 図の点数と、修正の回数の見込みを共有した

良い例と避けたい例

• 良い例：資料全体で色を3色程度に絞り、グラフの項目にも文字を添えて、色が分からなくても内容が伝わるようにした
• 良い例：載せる数値の出典を明記し、制作側には図案化だけを依頼した
• 避けたい例：ページごとに違う色・書体のグラフが混在し、同じ会社の資料に見えない
• 避けたい例：自社で調査していない数値を、出典を示さずに載せてしまう

まとめ

• 図解・グラフ・表は役割が違う。伝えたい内容に合わせてページごとに主役を1つに絞る
• 色はコーポレートカラーを中心に絞り、色だけで情報を区別しないようにする
• 線の太さ・角の形・矢印の形などの細かいルールを決めておくと、担当者が変わっても統一感を保てる
• 外部に依頼するときは、数値とその出典は依頼する側が用意し、図案化は制作側に任せる

Lapisデザインラボでは、色・書体の使い方をまとめたブランドガイドが「ロゴ・名刺・販促物」と「ブランド一式（ウェブページつき）」のプランに含まれ、会社案内などの印刷物はオプションの「印刷物の追加」で承っています。内容はサービスと料金をご覧ください。