昨年末頃から勢いでVSCodeのテーマを作ってきた。スプラトゥーン3の武器モチーフが3つ、ポケモンのモチーフが1つ（しかし中に9種類ある）。これらは元ネタになる色があったので、エディタでコードを表示したときに、なんとなくモチーフの色になるように調整するだけでよかった。
それらに飽きたのでちゃんと作ってみようと思った。今回はエディタUIの話。
- Visual Studio Marketplace / Open VSX Registry (Kiro, Cursor)
- 理想のシンタックスハイライトを作る
- 理想のエディタUIを作る ←いまここ
- お気に入りのVSCodeテーマ
ワイヤーフレーム的に考えると
最近のエディタはこんな感じ。赤いところを見ていたい。
チャットやターミナルが付く前のAtomやSublime Textなんかは、Windowsのエクスプローラーみたいな2ペインレイアウトだった。ああいうのは Master–detail interface - Wikipedia と言うらしい。3ペインになるけどメールクライアントも似たようなもので、親リスト→子リスト→詳細、のようなドリルダウン操作をする。メーラーではドリルで掘り進んで底（岩盤）までたどり着いたら終わりだが、エディタは中央の作業台で作業をし続けるので、ちょっと違うもののようだ。
しかし昔のエディタはシンプルだったな…と思いきや、EclipseやVisual StudioなどのIDEは昔から上の画像みたいなレイアウトだった。なるほど、重厚なIDEから軽量なエディタになって、また戻ってきたみたいな感じがある。ちなみにこのレイアウトに名前はないようで「3ペインで下にターミナルのついたアレ」みたいになるらしい。似た形でホーリーグレイルレイアウトがあるけど、その呼び方流行らなかったし、ターミナルが右に突き抜けてるし。
とりあえずユーザーは赤いところを見ていたい。
ユーザーの注意をひくために深度を使う
UIデザインでもよくある「周りより暗くする」「周りより明るくする」を使って注意を引きたい。マテリアルデザインにあるElevationとかそんな感じのやつですね。それぞれ「地に佇む深淵」「暗き夜を照らす灯火」と内心呼んでいるが、どちらがいいか。
普通にウェブデザインをするときは「CTRが〜」という文脈がついて回るので明るくする方を主に使う。暗くする方はメタ情報とか補足内容の時に使う。今回は「ユーザーの注意を引きたいがずっとそこにいてほしい」ので、せり上がっているよりちょっと凹んでる所のほうが落ち着くんじゃない？たぬきの巣みたいに、と思って暗くすることにした。
各ペインの境界をどうするか？
VSCodeの各部名称と境界線は上のようになっている。今回はたぬきの寝床みたいに凹ませるつもりでいるので、全体の色を決めてから、中央の部分をそれより少し暗くすればいい。
実はこの設計にしているテーマは少なくて、多くはファイルツリー部分を少し暗くしている。これまでに自分が作ってきたテーマでも無意識にそうしてきていて、理由は「サイドバーは補助情報だから」。でも今回は没入感がほしいので一般的じゃない方にした。
フルフラット、セミフラット、ボーダー
いろんなテーマを目を細めて眺めていると、「フルフラット」「セミフラット」「ボーダー」に分けられる。フルフラット＋控えめボーダーとかもあるが、ボーダーが目立つものは全部ボーダー扱いで見ている（乱暴）。
上の白い画面、Light High Contrastのようなものはボーダー。境界がはっきりしていてわかりやすいが、情報の強弱がないので意外とわかりにくい。
上の黒い画面はTokyo Nightを 別の人 がカスタマイズした Tokyo Night Pro テーマ。完全なフルフラットにしているが、境界線が全く無いので実は使いにくい。愛でる分にはいいけど実用性は微妙。
また、フルフラットだとエディタの行番号（ガター）の左側と、ファイルツリーの余白が不安定に感じてすごくモヤモヤする。アクションゲームの見えない床ステージみたいな感じというか。あとコマンドパレットも完全なフラットにしてしまっていてやばい。
オリジナル作者による Tokyo Night Storm の色味が近いので比較として載せるが、この作者はほんとに仕事が丁寧なので、フラットに寄せつつも、見えるか見えないかくらいの色で罫線も引いている。こういうのがいい。
作者のenkiaはテーマを2個だけ公開しているが、1作目のenkiの時点でほぼ完成されていてすごい。
One Dark Pro もセミフラット。要素の輪郭が見えるのって大事。
Trapped White Space（閉じ込められた余白）
Simplicity by Lateblossom: Trapped White Space Defined
緑で塗った箇所が気持ち悪い。デザインは何らかのルールで揃っているのが気持ちよさの源泉なのだけど、フルフラットにすると変な場所ができる。これは「行き場のない余白」とか「閉じ込められた余白」と呼ばれるもので、なんとも落ち着かない。
Andromeda テーマで区切りの有り無しが比較できたので下図をみてほしい。
暗すぎると影が出ない
当たり前なのだが、暗すぎると影が出ない。火のない所に煙は立たないし、光ないかぎり 闇もまた ない……。VSCodeには影の指定が大きく分けて2系統あり、コマンドパレットなどのポップアップ系UIと、ファイルツリーなどのスクロール時のものがある。ダークテーマの背景色が暗すぎるとこれらの影が溶けてしまう。
上のスクショはVesperで、よく見ると左のファイルツリーの colorize-fixtures の下に影が出ている。また、コマンドパレットの周りにも出ているけど、見えませんね。
上のスクショは自作テーマのPlanetz Roller（スプラトゥーン3のワイドローラー惑）で、この頃は影の制御を知らなかったのでデフォルトのまま出ている。ファイルツリー、エディタ内、チャット欄、ターミナルそれぞれにスクロールが発生して影が出ている。デフォルトは結構濃いが、背景がLabカラーで明度25くらいあるとこのように目立ってしまう。逆にVesperのように明度5まで下げてしまうとほとんど見えなくなってしまう。
ヒトは影を無意識に認識しているので、影が使えないくらい暗くするのはデザインの手数を減らしてしまって良くない。逆に背景を明るくする場合は影も調整すると良い。
タブのデザイン
VSCodeのタブ周りが微妙に面倒くさい。普通のウェブデザインならタブ + コンテンツの2パーツで構成できるが、VSCodeはエディタのヘッダ + タブ + タブ背景 + パンくず + エディタ本体（コンテンツ）、さらに左右のコンテンツもあってちょっと複雑。
1行目はフルフラットのパターン。左上のデザインが一番多い。収まりとかバランスがいい。
2行目は素直なタブデザインになっている。タブボタンの上下に差し色ボーダーを足せるので、このあたりのデザインも多い。ボーダーを下にすると変な区切りに見えてしまうので、Orbitでは上ボーダーにした。
3行目以降も実際にある見た目だが、前述のようにタブ周りの要素が多くて混乱している気がする。パンくずに背景色をひきたくなる気持ちもよく分かる。
アクティビティバー・サイドバー
アイコンが縦に並んでいるアクティビティバーとファイルツリーの背景は、フラット系テーマと同じように揃えている。これをやるとガターの行番号の時のようにちょっと気持ち悪い時があるので、セクションバーヘッダ（ ▼ EXTENSIONSとか ）の明度を高くして、錯視みたいに縦の線が見えるといいなと思いながら誤魔化している。
Palenightというテーマが同じことをもっと強めにやっていたので比較用に載せてみた。おわかりいただけただろうか……？
アクティビティバーとサイドバーのデザインはテーマによってまちまちで、フラット系のように揃えたり、揃えると気持ち悪いから罫線を入れたり、アクティビティバーをちょっと明るく、または暗くするなどして区切りを控えめに強調するなどいろんなパターンがある。
罫線を使い出すと他でも使うことになるし、背景色を変えるとがちゃがちゃしてくるので、Orbitではフラット + 高明度で乗り切ることにした。
ポケモンテーマのEvでは逆に、ヘッダ + アクティビティバー + ステータスバーにメインカラーを入れてしまっている。どれか1つだけに差し色入れても落ち着かなかったので…。
これどうなのかな…？と思いながら作っていたが、VSCodeはワークスペースごとにテーマを変えておけるので、プロジェクトごとに色変えておくのはいいかもな、とちょっと思っている。拡張の Peacock みたいな使い方。
という感じで
雰囲気で作ってきていたテーマに、初めて意図を入れてみたという話でした。うまく機能すると良いですね。他にも「コマンドパレット起動に使うアクションバーの色を取ると、ウインドウドラッグ時にそのあたりを押してしまってドラッグできない」とか細かすぎる話もあるけど、疲れたのでこれくらいにしておきます。
Orbitは自分でも気に入っていてドッグフーディングできているので、今後もアップデートしていく予定です。他は気が向いたら。
Publisher monoooki - Visual Studio Marketplace / Open VSX Registry (Kiro, Cursor)