ニュース

ChromeやEdgeでデザイン周りの改善。Webサイトのボタンやスライダーなどがフラットデザインに

(左)フォームコントロールの従来のデザイン、(右)新たなデザイン

 Googleは、Webブラウザで表示されるボタンやスライダーなどといったフォームコントロール関して、ChromiumベースのWebブラウザで予定しているデザインの変更点について公開した。Windows向けのMicrosoft Edgeはすでに変更を適用済みで、Google Chromeはバージョン81ではベータとして実装しており、バージョン83にて正式な適用を予定している。

 フォームコントロールは、それぞれの機能が実装されたタイミングよってデザインベースが異なっており、外観を統一するために開発者が調整するリソースを割く必要があった。こういった問題を解消すべく、ChromeとEdgeの開発チームが連携し、Chromiumに標準で組み込まれるフォームコントロールのテーマの刷新および機能改善を実施。グラデーションをなくし、フラットで一貫性のあるニュートラルなデザインを目指したとする。

新しいフォーカスインジケータ

 加えて、フォーカスされているリンクやボタンなどに枠を表示するフォーカスインジケータのデザインを変更。暗色の太い囲いに細い外枠をつけたものを採用し、背景色の影響を抑えて視認性を向上させた。

タッチ操作向けの日付入力画面

 また、スマートフォンなど、近年増加するタッチ入力デバイスへの最適化として、タップターゲットサイズを拡大。一例として、日付を入力する画面の場合、カレンダーが入力エリア上部にポップアップしてタッチしやすくする。スワイプや惰性スクロールもサポートする。

新しいカラーピッカー

 そのほか、キーボードだけで色の選択が可能になる新カラーピッカーや、アクセシビリティ機能を使用している環境で操作の一貫性が向上するARIAロールマッピングのアップデートなども行なわれている。