かわいいインフォグラフィックの作り方｜配色・素材のポイント

かわいいインフォグラフィックを探すと、ピンタレストの画像がずらりと並びます。眺めていると作れそうな気がしてきますが、いざ自分で作るとまったく違うものができあがります。

理由ははっきりしています。かわいく見せるには、色・形・素材の3つに決まったパターンがあるからです。感覚で作っている人も、実は同じ型を使っています。

この記事では、かわいい配色の組み合わせを具体的に挙げ、丸みの付け方と素材の選び方をまとめました。あわせて、かわいくすると読みにくくなる原因と、その避け方まで解説します。

結論からお伝えすると、かわいく見せる方法は3つです。淡い色でまとめる、角を丸くする、手描き風の素材を使う。この3つだけで印象が変わります。

配色は、薄いピンクとクリーム色、くすんだブルーとグレージュのように、彩度の低い色を組み合わせます。鮮やかな色を並べると、かわいいというより子ども向けになります。

形は、四角の角を丸くするだけで十分です。アイコンの枠を円にしたり、区切り線を波線にするのも効きます。

ただし、かわいさを優先すると読みにくくなります。淡い色同士を隣に置かない、手書き風フォントは見出しだけにする。この2つを守ってください。

かわいく見せる配色のパターン

かわいい配色は、彩度を下げた色の組み合わせで作ります。5つの定番パターンから選べば、色選びで迷いません。

かわいい配色に共通しているのは、色が主張しすぎないことです。淡い色や、少しくすんだ色を選ぶと、やわらかい印象になります。

逆に、はっきりした赤や青をそのまま並べると、かわいいというより元気で子ども向けの印象になります。狙いが違うなら避けてください。

色数は3色までに抑えてください。かわいい配色は淡いぶん、色を増やしても差がつかず、ぼんやりした印象になります。

基本の考え方は落ち着いた方向と同じです。色数やフォント数の原則は、当サイトのおしゃれなインフォグラフィックの記事で詳しく扱っています。

色を選ぶ前に、誰に見せるかを決めてください。同じかわいいでも、10代向けと40代向けでは選ぶ色が変わります。

定番の5パターン

迷ったときは、次の中から選んでください。どれも失敗が少ない組み合わせです。

パターン	色の組み合わせ	与える印象
パステル	薄いピンク、薄い水色、クリーム	やさしい、明るい
くすみ	スモーキーピンク、グレージュ、くすみブルー	落ち着いた、今っぽい
ナチュラル	ベージュ、オフホワイト、淡いグリーン	あたたかい、素朴
ポップ	黄色、オレンジ、白	元気、親しみやすい
白ベース	白と薄いグレーに1色だけ	すっきり、上品

いちばん扱いやすいのはくすみです。淡すぎず、はっきりしすぎず、大人が見ても違和感がありません。

この5つは、いま多く使われている組み合わせです。SNSで見かけるかわいい図解も、たいていどれかに当てはまります。

ポップだけは彩度が高めなので、他とは性格が違います。にぎやかさを出したいときだけ選んでください。

淡い色は、面積を広く取っても圧迫感が出ません。背景いっぱいに使っても重くならないのが利点です。

色の作り方

手持ちの色をかわいくしたいなら、白を混ぜるイメージで明るくしてください。同じピンクでも、明るくするだけでやわらかくなります。

くすみ色にしたいときは、グレーを少し混ぜます。ツールでは、鮮やかさを示すつまみを下げるだけで作れます。

この2つの操作を覚えておけば、どんな色からでもかわいい方向に寄せられます。特別な配色表は必要ありません。

1つのパターンを決めたら、その中で濃淡をつけて使います。淡いピンクと濃いめのピンクを併用すれば、色数を増やさずに情報を分けられます。

作るたびに色を変えないでください。同じ配色を続けると、並んだときに統一感が出ます。

濃い色を使いたいときは、差し色として少量だけにしてください。面積が小さければ、全体の印象は変わりません。

背景の色

背景をクリーム色やベージュにすると、それだけであたたかい印象になります。真っ白よりやわらかく見えます。

ただし、背景に色を敷くと文字が読みにくくなることがあります。文字は濃いグレーか濃い茶色にして、しっかり差をつけてください。

ベージュ系の背景は、印刷したときにも柔らかく出ます。配布物に使う予定があるなら向いています。

背景を濃くしすぎると、印刷でインクを多く使います。淡い色にとどめておくほうが実用的です。

配色を決めたら、実際に置く場所に並べて確認してください。単体で見て良くても、サイトやSNSに置くと浮くことがあります。

丸みで印象を変える

かわいさは色より形で決まる部分が大きくなります。角を丸くするだけで、同じ内容でも印象が変わります。

色を変えなくても、形を変えるだけでかわいくなります。むしろ色より効果が出やすい部分です。

丸みは、かわいさを出すいちばん手軽な方法です。色を変えるより手数が少なく、効果も分かりやすく出ます。

形は色より先に決めても構いません。丸みのある構成にしてから色を乗せると、迷いが少なくなります。

角を丸くする

四角い枠や表の角を丸くしてください。丸みの大きさは、大きいほどやわらかい印象になります。

すべての要素で丸みの大きさをそろえるのがコツです。ばらつくと、まとまりがなくなります。

丸みが大きすぎると、子ども向けの印象が強くなります。大人向けなら、控えめな丸みにとどめてください。

表のセルや吹き出しの角も忘れずに丸めます。1か所だけ角のままだと、そこが目立ってしまいます。

角の丸みは、ツールの設定で数値を指定できることが多くあります。同じ数値を使い回せば、そろえるのも簡単です。

円を使う

アイコンの枠や数字の背景を円にすると、一気にやわらかくなります。四角より角が立たないためです。

人物を表すときも、円の中に入れる形がよく使われます。写真でもイラストでも同じ効果があります。

グラフの棒も、先端を丸くできる場合があります。数値の見え方は変わらないので、迷わず丸めてください。

円グラフはそのままでもやわらかい形です。かわいい方向とは相性がいい図の型になります。

円は数字を見せるときにも便利です。数字を円の中に入れるだけで、そこが主役だと伝わります。

線をやわらかくする

区切り線を、まっすぐな線ではなく波線や点線にしてください。それだけで硬さが取れます。

矢印も、細くて先が丸いものを選ぶとなじみます。太くて鋭い矢印は、資料っぽさが強く出ます。

線の太さも印象に関わります。細すぎると頼りなく、太すぎると強く見えます。中くらいを選ぶと収まります。

アイコンも円で囲むと統一感が出ます。形がばらばらな素材でも、同じ円に入れればそろって見えます。

手描きの線を混ぜる

枠や下線を手描き風にすると、ぐっと親しみやすくなります。少しゆがんだ線のほうが、かわいく見えます。

ただし、全部を手描き風にすると読みにくくなります。装飾の部分だけにとどめてください。

手描き風の素材は、無料の配布サイトでも見つかります。線や枠だけをまとめたものを1式そろえておくと便利です。

自分で描く方法もあります。紙に描いて写真を撮り、背景を消して使うだけで十分です。

かわいい系に合うフォント

丸ゴシックを選べば、それだけでかわいい方向に寄ります。手書き風は見出しだけに使ってください。

フォントは印象を大きく左右します。ただ、かわいい系は読みにくくなりやすい部分でもあるので、選び方に注意が必要です。

フォントは、かわいさと読みやすさがぶつかりやすい部分です。ここを間違えると、雰囲気は出ても内容が伝わりません。

使うフォントは、記事やアカウント全体で固定してください。毎回変えると、統一感が失われます。

手描き風の枠は、1枚に2つか3つまでにしてください。多用すると、ラフに見えて雑な印象になります。

丸ゴシックが基本

丸ゴシックは、文字の角が丸くなった書体です。読みやすさを保ったまま、やわらかい印象を出せます。

ヒラギノ丸ゴやZen Maru Gothicが定番です。Zen Maru Gothicは無料で使えて、太さも選べます。

本文にも見出しにも使えるので、1種類で通すこともできます。迷ったらこれを選んでください。

丸ゴシックの中でも、丸みの強さに違いがあります。強いものほどかわいく、弱いものほど落ち着いた印象になります。

仕事でも使いたいなら、丸みが控えめなものを選んでください。やわらかさは残しつつ、軽く見られません。

フォントは、無料で使えるものだけでも十分に選べます。有料のものを探す前に、まず無料の中で試してください。

手書き風は見出しだけ

手書き風のフォントは雰囲気が出ますが、長い文章に使うと読みづらくなります。タイトルや短い見出しだけにしてください。

本文は読みやすいフォントにして、見出しだけ手書き風にする。この組み合わせがバランスを取りやすい形です。

手書き風には、丸っこいものと細くて流れるようなものがあります。図解に合うのは、丸っこくて読みやすいほうです。

数字に手書き風を使うのは避けてください。6と0、1と7が読み取りにくくなります。

本文と見出しで別のフォントにするなら、片方は必ず読みやすいものにしてください。両方が個性的だと落ち着きません。

細い文字を避ける

かわいい系では細めの文字が選ばれがちですが、小さいサイズでは見えづらくなります。中くらいの太さを選んでください。

特に淡い色の文字にする場合は、太めにしないと沈みます。色と太さはセットで考えます。

背景が淡いときは、文字を太くするか色を濃くします。どちらか一方でも改善しますが、両方やると確実です。

使いやすい素材の選び方

素材は、線が細くて色数の少ないものを選びます。テイストをそろえることが、まとまりを作る最大のポイントです。

かわいい素材は数が多いぶん、選び方を間違えると散らかります。3つの基準で絞ってください。

素材選びは、見た目の好みだけで選ぶと失敗します。使う場面と、他の要素との相性で決めてください。

素材の探し方にもコツがあります。日本語で検索するより、英語のほうが数が多く出てくることもあります。

同じシリーズから選ぶ

イラストやアイコンは、同じ配布元の同じシリーズでそろえてください。線の太さや塗り方が違うものを混ぜると、それだけで不揃いに見えます。

気に入ったシリーズが見つかったら、そこから継続して使うのがいちばん楽です。毎回探す手間もなくなります。

シリーズが分からないときは、線の太さが同じか、塗りがあるかないかを見比べてください。この2点がそろっていれば、多少違っても浮きません。

1つのシリーズで足りないときは、使う場所を分けます。上半分と下半分で混ぜないほうが自然です。

使う予定のない素材まで集めないでください。選択肢が増えるほど、決めるのに時間がかかります。

ゆるいイラストが合う

写実的なイラストより、線が少なくデフォルメされたもののほうがかわいい方向には合います。いわゆるゆるいイラストです。

人物なら、顔の描き込みが少ないものを選んでください。表情が細かいと、絵のほうが主役になってしまいます。

人物のイラストは、肌の色にも注意してください。他の要素と彩度が合っていないと、そこだけ浮きます。

顔を描かないシルエットのイラストも使いやすい選択肢です。誰にでも当てはまるので、幅広い読者に向きます。

色を差し替える

素材の色が自分の配色と合わないときは、色を変えられるものを選んでください。単色のイラストなら、たいてい変更できます。

配色に合わせて色を統一するだけで、寄せ集め感がなくなります。この一手間が効きます。

色を変えられない素材は、無理に使わないでください。1つ浮くだけで全体のまとまりが崩れます。

季節や内容に合わせて素材を変えたくなりますが、シリーズは固定したほうが管理が楽です。色だけ変えて対応してください。

数を絞る

かわいい素材はつい増やしたくなりますが、多いほど情報が埋もれます。1枚につき3つか4つまでに抑えてください。

素材を主役にしないことも大事です。あくまで情報が主役で、イラストは理解を助ける役割にとどめます。

あしらいの足し方

あしらいは、余白に少しだけ足すものです。情報のない場所に置くのが基本で、文字の近くには置きません。

あしらいというのは、内容とは関係ない小さな装飾のことです。ドットや点線、小さな星などが該当します。

あしらいは、余白が寂しいときの調整に使います。最初から入れる前提で作らないでください。

素材の配置は、余白を意識してください。詰めて置くと、せっかくのやわらかさが消えます。

よく使うあしらい

次のようなものが、かわいい系ではよく使われます。どれも小さく、控えめに置きます。

• 小さなドットを余白に散らす
• 区切りに点線を引く
• 見出しの下に手描き風の下線を引く
• 数字を丸で囲む
• 吹き出しでコメントを添える

この中から2種類くらい選んで、繰り返し使うとまとまります。全部を入れる必要はありません。

同じあしらいを繰り返すと、統一感が出ます。種類を増やすより、同じものを配置し直すほうがまとまります。

ドットは、大きさをそろえて等間隔に置くときれいに見えます。ばらばらに散らすと雑に見えます。

情報の上に重ねない

あしらいは、文字やグラフの近くに置かないでください。読むときの邪魔になります。

置くのは、空いている余白です。何もない場所に少し添えるだけで、寂しさが消えます。

グラフや表の上には絶対に置かないでください。数値の読み取りを邪魔します。

あしらいを入れる前に、一度何もない状態で全体を見てください。それで十分なら、足す必要はありません。

色は薄くする

あしらいの色は、背景に近い薄い色にしてください。濃い色にすると、そちらに目が行ってしまいます。

存在に気づかないくらいでちょうどいい濃さです。主役はあくまで情報です。

迷ったら、あしらいを全部消してみてください。消しても成立するなら、もともと不要だった可能性が高いです。

かわいいのに読みにくくなる原因

かわいさを優先すると、可読性が落ちます。原因は5つに絞られるので、ここを避ければ両立できます。

ここがこの記事でいちばん大事な部分です。かわいく作れても、読めなければ意味がありません。

実際、かわいい図解でよく見かける失敗は、ほとんどこの5つのどれかです。作り終わったら順に確認してください。

読みやすさを確保したうえでかわいくするのが正解です。順番を逆にすると、どちらも中途半端になります。

原因1：淡い色同士が隣り合っている

薄いピンクの背景に薄い黄色の文字を置くと、境目が分からなくなります。淡い色は、必ず濃い色と組み合わせてください。

文字の色は、濃いグレーか濃い茶色にすると読みやすくなります。黒より柔らかく、かわいい系にもなじみます。

確認する方法があります。画面のスクリーンショットを白黒にしてみて、文字が読めるかを見てください。読めないなら、色の差が足りていません。

読みにくさは、作った本人ではなかなか気づけません。内容を知っているので、読めてしまうためです。

原因2：手書き風フォントを本文に使っている

手書き風は雰囲気が出る反面、長い文章では読む速度が落ちます。文字数の多い部分には使わないでください。

見出しに使う場合も、長い見出しには向きません。10字前後までにとどめてください。

色の差が足りているかは、目を細めて見ると分かります。文字が背景に溶けるようなら、調整が必要です。

数字や固有名詞の部分は、特に読みやすさを優先してください。ここを間違えられると、内容の信頼に関わります。

原因3：あしらいが多すぎる

ドットや星を散らしすぎると、情報がその中に埋もれます。あしらいの総量は、画面の1割以下を目安にしてください。

足したくなったら、代わりに余白を広げてください。余白は寂しさを埋める要素にもなります。

装飾の量は、慣れるほど減っていきます。最初は入れすぎるものだと思って、あとから削ってください。

原因4：文字が細くて小さい

かわいさを出そうとして細い文字を小さく置くと、スマホでは読めません。太さと大きさで補ってください。

スマホで開いて確認するのが確実です。パソコンでは大きく見えているので、作った本人は気づけません。

文字を大きくできないときは、載せる情報を減らしてください。字を小さくして詰め込むより確実です。

原因5：背景に柄が入っている

背景にチェックやドットの柄を敷くと、その上の文字が読みにくくなります。柄を使うなら、文字のない部分だけにしてください。

この5つを避けるだけで、かわいさと読みやすさは両立します。どれも足し算ではなく引き算で解決できます。

柄を使いたいなら、白い帯を敷いてその上に文字を置いてください。柄と文字を直接重ねないだけで読みやすくなります。

柄は面積を小さく使うのがコツです。全面に敷くより、一部に帯として入れるほうが扱いやすくなります。

テイスト別のかわいい

かわいいにも方向があります。誰に向けるかで、選ぶ色と素材が変わります。

ひとくちにかわいいといっても、幅があります。先に方向を決めてから作り始めてください。

方向	配色	素材	向いている相手
ゆるい	パステル	手描き風のイラスト	一般の読者、SNS
ナチュラル	ベージュ、淡い緑	線画、植物のモチーフ	暮らし系、女性向け
レトロ	くすんだ赤や黄	太い線、丸ゴシック	個性を出したい場面
すっきりかわいい	白と1色	単色のアイコン	仕事でも使いたい場面

仕事で使う可能性があるなら、すっきりかわいいを選んでください。かわいさは残しつつ、軽く見られにくくなります。

方向を決めずに作ると、途中で迷います。素材を探す時間も長くなるので、先に決めるほうが速く終わります。

複数の方向を混ぜないでください。ナチュラルな配色にポップな素材を合わせると、どちらの良さも消えます。

どこで使うと効果があるか

かわいい方向が効くのは、相手との距離を縮めたい場面です。使う場所によって効果が大きく変わります。

同じ図でも、置く場所によって受け取られ方が変わります。効果が出やすい場面を挙げます。

逆に、効果が薄い場面もあります。次の章で挙げるので、あわせて確認してください。

使う場所が決まっていれば、方向も自然に決まります。先に置き場所を思い浮かべてください。

SNSの投稿

タイムラインは流し見されるので、目に留まる必要があります。やわらかい色と丸い形は、硬い図より目が止まりやすくなります。

保存や共有もされやすくなります。内容が同じでも、見た目で反応が変わる場所です。

1枚目で結論が伝わる形にしてください。かわいくても、内容が分からなければ止まってもらえません。

投稿の一覧に並んだときの見え方も確認してください。1枚ずつ見ると良くても、並ぶと雑然とすることがあります。

ブログの図解

記事の雰囲気に合わせて作ると、サイト全体の印象が統一されます。暮らし系や趣味の記事とは特に相性がいい方向です。

記事のアイキャッチにも使えます。文章だけの記事より、一覧に並んだときに目を引きます。

子ども向けや案内の掲示

学校の配布物や、地域の掲示物にも向いています。硬い印象を減らして、読んでもらいやすくできます。

読む相手の年齢が幅広い場合は、文字を大きめにしてください。かわいさより読みやすさが優先です。

掲示物は離れて見られることが多いので、文字を大きくしてください。細かい情報は載せないほうが伝わります。

社内の距離を縮めたい資料

社内向けの案内や、新しく入った人への説明資料にも効果があります。堅苦しさが減って、質問しやすい空気になります。

ただし、社外に出る可能性がある資料は別です。誰が見るか分からない場合は、控えめにしておくほうが安全です。

かわいくしないほうがいい場面

かわいさが逆効果になる場面もあります。信頼性が優先される内容では、落ち着いた方向を選んでください。

ここは押さえておいてください。かわいくすればいいというものではありません。

相手の期待とずれると、内容が良くても評価されません。ここは慎重に判断してください。

相手が期待している雰囲気から外れると、内容以前で引っかかります。読み手の立場で考えてください。

金額や実績を示すとき

見積もりや実績の資料をかわいくすると、内容まで軽く見られることがあります。数字が主役の場面では避けてください。

どうしても親しみやすくしたいなら、色だけ少しやわらげる程度にとどめてください。形や素材は落ち着いたままにします。

提案書の表紙だけやわらげる方法もあります。中身は落ち着いた作りにして、入口だけ親しみやすくする形です。

専門性が問われる内容

健康や法律、お金に関する情報では、正確さが優先されます。装飾が多いと、内容の信頼度まで下がって見えます。

数値の根拠を示す部分は、装飾を入れないでください。そこだけシンプルにするだけでも印象が変わります。

医療や健康の情報は、特に慎重に扱ってください。効果を約束するような表現は、装飾の有無にかかわらず避けます。

取引先への提案

初めての相手に出す資料では、落ち着いた方向のほうが安全です。関係ができてから、少しずつ寄せていくほうが確実です。

判断に迷ったら、相手が誰かで決めてください。読み手が期待している雰囲気に合わせるのが基本です。

迷ったら、まず落ち着いた方向で作ってみてください。そこから少しずつ寄せるほうが、行き過ぎを防げます。

かわいいインフォグラフィックの作る手順

作る順番を決めておくと迷いません。配色と素材を先に決めて、情報を置くのは最後です。

次の5つの順で進めてください。手戻りが少なくなります。

1. 誰に向けるかを決めて方向を選ぶ
2. 配色パターンを1つ決める
3. 使う素材のシリーズを1つ決める
4. 情報を置いて角を丸くする
5. 余白にあしらいを少しだけ足す

あしらいを最後にするのが大事です。先に飾ると、情報を置く場所がなくなります。

なお、情報の絞り方や配置の基本は、当サイトの作り方の記事でも解説しています。この記事はかわいい方向に寄せる部分に絞っています。

かわいいインフォグラフィックに関するよくある質問

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

この順番を守れば、作り直しはほとんど起きません。特に配色と素材を先に決めるのが効きます。

1枚作ったら、その設定を保存しておいてください。2枚目からは数分で作れるようになります。

手順の中では、2番目と3番目に時間をかけてください。ここが決まっていれば、あとは配置するだけです。

イラストが描けなくても作れますか

作れます。無料の素材サイトにゆるいイラストが揃っているので、選んで配置するだけで形になります。自分で描く必要はありません。

素材は無料のものでも十分な数があります。有料に切り替えるのは、同じシリーズで数をそろえたくなってからで構いません。

かわいい配色が自分で作れません

この記事の5パターンから選んでください。ゼロから作るより、決まった組み合わせを使うほうが確実です。慣れてきたら少しずつ変えていけば十分です。

作例を探すときは、真似する部分を1つに絞ってください。全部を取り入れると、まとまりのないものになります。

仕事でも使って大丈夫ですか

相手と内容によります。社内の案内や、一般の読者向けの記事なら問題ありません。金額や実績を示す資料では、落ち着いた方向を選んでください。

社内資料なら試しやすい場面です。反応を見てから、外向けにも広げていく進め方が安全です。

手書き風フォントは無料でありますか

あります。日本語対応の手書き風フォントも配布されています。商用で使う場合は、配布元の条件を確認してください。

数字を扱う部分だけは、読みやすいフォントに切り替えてください。雰囲気より正確さが優先されます。

ピンタレストの画像をそのまま使えますか

使えません。参考として見るのは自由ですが、他人の作品をそのまま使うのは避けてください。配色や構成の考え方を取り入れる形にとどめます。

フォントは1種類でも十分です。太さを変えるだけで、見出しと本文の差はつけられます。

参考にする作例は、自分が作りたい方向のものだけに絞ってください。方向の違うものを混ぜて見ると、判断がぶれます。

かわいくしすぎか判断できません

内容を知らない人に見せて、何の話か10秒で言えるかを確かめてください。答えられないなら、装飾が情報を邪魔しています。

作った直後は判断しにくいので、時間を置いてから見るのも有効です。翌日に見ると、過剰な部分に気づけます。

判断できないうちは、装飾を1つ減らす方向で調整してください。足すより減らすほうが、失敗が少なくなります。

まとめ

かわいく見せるのは、色を淡くする、角を丸くする、手描き風の素材を使うの3つです。読みやすさとの両立だけ気をつけてください。

配色は5つの定番パターンから選べば迷いません。いちばん扱いやすいのはくすみで、大人が見ても違和感がありません。

形は、角を丸くするだけで印象が変わります。色より効果が出やすい部分なので、先に試してみてください。

素材は同じシリーズでそろえ、色を配色に合わせます。数は3つか4つまでに抑えてください。

まずは手元の1枚で、角を丸くして色を淡くしてみてください。それだけで見え方が変わるはずです。