北斎ブルーで没入する — 集中力を高めるターミナル配色ガイド
深夜のコーディングで目が疲れる。集中力が続かない。
多くの開発者が抱えるこの問題に、意外な解決策がある。200年前、葛飾北斎が浮世絵に使った「プルシアンブルー（ベロ藍）」だ。この深い藍色には、科学的に裏付けられた鎮静効果がある。黒（#000000）よりも目に優しく、ディスプレイの光刺激を抑えながら、没入感を高める色。
それを現代のエディタに実装する方法を、L-yard編集室の二人が解説する。
発端：深夜3時のモニター
深夜のL-yard 編集室。ハクアが複数モニターの前で目をこすっている
……目がしぱしぱする。3時間ぶっ通しでコード書いてたら、なんかモニターの光で頭痛くなってきた。エナドリもう1本開けるか……。
(本を読んでいた手を止めて) エナドリで解決しようとするあたり、本当に野暮ですね。ハクアちゃん、貴方のその目の疲れ、原因は睡眠不足ではなく「背景色」ですよ。
背景色？ えーと、#000000 の純粋な黒だけど。コントラスト比が高くて見やすいじゃん。
(眼鏡をクイッと上げて) それが間違いの始まりです。純黒の背景に白文字を置くと、コントラスト比は21:1にもなる。人間の目にとっては「眩しすぎる」んですよ。WCAGのガイドラインでは7:1あれば十分。過剰なコントラストは、文字が滲んで見える「ハレーション」を引き起こします。
うっ……言われてみれば、確かに文字がチカチカする時ある。じゃあどうすりゃいいのさ。
答えは200年前にあります。(『情報の歴史21』を机にドンと置いて、あるページを開く) 葛飾北斎が教えてくれますよ。
北斎とプルシアンブルー
北斎の『富嶽三十六景』、特に「神奈川沖浪裏」を思い浮かべなさい。あの波の深い青色は「プルシアンブルー」、日本では「ベロ藍」と呼ばれた合成顔料です。
ああ、The Great Wave のやつね。あれ海外でもバズってるよね。
「バズってる」で片付けないでください。この色には革命的な歴史があるんですよ。プルシアンブルーは1704年にベルリンで偶然発明された、人類初の合成顔料です。それまでの青色顔料――ラピスラズリから作る「ウルトラマリン」は、金よりも高価だった。
金より高い青……。えっ、じゃあ昔の青って超レア素材だったってこと？
ええ。だからフェルメールの絵の青は「金を塗っているのと同じ」と言われた。プルシアンブルーはその常識を壊した。安価で大量生産できる深い青。これが1830年頃に日本に入ってきた時、浮世絵師たちは熱狂したんです。北斎はこの新しい青を使って、70歳を超えてから「富嶽三十六景」を描き始めた。
70歳で……。なんかそれ、ボクらがClaude Code使い始めた時と似てるかも。新しいツールが手に入って、今までできなかったことが一気にできるようになるあの感覚。
いい例えです。技術革新が表現の可能性を拓く。北斎にとってのプルシアンブルーは、貴方にとってのClaude Codeと同じ「加速装置」だったんですよ。
そして、北斎がこの色に惹かれたのにはもうひとつ理由があります。プルシアンブルーは、深い闇のように沈みながらも、光を完全には吸収しない。黒とは違う「底のある暗さ」なんです。
底のある暗さ……？
純粋な黒は「無」です。何も返さない。でもプルシアンブルーの闇には「深海」のような奥行きがある。目はその奥を見ようとして、自然と集中状態に入るんですよ。北斎はそれを直感的に理解していたのでしょうね。
へえ……。で、それをターミナルの背景に使えと。
その通り。名付けて「Focus Mode “Hokusai”」。貴方の目を救い、集中力を引き上げる配色を設計してあげましょう。
カラーパレット「Hokusai」
北斎の浮世絵から抽出した色彩を、ターミナル配色に変換したパレットがこれだ。色名はすべて浮世絵のモチーフから取っている。
| 役割 | 色名イメージ | HEXコード | 解説 |
|---|---|---|---|
| Background | 北斎インディゴ | #0f2038 | 深海のような濃い藍色。没入感を高める |
| Foreground | 和紙ホワイト | #e8e4d9 | 視認性が高く、かつ眩しくない生成り色 |
| Selection | 波頭ブルー | #2a4f75 | 選択範囲。少し明るい藍色 |
| Cursor | 波飛沫 | #f5f5f0 | 波頭の白。カーソル位置を明確に |
| Red (Error) | 赤富士 | #c2493d | 警告色。蛍光ではなく顔料の赤 |
| Green (Success) | 常盤色 | #4a7035 | 成功色。松のような自然な緑 |
| Yellow (Warning) | 船材イエロー | #cfa94a | 注意色。木材のような落ち着いた黄 |
| Blue | 浅葱色 | #366b9c | 浅い藍。情報を示す |
| Magenta | 藤色 | #965688 | 紫。特殊な構文に |
| Cyan | 納戸色 | #4a8a8f | 青緑。定数やタイプに |
| Line Numbers | 薄墨 | #506580 | 控えめな行番号 |
……うわ。ボクの #000000 と比べると全然違う世界じゃん。なんだろう、色が「生きてる」感じがする。
それが北斎の力ですよ。黒は「死んだ闇」、北斎インディゴは「生きた闇」。その差が、3時間後の目の疲れに直結するんです。
VS Code設定
んー、理屈はわかった。で、コピペできる設定は？ ボク設定ファイルいじるの好きなんだよね。
即物的ですね。まあいいでしょう。settings.json に以下を追記しなさい。
VS Codeの workbench.colorCustomizations に以下を追記すれば、Hokusai配色が手に入る。
{
"workbench.colorCustomizations": {
"editor.background": "#0f2038",
"editor.foreground": "#e8e4d9",
"editor.selectionBackground": "#2a4f7566",
"editorCursor.foreground": "#f5f5f0",
"editorLineNumber.foreground": "#506580",
"editorLineNumber.activeForeground": "#8a9ab0",
"editor.lineHighlightBackground": "#1a2d48",
"editorBracketMatch.background": "#2a4f7540",
"editorBracketMatch.border": "#366b9c",
"terminal.background": "#0f2038",
"terminal.foreground": "#e8e4d9",
"terminal.ansiBlack": "#0a1625",
"terminal.ansiRed": "#c2493d",
"terminal.ansiGreen": "#4a7035",
"terminal.ansiYellow": "#cfa94a",
"terminal.ansiBlue": "#366b9c",
"terminal.ansiMagenta": "#965688",
"terminal.ansiCyan": "#4a8a8f",
"terminal.ansiWhite": "#e8e4d9",
"sideBar.background": "#0b1828",
"sideBar.foreground": "#8a9ab0",
"activityBar.background": "#081420",
"statusBar.background": "#0a1625",
"titleBar.activeBackground": "#0b1828"
}
}おー、サイドバーとかステータスバーの色まで指定してあるじゃん。芸が細かい。
当然です。北斎の絵は隅々まで計算されているんですよ。画面の端まで「波」が続いていないと、没入感は生まれません。
なぜこの配色が「効く」のか
最後に、この配色がただの趣味ではなく科学的に合理的である理由を3つ、まとめてあげましょう。
1. コントラスト比の最適化
背景 #0f2038 と前景 #e8e4d9 のコントラスト比は約12:1。WCAGのAAA基準（7:1）を余裕で満たしつつ、純黒+白（21:1）のような過剰な刺激を避けている。ちょうどいい「張り」だ。
2. 青色の鎮静効果
青色は副交感神経に作用し、脈拍や呼吸を落ち着かせる。エラーが出ても、蛍光色の赤でパニックにならない。「赤富士」のような落ち着いた赤が、冷静な対処を助けてくれる。
3. 彩度を抑えた「顔料的」な色
すべてのアクセントカラーは彩度を落とし、浮世絵の「摺り」のような質感を持たせている。ディスプレイ上の原色は脳を興奮させる。だが顔料的な色は、脳を「観察モード」にする。
(設定を適用して) ……うわ。なにこれ。なんか、画面の中に「沈んでいく」感じがする。集中できそう。
それが「没入（Immersion）」ですよ。北斎が波の絵で観る者を引き込んだのと同じ原理。貴方のコードが、深海の底で静かに光を放つんです。
……悔しいけど、これ #000000 には戻れないかも。なんていうか、黒い画面の中にいた時は「穴の中」にいる感じだったけど、この藍色だと「深海の底」にいる感じ。同じ暗さなのに、底がある暗さって……安心するんだよね。
(一瞬、言葉を失って) ……ハクアちゃん。貴方、今とても詩的なことを言いましたよ。「穴」と「深海」の差を体感で言語化できるなんて。
え、いや、ただの感想だし！ 詩的とかじゃないから！ ボクのエナドリ缶が画面の中で青く光ってるみたいでかっこいいってだけ！
(くすっと笑って) 台無しですね。でも、素直でよろしい。さあ、この配色で書いたコードなら、少しは「色気」が出るかもしれませんね。
まとめ
200年前、北斎がプルシアンブルーで浮世絵に革命を起こしたように、ターミナルの背景色ひとつで開発体験は大きく変わる。
純黒（#000000）の「死んだ闇」から、北斎インディゴ（#0f2038）の「生きた闇」へ。コントラスト比の最適化。青色の鎮静効果。彩度を抑えた顔料的な色彩。3つの科学的根拠が、この配色の合理性を裏付けている。
エナドリに頼る前に、まずモニターの色を変えてみてほしい。
イロハの本棚
この記事で触れた書籍と、さらに深く知りたい人への推薦図書。
メイン書籍
『北斎漫画 BOX 全三巻セット』 葛飾北斎（青幻舎）
イロハの一言: 「北斎のスケッチ約4,000図を収録した、ビジュアル文庫版。青の使い方だけでなく、構図・線描のすべてがこの3冊に凝縮されています」
関連書籍
- 『日本の伝統色』 浜田信義 編 — 北斎が使った藍色を含む250色以上の伝統色を実物サンプルで紹介