デザインを作るときに「色」「枠」「線」をどう使うかで、伝わり方は微妙に異なります。
同じ情報でも、強調して見せるのか、控えめに並べるのか、まだ未確定の情報として示すのか。それを一目で伝えられるのが、この3つの要素の力です。
この記事では、実際の使用例や擬人化イメージを交えながら「色・枠・線」の基本的な役割と使い分けを解説します。プレゼン資料や図解、スライドデザイン、インフォグラフィック制作の参考にしてみてください。
色の使い分けで伝わり方はどう変わる？
濃い色ベタ塗り
役割は「強調」。まさに「ここを見て！」と伝えるサインです。
注目してほしい施策や数字を示すときに効果的で、一瞬で目線を集められます。
使用例としては、メイン施策を濃い緑で塗りつぶして、他の案との差を出す方法。擬人化すれば「前に出て堂々とプレゼンする人」のイメージです。
薄い色ベタ塗り
役割は「並列」。目立ちすぎず控えめに情報を整理できます。
比較や並びを整理するときに最適で、強調ではなく「フラットに見せる」方向に使うのがポイント。
使用例は、施策A、B、Cを淡い色で横並びに表示するケース。擬人化すれば「チームで横並びに立つ人たち」のイメージです。
枠の種類と意味の違い
実線枠
役割は「確定情報」。シンプルかつ真面目な印象を与えます。
しっかり囲んで情報を整理できるため、正式な施策や確定した内容に向いています。
使用例は、3つの施策を実線で囲んで整列させる方法。擬人化すれば「シンプルな服を着て整列する人たち」のイメージです。
点線枠
役割は「未確定情報」。まだ決まっていない、将来的に追加される可能性を示すときに便利です。
あいまいさを視覚的に伝えられるので、資料の中で「検討中」や「仮」といったニュアンスを表現できます。
使用例は、施策A・Bは実線で囲み、Cだけ点線で囲んで「まだ未定」と伝えるケース。擬人化すれば「まだ発言をためらっている人」のイメージです。
線の種類が与えるニュアンス
実線
役割は「確実なつながり」。強い関係性や確定したプロセスを示すときに使います。
フローや因果関係を表現するときに適していて、安心感を与えます。
使用例は「STEP1 → STEP2 → STEP3」を実線でつなぐプロセス図。擬人化すれば「がっちり握手する人」のイメージです。
点線
役割は「弱いつながり」や「可能性の示唆」。仮説段階や「今後つながるかもしれない」という関係を表すときに最適です。
使用例は点線で「“今後つながるかも”」や「弱い繋がりの関係性」という示し方。擬人化すれば「そっと手を差し伸べる人」のイメージです。
実際のデザイン例
COTEN社
COTENさんのスライドでは、円形に淡い色を使ってプロセスを並列に見せています。
色が控えめだから「強調」ではなく「整理」の役割。複数の情報をフラットに扱いたいときに効果的です。
👉 ポイント：淡い色は「横並びの関係」を伝えるのにぴったり。
サイバーエージェント社
サイバーエージェントさんの資料では、要素を黒や濃い色で塗りつぶすことで「ここが重要（今、見て欲しいのはここ）」という強いサインを出しています。
視線を一気に集める効果があるので、メインの要素や目立たせたい部分に最適です。
👉 ポイント：濃い色は「注目させたい要素」をズバッと伝える。
Hopin社
Hopinさんのスライドでは、Beforeでは点線を使って「曖昧なつながり」を表現し、Afterでは実線で「明確なつながり」を強調しています。線の種類だけで「不安定→安定」が直感的に伝わる好例です。
👉 ポイント：実線＝確定、点線＝仮や可能性。
まとめ
「色・枠・線」は、デザインにおける“言葉以上のコミュニケーションツール”です。
- 濃い色＝強調、薄い色＝整理
- 実線枠＝確定、点線枠＝未確定
- 実線＝強い関係、点線＝弱い関係
このシンプルなルールを理解しておくだけで、プレゼン資料や図解はぐっと伝わりやすくなります。
デザインはセンスだけではなく、伝えるためのルールを知っているかどうかで大きく差が出ます。ぜひ日々の仕事や制作に取り入れてみてください。