hover状態のデザイン、Primaryボタンを明るくなるように設計した理由
2023.12.30
以前に設計したデザインコンポーネントについて、チームメンバーから「Primaryボタンだけhover状態が明るくなる仕様にしているのは、どんな理由からですか？」という旨の質問をいただきました。その質問をきっかけに、設計した当時のことを振り返って議論しました。この記事はそのときの考えについてまとめたメモです。
デザインサンプル
ディテールに違いはありますが、概ねこのデザインについてです。
結論
- default状態の文字の視認性（背景色とのコントラスト）を優先している。
- hover時に、文字と背景色のコントラストが高い状態（default）から低い状態（hover）に変化する。
- hover時に、画面内に存在する他のdefault状態のボタンよりも強調して差別化。
詳細について、観点ごとに理由を深掘りしていきます。
視認性とユーザー行動の観点
- ユーザーは何らかの関心・行動意欲が起きるボタン以外にはマウスカーソルを合わせるアクションまで向かいにくいと考える。
- ユーザーにとってボタンをhoverする行動（目の動き + 手の動き）よりも、ボタンを視認するだけの行動（目の動き）であることが多いはず。
- ユーザーの行動量が少ない状態でも情報が伝わりやすい設計が良いと考えた。
- その設計の1つがdefault状態の視認性を高めること。
- 視認性の観点でhover状態よりもdefault状態のコントラストが高く、文字がよりはっきり読みやすいほうが便利だと考えた。
- スマートフォンやタブレットを使用しているユーザーはタップ操作になりhover状態が存在しないはずなので、default状態の視認性を優先した。
ユーザーがボタンをhoverする時点でユーザーがボタンの存在を認識し、押すかどうかの判断中である（ボタン文言の視認後の）可能性が高いはずです。そのためボタンをhoverする前のdefault状態の視認性を優先したいと考えました。
ボタンごとのコントラストの観点
Primary、Secondary、Tertiary、Destructiveの各ボタンのデザインのコントラストを比較したときに、default状態の背景色が濃い（コントラストが強い）状態が良いと判断しました。
使用する色（Primaryカラー）の共通化の観点
コントラストの観点とも重なりますが、Primaryボタンの塗り（fill）やSecondaryボタンの線（outline）の色と文字色を合わせつつ、背景色とのコントラストを維持する理由もあります。
デザインシステムにおけるコンポーネント管理のしやすさや、コードメンテンスのしやすさの側面もあり、共通化できるものはなるべく共通化しておきたいという意図があります。
一般的なボタン挙動の観点
- 一般的なhoverの振る舞いとして、「暗い」から「明るい」に変化するという挙動が自然だと考えたため。
- 「暗い状態」から「明るい状態」になることでハイライト（光が当たった or 発光しているので明るい）の意味合いを強調させている。
- 物理世界に存在するボタンも押せることを強調した表現は「発光している」ことが多いと感じ、そのほうが物理的にも自然な印象になると判断した。
※ここでは単純化して「暗い」と「明るい」という言葉で比較しています。実際にはdefault状態とhover状態のデザインのどちらも、HSBカラースケールにおける明度（明るさの尺度）は100%です。違いは彩度の数値であり、感じる印象は「濃い色」から「薄い色」への変化だと思います。
線（outline）で表現するボタンの活用
- Secondary、Tertiary、Destructiveの線（outline）で表現しているボタンの「明るい」から「暗い」に変化するhoverルールのほうが、物理世界のハイライト表現からはややイレギュラー（変則的）という認識。
- 一方で画面全体をシンプルに保てる点で優れている。そのため線（outline）で表現するボタンデザインも合わせて採用している。
- hoverで「強調表示する + 視認性を担保する」という観点をクリアしつつ、全体のバランスを取る際にこのような配色設計とした。
あらためて気付いた規則性とまとめ
質問いただいたことで、ボタンの文字色と背景色のコントラストの観点で、以下の規則性が維持されているのかなと気付きました。
結論の振り返りと規則性
- default状態の文字の視認性（背景色とのコントラスト）を優先している。
- hover時に、文字と背景色のコントラストが高い状態（default）から低い状態（hover）に変化する。
- hover時に、画面内に存在する他のdefault状態のボタンよりも強調して差別化。
ユーザーインターフェイス設計の思考メモ
この他にもユーザーインターフェイス設計について思ったことや気付いたこと、教えていただいたことなど、思考振り返りを1つの記事にまとめています。
最後に
質問をいただいて議論できたことで、振り返って考えるきっかけになりました。さらに新しい発見もありました。ありがとうございました。
