Design

サイバーパンクから考える色彩設計

公開
Design Other Photoshop ポエム

2026年10月20日より『サイバーパンク エッジランナーズ2』というアニメがNetflixで配信されているのをご存じでしょうか。これは2022年に配信された『サイバーパンク エッジランナーズ』の続編で、今作はまだ観れていないのですが前作があまりに面白かったため観るのがとても楽しみです。

https://youtube.com/watch?v=CJe_5vWHtNg%3Frel%3D0

前作のサイバーパンク エッジランナーズというアニメ、ストーリーが良かったのはもちろんなのですが、日頃デザインや映像を作っている自分からすると、そのビジュアルの凄さに心を惹かれました。特に明暗のコントラストと彩度をこれでもかと高くしたその色使いは一目見ただけで「これはサイバーパンクのキャラだ」と分かるほど特徴的です。今回はそんなサイバーパンクの配色について深堀りしようと思います。

出典：『サイバーパンク エッジランナーズ』公式サイト（CD PROJEKT RED） https://www.cyberpunk.net/ja/edgerunners © CD PROJEKT RED S.A.

サイバーパンクのデザインはなぜ世界で流行ったのか

配色の話に入る前に、そもそも「サイバーパンクっぽい見た目」がどのように生まれて、ここまで広がったのかを少し調べてみました。

始まりは80年代

今のサイバーパンクの見た目の原型と言われているのが、1982年の映画『ブレードランナー』です。雨に濡れた暗い街、ごちゃごちゃした路地、そして日本語の広告。未来なのにどこか薄汚れたこの世界観が、その後のサイバーパンク作品の「型」になっています。

映画『ブレードランナー』

その後日本からも『AKIRA』や『攻殻機動隊』などのサイバーパンクの名作が多数生まれ、2020年に発売されたゲーム『サイバーパンク2077』やそれを原作としたアニメ『サイバーパンク エッジランナーズ』によって近年ブームが最熱しているようです。
こうして何十年もかけて詰み上がったイメージがあるので、今では暗い背景にピンクとシアンの光を置くだけで、世界中の誰にでも「サイバーパンクだ」と伝わります。ゲーミングデバイスやAI・テック系のサービスなど、「未来っぽさ」を出したい分野のデザインでよく使われているのも、このわかりやすさが理由だと思います。

サイバーパンクの配色が目を引く理由

「目立つ配色」には、色彩の世界でよく使われる3つの考え方があります。

  • 視認性：見つけやすさ。瞬間的に「そこに何かある」とわかるか
  • 誘目性：目立ちやすさ。探していない人の目まで引きつけるか
  • 可読性：読みやすさ。文字の意味がすんなり頭に入るか

この物差しで考えると、サイバーパンクの配色は「視認性」と「誘目性」をとことん極めた配色になっています。

①明度差が大きくて、とにかく見つけやすい（視認性）

視認性を上げる基本は、コントラストを大きくすることです。サイバーパンクの画面は、ほとんどが黒やネイビーの夜の街。そこに強烈に光るネオンが置かれるので、明度差はほぼ最大です。

さらに、彩度の差も大きいのがポイントです。背景はくすんだ暗い色、光はとびきり鮮やかな色。明るさと鮮やかさの両方で差をつけているので、一瞬で「ここが光っている」とわかります。

②彩度の高い差し色が目を引き付ける（誘目性）

誘目性については無彩色より有彩色、寒色より暖色のほうが目を引きやすいと言われています。交通標識に赤や黄色が多いのも、無意識に注意を引くためだそうです。

サイバーパンクの差し色は、赤みのあるマゼンタやピンクが主役です。そこに寒色のシアンを合わせることで、暖かい色と冷たい色がぶつかり合う緊張感が生まれています。また、マゼンタとライム（黄緑）は色相環でほぼ反対側にある補色の関係で、並べるとお互いを強烈に引き立てます。

③「夜に強い色」が使われている

例えば黄色や水色といった色は昼間はさほど目立ちません。青空や植物など昼間の光景にありふれた色だからです。しかし夜になると一転、「黄色×水色」などの配色は見やすい組み合わせに変わります。

サイバーパンクの多くは夜の都市が舞台なのでこうした配色も目立つ理由の一つになっています。実際、『サイバーパンク エッジランナーズ』の主人公とヒロインにもこのカラーリングが採用されています。

出典：Netflix『Cyberpunk: Edgerunners』
作品ページ https://www.netflix.com/jp/title/81054853

デザインへの取り入れ方と注意点

サイバーパンク風のデザインを作りたければデザインソフトの機能を駆使していくつかの効果を加えるのが有用です。例えばトーンカーブで画像のコントラストを大きくしたり、選択ツールで画像の一部を選択してずらすことでグリッチ効果を再現したり。Photoshopであればノイズやフィルターを加えて、グロー効果も追加すればサイバーパンクの雰囲気がさらに出てくるはずです。実際自分も本記事のサムネイルをそのようにして作成しました。

記事のサムネイル

やりすぎには注意

サイバーパンクの配色はとてもかっこいいのですが、使い方には注意が必要です。目立つ配色の理由として視認性、誘目性、可読性という考え方を紹介しましたがサイバーパンクの配色では可読性が保たれないことが多いです。

したがって、ポスターや映像などのビジュアルに取り入れる分には良いですが、Webデザインなどのユーザーに読んでもらいたい部分に取り入れるのは避けたほうが無難です。

まとめ

目立つデザイン、印象に残るデザインには必ず理由があるというのがサイバーパンクを通じて分かりました。
みなさんもぜひ、自分のデザインにネオンを光らせてみてください。

J.B.Goode Inc.に所属しています。
良ければ公式アカウントをフォローお願いします。

J.B.Goode Inc.｜note 「ソフトウェアでできることすべて」を体現するクリエイター集団。クライアントのビジネス変革を主導し、持続的な成長と新たな価値 note.com

J.B.Goode Inc.のウェブサイトでは、デザインの他にも技術ナレッジや日々の気づき等を配信しています。
https://www.jbgoode.jp/

カジュアル面談も実施中です。お気軽にお問い合わせください。
https://www.jbgoode.jp/recruit/