白、黒、グレー。たった3色の世界と思われがちなモノトーン配色ですが、その表現力は驚くほど豊かです。明度の微妙な差を使い分けることで、洗練されたミニマルデザインから重厚なラグジュアリー感まで、幅広い印象を作り出せます。この記事では、すぐに使えるモノトーン配色パターンを8種類、HEXコード付きで紹介します。各パターンの特徴と適した用途を解説しているので、デザインの目的に合わせて選んでみてください。
モノトーン配色の基礎知識
モノトーンとは
モノトーンとは「単一の色調」を意味し、デザインにおいては白・黒・グレーの無彩色のみで構成された配色を指します。色相を排除することで、明度のコントラストだけで視覚的な階層を作り出す手法です。
| 用語 | 説明 |
|---|
| 無彩色 | 色相を持たない白・黒・グレーの総称 |
| 明度 | 色の明るさの度合い。白が最高、黒が最低 |
| コントラスト比 | 2色間の明度差の比率。WCAG基準では本文テキストに4.5:1以上を推奨 |
| グレースケール | 白から黒まで段階的に変化するグレーの体系 |
モノトーン配色のメリットとデメリット
| メリット | デメリット |
|---|
| 時代に左右されない普遍的な美しさ | 単調になりやすく、情報の優先度がつけにくい |
| どんなコンテンツ（写真・イラスト）とも調和する | 暖かみや親しみやすさを出しにくい |
| ブランドの信頼感・高級感を演出しやすい | アクセシビリティ（色弱対応）に配慮が必要 |
| 印刷コストが抑えられる（単色印刷対応） | 差し色がないとCTA等の誘導が弱くなる |
| 配色の失敗が起きにくい | 明度差が不足すると可読性が低下する |
配色パターンの見方
各パターンには以下の情報を掲載しています。
| 項目 | 説明 |
|---|
| パターン名 | 配色のテーマやイメージ |
| 5色パレット | 背景・メイン・サブ・アクセント・テキストの5色構成 |
| コントラスト比 | 背景色とテキスト色のWCAG基準のコントラスト比 |
| 用途例 | 適した制作物やデザインジャンル |
パターン1: ピュアホワイト
白を大面積で使い、最小限のグレーと黒でアクセントを加えた、最も純粋なモノトーンです。
| 役割 | 色名 | HEX | RGB |
|---|
| 背景 | ホワイト | #FFFFFF | 255,255,255 |
| メイン | ライトグレー | #F0F0F0 | 240,240,240 |
| サブ | ミディアムグレー | #BDBDBD | 189,189,189 |
| アクセント | ブラック | #000000 | 0,0,0 |
| テキスト | ダークグレー | #212121 | 33,33,33 |
| 項目 | 内容 |
|---|
| コントラスト比 | 背景:テキスト = 16.1:1（AAA適合） |
| イメージ | 清潔、ミニマル、開放的 |
| 用途例 | ポートフォリオサイト、アートギャラリー、高級ブランドLP |
| ポイント | 余白を十分に取り、要素間の間隔で情報の階層を表現する |
パターン2: ソフトグレー
中間のグレーを基調とした、目に優しい穏やかなモノトーンです。
| 役割 | 色名 | HEX | RGB |
|---|
| 背景 | ウォームグレー | #F5F5F0 | 245,245,240 |
| メイン | ライトグレー | #E0E0E0 | 224,224,224 |
| サブ | ミディアムグレー | #9E9E9E | 158,158,158 |
| アクセント | チャコール | #424242 | 66,66,66 |
| テキスト | ダークグレー | #2E2E2E | 46,46,46 |
| 項目 | 内容 |
|---|
| コントラスト比 | 背景:テキスト = 13.2:1（AAA適合） |
| イメージ | 穏やか、上品、落ち着き |
| 用途例 | ブログ、読み物メディア、企業コーポレートサイト |
| ポイント | わずかに暖色を帯びた背景で、純白よりも温かみを感じさせる |
パターン3: ダークモード
黒を基調としたダークモード向けの配色です。近年のUI/UXトレンドに対応したモダンなパターンです。
| 役割 | 色名 | HEX | RGB |
|---|
| 背景 | ディープブラック | #121212 | 18,18,18 |
| メイン | ダークグレー | #1E1E1E | 30,30,30 |
| サブ | ミディアムグレー | #757575 | 117,117,117 |
| アクセント | ライトグレー | #E0E0E0 | 224,224,224 |
| テキスト | オフホワイト | #F5F5F5 | 245,245,245 |
| 項目 | 内容 |
|---|
| コントラスト比 | 背景:テキスト = 18.1:1（AAA適合） |
| イメージ | モダン、テック、集中 |
| 用途例 | テック系サービス、ダッシュボード、動画サイト、エディタUI |
| ポイント | 純粋な黒(
#000000)ではなくディープブラック(
#121212)を使い、目の疲労を軽減する |
パターン4: ハイコントラスト
白と黒のコントラストを最大限に活かした、力強い印象のモノトーンです。
| 役割 | 色名 | HEX | RGB |
|---|
| 背景 | ホワイト | #FFFFFF | 255,255,255 |
| メイン | ブラック | #000000 | 0,0,0 |
| サブ | ダークグレー | #333333 | 51,51,51 |
| アクセント | ミディアムグレー | #808080 | 128,128,128 |
| テキスト | ブラック | #000000 | 0,0,0 |
| 項目 | 内容 |
|---|
| コントラスト比 | 背景:テキスト = 21:1（最大値・AAA適合） |
| イメージ | 力強い、大胆、印象的 |
| 用途例 | タイポグラフィ主体のデザイン、ファッション誌、ポスター |
| ポイント | 太い書体（Bold / Black）との相性が良い。グレーは最小限に抑える |
パターン5: グラデーションスケール
白から黒まで均等に6段階のグレースケールを使った、階層表現に優れた配色です。
| 役割 | 色名 | HEX | RGB |
|---|
| 背景 | ホワイト | #FAFAFA | 250,250,250 |
| メイン | ライトグレー | #C8C8C8 | 200,200,200 |
| サブ | ミディアムグレー | #8C8C8C | 140,140,140 |
| アクセント | ダークグレー | #505050 | 80,80,80 |
| テキスト | ニアブラック | #1A1A1A | 26,26,26 |
| 項目 | 内容 |
|---|
| コントラスト比 | 背景:テキスト = 17.4:1（AAA適合） |
| イメージ | 整然、体系的、プロフェッショナル |
| 用途例 | データダッシュボード、管理画面、ドキュメントUI |
| ポイント | 明度差を均等に配分し、情報の優先度を段階的に表現する |
パターン6: ラグジュアリーブラック
黒の深みを活かした、高級感のある配色です。ファッション・ジュエリー系のブランディングに適しています。
| 役割 | 色名 | HEX | RGB |
|---|
| 背景 | リッチブラック | #0A0A0A | 10,10,10 |
| メイン | ダークチャコール | #1C1C1C | 28,28,28 |
| サブ | グラファイト | #3D3D3D | 61,61,61 |
| アクセント | シルバーグレー | #C0C0C0 | 192,192,192 |
| テキスト | プラチナ | #E8E8E8 | 232,232,232 |
| 項目 | 内容 |
|---|
| コントラスト比 | 背景:テキスト = 19.0:1（AAA適合） |
| イメージ | 高級、重厚、エレガント |
| 用途例 | ジュエリーブランド、高級車、ラグジュアリーホテルサイト |
| ポイント | シルバーグレーのアクセントで金属的な光沢感を演出する |
パターン7: ニュートラルウォーム
わずかに暖色を帯びた灰色で構成した、温かみのあるモノトーンです。
| 役割 | 色名 | HEX | RGB |
|---|
| 背景 | ウォームホワイト | #F8F6F2 | 248,246,242 |
| メイン | サンドグレー | #D5CCBE | 213,204,190 |
| サブ | トープ | #8B8178 | 139,129,120 |
| アクセント | ダークトープ | #5C534A | 92,83,74 |
| テキスト | エスプレッソ | #2C2420 | 44,36,32 |
| 項目 | 内容 |
|---|
| コントラスト比 | 背景:テキスト = 14.6:1（AAA適合） |
| イメージ | 温かい、ナチュラル、リラックス |
| 用途例 | カフェ、オーガニック系ブランド、ライフスタイルメディア |
| ポイント | グレーに茶味を加えることで、冷たさを感じさせないモノトーンを実現 |
パターン8: ニュートラルクール
わずかに寒色を帯びた灰色で構成した、クールでシャープな印象のモノトーンです。
| 役割 | 色名 | HEX | RGB |
|---|
| 背景 | クールホワイト | #F2F4F8 | 242,244,248 |
| メイン | ブルーグレー | #C5CCD6 | 197,204,214 |
| サブ | スレートグレー | #7A8594 | 122,133,148 |
| アクセント | ダークスレート | #3E4757 | 62,71,87 |
| テキスト | インクブルー | #1A2030 | 26,32,48 |
| 項目 | 内容 |
|---|
| コントラスト比 | 背景:テキスト = 15.3:1（AAA適合） |
| イメージ | クール、知的、シャープ |
| 用途例 | テクノロジー企業、SaaS、金融サービス |
| ポイント | グレーに青味を加えることで、テック感とプロフェッショナルな印象を強化 |
モノトーン配色に差し色を加える
モノトーン配色の大きな強みは、どんな差し色とも調和することです。モノトーンを基調としつつ、1色だけアクセントカラーを加えるテクニックは、プロのデザインで頻繁に使われます。
| 差し色 | HEX | 効果 | 適した用途 |
|---|
| レッド | #E53935 | 緊急性、情熱、行動喚起 | CTAボタン、セール告知 |
| ブルー | #1E88E5 | 信頼感、知性、リンク表示 | 企業サイト、テック系サービス |
| ゴールド | #C8A84E | 高級感、特別感、プレミアム | ラグジュアリーブランド |
| グリーン | #43A047 | 成功、安全、承認 | 完了メッセージ、エコ系ブランド |
| コーラル | #F88379 | 温かみ、親しみ、フェミニン | ライフスタイル、ヘルスケア |
差し色の使用比率
モノトーン配色に差し色を加える場合、以下の比率が目安となります。
| 配色要素 | 比率 | 説明 |
|---|
| ベースカラー（白/黒/グレー） | 70% | 全体の大部分を占める土台の色 |
| サブカラー（グレーの別段階） | 25% | 情報の階層を作るための補助色 |
| 差し色（アクセントカラー） | 5% | 最も目立たせたい要素にのみ使用 |
モノトーン配色のアクセシビリティ
モノトーン配色では、明度差だけで情報を伝えるため、アクセシビリティへの配慮が特に重要です。
| チェック項目 | 基準 | 確認方法 |
|---|
| テキストのコントラスト比 | WCAG AA: 4.5:1以上、AAA: 7:1以上 | WebAIM Contrast Checkerなどのツールで検証 |
| 大きな文字のコントラスト比 | WCAG AA: 3:1以上、AAA: 4.5:1以上 | 18px以上のBold、または24px以上が対象 |
| 非テキスト要素 | WCAG 2.1: 3:1以上 | アイコン、ボーダー、フォーム要素など |
| フォーカスインジケータ | 明確に視認できること | キーボード操作時の枠線やアウトライン |
全パターン一覧（コピー用）
デザインツールへのコピー用に、全パターンのHEXコードをまとめます。
| パターン | 背景 | メイン | サブ | アクセント | テキスト |
|---|
| ピュアホワイト | #FFFFFF | #F0F0F0 | #BDBDBD | #000000 | #212121 |
| ソフトグレー | #F5F5F0 | #E0E0E0 | #9E9E9E | #424242 | #2E2E2E |
| ダークモード | #121212 | #1E1E1E | #757575 | #E0E0E0 | #F5F5F5 |
| ハイコントラスト | #FFFFFF | #000000 | #333333 | #808080 | #000000 |
| グラデーションスケール | #FAFAFA | #C8C8C8 | #8C8C8C | #505050 | #1A1A1A |
| ラグジュアリーブラック | #0A0A0A | #1C1C1C | #3D3D3D | #C0C0C0 | #E8E8E8 |
| ニュートラルウォーム | #F8F6F2 | #D5CCBE | #8B8178 | #5C534A | #2C2420 |
| ニュートラルクール | #F2F4F8 | #C5CCD6 | #7A8594 | #3E4757 | #1A2030 |
まとめ
モノトーン配色は、白・黒・グレーという限られた無彩色だけで構成されながら、明度のコントラストを駆使することで驚くほど多彩な表現が可能です。ピュアホワイトのミニマルな清潔感から、ラグジュアリーブラックの重厚な高級感、ニュートラルウォームの温かみまで、今回紹介した8つのパターンはそれぞれ異なる印象と用途を持っています。モノトーンの最大の強みは、どんな差し色とも調和するベースカラーとしての汎用性です。まずはモノトーンで骨格を固め、必要に応じてアクセントカラーを1色加える。このアプローチを身につければ、配色で迷うことが大幅に減るでしょう。アクセシビリティに配慮したコントラスト比の確認も忘れずに、実践的なモノトーン配色をデザインに取り入れてみてください。
