Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
Windows 10では「アプリ モード(App mode)」、Android 10では「ダークモード(Dark Theme)」、macOS 10.15やiOS 13では「外観モード(Appearance)」と、それぞれ呼ばれている色モードを尊重しつつ、ユーザーの好みで明るくも暗くもできるようにした。どう実装すると効率的かを考えたかっただけなので、次期マイナーバージョンでは消える。 ウェブページでの色モードの設定には、3つの状態の管理が必要らしい。ダーク・モードにしているが特定のウェブページは白背景で見たい、またはその逆があるため、自動(OSやブラウザーでユーザーが設定したモードに従う)と、強制的にダーク、そして強制的にライトにできるべきという主張だ。実装はあまり見ないが、主張は散見される。 僕はアプリケーション側、つまりブラウザーが本来持っているべき設定だと思うので、あまり納得はしていな
Windows 10には、画面の色を見やすく設定する「カラーフィルター」という機能が用意されている。これは、「色覚異常」「色盲」のユーザー用に画面を見やすくするための設定だ。 今回は、その設定方法を紹介しよう。 なお、その前に、日本遺伝学会から提案された用語の変更から確認しておこう。 ●「色覚異常」「色盲」という言葉は「色覚多様性」に変更へ 色の見え方は、全員が同じではない。 人によっては「赤と緑」「茶と緑」などの隣り合った色が見分けにくいことがある。 いわゆる、「色覚異常」や「色盲」といった遺伝的な異常によるものだ。 ただし、けっして珍しいことではなく、日本人男性は約5％、女性は0.2％が該当する。 ヨーロッパでは地域によっては9％が「色覚異常」だという。 また、色覚異常だからといって、日常生活に特別な問題が生じるわけでもない。 そこで、2017年9月、日本遺伝学会は、 誤解や偏見につな
デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を点けたときを想像してみてください。このような劇的な光量の変化は、私たちの目に悪影響を与えます。しかし、暗い部屋でほのかな明かりを点ければ、目の網膜が
はじめに 最近、ダークモード対応というニュースをよく目にします。僕も背景暗めの色にして、眩しくないディスプレイにするのが好きです。 ダークモードについてはなんとなく存在を知っているだけだったので、思い立ってちゃんと調べ直してみようと思い、まとめてみました。 ダークモードについておさらい そもそもダークモードとは何か 厳密な定義は見つからなかったのですが、Light-on-dark color scheme - Wikipedia から引用します。 Light-on-dark color scheme, also called Dark mode, Dark theme or Night mode, is a color scheme that uses light-colored text, icons, and graphical user interface elements on a
前回で、Windows のカラーマネージメント設定が終わったので、次はブラウザだ。Firefox(v27)とChrome(v32)を主に使用していて、Internet Explorer 11も入ってはいるので、これらの設定を確認する。 ブラウザのカラーマネージメントについては、やんま まのblog（仮）様のページを参考にした。 Windowsの設定でディスプレイをAdobeRGBの色域にしている場合、ブラウザのカラーマネージメント設定によっては、ブラウザで見た絵の彩度が上がって派手に見える現象が起きる。これはsRGBとAdobeRGBは色域が異なるために、同じRGBの指定値でも、違う色が表示されてしまうことから発生する。 例えば、Webに掲載される写真は大半がsRGBだと考えられるが、ブラウザがカラーマネージメントをせずにそのまま表示しようとすると、ディスプレイ側はAdobeRGBの色域な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
