【Chrome 83アップデート】フォームコントロールとフォーカスのデザイン変更！どのように変わった？

こんにちはhgmです。

今回はブラウザ「Google Chrome」のフォーム要素のデザインが変更された点をご紹介します。

変更後のデザイン

フォームコントロール

左：従来　　右：最新

引用：Chrome のフォーム コントロールとフォーカスのアップデート

上記画像を見比べてみると、最新のフォームは全体的にフラットなデザインになっており、

チェックボックス・ラジオボタンに青色の背景色がついており、inputは枠線の色が濃くなっています。

またデートピッカーとタイムピッカーはアイコンがあり、直感的に分かりやすくなっています。

ユーザー補助機能とタップサポートの改善

フォーカス インジケーター

フォーカス インジケーター（「フォーカス リング」と呼ばれることもあります）はボタンやリンク等を選択する際に出る枠線の事で、PCだとキーボードのtabボタンや矢印キーで出現します。

その枠線の色が従来は薄い水色のような色で、背景が同系色だった場合に同化してしまい見えづらかったのですが、

最新版では濃い色の太線（黒よりの灰色？）に細い外枠（灰色）があり、背景色に左右されないようになっています。

引用：Chrome のフォーム コントロールとフォーカスのアップデート

タップ ターゲット サイズの拡大

ここ数年で増加したタブレット端末やタッチ対応ノートPCに対応すべく、タップ ターゲットを大きくし操作性が良くなっています。

例えばデートピッカーではポップアップ表示にすることでタップ ターゲットを大きくし、スワイプや慣性スクロールができるようです。

引用：Chrome のフォーム コントロールとフォーカスのアップデート

カラーピッカーの改善

カラーピッカーもデザインが変わっただけでなく、従来ではキーボードやスイッチだけでの対応が難しかったものをキーボードだけで操作できるようになり、修飾キー（Windows: コントロール、Mac: コマンド）も追加されて10 ポイントずつ色の値を変更できるようになったとのことです。

まとめ

今回のフォームコントロールとフォーカスのアップデートは、ユーザーによってはかなり操作性が向上したのではないかと感じました。

どのデバイスで操作しても問題が無いようにするというのは難しいですが、時代の変化に合わせてUIの向上が必要なのだと改めて思いました。