
- Web制作
- 2025.01.20
「この色の組み合わせだとなんだかまとまりがないな…」「このイメージに合う色ってなんだろう」と悩んではいませんか?
とくに初心者Webデザイナーは配色が適切かどうかわからず、迷ってしまうことも多いですよね。色がなかなか決まらないために、制作に時間がかかってしまうこともあるでしょう。
そこでこの記事では、テーマ別に3色のカラーパターンを合計70個ご紹介します!
Webデザインで配色が重要な理由についても解説していますので、色選びで悩むことの多い方はぜひ参考にしてください。
早速、3色のカラーパターンをテーマ別にご紹介します。
「配色がうまく定まらない」「どのような色を使えばよいかわからない」という方はぜひ参考にしてみてください。
![]() | |
ネイビーブルー(#000080) グレー(#808080) ホワイト(#ffffff) | ダークグリーン(#006400) ベージュ(#f5f5dc) ブラウン(#a52a2a) |
![]() | |
深藍(#000033) ライトブルー(#00bfff) ホワイト(#ffffff) | モスグリーン(#006600) オフホワイト(#f8f8ff) ライトグレー(#d3d3d3) |
![]() | |
グレープ(#6930c3) ベージュ(#f5f5dc) ライトブラウン(#a52a2a) | チャコールグレー(#333333) クリーム色(#fffacd) ネイビーブルー(#000080) |
![]() | |
ダークブラウン(#654321) カーキ(#b8860b) ベージュ(#f5f5dc) | カーキグリーン(#424242) グレー(#808080) ホワイト(#ffffff) |
![]() | |
ネイビーブルー(#000080) ライトグレー(#d3d3d3) オレンジ(#ff8000) | ブルーグレー(#6699cc) オフホワイト(#f8f8ff) モスグリーン(#006600) |
![]() | |
パステルピンク(#ffd1dc) ライトブルー(#add8e6) ホワイト(#ffffff) | アイボリー(#fffff0) ベージュ(#f5f5dc) ライトブラウン(#a52a2a) |
![]() | |
ミントグリーン(#98ff98) ライトグリーン(#90ee90) ホワイト(#ffffff) | スカイブルー(#87ceeb) ライトイエロー(#ffff00) ホワイト(#ffffff) |
![]() | |
ラベンダー(#e6e6fa) ピンク(#ffb6c1) ホワイト(#ffffff) | コーラルピンク(#ff7f50) ベージュ(#f5f5dc) オフホワイト(#f8f8ff) |
![]() | |
ライトグリーン(#90ee90) ライトブルー(#add8e6) イエロー(#ffff00) | サーモンピンク(#ff6347) クリーム色(#fffacd) ブラウン(#a52a2a) |
![]() | |
ライトブルー(#add8e6) ライトグリーン(#90ee90) パステルピンク(#ffd1dc) | ベージュ(#f5f5dc) ライトブラウン(#a52a2a) オフホワイト(#f8f8ff) |
![]() | |
イエロー(#ffff00) オレンジ(#ffa500) レッド(#ff0000) | ピンク(#ff00ff) グリーン(#00ff00) ブルー(#0000ff) |
![]() | |
パープル(#800080) イエロー(#ffff00) グリーン(#00ff00) | オレンジ(#ffa500) ブルー(#0000ff) ホワイト(#ffffff) |
![]() | |
ピンク(#ff00ff) イエロー(#ffff00) ブラック(#000000) | グリーン(#00ff00) ブルー(#0000ff) パープル(#800080) |
![]() | |
レッド(#ff0000) イエロー(#ffff00) ホワイト(#ffffff) | ブルー(#0000ff) グリーン(#00ff00) オレンジ(#ffa500) |
![]() | |
パープル(#800080) ピンク(#ff00ff) イエロー(#ffff00) | ブラック(#000000) ホワイト(#ffffff) レッド(#ff0000) |
![]() | |
桜色(#ffc0cb) ライトグリーン(#90ee90) ホワイト(#ffffff) | ミントグリーン(#98ff98) ライトブルー(#add8e6) イエロー(#ffff00) |
![]() | |
ピンク(#ffb6c1) ベージュ(#f5f5dc) ライトブラウン(#a52a2a) | パステルイエロー(#ffff77) ライトグリーン(#90ee90) ホワイト(#ffffff) |
![]() | |
ラベンダー(#e6e6fa) ピンク(#ffb6c1) ホワイト(#ffffff) | スカイブルー(#87ceeb) ライトイエロー(#ffff00) ホワイト(#ffffff) |
![]() | |
ライトグリーン(#90ee90) ライトブルー(#add8e6) パステルピンク(#ffd1dc) | サーモンピンク(#ff6347) クリーム色(#fffacd) ブラウン(#a52a2a) |
![]() | |
ライトブルー(#add8e6) ライトグリーン(#90ee90) パステルピンク(#ffd1dc) | ベージュ(#f5f5dc) ライトブラウン(#a52a2a) オフホワイト(#f8f8ff) |
![]() | |
スカイブルー(#87ceeb) ホワイト(#ffffff) ネイビーブルー(#000080) | マリンブルー(#0066ff) イエロー(#ffff00) ホワイト(#ffffff) |
![]() | |
オレンジ(#ffa500) イエロー(#ffff00) レッド(#ff0000) | ターコイズブルー(#40e0d0) ライトグリーン(#90ee90) ホワイト(#ffffff) |
![]() | |
ブルー(#0000ff) グリーン(#00ff00) ホワイト(#ffffff) | サマーイエロー(#fff96e) ライトブルー(#add8e6) ホワイト(#ffffff) |
![]() | |
ピンク(#ff00ff) オレンジ(#ffa500) イエロー(#ffff00) | ホワイト(#ffffff) ネイビーブルー(#000080) ライトブルー(#add8e6) |
![]() | |
ライトブルー(#add8e6) グリーン(#00ff00) オレンジ(#ffa500) | ベージュ(#f5f5dc) ブラウン(#a52a2a) ホワイト(#ffffff) |
![]() | |
ブラウン(#a52a2a) ベージュ(#f5f5dc) オレンジ(#ffa500) | ボルドー(#800000) カーキ(#b8860b) ベージュ(#f5f5dc) |
![]() | |
イエロー(#ffff00) オレンジ(#ffa500) レッド(#ff0000) | テラコッタ(#8d4513) ブラウン(#a52a2a) ベージュ(#f5f5dc) |
![]() | |
オリーブグリーン(#6d8e23) ブラウン(#a52a2a) ベージュ(#f5f5dc) | マスタードイエロー(#ffdb58) グリーン(#00ff00) ブラウン(#a52a2a) |
![]() | |
オレンジ(#ffa500) レッド(#ff0000) ブラウン(#a52a2a) | ブラウン(#a52a2a) ベージュ(#f5f5dc) ホワイト(#ffffff) |
![]() | |
グリーン(#00ff00) ブラウン(#a52a2a) オレンジ(#ffa500) | ベージュ(#f5f5dc) ブラウン(#a52a2a) オフホワイト(#f8f8ff) |
![]() | |
ホワイト(#ffffff) 淡いグレー(#e6e6e6) ライトブルー(#add8e6) | ダークブラウン(#654321) オレンジ(#ffa500) クリーム色(#fffacd) |
![]() | |
レッド(#ff0000) グリーン(#00ff00) ホワイト(#ffffff) | ネイビーブルー(#000080) シルバー(#c0c0c0) パープル(#800080) |
![]() | |
ライトグレー(#d3d3d3) ホワイト(#ffffff) スカイブルー(#87ceeb) | ブルーグレー(#6699cc) モスグリーン(#006600) オフホワイト(#f8f8ff) |
![]() | |
ピンク(#ffb6c1) オレンジ(#ffa500) ライトブルー(#add8c6) | ブラウン(#a52a2a) ベージュ(#f5f5dc) クリーム色(#fffacd) |
![]() | |
ホワイト(#ffffff) ブラック(#000000) オレンジ(#ffa500) | レッド(#bd1919) グリーン(#00ab00) ホワイト(#ffffff) |
なぜデザインで配色が重要なのか、3つの理由を解説します。
理由をしっかり理解して、適切な配色ができるWebデザイナーを目指しましょう。
1つ目の理由は、配色によって視覚的な印象を与えられるためです。
人は目からいろいろな情報を捉えますが、色は強い印象を与えるものの一つです。適切な配色を選ぶことで、ターゲット層に訴求をしたり、ブランドイメージを与えたりできます。
たとえば、高級感のあるイメージを想起させたいなら「金」「黒」「白」、子ども向けの商品は元気なイメージを与える「カラフルな色」「ビビッドな色」が使われています。
このように、適切な配色を選ぶことは、商品やサービスのイメージを伝えるために重要なのです。
2つ目の理由は、配色によって感情へ訴求できるためです。
たとえば、赤やオレンジなどの暖色系は活力や興奮を想起させますし、青や緑などの寒色系は落ち着きや安心感を与えます。
スポーツ用品はエネルギッシュなイメージを与える赤やオレンジを、医療関係は安心してもらえるように青や緑が使われていることが多いですよね。
このように色は感情にも強いイメージを与えるので、デザインを見る人にどのようなイメージを与えたいのかを意識して配色を考えることが重要です。
3つ目の理由は、色を使うことで情報の整理ができるためです。白黒で表現するよりも情報を認識しやすくなります。
たとえば、重要な情報には赤や濃い色を用いて強調し、情報の強さを表現することが可能です。反対にボタンのOFF状態を表すときに使うグレーは非活性なイメージを与えるため、情報を弱められます。
色を使うと情報の重要性が整理でき、受け手が認識しやすくなるため、適切な配色をすることは重要なのです。
配色には「視覚的な印象を与える」「感情に訴求する」「情報を整理する」などの効果があるため、適切な色を使うことが重要です。
始めはどの色を使えばよいかわからない場面が多いかと思いますが、経験を重ねていくうちに少しずつ洗練されていきます。
配色を効果的に活用できるよう、実践を繰り返していきましょう!
東京フリーランスは、Webデザインを仕事にする本格スキルを学べる”デイトラ”を運営しています。
デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています!
デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。
独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。
また、デイトラWebデザインコースは、随時教材をアップデート!一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。
未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください!
ももさん(@momo_web24)
デザイン会社社長。WebアプリのUIUX設計からHP、ロゴ作成まで幅広くWeb制作に携わっている。デイトラWebデザインコースのメンター。