平安貴族に学ぶ配色設計 — 襲の色目でエディタテーマを作る

ターミナルの配色を変えたことはあるだろうか。

デフォルトの黒背景に白文字。エラーは原色の赤。多くの開発者が、そのまま使い続けている。だが、日本人は1000年前から「色の重ね方」に美学を見出してきた。平安時代の装束に用いられた「襲（かさね）の色目」という技法――これが、現代のUI設計やエディタ配色にも通じる深い知恵を秘めている。

L-yard編集室の二人が、その美学をコードの世界に持ち込む。

問題提起：「野暮」なターミナル

L-yard 編集室。ハクアがいつものように黒い画面に向かってキーボードを叩いている

イロハ

ハクアちゃん。ちょっと手を止めなさい。

ハクア

んー？今いいとこなんだけど。npm install 中だから話しかけないでくれる？

イロハ

(ハクアのモニターを指先でなぞりながら) 貴方のそのターミナルの色……吐き気がするほど「野暮」ですね。デフォルトの黒背景に、白文字。エラーは原色の赤。平安時代なら、貴方、とっくに都から追放されていますよ。

ハクア

はあ？なに急に。これが見やすいの！コントラスト比最強だし！色気なんてコードに要らないじゃん。

イロハ

お黙りなさい。「効率」しか頭にない貴方のような単細胞生物に、日本人が1000年かけて磨き上げた「襲（かさね）の色目」という美学を叩き込んであげます。

ドサッ、と重たい本を机に置く

ハクア

痛っ！机が揺れた！またその鈍器持ち出すの！？

イロハ

いいですか、よくお聞きなさい。「襲の色目」とは、単なるカラーパレットではありません。平安貴族たちは、絹の着物の「表（おもて）」の色と、その下に透ける「裏（うら）」の色の重なりで、季節や情景を表現したのです。2Dのベタ塗りではなく、「層（レイヤー）」による奥行き。これこそ、現代のUIデザインやコード配色に通じる概念でしょう？

ハクア

レイヤー……まあ、Photoshop とか CSS の z-index 的な？

イロハ

解像度が低いですね。まあいいでしょう。では、貴方のその殺風景なエディタに、季節を実装して差し上げます。

襲の色目をモチーフにした季節配色のコンセプトイメージ

講義1：春の配色「桜（Sakura）」

イロハ

貴方は「桜」といえば、安易にピンク色（#FFC0CB）を使うでしょう？それが「野暮」なんです。平安の「桜」の襲は、「表・白」に「裏・紅（くれない）」を重ねたもの。

ハクア

え、白と赤？ピンクじゃないの？

イロハ

白い絹の下に紅を重ねることで、ほんのりと透けて見える「淡い桜色」を表現する。これが光学的混色です。現代のCSSでいえば opacity の概念に近い。ベタ塗りの #FFC0CB とは、まったく違う深みが生まれるんですよ。

これをターミナルに応用するなら、こうです。

要素	色名	HEXコード	意図
Background（裏）	深紅紫	`#4a1820`	紅の奥行き
Foreground（表）	桜白	`#f2ede8`	透明感のあるオフホワイト
Comments	霞色	`#8a6570`	春霞のグレイッシュピンク
Strings	薄紅	`#d4848a`	桜の花びら
Keywords	白藤	`#c8b4c8`	藤の花

イロハ

こうすることで、文字（表）の奥に血の通った色（裏）を感じさせる。春の生命力と、散りゆく儚さがコードに宿るんです。

ハクア

……あー、言われてみればさ、ベタ塗りのピンクとは全然違う。なんか奥行きがある。

講義2：夏の配色「卯の花（Unohana）」

ハクア

ふーん……まあ確かに、目に優しいかも。じゃ夏は？ボク夏嫌いなんだよね。暑くてコード書く気力なくなるし。

イロハ

だからこそ「卯の花」です。配色は「表・白」に「裏・萌黄（もえぎ）」。垣根に咲く白い花と、その下の若葉の緑の組み合わせですよ。

要素	色名	HEXコード	意図
Background	深緑墨	`#1a2e1a`	木陰の涼しさ
Foreground	卯の花白	`#f0f0e8`	清潔な白
Functions	冴え白	`#ffffff`	花の鮮明さ
Strings	萌黄	`#6bc235`	若々しい新緑
Comments	老緑	`#4a6848`	少し影のある深緑
Keywords	浅葱	`#5a9a8a`	涼やかな青緑

イロハ

垣根に咲く白い花と、その下の緑の葉。このコントラストが、貴方の蒸れた脳みそに「涼」を運ぶんです。クーラーの設定温度を下げる前に、まず視覚温度を下げなさい。

ハクア

視覚温度……。えっ、色で体感温度変わるの？なんかデータあるの？

イロハ

色彩心理学の基本ですよ。暖色系は実際より2〜3度暖かく感じさせ、寒色系はその逆。つまり、ターミナルの背景を青緑系にするだけで、エアコンの電気代を節約できる可能性がある。

ハクア

えっ、それめちゃくちゃ合理的じゃん……！

講義3：冬の配色「松（Matsu）」

イロハ

そして、貴方のような引きこもりに最適なのが、冬の「松」。常緑樹の強さです。配色は「表・萌黄」に「裏・紫（二藍）」。

ハクア

緑と紫……？なんかエヴァっぽくない？

イロハ

(ピシャリとハクアの手を叩く) 一緒にしないでください。これは1000年前からある「知性」と「高貴」の組み合わせです。紫は古来より最高位の色。そして松の緑は不変の象徴。つまり、「バグを出さず（緑）、高潔なロジック（紫）を組む」という祈りの配色なんですよ。

要素	色名	HEXコード	意図
Background	紫紺	`#1a0b2e`	高貴な深紫
Foreground	薄萌黄	`#d4d8a8`	松葉の明るさ
Accents	松葉色	`#4a7035`	常緑の安定感
Errors	朱華	`#c85040`	冬椿の赤
Strings	藤紫	`#8a6098`	藤の花の紫
Comments	灰紫	`#686078`	控えめな紫灰

イロハ

この色の中でなら、貴方のスパゲッティコードも、少しは高尚なアルゴリズムに見えるかもしれませんね。

ハクア

ボクのコードはスパゲッティじゃないし！ ……でもまあ、この紫と緑の組み合わせ、かっこいいかも。集中できそう。

講義4：秋の配色「紅葉（Momiji）」

ハクア

……あれ、春・夏・冬で秋がないじゃん。ボク秋好きなんだけど。涼しいし、新作ゲームのリリース多いし。

イロハ

秋を最後に持ってきたのには理由があります。秋の襲は最も複雑で、色数が多い。「紅葉」の襲は「表・朱（あけ）」に「裏・黄（きはだ）」。赤と黄の重なりですが、これを単なるオレンジと思ったら大間違い。

ハクア

えー、赤と黄色混ぜたらオレンジでしょ。RGBの加法混色じゃん。

イロハ

(額を押さえて) ……だから野暮なんです。平安の紅葉は「燃え上がる赤」と「散る前の黄金」が、1枚の葉の中で競い合っている。一色ではなく「グラデーション」なんですよ。つまり、エディタの syntax highlighting で、変数と関数で微妙に色温度を変える設計が必要になるんです。

要素	色名	HEXコード	意図
Background	朽葉墨	`#2a1a10`	落ち葉が堆積した土の色
Foreground	枯色	`#e8d8c0`	枯葉のウォームベージュ
Functions	照柿	`#c85830`	紅葉の鮮やかな朱赤
Variables	刈安	`#d4a848`	黄金に染まる草の黄
Strings	丹色	`#e87040`	渋い朱色（紅と黄の間）
Comments	朽葉	`#7a6050`	乾いた落ち葉のグレイッシュブラウン
Keywords	赤朽葉	`#a05838`	深い赤茶

ハクア

……これ、見てるだけで焼き芋食べたくなるね。

イロハ

秋の配色は「成熟」の色です。春の生命力、夏の清涼、冬の知性。そしてこの秋は「実りと終焉」。プロジェクトのリリース前、最終レビューの時期にこの配色を使えば、コードが「収穫」を迎える実感が湧くでしょう？

ハクア

リリース前に配色変えるとか、そういうの儀式みたいでちょっと……いや、でも気分転換としてはアリかも。ていうかさ、ボク今ちょっと思ったんだけど。

イロハ

何です？

ハクア

この4つの配色、全部作って .vscode/ に入れといたら、git switch spring みたいに季節ブランチ切る感覚で使えるんじゃない？桜ブランチ、卯の花ブランチ、紅葉ブランチ、松ブランチ。……あ、名前ちょっとかっこいいかも。

イロハ

(一瞬、目を見開いて) ……ハクアちゃん。貴方、今「季節に名前をつけてブランチを管理する」という、極めて風流なことを言いましたよ？

ハクア

えっ、違う違う！ただの設定管理の効率化だから！風流とかじゃないから！

イロハ

(くすっと笑って) いいえ。平安貴族が衣替えで季節を実装したのと、貴方の「季節ブランチ」は本質的に同じ設計思想です。自覚がないだけで、貴方には美学の種があるんですよ。

実践：エディタに季節を実装する

襲の色目をエディタ配色に応用するポイントは3つ。覚えておいてほしい。

1. 背景は「裏」、文字は「表」

平安の着物と同じ発想だ。背景色を「裏地」、文字色を「表地」と考える。背景が透けて文字に奥行きを与える――その関係性を意識するだけで、ハイコントラスト一辺倒では得られない深みが生まれる。

2. 彩度を落とす

原色（#FF0000のような純粋な赤）は、平安の美学にはない。少しだけ灰色や補色を混ぜる。たったそれだけで、長時間見ても疲れにくい「顔料的な色」になる。

3. 季節で切り替える

開発環境のテーマを季節ごとに変える。これは単なる気分転換ではない。視覚的な変化が脳に新鮮な刺激を与え、認知能力の維持に寄与するという研究もある。

VS Code設定：冬の「松」テーマ

ハクア

理屈はわかった。じゃあコピペできる設定ちょうだい。ボク、設定ファイルいじるの好きだから。

イロハ

即物的ですね。まあいいでしょう。冬の「松」を例に、settings.json の設定を差し上げます。

VS Codeの workbench.colorCustomizations に以下を追記することで、「松」テーマを適用できる。

{
  "workbench.colorCustomizations": {
    "editor.background": "#1a0b2e",
    "editor.foreground": "#d4d8a8",
    "editor.selectionBackground": "#2a1840aa",
    "editorCursor.foreground": "#d4d8a8",
    "editorLineNumber.foreground": "#686078",
    "editorLineNumber.activeForeground": "#8a6098",
    "editor.lineHighlightBackground": "#1f0f38",

    "terminal.background": "#1a0b2e",
    "terminal.foreground": "#d4d8a8",
    "terminal.ansiBlack": "#120820",
    "terminal.ansiRed": "#c85040",
    "terminal.ansiGreen": "#4a7035",
    "terminal.ansiYellow": "#cfa94a",
    "terminal.ansiBlue": "#686078",
    "terminal.ansiMagenta": "#8a6098",
    "terminal.ansiCyan": "#4a8a8f",
    "terminal.ansiWhite": "#d4d8a8",

    "sideBar.background": "#140a24",
    "sideBar.foreground": "#8a6098",
    "activityBar.background": "#100820",
    "statusBar.background": "#120820",
    "titleBar.activeBackground": "#140a24"
  }
}

イロハ

他の季節のテーマも同様に作れますが、まずはこの「松」から始めなさい。冬の知性が、貴方のコードを浄化してくれるでしょう。

ハクア

……でもさ、なんか悔しいけど、イロハの言った色にすると確かに目が疲れないんだよね。「レイヤー」か。CSSのopacityで重ねるのと同じ原理だと思えば、合理的じゃん。

イロハ

ふふ、素直でよろしい。「美」は「機能」なんですよ、ハクアちゃん。

イロハが『情報の歴史21』の角をコツコツと叩く

イロハ

さて。理解できたら、今すぐその安っぽいテーマ設定を変更しなさい。もし次に見かけた時にデフォルトのままだったら……この1kgの歴史の重みで、貴方のEnterキーを物理的に破壊しますからね？

ハクア

ひぃっ！変えるよ変えるよ！

まとめ

「襲の色目」は、単なる色の組み合わせではない。「層の関係性」で奥行きを生み出す技法だ。背景（裏）と文字（表）の関係を意識し、彩度を抑えた日本の伝統色を使う。それだけで、長時間のコーディングでも疲れにくく、美しいエディタ環境が手に入る。

1000年前の美学が、現代のコードエディタに「色気」を与える。効率と美は、対立しない。

イロハの本棚

この記事で触れた書籍と、さらに深く知りたい人への推薦図書。

メイン書籍

『日本の伝統色』 浜田信義編（PIE International）

イロハの一言: 「250色以上の伝統色が、実際の染色サンプルとともに掲載されています。画面上のカラーコードではなく、『物理的な色』を知ることが配色設計の第一歩です」

Amazon で見る