【VSCode背景透過】"GlassIt-VSC"の導入方法 - コーディング効率を爆上げ

2026年2月16日 最終更新日時 : 2026年2月16日 NARA REN


コーディングのお供に、あえて「そこそこのアニメ」を流すのが好きです。 神作画やストーリーが重厚な作品だと集中力を奪われてしまうので、テンポが緩く、聞き流しても問題ない絶妙なクオリティの作品（量産型異世界モノなど）をサブモニターに映しておくのが私のスタイル。

でも、チラ見とはいえメインモニターとサブモニターを行き来する視線移動、地味に疲れませんか？

そんな同志におすすめしたいのが、エディターを透過させて背景でアニメを視聴可能にする最強の拡張機能「GlassIt-VSC」です。

最新の投稿はこちら

最新の関連記事はこちら

GlassIt-VSCとは

VSCodeのウィンドウ全体を透過させる拡張機能です。キーボードショートカットで透明度を段階的に調整でき、エディターの後ろにあるウィンドウ（ブラウザ、動画など）が透けて見えるようになります。

インストール方法

  1. VSCodeを開く
  2. 拡張機能タブ（Ctrl + Shift + X）を開く
  3. 「GlassIt-VSC」で検索
  4. インストールをクリック

インストール後、追加の設定は不要です。すぐにキーボードショートカットで操作できます。

操作方法

ショートカット動作
Ctrl + Alt + Z段階的に透明にする
Ctrl + Alt + C段階的に不透明に戻す
Ctrl + Alt + X一発で完全不透明にリセット

デフォルトの透明度は255（完全不透明）です。Ctrl + Alt + Z を何回か押して好みの透明度に調整してください。

実用的な活用シーン

1. 参考ページを見ながらコーディング

ドキュメントや参考記事をブラウザで開いた状態で、VSCodeを透過させればウィンドウを切り替えることなく両方を同時に見られます。

2. 動画を見ながら作業（集中力維持）

サブモニターに動画を映すと、目線が完全に移動して集中が切れます。しかし透過なら目線はコードに固定したまま、背景にうっすら動画が見える程度です。視線の移動がないため、意外と集中力を維持できます。

💡 サブモニターに動画を映すと目線がそれるけど、透過ならエディターに目線を集中したまま背景が見えるので、作業の集中力を切らさずに済みます。

3. デザイン確認しながらCSS編集

ブラウザでプレビューを開いたまま、VSCodeでCSSを編集する際に便利です。ウィンドウを交互に切り替える必要がなくなります。

おすすめの透明度設定

用途透明度の目安説明
参考ページを見ながらやや透明（200前後）文字が読みやすい程度に
動画を背景に中程度（180前後）コードが優先、動画はうっすら
雰囲気重視かなり透明（150以下）壁紙や背景を見せたい場合

⚠️ 透明度を下げすぎるとコードが読みにくくなります。まずは Ctrl + Alt + Z を3回程度押して様子を見るのがおすすめです。

まとめ

  • GlassIt-VSCはVSCodeの拡張機能から検索してインストールするだけ
  • 操作は3つのショートカット（Zで透明、Cで不透明、Xでリセット）
  • 参考ページを見ながらのコーディングに便利
  • サブモニターよりも目線の移動がないので集中力を維持しやすい

良かったらフォローお願いします

カテゴリー
VSCode、拡張機能

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
Notion MCP連携でWordPress記事を自動生成する方法
2026年2月16日
次の記事
【Bashだけ覚えればOK】Web開発者が知っておくべきターミナル・シェルの基礎知識
2026年2月17日