スポーティー
スポーティー*sporty
軽快で活動的なさま
特徴
アクティブで爽快な雰囲気
運動感や機能性を強調
代表的な色
#1E6FFF アスレチックブルー
#E10600 エナジーレッド
#28A745 グラスグリーン
#1C1C1C アクティブブラック
#C0C7CF スピードシルバー
避けたい色
パステルピンク
ベージュ
ダークブラウン
くすみの強い色や柔らかいパステルカラーは、落ち着きや優しさが強調されやすく、スポーティー特有の爽快感や躍動感、スピード感が弱まりやすい。
彩度
中〜高
活力・健康的な印象を与える
スピード感やダイナミックさを演出
明度
中〜高
明るく前向きな印象
清潔感や爽快感を演出
配色のコツ
ネイビーやグレー、白をベースに配色
アクセントにレッド、オレンジ、ライムグリーンを加えると、元気でアクティブな雰囲気になる
配色パターンやウェアラインを意識すると、よりスポーティで活発な印象になる
活用シーン
スポーツ・フィットネス
スポーツジムのWebサイト
フィットネスイベントのポスター
スポーツ用品の広告バナー
など
自動車・モータースポーツ
自動車メーカーのプロモーションサイト
カーディーラーの販促パンフレット
モータースポーツ大会の告知ビジュアル
など
アウトドア・レジャー
アウトドアブランドのカタログ
アクティビティ施設のWebサイト
キャンプイベントの販促ツール
など
健康・ヘルスケア
健康食品の販売サイト
スポーツサプリメントの広告
健康促進キャンペーンの販促物
など
イベント・エンターテインメント
ライブイベントの告知ポスター
チケット販売のプロモーション広告
eスポーツ大会の特設サイト
など
関連キーワード
スポーティーなイメージに共通する「20」のキーワードをもとに、それぞれの雰囲気を際立たせる3色の配色パターンを一覧で紹介。
「スポーティー」という言葉から連想するイメージは人それぞれ。似た意味のキーワードでも、選ぶ言葉によって微妙に異なる雰囲気や世界観を表現できる。
ぜひ、ご自身のイメージに近いキーワードを探しながら、用途やデザインに合わせてブラッシュアップ*brush up
/ 既にあるものを磨き上げてさらに良いものにすることし、配色選びの参考にしてください。
基本の配色テクニック
ここに記している配色は、個人的な見解で組み合わせたものです。配色のバランスによって印象は大きく変わるため、すべてのデザインに当てはまるとは限りません。
トライアド*triadとは、色相環上で正三角形を描く位置にある3色配色。
「トライアド」とは、音楽の三和音*3つの音が3度ずつ積み重ねられてできた和音（コード）のことに由来する名称で、変化がありながらもバランスが良く、安定感と華やかさを兼ね備えた配色となる。
スプリット・コンプリメンタリー*split complementary
分離補色とは、補色の片方を隣接色に分離した3色配色。
スプリットとは、「分割する・分離する」を意味し、補色配色よりもコントラストをやわらげつつ、配色に変化とバランスを与えられる。
トーン・オン・トーン*tone on toneとは、「トーンを重ねる」を意味し、同じ色相や隣接した色相で全体をまとめ、明度差を大きくした多色配色。
色相の印象を強調しつつ統一感を保ち、明度差によって変化をつけられるため、バランスがとりやすく穏やかな印象になる。また、明度差を活かすことで立体的な効果を演出することも可能である。
また、3色の配色は「どの色を主役にするか」「どの順で配置するか」によって印象が大きく変わる。
同じ3色でも、主役となる色を明るく見せるか、あるいは背景として引き立てるかによって、全体の雰囲気は華やかにも落ち着いた印象にも変化する。
そのため、色の配置順や面積バランスを入れ替えながら、最も意図に合った見え方を調整することが重要である。
ベースカラー
#D9D9D9
アクセントカラー
#FF6B6B
サブカラー
#7FB3FF
ベースカラー
#FF6B6B
アクセントカラー
#7FB3FF
サブカラー
#D9D9D9
ベースカラー
#7FB3FF
アクセントカラー
#D9D9D9
サブカラー
#FF6B6B
配色比率
配色の印象は、色の組み合わせだけでなく使用する面積比率によっても大きく変わる。一般的には「ベースカラー70％・アクセントカラー5％・サブカラー25％」を目安にすると、バランスの取れた配色にまとめやすい。
ここでは、視覚的に理解しやすいよう「ベースカラー70％・アクセントカラー10％・サブカラー20％」の比率を基準としている。
ベースカラー: 70%
背景や余白など、最も広い面積に使用する基本色。全体の雰囲気やトーンを決定づける。
#D9D9D9
アクセントカラー: 10%
視線を集めたい部分に使う強調色。ボタンや見出しなどに用い、デザイン全体を引き締める。
#FF6B6B
サブカラー: 20%
ベースカラーを補完し、全体の印象を整える補助色。デザインに奥行きや安定感を与える。
#7FB3FF
カジュアルスポーティー
親しみやすさと軽快さを兼ね備えた、日常に取り入れやすいスポーティースタイルを感じさせる配色。
明るく爽やかな色彩を組み合わせることで、健康的でポジティブな雰囲気と、気軽に楽しめるアクティブな印象を演出する。
目標を達成するために、チームメンバーで役割分担して協働すること
#E63946
#1D3557
#2A9D8F
#FFBE0B
#3A86FF
#8338EC
#1A4D8F
#357CFF
#95C9FF
健康そうに見えるさま
健康のためになるさま
#FFA500
#50FF7C
#506CFF
#00ACC1
#FF7043
#FFA726
#38B000
#70C25A
#A9D18E
アクティブスポーティー
活力と躍動感にあふれた、エネルギッシュなスポーティースタイルを感じさせる配色。
鮮やかで力強い色彩を組み合わせることで、前向きな行動力と健康的な生命力を印象付ける。
活力にあふれているさま
#FF4F00
#00D1FF
#9CFF00
#F44336
#36FF8C
#364EFF
#E65100
#FB8C00
#FFB74D
活動的で積極的であるさま
#FF3B30
#00C7BE
#5856D6
#4CAF50
#FFC107
#03A9F4
#FF7043
#FF8A65
#FFAB91
軽々としていて動きのすばやいさま
気持ちが軽やかであるさま
#FF9500
#5856D6
#5AC8FA
#00CEFF
#FF6F00
#CE00FF
#005BBB
#4F9BFF
#C2E3FF
困難なことや新しいことに挑戦すること
目標に向かって積極的に取り組むこと
#FF6B00
#00B8D9
#7ED957
#00CEFF
#FF6F00
#CE00FF #FF4F5E
#00D4AA
#3A86FF
#FF6B00
#FF9E40
#FFD08A
スピードスポーティー
スピード感と爽快感を兼ね備えた、俊敏で洗練されたスポーティースタイルを感じさせる配色。
コントラストの効いた鮮明な色彩を組み合わせることで、疾走感や機敏さ、先進的なイメージを演出する。
意思決定から実行に移るアクションが、テンポよく展開していくさま
ある行動から次の行動に移るまでの時間が短いこと
#FF0054
#4361EE
#06D6A0
#8E24AA
#FFEB3B
#009688
#1D3557
#457B9D
#A8DADC
きわめて速いスピードで駆け抜けるような、爽快で勢いのある感覚
#FF6A00
#00FFD5
#8B00FF
#FF2D55
#55FF2D
#2D55FF
#00D27A
#33E09B
#8AF0C5
頭の回転が速く、判断や行動がすばやいこと
#00A8FF
#FF6A00
#7BFF00
#32CD32
#FF33CC
#FF9933
#66CCFF
#3399FF
#0066CC
さわやかで気持ちがよいさま
#00BFFF
#FF69B4
#7CFC00
#00FA9A
#FF7F50
#FFB6C1
#4682B4
#5F9EA0
#B0C4DE
パワフルスポーティー
力強さと迫力を兼ね備えた、ダイナミックなスポーティースタイルを感じさせる配色。
エネルギーを感じる鮮烈な色彩や重厚感のある色彩を組み合わせることで、圧倒的な存在感と力強い印象を演出する。
力強く生き生きとしているさま
#FF2D55
#00C7BE
#FFD60A
#FF6F00
#006FFF
#00FF6F
#FF8A80
#FF3B30
#8B0000
力強いさま
強力なさま
#FF3C00
#00FF9D
#9D00FF
#FF0044
#0099FF
#33FF00
#FF4444
#990000
#330000
頑丈なさま
強い体力と不屈な精神力を備えているさま
#D62828
#003049
#F77F00
#1B4332
#E63946
#F4A261
#1F2421
#2A2F2B
#6C757D
いきいきとした動きや勢いが感じられること
#FF3B30
#34C759
#007AFF
#FF453A
#00D2D3
#5E60CE
#FF9500
#FFB340
#7A3E00
競争や試合などで相手に勝つこと
目標を達成し、成功を収めること
#FFD700
#0057B8
#00A86B
#FFC300
#0096C7
#4361EE
#B8860B
#D4A017
#FFD54F
テクニカルスポーティー
高性能さと機能美を兼ね備えた、先進的なスポーティースタイルを感じさせる配色。
クールで洗練された色彩を組み合わせることで、精密さや信頼感、高いパフォーマンスを連想させる印象を演出する。
人・モノ・システムが、標準を上回る能力を発揮し、高水準な成果を上げている状態
#FFB703
#023047
#8ECAE6
#EF233C
#FFD60A
#2B2D42
#0047AB
#3A6EDC
#A8C0FF
目的や用途に合わせて機能が実用的・効率的に作られているさま
#1E90FF
#FF6B00
#2ECC71
#4361EE
#F72585
#FF9E00
#0A2540
#1E6091
#76C7FF
刃物などが鋭く切れ味のよいさま
感覚がすぐれているさま
映像などが鮮明なさま
#007AFF
#FF9F0A
#AF52DE
#00C7BE
#FF375F
#FFD60A
#001F3F
#0074D9
#7FDBFF
冷静なさま
冷ややかなさま
かっこいいさま
#008080
#800080
#FFD700
#1B263B
#E63946
#A8DADC
#1D3557
#457B9D
#A8DADC
自分を厳しく律する*
りっする/ 自分の意志で衝動や欲求などを抑えて統制・管理することこと
目標に向かって自分を律し、継続的に努力を重ねること
#0D1B2A
#E63946
#2A9D8F
#1C1C1C
#FF7F50
#50FFB8
#141414
#3C3C3C
#646464