おしゃれなインフォグラフィックの作り方｜配色・フォント・レイアウトのコツ

おしゃれなインフォグラフィックを探して、ギャラリーサイトやピンタレストを眺めた人は多いと思います。おしゃれに見えるかどうかは、センスではなく数の管理で決まります。色をいくつ使うか、フォントを何種類にするか、余白をどれだけ取るか。この3つを決めるだけで、見た目は大きく変わります。

この記事では、配色・フォント・レイアウトを具体的な数字と名前で解説します。あわせて、素人っぽく見える原因の逆引きと、参考デザインの正しい真似方までまとめました。

結論からお伝えすると、おしゃれに見せるコツは3つの数を決めることです。色は3色まで、フォントは2種類まで、文字の大きさは3段階までに絞ります。

配色は、背景に7割、主役の色に2割、目立たせたい色に1割の比率にすると落ち着きます。彩度の高い色を並べると、それだけで安っぽく見えます。

日本語のフォントは、見出しに太めのゴシック、本文に細めのゴシックを選べば失敗しません。游ゴシックやNoto Sans JPが扱いやすい定番です。

レイアウトは、要素の左端をそろえて、余白を文字サイズの1.5倍以上取ります。この2つだけで、整った印象になります。

というわけで詳しく解説していきます。

おしゃれに見せる配色の作り方

配色は色の数と比率で決まります。3色以内に絞り、背景7割・主役2割・強調1割の比率で置くと安定します。

おしゃれに見えない図の多くは、色が多すぎます。項目ごとに違う色を割り当てると、すぐ5色6色になってしまいます。

まず色数を3つに決めてください。背景の色、文字や図形に使う主役の色、いちばん伝えたい部分に使う強調の色の3つです。

色を減らすのが不安なら、濃淡で差をつけてください。同じ青でも、濃い青と薄い青を使えば2色分の働きをします。色数を増やさずに情報を分けられます。

項目が10個あっても、色は3つで足ります。分けたいのは項目ではなく、重要度だからです。

色を決めるときは、先に3つ選んでから作り始めてください。作りながら足していくと、必ず増えます。

7対2対1の比率で置く

3色を同じ量で使うと、まとまりません。面積の比率を7対2対1にすると、自然に落ち着いて見えます。

背景が7割、主役の色が2割、強調の色が1割です。強調の色は、本当に見せたい数字や結論にだけ使ってください。

この比率を意識するだけで、素人っぽさはかなり消えます。難しい配色理論を覚える必要はありません。

この比率は、部屋の内装や服の組み合わせでも使われている考え方です。特別なルールではないので、覚えておくと他の場面でも使えます。

強調の色を2か所以上に使うと、効果が半減します。1枚につき1か所と決めてください。

比率は厳密でなくて構いません。背景が広く、主役が中くらい、強調がごく狭いという感覚で足ります。面積を測る必要はありません。

彩度を落とすと大人っぽくなる

鮮やかな赤や青をそのまま使うと、子ども向けの印象になります。おしゃれに見せたいなら、少しくすませた色を選んでください。

ツールの色選択で、鮮やかさを示す部分を下げるだけで変わります。同じ青でも、くすんだ青にすると落ち着きます。

逆に、明るく元気な印象を出したい場合は彩度を上げます。用途によって使い分けてください。

くすませ方が分からないときは、グレーを少し混ぜるイメージで調整してください。ツールによっては、彩度のつまみを下げるだけで済みます。

迷ったら、実際に置く場所に並べて見比べます。単体で見て良くても、サイトに置くと浮くことがあります。

背景は白かオフホワイトが無難

背景に色を敷くと、その色とすべての要素の相性を考える必要が出てきます。白か、わずかにグレーがかった白にしておくと管理が楽です。

真っ白が味気ないと感じるなら、ほんの少しだけ色をのせてください。紙のような温かみが出ます。

暗い背景にする方法もありますが、扱いが難しくなります。文字色や図形の色を全部見直す必要が出るためです。

慣れるまでは明るい背景で作ってください。失敗が少なく、印刷にも向いています。

白に近い色を背景にすると、印刷したときの色の差も出にくくなります。配布物にも使う予定があるなら、こちらが安全です。

色に迷ったときの決め方

使う場所が決まっているなら、そこの色に合わせるのが早道です。自社のロゴやサイトの色を主役にすると、統一感が出ます。

決まっていないなら、青系か緑系から選んでください。どちらも幅広い内容に合い、失敗が少ない色です。

色は毎回決め直さず、自分の定番を作っておくと早くなります。3色をメモしておけば、次から選ぶ時間がゼロになります。

同じ色を使い続けると、作ったもの全体に統一感が出ます。ブログやSNSで並んだときの見え方も変わります。

色を変えたいときは、3色すべてを入れ替えてください。1色だけ差し替えると、組み合わせが崩れます。

フォントの選び方と組み合わせ

フォントは2種類まで、大きさは3段階までに絞ります。日本語ならゴシック体を選べば、まず失敗しません。

フォントを変えるだけで印象は大きく変わりますが、同時に散らかりやすい部分でもあります。増やさない管理が基本です。

フォントは、内容の印象を左右する部分です。同じ文章でも、丸みのある書体と直線的な書体では受け取られ方が変わります。

日本語で使いやすいフォント

日本語のインフォグラフィックでは、ゴシック体が基本になります。小さくしても読めるので、図の中の文字に向いています。

フォント	印象	向いている用途
游ゴシック	すっきり、上品	資料、企業向け
Noto Sans JP	癖がない、読みやすい	Web、SNS全般
ヒラギノ角ゴ	細くて洗練された印象	おしゃれ寄りの内容
源ノ角ゴシック	太さの種類が豊富	見出しと本文の使い分け
Noto Serif JP	落ち着いた、格式のある印象	伝統やこだわりを伝える内容

迷ったらNoto Sans JPを選んでください。無料で使えて、太さの種類も多く、どんな内容にも合います。

パソコンに最初から入っているフォントでも十分です。無理に有名なフォントを探す必要はありません。

ツールに入っているフォントから選ぶ場合は、太さの種類が多いものを選んでください。1つのフォントで見出しと本文を作り分けられます。

フォント名が分からないときは、ツールの一覧から「ゴシック」と付くものを選べば大きく外しません。細かい違いは後から覚えれば十分です。

明朝体を使うとき

明朝体は雰囲気が出ますが、細い線が小さいサイズでは読みにくくなります。図の中の小さな文字には向きません。

使うなら、大きい見出しだけにしてください。本文はゴシック体にするという組み合わせが安全です。

明朝体は、印刷物や落ち着いた内容には合います。細い線の美しさが出るので、大きく使うほど効果があります。

画面で小さく見る前提なら、ゴシック体を選んでください。線が太いぶん、つぶれにくくなります。

読み手の年代も考えてください。文字が細すぎると、見えづらいと感じる人が増えます。迷ったら太めを選ぶほうが親切です。

太さで差をつける

フォントを2種類使うより、同じフォントの太さを変えるほうがまとまります。見出しは太く、本文は細くするだけで十分な差が出ます。

大きさは3段階までに決めてください。見出し、小見出し、本文の3つです。それ以上増やすと、どれが重要か伝わらなくなります。

見出しと本文の大きさは、2倍ほど差をつけます。差が小さいと、階層が伝わりません。

太字を使いすぎないことも大事です。全部太くすると、どこが重要か分からなくなります。

強調したい部分は、太さと色のどちらか一方で十分です。両方使うと過剰になります。

レイアウトの原則

要素の左端をそろえ、視線の流れを設計します。この2つを守るだけで、整った印象になります。

レイアウトで大事なのは、きれいに飾ることではありません。読む順番を迷わせないことです。

整っているかどうかは、細かい部分の積み重ねで決まります。派手な装飾より、そろえることのほうがずっと効きます。

順番を作れているかは、他人に見てもらうと分かります。自分は内容を知っているので、正しい順に読んでしまいます。

左端をそろえる

文字や図形の左端が少しずつずれていると、それだけで雑に見えます。見えない縦線を引いて、そこにそろえてください。

ツールに整列の機能があれば必ず使います。目分量よりずっと速く、確実にそろいます。

中央揃えを多用しないでください。項目が並ぶ部分は左揃えのほうが、視線が迷いません。

そろえる基準は1本でなくて構いません。左半分と右半分で別の基準を持つ形もよく使われます。

ただし基準を増やしすぎないでください。2本か3本に収めると、まとまりが保てます。

そろえる作業は、最後にまとめてやると効率的です。配置しながら細かく直すと、時間ばかりかかります。

視線の流れを作る

人は左上から右下に向かって見ます。この流れに逆らわない配置にしてください。

いちばん伝えたいものは、左上か中央上に置きます。下のほうに置くと、見てもらえない可能性が上がります。

順番があるなら、番号を振るのが確実です。番号があれば、配置が多少複雑でも迷いません。

大きさでも順番を示せます。最初に見てほしいものを大きく、次を中くらいにすると、自然にその順で目が動きます。

全部を同じ大きさにすると、どこから見ればいいか分からなくなります。差をつけることが親切になります。

迷ったら、いちばん伝えたい数字を1つ選んで、それだけを大きくしてください。他をすべて小さくすると、狙った場所に目が行きます。

グループでまとめる

関係のある要素どうしは近づけ、関係のないものは離します。線で囲むより、距離で表すほうがすっきりします。

枠線を増やすと、それだけでごちゃついて見えます。囲むのは、どうしても区別が必要なときだけにしてください。

近づける、離すという操作だけで、内容の構造を表せます。線や色を足すより先に、距離で表現できないか考えてください。

余白の取り方

余白は、要素の間に文字サイズの1.5倍以上、外周にはそれ以上取ります。詰めるほど安っぽく見えます。

初心者ほど、空いている場所を埋めたくなります。ただ、余白は情報を読みやすくするために必要な要素です。

余白を埋めようとして情報を足すのは、いちばんよくある失敗です。空いている場所は、読む人が休むための場所でもあります。

スマホで見る場合は、余白をさらに広めに取ってください。画面が小さいぶん、詰まって見えやすくなります。

数字で決めておく

感覚で取ると、場所によってばらつきます。文字サイズの1.5倍から2倍と決めておくと、全体がそろいます。

外周の余白は、要素どうしの余白より広く取ってください。端まで詰めると、窮屈な印象になります。

行間も同じ考え方です。文字の大きさの1.5倍から1.8倍を目安にすると、読みやすくなります。

詰まった行間は、それだけで読む気を削ぎます。少し広いくらいがちょうどよく見えます。

余白を取るために情報を削るのは、正しい判断です。詰め込んだ図より、削った図のほうが結果的に伝わります。

余白がそろっているだけで整って見える

デザインの経験がなくても、余白がそろっていれば整った印象になります。逆に、ばらついていると内容が良くても雑に見えます。

作り終わったら、要素の間の距離を見比べてください。ここだけ直しても、仕上がりは変わります。

確認するときは、画面を縮小して全体を見てください。細部を見ていると、ばらつきに気づけません。

素人っぽく見える5つの原因

おしゃれに見えない図には共通点があります。当てはまるものを外すだけで、見た目は改善します。

良くする方法より、悪くしている原因を外すほうが早く効きます。順に確認してください。

自分の図に当てはまるものがあっても、落ち込む必要はありません。どれも直し方がはっきりしている項目です。

原因1：色が多すぎる

いちばん多い原因です。項目ごとに色を変えると、すぐ5色6色になります。3色に絞るだけで印象が変わります。

色を増やしたくなるのは、区別したい気持ちからです。ただ、区別は色以外の方法でもできます。位置や大きさで分けてください。

直す順番は、上から順で構いません。色を減らすところから始めると、変化が分かりやすくなります。

原因2：影とグラデーションが多い

立体感を出そうとして影をつけると、古い印象になります。いまのデザインは、平らでシンプルなものが主流です。

影を使うなら、ごく薄く1か所だけにしてください。全部に付けると、画面が重くなります。

グラデーションも同じです。使うなら同系色の淡い変化にとどめてください。色が大きく変わるものは古く見えます。

塗りつぶしの図形にも同じことが言えます。面で色を敷くより、線だけで区切るほうが軽く見えます。

原因3：フォントが混ざっている

ゴシックと明朝、丸ゴシックが同じ画面にあると、統一感がなくなります。2種類までに絞ってください。

テンプレートを組み合わせると、知らないうちに混ざることがあります。作り終わったら、使っているフォントを数えてください。

影を消すだけで見違えることもあります。まず全部外してみて、必要な場所にだけ戻してください。

原因4：中央揃えばかりになっている

すべてを中央にそろえると、視線の起点がなくなります。文章が続く部分は左揃えにしてください。

中央揃えが向くのは、短い見出しやタイトルだけです。行が2行以上になるなら左揃えにしてください。

丸ゴシックはやわらかい印象になりますが、他の書体と混ざると急に安っぽくなります。使うなら1種類で通してください。

原因5：余白がばらついている

要素の間隔が場所によって違うと、雑に見えます。数字で決めて、整列機能でそろえてください。

この5つを外すだけで、多くの図は見られる状態になります。新しいことを足す必要はありません。

逆にいえば、この5つを避けるだけで一定の水準には届きます。上手くする前に、悪くしている要素を外してください。

テイスト別の作り分け

おしゃれといっても方向はいくつかあります。使う場面に合わせて選んでください。

同じ「おしゃれ」でも、企業向けとSNS向けでは正解が違います。先に方向を決めてから作り始めます。

方向	配色	フォント	向いている場面
落ち着いた	紺や深緑など彩度低め	細めのゴシック	提案資料、企業サイト
すっきり	白と黒に1色だけ	癖のないゴシック	手順の説明、社内資料
やわらかい	ベージュや薄い緑	丸みのあるゴシック	ブログ、暮らし系
格式のある	白と紺、金の差し色	明朝体の見出し	伝統、こだわりの訴求

迷ったら「すっきり」を選んでください。情報が主役になるので、どんな内容にも合います。

なお、かわいい方向に寄せたい場合は配色と素材の選び方が変わります。そちらは別の記事で扱っています。

方向が決まったら、その方向の作例をいくつか見ておくと迷いません。同じ方向のものだけを見るのがコツです。

写真・イラスト・アイコンの扱い

素材は数を絞り、テイストをそろえます。違う雰囲気のものが混ざると、それだけでまとまりが崩れます。

素材は便利ですが、選び方を間違えると逆効果になります。3つだけ守ってください。

方向が決まると、色もフォントも自動的に絞られます。先に決めておくほうが、結果的に速く終わります。

相手が誰かで決めるのがいちばん確実です。取引先なら落ち着いた方向、個人の読者ならやわらかい方向が合います。

複数の方向を混ぜないでください。落ち着いた配色にやわらかいフォントを合わせると、どちらの良さも出ません。

同じシリーズでそろえる

アイコンは、同じ配布元の同じシリーズから選びます。線の太さや角の丸さが違うものを混ぜると、目立って不揃いに見えます。

無料の素材サイトでも、シリーズでまとめて配布されているものがあります。1つのシリーズを決めて使い続けると、作るたびに揃います。

数を絞る

アイコンを全項目に付ける必要はありません。かえって視線が散ります。強調したい項目にだけ付けてください。

意味のないアイコンは付けないでください。飾りとして置くと、情報を探すときの邪魔になります。

数を絞るほど、1つあたりの意味が強くなります。全部に付けると、どれも意味を持たなくなります。

色を統一する

色付きのアイコンより、単色にして図の主役の色に合わせるほうがまとまります。多くの素材は色を変えられます。

写真を使う場合は、明るさをそろえてください。暗い写真と明るい写真が並ぶと、ちぐはぐな印象になります。

写真を使う場合は、枚数も絞ってください。1枚のインフォグラフィックに写真を何枚も入れると、情報が読み取りにくくなります。

スマホで見たときに崩れないか

パソコンで整って見えても、スマホでは読めないことがあります。公開前に必ず確認してください。

見る人の多くはスマホです。ここを飛ばすと、せっかく整えたものが伝わりません。

パソコンの画面では、実際より大きく見えています。作った本人は読めるので、崩れに気づけません。

投稿する前に、実際のアプリで見てみるのが確実です。一覧に並んだときの見え方まで確認できます。

文字が読めるかを確認する

書き出した画像をスマホで開いて、拡大せずに読めるかを見てください。読めないなら、文字を大きくするか情報を減らします。

目安として、図の中でいちばん小さい文字が、本文と同じくらいの大きさに見える状態を狙います。

読めないときは、文字を大きくするより情報を減らすほうが確実です。文字だけ大きくすると、今度は入りきりません。

縦横の比率を決めておく

SNSに投稿するなら正方形か縦長、記事に貼るなら横長です。使う場所を決めてから作ってください。

横に長い図をスマホで見ると、極端に小さくなります。項目が多いなら、縦に並べる形に変えます。

複数の場所で使うなら、いちばん大きいサイズで作ってください。縮めるのは簡単ですが、拡大すると画質が落ちます。

比率を変えると、レイアウトも組み直しになります。同じ内容でも作り直す前提で考えてください。

参考デザインの探し方と真似の仕方

参考を見るのは有効ですが、見るだけでは上達しません。要素を分解して、1つだけ取り入れてください。

ギャラリーサイトやピンタレストには、良い作例が大量にあります。ただ、眺めるだけで終わる人がほとんどです。

集めるときは、保存するだけで満足しないでください。あとで見返さない画像が増えるだけになります。

探す場所は1つか2つに絞ってください。あちこち見ていると、集めるだけで時間が過ぎます。

分解して見る

気に入った1枚を見つけたら、なぜ良く見えるのかを言葉にしてください。色数はいくつか、フォントは何種類か、余白は広いか狭いか。

言葉にできると、自分の図にも再現できます。感覚のまま眺めていても、身につきません。

メモは短くて構いません。「色2つだけ」「余白が広い」といった一言で十分です。

この作業を10枚分やると、自分の中に基準ができます。良し悪しを自分で判断できるようになります。

海外の作例は参考になりますが、そのまま日本語に置き換えると崩れます。文字数が変わるので、レイアウトの調整が必要です。

真似するのは1つだけ

全部を取り入れようとすると、まとまりのないものになります。配色だけ、余白の広さだけ、と決めて1つずつ試してください。

1枚作るごとに1つ取り入れれば、10枚で10個増えます。この積み方が確実です。

取り入れたものは、次の1枚でも使ってください。1回きりだと身につきません。

気に入った作例は、色数とフォント数だけ数えてメモしておいてください。数字にすると、自分の図と比べられます。

そのまま複製しない

構成や配色を参考にするのは問題ありませんが、作品をそのまま複製して公開するのは避けてください。練習として手元で模写するにとどめます。

企業の作例を参考にする場合も同じです。配色やレイアウトの考え方を学ぶ対象として見てください。

おしゃれさより優先すべきこと

見た目を整えるのは、内容が決まったあとです。順番を逆にすると、きれいだけど伝わらない図になります。

ここは押さえておいてください。おしゃれさは目的ではなく、伝えるための手段です。

見た目を先に決めると、あとから入る情報が収まらなくなります。順番は変えないでください。

伝わらないおしゃれは意味がない

装飾に凝った結果、何の話か分からない図をよく見かけます。見る人が知りたいのは、内容であって装飾ではありません。

迷ったら、情報が読み取りやすいほうを選んでください。それがいちばん外さない判断です。

判断に迷ったら、内容を知らない人に10秒見せてください。何の話か言えるなら、伝わっています。

装飾を足したくなったら、まず削れる情報がないか探してください。足すより減らすほうが、たいてい良くなります。

整えるのは最後の工程

作る順番は、目的を決める、情報を絞る、型を選ぶ、配置する、そのあとで色と文字を整えるという流れです。詳しい手順は、当サイトの作り方の記事でも解説しています。

色から入ると、あとで情報を足すことになって崩れます。順番を守るだけで、直す回数が減ります。

この順番は、慣れても変わりません。プロほど、情報の整理に時間をかけています。

装飾に時間をかけるより、情報を絞る時間を増やしてください。そのほうが結果的に見た目も良くなります。

ツールで再現する手順

ここまでの原則は、無料のツールでそのまま再現できます。設定する順番だけ決めておいてください。

実際の作業は、次の5つの順で進めると迷いません。

1. 使う3色を先に決めて控えておく
2. フォントを2種類だけ選んで固定する
3. 文字の大きさを3段階に決める
4. 要素を配置して整列機能でそろえる
5. 強調の色を1か所だけに入れる

この順番なら、色や文字で迷う時間がなくなります。決めたものをメモしておけば、次の1枚も同じ雰囲気で作れます。

テンプレートを使う場合も同じです。テンプレートの色を自分の3色に置き換えるだけで、既視感のない仕上がりになります。

おしゃれなインフォグラフィックに関するよくある質問

作るときに多く寄せられる疑問をまとめました。

作るツールは何でも構いません。無料のもので、この5つはすべて設定できます。

色とフォントを決めた状態を保存しておくと、次からその設定を呼び出すだけで済みます。

最初の1枚は時間がかかりますが、2枚目からは設定を使い回せます。積み上がる作業なので、続けるほど楽になります。

デザインの経験がなくても作れますか

作れます。色を3つ、フォントを2つ、大きさを3段階と決めるだけで、見た目は大きく変わります。センスではなく数の管理です。

設定を保存できるツールなら、その機能を使ってください。毎回同じ色とフォントを選ぶ手間がなくなります。

おすすめの配色ツールはありますか

デザインツールに付いている配色の提案機能で十分です。決められないときは、使う場所の色に合わせるのがいちばん早い方法です。

センスに自信がなくても問題ありません。決められたルールを守るほうが、感覚で作るより安定します。

フォントは無料のもので大丈夫ですか

大丈夫です。Noto Sans JPや源ノ角ゴシックは無料で、太さの種類も豊富にあります。商用で使う場合は、配布元の条件だけ確認してください。

色を置き換えるだけなら、数分で終わります。テンプレートは構成を借りるものだと考えてください。

色を3色に絞ると地味になりませんか

なりません。同じ色でも濃さを変えれば、見た目の幅は出せます。色数を増やすより、濃淡で差をつけるほうが整います。

商用で使う場合は、フォントの配布条件も一度確認しておいてください。無料でも条件が付くことがあります。

テンプレートを使うと他の人と似ませんか

色とフォントを自分のものに置き換えれば、印象はかなり変わります。構成だけ借りて、見た目は自分で決めてください。

濃淡を使えば、3色でも十分に情報を分けられます。地味に見えるのは、色数ではなくメリハリのなさが原因です。

おしゃれかどうかを自分で判断できません

作った直後は判断できないのが普通です。一晩置いてから見るか、内容を知らない人に見せてください。読みにくい部分がすぐ分かります。

他人に見せるのが難しければ、スマホで撮って小さく見るだけでも効果があります。粗が見えやすくなります。

判断できないのは経験の問題なので、枚数を重ねれば変わります。焦らなくて大丈夫です。

まとめ

おしゃれに見せるコツは、色3色・フォント2種類・大きさ3段階という数の管理です。センスは必要ありません。

配色は、3色に絞って背景7割・主役2割・強調1割の比率で置きます。彩度を少し落とすと、落ち着いた印象になります。

フォントは日本語ならゴシック体が基本です。種類を増やすより、同じフォントの太さを変えるほうがまとまります。

レイアウトは左端をそろえ、余白を文字サイズの1.5倍以上取ります。この2つだけで整った印象になります。

まずは手元にある1枚で、色数を3つに減らしてみてください。それだけで見え方が変わるはずです。