ユーザーの「選択」をデザインせよ。`::selection`で差をつけるUXの微細なこだわり
フロントエンドの実務において、CSSの「細かいところ」まで手が行き届いているかどうかは、プロダクトの品格を決定づけます。
今回フォーカスするのは、`::selection` 疑似要素。テキストを選択したときに現れる、あの青い背景色のカスタマイズです。多くのサイトがブラウザのデフォルトに任せきりにしていますが、実はここをブランドカラーに合わせるだけで、UIの統一感は劇的に向上します。
今日は、ただ背景色を変えるだけでなく、`span`や`strong`、`code`といったインライン要素ごとに「選択した時の表情」を変える、一歩踏み込んだ実装テクニックを共有しましょう。
—
なぜ`::selection`にこだわるべきか
ユーザーがテキストをマウスでドラッグする行為は、「情報を深く読み込もうとしている瞬間」です。その時に表示される選択色が、サイト全体のデザイン・システムと乖離していたらどうでしょうか？ 少しだけ没入感が削がれますよね。
技術的な話をすると、`::selection`はブラウザのレンダリングエンジンが保持するネイティブなUIイベントの一部です。これに介入することで、ユーザー体験の質を「なんとなく心地よい」というレベルまで引き上げることができます。
ブラウザの裏側で起きていること
`::selection`は、CSSの仕様上、すべてのプロパティが指定できるわけではありません。基本的には以下のプロパティに限定されています。
- `color`
- `background-color`
- `text-shadow`
- `caret-color`（一部ブラウザ）
ここで重要なのは、「継承」のルールです。`::selection`は、ドキュメントのルートから再帰的に適用されます。つまり、特定のインライン要素に個別に`::selection`を定義すると、その要素内での選択のみが上書きされるという、非常に直感的かつ強力なオーバーライドが可能です。
—
実務で使える：インライン要素別・選択範囲の装飾コード
現場のプロジェクトでそのまま使える、洗練されたCSSの構成例です。`strong`は強調、`code`は技術的なニュアンスなど、要素ごとの役割に合わせて色を使い分けます。
/ 1. 全体的な選択色のベース（ブランドカラーを意識） /
::selection {
background-color: rgba(66, 153, 225, 0.3); / 薄いブルーの背景 /
color: #2d3748; / 選択時の文字色 /
}
/ 2. 強調要素(strong)を選択した時：少し主張を強く /
strong::selection {
background-color: rgba(245, 158, 11, 0.4); / 温かみのあるオレンジ /
color: #000;
}
/ 3. コード要素(code)を選択した時：エンジニアライクなスタイル /
code::selection {
background-color: #333;
color: #f8f8f2; / ダークモードのコードハイライト風 /
text-shadow: none; / 読みやすさのためシャドウは消す /
}
/ 4. 引用(em)を選択した時：控えめな色味 /
em::selection {
background-color: rgba(16, 185, 129, 0.3); / 落ち着いたグリーン /
}
実装のポイント
- コントラスト比を死守する: 背景色を変える際は、必ず`color`プロパティもセットで調整してください。デフォルトの青い背景に黒文字のつもりでいたら、実は背景を濃くしすぎて文字が読めなくなった、という事故はよくあります。
- `text-shadow`の活用: `code`タグなどでは、あえて`text-shadow`を消すことで、選択時の視認性を高めるのが「プロの技」です。
—
注意点：やりすぎは禁物
この手法は非常に強力ですが、「ユーザーの意図しない挙動」にならないよう注意が必要です。
例えば、あまりに奇抜な色を選んでしまうと、ユーザーが今どこを選択しているのかが視覚的に把握しづらくなります。また、ダークモード対応を忘れると、明るい場所でしか読めない選択色になってしまうことも。
基本は「サイトのブランドカラーの彩度を落としたもの」を背景に使うのがベストプラクティスです。
—
まとめ：ディテールがプロダクトを語る
「Webサイトの出来栄えは、細部へのこだわりで決まる」というのは、単なる精神論ではありません。ユーザーが普段意識しないような部分まで設計されていることを、脳が無意識に感じ取り、それが信頼感へと繋がっていきます。
今日紹介した`::selection`のカスタマイズは、工数に対して得られるユーザー体験の向上が非常に高い、いわゆる「コスパの良い最適化」です。ぜひ次回のプルリクエストに、この小さなこだわりを忍ばせてみてください。
チームの中で「あ、そこまで考えてるんだ」と思わせたら、あなたの勝ちですよ。それでは、良いコーディングライフを！
コメント