2025年にデザイナーのための新しいフロントエンド機能

xguru · 2025-01-08T10:03:01+09:00

現代のWeb技術の発展により、以前はJavaScriptで実装する必要があった多くの作業が、今ではHTMLとCSSで簡単に実現可能コンポーネント中心のスタイリング、親要素のスタイリング、相対色の定義などの新技術が、複数のブラウザーで幅広く利用可能デザイナーと開発者がUIコンポーネントをより簡単かつ効果的に制作できる方法を提供 CSSコンテナクエリとスタイルクエリコンポーネント中心のスタイリングが可能コンテナの幅やスタイル情報をクエリしてCSSスタイルを適用複数のバリエーションを持つ再利用可能なコンポーネントのスタイリングに有用参考: CSSスタイルクエリの紹介テキストのバランス調整 (text-wrap: balance) タイポグラフィのバランスを維持見出しやカードタイトルなどで、テキストが均等に配分されるよう自動計算参考: Ahmad Shadeedのガイドフォーム入力フィールドの自動サイズ調整入力サイズを自動化テキスト入力や選択メニューのサイズがコンテンツに合わせて自動調整シンプルなCSS1行で実装可能参考: Adam Argyleの解説非表示コンテンツを検索可能に (hidden=until-found) UIアクセシビリティを向上折りたたまれたアコーディオンセクションなどの非表示コンテンツを、ページ内検索や検索エンジンで検索可能参考: Joey Arharのガイド高解像度カラー対応 (OKLCH, OKLAB) 50%多くの色をサポート人間の色覚を基に設計された新しいカラースペックデザインシステムやグラデーションに適している参考: Vitaly Friedmanの解説 CSS相対色既存の色をベースに色を計算 fromキーワードを使って、色の明るさ調整や補色の計算などが可能参考: Adam Argyleのコードスニペット View Transitions API 滑らかな画面遷移既存の画面から新しい画面へ移動する際に、CSSアニメーションを活用した滑らかな遷移を実装単一ドキュメントまたは2つのドキュメント間の遷移をサポート参考: Bramus Van Dammeのガイド CSSスクロールスナップ正確なスクロール体験を提供ユーザーが特定のコンテンツ項目にスナップするよう、スクロールコンテナを設定可能参考: Ahmad Shadeedのガイド親スタイリング (:has) 子要素の状態に基づいて親要素をスタイリング親子関係を超えて、他の要素の状態に応じたスタイル調整も可能参考: Josh W. Comeauのガイドその他の注目機能入力状態のスタイリング改善: :user-valid, :user-invalidで、ユーザーが入力を変更した後にフィードバックを提供モバイルキーボードの最適化: inputmodeとenterkeyhintで仮想キーボードを改善 HTML要素: アクセシブルなモーダルやポップオーバーを実装結論新しく実用的なフロントエンド技術は、UIとUXデザインに革新的な影響をもたらす今後実装される機能: masonryレイアウト、のカスタマイズ、テキストボックスの整列など Webプラットフォームの発展に尽力するすべての開発者に感謝するとともに、この記事がプロジェクトやアプリケーションの改善に役立つことを願う。よい作業を!

(smashingmagazine.com)

35 ポイント投稿者 xguru 2025-01-08 | 4件のコメント | WhatsAppで共有

現代のWeb技術の発展により、以前はJavaScriptで実装する必要があった多くの作業が、今ではHTMLとCSSで簡単に実現可能
コンポーネント中心のスタイリング、親要素のスタイリング、相対色の定義などの新技術が、複数のブラウザーで幅広く利用可能
デザイナーと開発者がUIコンポーネントをより簡単かつ効果的に制作できる方法を提供

CSSコンテナクエリとスタイルクエリ

コンポーネント中心のスタイリングが可能
- コンテナの幅やスタイル情報をクエリしてCSSスタイルを適用
- 複数のバリエーションを持つ再利用可能なコンポーネントのスタイリングに有用
- 参考: CSSスタイルクエリの紹介

テキストのバランス調整 (`text-wrap: balance`)

タイポグラフィのバランスを維持
- 見出しやカードタイトルなどで、テキストが均等に配分されるよう自動計算
- 参考: Ahmad Shadeedのガイド

フォーム入力フィールドの自動サイズ調整

入力サイズを自動化
- テキスト入力や選択メニューのサイズがコンテンツに合わせて自動調整
- シンプルなCSS1行で実装可能
- 参考: Adam Argyleの解説

非表示コンテンツを検索可能に (`hidden=until-found`)

UIアクセシビリティを向上
- 折りたたまれたアコーディオンセクションなどの非表示コンテンツを、ページ内検索や検索エンジンで検索可能
- 参考: Joey Arharのガイド

高解像度カラー対応 (OKLCH, OKLAB)

50%多くの色をサポート
- 人間の色覚を基に設計された新しいカラースペック
- デザインシステムやグラデーションに適している
- 参考: Vitaly Friedmanの解説

CSS相対色

既存の色をベースに色を計算
- fromキーワードを使って、色の明るさ調整や補色の計算などが可能
- 参考: Adam Argyleのコードスニペット

View Transitions API

滑らかな画面遷移
- 既存の画面から新しい画面へ移動する際に、CSSアニメーションを活用した滑らかな遷移を実装
- 単一ドキュメントまたは2つのドキュメント間の遷移をサポート
- 参考: Bramus Van Dammeのガイド

CSSスクロールスナップ

正確なスクロール体験を提供
- ユーザーが特定のコンテンツ項目にスナップするよう、スクロールコンテナを設定可能
- 参考: Ahmad Shadeedのガイド

親スタイリング (`:has`)

子要素の状態に基づいて親要素をスタイリング
- 親子関係を超えて、他の要素の状態に応じたスタイル調整も可能
- 参考: Josh W. Comeauのガイド

その他の注目機能

入力状態のスタイリング改善: :user-valid, :user-invalidで、ユーザーが入力を変更した後にフィードバックを提供
モバイルキーボードの最適化: inputmodeとenterkeyhintで仮想キーボードを改善
<dialog> HTML要素: アクセシブルなモーダルやポップオーバーを実装

結論

新しく実用的なフロントエンド技術は、UIとUXデザインに革新的な影響をもたらす
今後実装される機能: masonryレイアウト、<selectmenu>のカスタマイズ、テキストボックスの整列など
Webプラットフォームの発展に尽力するすべての開発者に感謝するとともに、この記事がプロジェクトやアプリケーションの改善に役立つことを願う。よい作業を!

4件のコメント

savvykang 2025-01-08

他の方も指摘されているように、筆者はブラウザ間の互換性や動作の一貫性をまったく考慮していませんね。これ以外にもブラウザ間で実装や挙動が異なる場合があるので、無条件に新機能を選ぶことはできません。いくら Chrome の利用率が高いとはいえ、iOS がある以上、少なくとも Safari で問題なく動作するかどうか程度は考慮すべきです

n00nietzsche 2025-01-14

同意します……。製品にそのまま使うのは難しそうですね

cichol 2025-01-08

Safari、Firefoxは未実装

フォーム入力フィールドの自動サイズ調整
非表示コンテンツの検索が可能 (hidden=until-found)

Firefoxは未実装

View Transitions API

フロントエンドの新機能は、事実上Chrome単独の新機能と見なしたほうが気楽です。
極端な例では、OffscreenCanvasのように5年もかかる場合があります。（Chrome 2018、Safari 2023）

kyc1682 2025-01-08

コンテナクエリと:hasがものすごく便利です