---
title: VS CodeのUIのデザインが変わったのでもとに戻す方法
url: https://roboin.io/article/2026/08/16/how-to-restore-the-old-vs-code-ui-design/
description: 現在MicrosoftはVS
Codeの新しいUIデザインを試験的に展開しており、環境によっては以前と異なる新しいUIで表示されることがあります。VS
Codeの新しいデザインはまだ試験段階なので、設定からオン・オフを切り替えられます。
publishedDate: 2026-08-15T19:19:19.429Z
modifiedDate: 2026-08-15T19:19:19.429Z
thumbnail: https://roboin.io/api/media/file/vs-code-experimental-modern-ui-setting.png
thumbnailAlt: "VS Codeの設定画面で［Workbench > Experimental: Modern UI］が赤い枠線で強調されているスクリーンショット"
thumbnailCaption: N/A
---
# VS CodeのUIのデザインが変わったのでもとに戻す方法
現在MicrosoftはVS Codeの新しいUIデザインを試験的に展開しており、環境によっては以前と異なる新しいUIで表示されることがあります。新しいUIは全体的に角丸のコンテナーに各要素が配置されており個人的にはかなり好きですが、賛否のわかれるデザインでもあります。
VS Codeの新しいデザインはまだ試験段階なので、設定からオン・オフを切り替えられます。
*以前のVS Codeのデザイン*
*VS Codeの新しいデザイン*
VS Codeの設定には、新しいデザインについて次のように記載されています。
> サイド バーと下部パネルは、角が丸く、余白のあるフローティング カードとして表示され、Agents ウィンドウのデザインに合わせた一連の更新済みのワークベンチ スタイルが適用されます。
## VS Codeを以前のデザインに戻す方法
VS Codeの新しいデザインはすべてのユーザーにロールアウトされているわけではなく、環境によって古いデザインで表示されたり新しいデザインで表示されたりします。
新しいデザインがロールアウトされている環境では、`workbench.experimental.modernUI`を`false`に変更することで以前のデザインに戻せます。
### GUIから変更する場合
VS Codeの設定を開きます
設定の検索バーに「modern」と入力して、［Workbench > Experimental: Modern UI］をオフにします
UIが以前のデザインに戻ります
### `settings.json`から変更する場合
VS Codeの`settings.json`を開きます
`workbench.experimental.modernUI`を`false`に設定します。
```json
{
// ...既存の設定
"workbench.experimental.modernUI": false
}
```
UIが以前のデザインに戻ります