シティポップの世界観といえば、夜の街、ネオン、海沿いのドライブ。
少し大人で、どこか切ない空気感が魅力です。
その雰囲気を一瞬で伝えるのが、独特の配色バランスです。
この記事では、
をまとめてご紹介。
イラスト・ジャケット風デザイン・SNS・バナーの配色の参考にもおすすめです。
シティポップ配色の特徴とは？
シティポップ配色は、1980年代の日本×都会×夜がベース。
青・紫・ピンク・ネオンカラーなど一見派手に見える色も、組み合わせ次第で 都会的で洗練された印象になります。
シティポップ配色の基本ルール
シティポップを再現するためには、以下のルールを抑えておけばOK！
シティポップ配色パターン集
ここからは、シティポップの配色をいくつかご紹介していきます
王道｜ネイビー×ピンク
シティポップの定番は、夜の街をイメージした配色です。
| カラー | カラーコード | RGB |
| メイン | #1F2A44 | 31, 42, 68 |
| サブ | #FF5C8A | 255, 92, 138 |
| アクセント | #8A7FFF | 138, 127, 255 |
海沿い｜ブルー×ターコイズ
海沿いをイメージした配色で、アクセントにスポーツカーの赤を入れても◎
| カラー | カラーコード | RGB |
| メイン | #0B3C5D | 11, 60, 93 |
| サブ | #2EC4B6 | 46, 196, 182 |
| アクセント | #FFFFFF | 255, 255, 255 |
ネオン街｜紫×シアン
ネオンの街並みっぽさを演出した、レトロなのにどこか新しい組み合わせです。
| カラー | カラーコード | RGB |
| メイン | #5B3F78 | 91, 63, 120 |
| サブ | #00C2D1 | 0, 194, 209 |
| アクセント | #F67FDF | 246, 127, 223 |
サンセット｜オレンジ×ピンク
ノスタルジックなサンセットカラーの配色です。
| カラー | カラーコード | RGB |
| メイン | #FF9652 | 255, 150, 82 |
| サブ | #FF487C | 255, 72, 124 |
| アクセント | #2B2E4A | 43, 46, 74 |
大人｜グレー×ブルー×ネオン
ちょっとダンディな大人のイメージの、ネオン感強めのシティポップです。
| カラー | カラーコード | RGB |
| メイン | #2E2E2E | 46, 46, 46 |
| サブ | #3A7CA5 | 58, 124, 165 |
| アクセント | #F7FF00 | 247, 255, 0 |
シティポップ配色の黄金比
シティポップ配色では、「色の割合」がとても重要です。
この比率を意識するだけで、配色のバランスが一気に良くなります。
ネオンは「少量」で一気に雰囲気がでてきますよ。
シティポップ配色のNG例
シティポップ風にしたいのに、なんだか違う気がする…そんなときは、
以上のことに注意して、配色を考えて見ましょう。
色の調べ方
色を調べるに当たって、Canvaというアプリを利用させていただいています。
フリー画像やデザインはもちろん、画像から色を抽出してくれるのが便利です。
配色におすすめの本
シティポップ配色に悩んだときにおすすめなのが、こちらの本。
めっちゃオシャレでかわいい配色がたくさん載っているので、お気に入りが見つかること間違いなし！
＼ 中身はこんな感じ ／
まとめ｜シティポップ配色を成功させるコツ
シティポップ配色は、
この3点を押さえれば、一気に「シティポップらしさ」が完成！！
今回紹介した配色パターンは、イラスト・ジャケット風デザイン・SNS・バナーまで幅広く使えるので、ぜひ保存して活用してみてくださいね。
他のイメージの色も、調べ次第更新していきたいと思います。
リクエストもお待ちしています！！
コメント