IT・Web 公開日 2026.10.21

VS Codeの見た目が変わる「モダンUI」とは？変更点と、元に戻す方法

VS Codeで進む画面デザインの見直し「モダンUI」。新しい配色テーマやつながって見えるタブ、Compact表示など何が変わるのか、試し方と従来の見た目に戻す設定、テーマへの影響をまとめました。

プログラミングやWeb制作で定番のエディタ「Visual Studio Code（VS Code）」の見た目が、少しずつ新しくなっています。2026年10月15日、VS Codeの公式ブログで、画面全体のデザインを見直す「モダンUI」の取り組みが紹介されました。

「いつの間にかタブの形が変わった」「余白が増えた？」と感じた人もいるかもしれません。この記事では、何が変わるのか、試し方と元に戻す方法、テーマや拡張機能への影響をまとめます。

この記事のポイント

モダンUIってなに？

VS Codeのチームが進めている、画面デザインの見直しです。公式ブログでは、エディタを作り直すのではなく、見慣れた画面の階層をわかりやすくし、目に入る雑音を減らすことが目的だと説明しています。

最近のVS CodeはAIのエージェント機能（チャットで作業を任せる機能）にも力を入れていて、エディタとエージェントの画面の両方を、同じデザインのルールで支える土台づくりという意味もあるそうです。

逆に、こんなことはしないとも書かれています。

場所	変わるところ
配色	2026年版のテーマ「Dark 2026」「Light 2026」
画面全体	余白や文字、ボタンなどに共通のルール（デザイントークン）を適用
サイドバー・パネル	区切りの線や、大きさを変えるつまみが見つけやすくなる
見出し	すべて大文字のラベルをやめ、すっきりした表示に
タブ	選んでいるタブが、編集エリアとつながって見える形に
表示の密度	余白をつめた「Compact」を選べる

公式ブログによると、フルHD（1920×1080・拡大率100%）の画面では、新しい見た目のほうが横に約20px、縦に12〜18pxほど多くスペースを使うそうです。「少し広々した」と感じるのはこのためです。気になる人は、次に紹介するCompact表示を試してみてください。

新しい見た目は、2026年7月のバージョン1.129で「実験的なプレビュー」として登場し、段階的に広げていく方針です。まずは安定版の実験的な設定として、次にプレビュー版（Insiders）で標準として、そのあと安定版の一部の人、最後に安定版の全員へ、という順番が示されています。

余白をつめたいとき

従来の見た目に戻したいとき

開発元のGitHubには、新しい見た目で動作が重くなったという報告も寄せられています。入力やウィンドウの操作がもたつくと感じたら、いったんこの設定をオフにして、ウィンドウを再読み込みしてみてください。

ただし、従来の見た目はいずれ廃止する計画とされています。時期はまだ決まっておらず、事前に知らせるとのことです。

今使っている配色テーマは、新旧どちらの見た目でもそのまま動くと説明されています。新しく追加された色の設定が用意されていないテーマでは、これまでの色が代わりに使われます。

テーマや拡張機能を自分で作っている人は、新旧の見た目と、ライト・ダーク・ハイコントラストの各テーマで表示を確かめておくのがおすすめです。

実はこのブログの仕組み（CMS）も、VS Codeで作っています。毎日のように開くエディタなので、見た目が変わると最初は少しとまどいますよね。

それでも、「作り直すのではなく整理する」「元に戻す道も残す」という進め方は、使う人のことを考えたやり方だと感じました。急いで慣れる必要はないので、Compact表示を試したり、合わなければ一度戻したりしながら、自分に合う形を探してみてください。

※ 記事の内容は、2026年10月21日時点の情報をもとにしています。設定の名前は変わることがあります。