Geminiのスクロールバーが見えにくい問題を解決する方法【Stylusで個別調整】

2026.02.14
Geminiのスクロールバーと女子

はじめに

最近のChromeやWebサービスは、スクロールバーがとにかく色が薄い。特に Gemini（GoogleのAIチャット） は背景色と同化して、

「どこにスクロールバーがあるのか分からない」

という状態になりがちです。

Windows側の設定である程度は改善できますが、それでも Geminiだけはまだ薄い。これはGeminiの配色とChromeの仕様が合わさった結果です。

この記事では、Chrome拡張 Stylus を使って、

Geminiの スクロールバーを太く・濃くして見やすくする方法

を、画像がなくても迷わないレベルで丁寧に解説します。

Stylusとは何か

Stylusは、Webサイトの見た目を CSS（見た目のルール）で上書きできるChrome拡張 です。

  • Webサイトの中身は変えない
  • 自分のブラウザ表示だけを変更
  • 特定のサイトだけに適用可能

という特徴があります。

今回のように「GeminiのUIを調整したい」という用途に、これ以上ないほど向いています。

Stylusの取得方法（Chrome）

  1. Chromeを開く
  2. Chrome ウェブストアにアクセス
  3. 検索欄に Stylus と入力
  4. 拡張機能「Stylus」を選択
  5. 「Chromeに追加」 をクリック
  6. 確認ダイアログで 「拡張機能を追加」 を選択

インストールが完了すると、アドレスバー右上に Sのアイコン が表示されます。

Gemini専用CSSを作成する手順

① Geminiを開く

以下のURLにアクセスします。

‎Google Gemini
Meet Gemini, Google’s AI assistant. Get help with writing, planning, brainstorming, and more. Experience the power of ge...
gemini.google.com

② Stylusのメニューを開く

  1. Chrome右上の Stylus（Sアイコン） をクリック
  2. 表示されたメニューから 「このURLに新しいスタイルを書く」 を選択
Stylusのアイコン

すると、CSS入力画面が開きます。

③ CSSを貼り付ける

以下のCSSを そのままコピー＆ペースト してください。

/* === Gemini 専用スクロールバー強化 === */
::-webkit-scrollbar {
  width: 13px;                  /* 太さ：好みで 12〜20px */
}

::-webkit-scrollbar-thumb {     /* スクロールバーのつまみ */
  background-color: #6c77d4;  /* カラー。不安定でマウスホバー後に解除されてしまう */
  border: 10px solid #6c77d4; /* 縁取りカラー。対策としてこちらを太くする */
  border-radius: 10px;          /* 角を丸くする */
}

::-webkit-scrollbar-track {
  background-color: #c9c6ea; /* トラックに色を付ける */
}

④ 保存する

  • 画面左上の 保存ボタン をクリック
  • タイトルは例として 「Gemini scrollbar visibility fix」 などでOK
  • 「次で始まるURL▼」を選択してURL欄を”https://gemini.google.com/app”にする
Stylusのスタイルエディタ

保存後、Geminiを 再読み込み（F5） すると即反映されます。

解除したいときは

  1. Chrome右上の Stylus（Sアイコン） をクリック
  2. 先程入力したタイトルのチェックを外すか、または右の「S」マークを左にスライドする
Stylusのオン・オフや編集

さらに見やすくしたい場合

とにかく見失いたくない人向け

::-webkit-scrollbar-thumb {
  background-color: #333;
}

配色の美しさは犠牲になりますが、 「どこにあるか一瞬で分かる」 という点では最強です。

横スクロールを防ぎたい場合

Geminiで意図しない横スクロールが出る場合は、以下を追加します。

body {
  overflow-x: hidden;
}

反映されないときのチェックリスト

  • Stylusの適用先が gemini.google.com になっているか
  • 保存後に F5で再読み込み したか
  • Chromeを再起動してみたか

ほとんどの場合、これで解決します。

なぜGeminiはここまで見えにくいのか

Geminiは

  • 明るい背景色
  • 極端に細いスクロールバー
  • 低コントラスト

という設計になっています。

これはデザイン上の選択ですが、 視認性という点では明確に弱点 です。

Stylusで補正する行為は、改造ではなく アクセシビリティの回復 と考えて問題ありません。

まとめ

  • Geminiのスクロールバーは標準状態だと非常に見えにくい
  • Stylusを使えば Geminiだけ ピンポイントで調整できる
  • CSSは貼り付けるだけで即反映

UIは我慢するものではありません。 見えることは正義です。

本文の行間・入力欄下の余白をさらに詰める（追加調整）

GeminiのUIは全体的に「ゆったり設計」で、本文テキストや入力欄まわりの行間・余白が広すぎると感じやすい。ここでは可読性を壊さず、情報密度だけを上げる調整を行う。

追加するCSS（そのまま貼り付けOK）

/* === 本文の行間を詰める === */
p, li {
  line-height: 1.25!important;
}

/* === 入力欄の下の余白を詰める === */
  p {
margin: 0.2em0!important;
}

それぞれ何をしているか

  • line-height: 1.25
    行と行の距離を縮め、縦に間延びした文章を引き締める。1.2〜1.3あたりが可読性と情報密度のバランス点。
  • margin: 0.2em 0
    段落（pタグ）の上下余白を極小化し、入力欄の直下にできる無駄な空白を抑える。

注意点（正直に）

  • 余白を詰めすぎると「詰まりすぎて読みにくい」UIになる
  • 見出し（h1〜h3）まで同時に詰めたい場合は別途指定が必要
  • !important を使っているため、影響範囲は広い（効くが強い）

おすすめ運用

  • まずはこのCSSを入れて体感確認
  • きつければ 1.3 や 0.3em に戻す

UI調整は一発で決めるものではなく、目と脳で微調整する作業。遠慮なく数字を動かしていい。

コメント

PAGE TOP