トップ > 活用ガイド・コラム > デザイン・配色

非デザイナーでも垢抜ける!「色数が多くて散らかる」を防ぐ3色の黄金比とアイコン配色術

2026年07月04日 デザイン・配色テクニック 読了目安:約5分
目次

1. プレゼン資料やLPが「素人っぽく散らかる」最大の原因

ビジネスシーンで企画書を作成するときや、Webサイト・ランディングページ(LP)をレイアウトするとき、「なんだか素人っぽく見えてしまう」「伝えたい箇所が埋もれて見づらい」と悩んだ経験はないでしょうか。

その最大の原因の多くは、「1つの紙面・画面内に使われている色数が多すぎる」ことにあります。強調したいがために赤や青、緑、オレンジなどバラバラの色を追加し、さらにインターネット上でダウンロードしたカラフルなアイコンをそのまま配置してしまうと、視線の行き先が分散してしまい、信頼感を損ねる結果につながります。

2. プロが必ず守る「70:25:5」3色の黄金比ルール

洗練された見やすい画面やスライドを作るには、使用する色を「3色」に絞り、その配分比率をコントロールするテクニックが効果的です。これをデザインの世界では「配色の黄金比(70%:25%:5%)」と呼びます。

配分役割 比率 推奨カラーの例 主な用途
ベースカラー(基調色) 70% 白、ライトグレー、淡いアイボリー 背景、ページの余白、カードの台紙
メインカラー(主調色) 25% コーポレートカラー(ネイビー、ブラウン等) 見出し、ナビゲーション、文字色、アイコン主線
アクセントカラー(強調色) 5% オレンジ、テラコッタ、明るいグリーン等 CTAボタン、重要バッジ、特に目立たせたいポイント

このルールを意識するだけで、文字や図解がスッと頭に入ってくる美しいレイアウトへと劇的に進化します。

3. アイコン選びで起きがちな配色NGパターンと対策

配色の比率を決めても、挿入するアイコンやイラストによって全体の調和が崩れる場合があります。よくあるNG例を確認しておきましょう。

NG例1:素材サイトごとに線の太さや色が異なる

別のサイトからダウンロードした素材を並べると、線が黒いもの、グレーのもの、塗りつぶしのものが混在し、資料全体のまとまりが失われます。

NG例2:アイコン自体の主張が強すぎる

原色調の派手なアイコンを使用すると、本文の見出しや最も重要な「お問い合わせボタン」よりもアイコンが目立ってしまい、視線が誘導されません。

デザインアドバイス

アイコンは「情報を補助し、直感的な理解を促すナビゲーター」です。基本はメインカラー(テキスト色やブランドの基本色)とトーンを合わせることで、紙面全体に心地よい一体感が生まれます。

4. irotoriのカラーカスタマイズ機能で資料のトンマナを揃えるテクニック

当サイト「irotori」で公開しているすべての素材は、ダウンロード前に画面上で主線やアクセントカラーを自由に調整できるカラーパレット機能を備えています。

  • メインカラーの統一: 資料やLPのメインカラーカラーコード(例:#4A3E39や#2C3E50など)を入力すると、すべての素材が自社カラーへ一瞬で馴染みます。
  • アクセント差し色の調整: ワンポイントの温かみを残したい場合は、少し落ち着いたテラコッタ(#E74C3Cや#D35400)を指定するのが人気です。
  • SVGデータの活用: SVG形式でダウンロードすれば、IllustratorやCanvaなどでも画質を劣化させることなく微調整が可能です。

5. まとめ:今日から実践できるチェックリスト

資料やWebデザインを作成する際は、完成前にぜひ以下の項目をチェックしてみてください。

  1. 画面内の色は「ベース・メイン・アクセント」の3系統に収まっているか?
  2. アイコンの線の太さや主線カラーがドキュメント全体で統一されているか?
  3. 最も目立たせるべきCTAや重要結論が、アクセントカラー(5%)で引き立っているか?

統一感のあるデザインは、相手への誠実さや信頼感へと直結します。ぜひirotoriのシンプルな素材をご活用いただき、質の高い制作にお役立てください!

ブランドに合った素材やカラー設定について相談したいときは?

「自社のブランドカラーに合わせたアイコンセットを一括調整してほしい」「専用のイラストパーツを作ってほしい」といったご要望は有料制作サービスでお手伝いいたします。