本文へ移動
DESIGN VOCABULARYデザインスタイル図鑑

STYLE PROFILE

サイバーパンク

Cyberpunk

ここでは映画に見られる、夜の都市と高度な技術を組み合わせた視覚表現を扱います。SFジャンル全体の定義ではありません。

サイバーパンクのスタイル見本
見本はこの図鑑のためにAIで生成した画像です。

サイバーパンクの代表配色例

色コードと役割をまとめてコピーできます。
背景(#15232D)とのコントラスト比
色役割比文字に使う目安
#E1EBE8文字と構造13.16:1本文の文字にも使える
#38AEC2主な装飾6.10:1本文の文字にも使える
#CB4E96補助の装飾3.86:1大きな文字や図形なら使える

比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です(達成基準1.4.3・1.4.11)。

サイバーパンクのプロンプト例

サイバーパンクでデザインしてください。暗い都市へ未来の機器を組み込み、ネオンの光を雨で濡れた路面へ反射させてください。

サイバーパンクの主な視覚的特徴

  1. ネオンなどの人工光

    ネオンサインや巨大な広告の光で、夜の街を照らします。『ブレードランナー』の通りは、日本製品の巨大な広告に照らされた姿で描かれました。

  2. 雨で濡れた都市の反射

    雨に濡れた路面に、ネオンの光を映し込みます。シド・ミードのコンセプトアートは、濡れた通りに映るネオンサインで、古典的なサイバーパンクの美学を表すと評されています。

  3. 都市空間へ入り込む未来の機器

    現在の都市に近い街並みに、殻のような装甲車両など未来の技術を置きます。『ブレードランナー』の通りでも、がらくたと高度な技術が交互に現れます。

サイバーパンクが向いている成果物

サイバーパンクとは

サイバーパンクは、1980年代に広まったSFの一派を指す言葉です。ブルース・ベスキが1983年11月に雑誌『アメイジング』に載せた短編「サイバーパンク」で生まれたことがほぼ確実とされ、1984年にウィリアム・ギブスンの『ニューロマンサー』が出版されて間もなく、広く使われるようになりました。

「サイバー」はサイバネティクスに、「パンク」は1970年代のロックの用語に由来します。「ハイテク」と「ローライフ(すさんだ暮らし)」の組み合わせは、古典的な定義の1つです。この図鑑では、映画に見られる夜の都市と高度な技術の視覚表現を扱います。

映画では、1982年公開の『ブレードランナー』が、早い時期の重要な作品として挙げられます。シド・ミードが描いたこの映画のコンセプトアートは、濡れた通りにネオンサインが映り込む街を描き、古典的なサイバーパンクの美学を表すと評されます。実在と架空のアジアの文字を装飾に使う手法は、その後のアメリカの作品で繰り返され、批判も受けました。

アカデミー映画博物館は、2024年10月から2026年4月まで、映画におけるサイバーパンクの世界的な影響を検証する展覧会を開きました。同館は『マトリックス』(アメリカ、1999年)を代表的な作品、『攻殻機動隊』(日本、1995年)を基礎となったアニメーション長編として紹介し、21世紀の世界的な新しい方向にも光を当てました。

見分けるときは、次の点を確かめてみてください。

  • ネオンなどの人工光が夜の街を照らしている
  • 雨に濡れた路面に光が映り込んでいる
  • 未来の乗り物や機器が街の風景に入り込んでいる

これらのいくつかが揃っていると、サイバーパンクの特徴を持っていると言えるでしょう。

実例を見る

Google画像検索で「サイバーパンク」を見る(新しいタブで開きます)検索結果の画像はこの図鑑には保存しません。

出典

名称・説明・主な視覚的特徴と「サイバーパンクとは」の事実は、上の出典に基づきます。特徴の説明と見分け方は、出典の内容をこの図鑑がまとめたものです。代表配色例・向いている成果物・プロンプト例は、この図鑑の編集上の提案です。制作・編集:小林 秀樹(セカヤサAIブログ)