ウェブサイトのユーザー体験（UX）を向上させるには、デザインの美しさだけでなく、操作性の向上も重要です。CSS には見た目は関わらないけど、操作性を改善するための便利なプロパティがいくつもあります。
この記事では、UXを向上させる CSS のプロパティについて紹介します。普段あまり意識されないものの、適切に使うことで快適な操作を実現できるので、ぜひ活用してみてください。
目次
UX 向上に便利な CSS プロパティ
user-select: テキスト選択の制御
user-selectを使用すると、特定の要素の選択を制御できます。これにより、装飾用のアイコンなどが意図せず選択されるのを防ぐことができます。また、選択は無効にするだけでなく、させることも可能です。技術系のサイトなどでは、インラインのcodeタグなどに設定すると、効率的にコピーが可能になります。
使用例
.icon {
user-select: none;
}
code {
user-select: all;
}設定可能な値
none: テキストを選択不可にするauto: ブラウザのデフォルトの挙動に従うtext: 通常のテキスト選択を許可all: 要素全体を選択可能にする
user-select - CSS: カスケーディングスタイルシート | MDN
touch-action: タッチ操作の誤動作防止
スマホなどのタッチデバイスでは、touch-action を適切に設定することで、意図しないスクロールやズームを防ぐことができます。特に、スワイプ操作を実装する際に、ブラウザのデフォルト動作が干渉しないように制御し、操作をスムーズに実行できます。ただし、要素のサイズによってはページ全体のスクロールが妨げられる可能性があるため、適用範囲には注意が必要です。
使用例
.draggable-area {
touch-action: none;
}設定可能な値
auto: デフォルトのタッチ動作を許可none: すべてのタッチ動作を無効化manipulation: ズームやスクロール以外のタッチ動作を防ぐpan-x/pan-y: 指定した方向へのスクロールのみ許可
など
touch-action - CSS: カスケーディングスタイルシート | MDN
pointer-events: クリック・タップ判定の制御
pointer-events を使用すると、要素がクリックやタップの対象になるかどうかを制御できます。これだけ聞くとわかりづらいですが、例えば、装飾目的の要素を他の要素の上に重ねて表示させている場合に、上に重ねている要素にpointer-events: none;を指定することで、重なった要素を貫通して下の要素をクリックやタップすることができるようになります。
使用例
.overlay {
pointer-events: none;
}設定可能な値
auto: デフォルトの動作を維持none: クリックやタップを無効化
pointer-events - CSS: カスケーディングスタイルシート | MDN
scroll-behavior: スムーズスクロールの実装
scroll-behavior を適用すると、アンカーリンクなどのスクロールをスムーズにし、ユーザーがスクロール位置を見失わないようにすることができます。
使用例
html {
scroll-behavior: smooth;
}設定可能な値
auto: デフォルトのスクロール動作smooth: スムーズスクロールを有効化
scroll-behavior - CSS: カスケーディングスタイルシート | MDN
overscroll-behavior: スクロールの暴発防止
overscroll-behaviorは、スクロール領域の終端に達したときのブラウザーの挙動を設定するプロパティです。
ページ内にスクロール可能な要素がある場合、その要素のスクロールが終端に達すると、通常はそのまま親要素（ページ全体など）にスクロールが伝わります。overscroll-behavior を使えば、このようなスクロールの連鎖を防ぎ、特定の要素内でスクロールを完結させることができます。特に、モーダルダイアログやfixedで固定したメニューなどで有効的です。
スクロールの連鎖以外に、終端までスクロールした際のバウンスするアニメーションに関する設定も行うことができます。
使用例
.modal {
overscroll-behavior: contain;
}設定可能な値
auto: デフォルトのスクロール動作contain: スクロールの連鎖は無効化するが、バウンス効果は有効none- スクロールの連鎖とバウンス効果を無効化
overscroll-behavior - CSS: カスケーディングスタイルシート | MDN
prefers-reduced-motion: アニメーションの軽減
そして、最後はプロパティではなくメディアクエリですが、ついでにご紹介します。
prefers-reduced-motionは、ユーザーがアニメーション効果を抑制する設定をしているかどうかで、スタイルを切り替えることができるメディアクエリです。
この設定は、各ユーザーの OS で設定されているもので、Windows の場合は設定>アクセシビリティ>視覚効果>アニメーション効果の設定が適用されます。
使用例
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}設定可能な値
no-preference: ユーザーによる設定なし（デフォルト）reduce: ユーザーがアニメーションの抑制を有効にしている
prefers-reduced-motion - CSS: カスケーディングスタイルシート | MDN
終わりに
以上、見た目には影響しないけれど、ユーザーの操作性を向上させる CSS プロパティやメディアクエリを紹介しました。これらを適切に使用することで、ユーザーにとって快適でストレスのない体験を提供できます。ぜひ、活用してみてください！
