Google Antigravityを可愛くしてみた

今回は、Google Antigravityのエディタを自分好みに可愛くしてみたお話です。
「ダークモードも見慣れた」
「ライトモードもなんか普通」
「毎日見るエディタなんだから、もっとテンションが上がる見た目にしたい」
そんな気持ちから、Antigravityの見た目をパステルピンクとクリームイエロー中心の、かなり可愛い雰囲気にカスタマイズしてみました。

結論から言うと、エディタを自分好みにするのは思った以上に楽しいです。
見た目が変わるだけで、作業のモチベーションも効率もマシマシと言っても過言ではないです☺️
コードを書く場所（毎日見る場所）は、どうしても無機質なダークモードか事務的なライトモードに寄りがちですよね。もちろんダークモードは開発者っぽくて格好いいし、ライトモードは視認性が高くて見やすいです。でも、長時間向き合う作業環境だからこそ、もっと「自分の気分が上がるお気に入りの空間」にしてしまってもいいんじゃないかな、と感じました。

お気に入りの可愛い手帳や文房具を使っていると、それだけでちょっと作業がしたくなる。そんなワクワクする感覚を、今回はエディタにも持ち込んでみた感じです。

きっかけ：ダークモードにもライトモードにも飽きた

エディタのテーマ選びは、最初はすごく楽しいです。
ダークモードにすると、なんとなく開発者っぽくて格好いい。黒背景にカラフルなコードが並んでいるだけで、ちょっと強そうに見えます。
でも、しばらく使っていると少し飽きてきます。
かといってライトモードに戻すと、今度は少し事務的というか、仕事感が強い。もちろん見やすいですが、テンションが上がるかと言われると、そこまでではありません。
そこでふと思いました。
「せっかくなら、エディタ自体を可愛くしてしまえばいいのでは？」
毎日見る画面だからこそ、見た瞬間に「かわいい」「今日もちょっと触りたい」と思える方が、自分には合っている気がしました。
仕事道具だから無機質である必要はないし、開発環境だから硬派でなければいけないわけでもない。むしろ、長時間向き合う画面だからこそ、自分の気分が上がる見た目にするのは大事だと思います。

目指した雰囲気

今回目指したのは、パステルピンクとクリームイエローを中心にした、やわらかくて可愛いエディタです。
イメージとしては、以下のような感じです。

• サイドバーは薄いピンク
• タブ周りはクリームイエロー
• エディタ本文は白に近いほんのりピンク
• カーソルや選択範囲はピンク系
• ターミナルは淡い黄色
• ボタンやバッジも甘めの色

全体的に「可愛いけれど、文字は読める」程度を目指しました。
完全に装飾に振り切ると、コードが読みにくくなってしまいます。そのため、背景色はかなり淡めにして、文字色はグレーやブラウン寄りの落ち着いた色にしています。
ピンクをたくさん使いつつも、すべてを強いピンクにするのではなく、場所によって濃淡を変えています。タイトルバーやアクティビティバーは少ししっかりめのピンク、本文エリアはかなり薄めのピンク、タブやターミナルは黄色寄りにすることで、画面全体が重くならないようにしました。

設定ファイルを編集する

AntigravityはVS Code系のエディタに近い感覚で、ユーザー設定のJSONを編集して見た目をカスタマイズできます。
macOSの場合、設定ファイルは以下の場所にあります。

/Users/xxxx/Library/Application Support/Antigravity/User/settings.json

Antigravity上で開く場合は、コマンドパレットを使うのが早いです。
Cmd + Shift + P を押して、Preferences: Open User Settings (JSON) を開きます。
そこに workbench.colorCustomizations や editor.tokenColorCustomizations を追加していくことで、画面の様々な場所の色を変更できます。

まずはベーステーマを決める

今回の設定では、ベーステーマとして Tokyo Night を使っています。

"workbench.colorTheme": "Tokyo Night"

ただし、最終的な見た目はかなり上書きしています。
ベーステーマをそのまま使うというより、土台だけ借りて、その上から自分好みの色を重ねていくイメージです。
テーマを一から全部作るのは少し大変ですが、既存テーマをベースにして colorCustomizations で上書きすると、比較的気軽にカスタマイズを楽しめます。

フォントも丸くして可愛くする

見た目を可愛くしたい場合、色だけでなくフォントも非常に重要です。
今回は、丸みのあるフォントを優先して指定しました。

"editor.fontFamily": "'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'SF Mono', Menlo, Monaco, 'Courier New', monospace"

先頭に書いたフォントほど優先されるため、使いたいフォントを前に置きます。
丸ゴシック系のフォントにすると、画面全体の印象が一気にやわらかくなります。コード用フォントというと硬いものを選びがちですが、モチベーションを上げるために可愛くしたいので、ここは完全に「見ていて楽しいか」を優先しました。
あとは、カーソルの動きやスクロールも少し滑らかに設定しています。

"editor.cursorBlinking": "phase",
"editor.cursorSmoothCaretAnimation": "on",
"editor.smoothScrolling": true

このあたりは必須ではありませんが、見た目の可愛さに加えて、操作時の心地よさも向上します。

色を変える場所

今回、主に色を変更したのは以下の部分です。

• タイトルバー
• アクティビティバー
• サイドバー
• タブ
• パンくずリスト
• エディタ本文
• ステータスバー
• ターミナル
• メニュー
• コマンドパレット
• 入力欄
• バッジ
• 補完ウィジェット
• ホバー表示
• ボタン

思ったよりも変更できる場所が多いです。

サイドバーをピンクにしたい場合はこのあたりのキーを編集します。

"sideBar.background": "#fff1f8",
"sideBar.foreground": "#5c4560",
"sideBarSectionHeader.background": "#ffe4f0"

タブ周りは、クリームイエロー寄りにしています。

"editorGroupHeader.tabsBackground": "#fff7df",
"tab.activeBackground": "#fff3cc",
"tab.inactiveBackground": "#fff9e8",
"tab.hoverBackground": "#ffefbf"

ここをピンクではなく黄色系にしたことで、全体が甘くなりすぎず、少し軽やかな印象になりました。
エディタ本文はかなり薄いピンクです。

"editor.background": "#fff9fc",
"editor.foreground": "#4b3b4c",
"editorCursor.foreground": "#ff6fae",
"editor.selectionBackground": "#ffd9eb"

背景を濃くしすぎると文字が読みにくくなるため、本文エリアはかなり控えめにしました。その代わり、カーソルや選択範囲にピンクを配色して、可愛さが引き立つようにしています。

ターミナルも黄色くする

個人的に気に入っているのが、ターミナルをクリームイエロー系にしたところです。

"terminal.background": "#fff9e6",
"terminal.foreground": "#5b4f3b",
"terminalCursor.foreground": "#c28b3c"

ターミナルは黒背景のイメージが強いですが、淡い黄色にするとかなり雰囲気が変わります。（黒くないだけで威圧感がなくなりますねｗ）
もちろん、ログが多い作業やエラー確認をする時は視認性が重要です。そのため、文字色はブラウン系にして背景とのコントラストを確保しています。
ただ可愛いだけではなく、実用的な範囲に収めるのがポイントです。

コードの色も少し甘めにする

UI全体だけでなく、コードの配色も調整しています。

"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": ["comment", "punctuation.definition.comment"],
"settings": {
"foreground": "#9a7f92",
"fontStyle": "italic"
}
},
{
"scope": ["string", "string.quoted"],
"settings": {
"foreground": "#d66ba0"
}
},
{
"scope": ["keyword", "storage.type"],
"settings": {
"foreground": "#b85fb4"
}
},
{
"scope": ["entity.name.function", "support.function"],
"settings": {
"foreground": "#ff7fb5"
}
}
]
}

コメント、文字列、キーワード、関数名の色を少しピンク〜紫寄りにしています。
ここもやりすぎると読みにくくなるため、まずはよく目に入る要素だけ変えるのがおすすめです。すべての構文色を細かく変えようとすると終わりが見えなくなるので、最初は「文字列が可愛い」「関数名が可愛い」程度でも十分に楽しめます。

反映されない時はリロードする

設定を変えたのに一部が反映されない場合は、まずウィンドウをリロードしてみてください。
コマンドパレットから以下のコマンドを実行します。

Developer: Reload Window

それでも一部だけ色が変わらない場合は、指定しているキーが異なっている可能性があります。
例えば、パンくずリスト周りの背景色を変更したい場合は、公式のテーマカラーとして用意されている breadcrumb.background を指定します。

"breadcrumb.background": "#fff3cf"

こうした部分は少し試行錯誤が必要ですが、逆に言えば色を変えながら「ここがこのキーなんだ」と理解していく過程も楽しいものです。

編集前にバックアップを取る

設定ファイルを直接編集するため、作業前にバックアップを取っておくと安心です。

cp "/Users/xxxx/Library/Application Support/Antigravity/User/settings.json"
"/Users/xxxx/Library/Application Support/Antigravity/User/settings.backup.json"

一度見た目を大きく変え始めると、どこをどう変更したか分からなくなることがあります。
特に settings.json に他の設定も含まれている場合は、いきなり全置換するよりも、必要な部分だけマージする方が安全です。

もっと簡単にやるならCodexに頼むのもあり

ここまで手動で設定する方法を書きましたが、より手軽にやりたい場合はCodexに依頼するのも一つの手です。
例えば、Antigravityの設定ファイルを見せて、以下のように依頼します。

この settings.json を解析して、エディタ全体をパステルピンクとクリームイエロー基調に変更してください。

読みやすさは残したまま、可愛い雰囲気にしてください。
変更箇所にはコメントを付けてください。

このように依頼すれば、かなり楽にカスタマイズできます。
自分ですべてのキーを調べるのも楽しいですが、最初から完璧にやろうとすると少し大変です。
そのため、Codexに大枠を作成してもらい、そこから「もう少しピンク強め」「ターミナルは黄色寄り」「カーソルは濃いピンク」といったように、自分好みに微調整していくのがちょうどよさそうです。
AIに設定ファイルを読ませて色の方向性だけ伝え、あとは出力された内容を見ながら自分の好きな雰囲気に寄せていく。この流れは非常に現代的ですし、エディタの着せ替え遊びとしても楽しいです。

可愛いエディタは、思ったより作業のモチベになる

今回試してみて感じたのは、エディタの見た目は思っていた以上に重要だということです。
もちろん、開発環境で最も重要なのは作業のしやすさです。文字が読みにくい、目が疲れる、エラーが見づらいといった状況になってしまうと本末転倒です。
しかし、視認性を保ったまま、自分の好きな色や雰囲気に寄せることは可能です。
私の場合、パステルピンク and クリームイエローにしたことで、エディタを開いた時のモチベーションが格段に高まった気がします。
単なる作業画面というよりも、「お気に入りの作業スペース」になった感じがして、よりやる気が出ます☺️
毎日使うものだからこそ、少しでも「可愛い」「楽しい」「触りたい」と思える方がいい。
ダークモードもライトモードも便利ですが、たまにはこうした、自分のテンションに全振りしたエディタもありだと思います。

まとめ

今回は、Antigravityのエディタをパステルピンクとクリームイエロー基調にカスタマイズしてみました。
実施した主な内容は以下の通りです。

• ベーステーマを設定する
• settings.json を編集する
• workbench.colorCustomizations でUIの色を変える
• editor.tokenColorCustomizations でコードの色を変える
• フォントやカーソルの動きを滑らかにする
• 反映されない時は Developer: Reload Window を実行する
• 編集前にバックアップを取る

テーマを変えるだけでも気分は変わりますが、自分で細かく色を指定すると、さらに「自分専用のエディタ感」が出ます。
実用性だけで考えると、エディタの外観を可愛くすることは必須ではありません。
しかし、毎日触れる道具を自分好みにすることは、意外と作業のハードルを下げてくれます。
ちょっとコードを書くだけの日も、エディタを開いた瞬間に「かわいい」と思えると、それだけで少し楽しくなります。
ダークモードにもライトモードにも飽きた方は、ぜひ一度、自分だけの可愛いエディタを作ってみてください。
思った以上に、開発環境は自分好みに着せ替えできます。そして、思った以上にテンションが上がりますよ！

---

採用拡大中！

アシストエンジニアリングでは、一緒に働くフロントエンド、バックエンドのエンジニア仲間を大募集しています！
少しでも興味がある方は、カジュアル面談からでもぜひお気軽にお話ししましょう！
お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/