WebにおけるMaterial You
GoogleのデザインはAndroid上で素晴らしく見えます。流動的な操作感で、ダイナミックカラーや丸みを帯びた形状が採用されています。
Web開発者は、それとは異なる現実に直面しています。これらのテーマをブラウザに持ち込むには、技術的なハードルが伴います。
Material Design 3をWebに移行することについての新しい記事を書きました。ReactやAngularでの動作についても考察しています。
記事の内容は以下の通りです:
- ダイナミックカラーとSSR:実行時にカラーパレットを計算すると問題が発生することがあります。多くの場合、スタイルの適用されていないコンテンツが一瞬表示される(Flash of Unstyled Content)原因となります。
- レイアウトのジオメトリ:グリッドを崩さずに、大きな角丸(corner radius)やシェイプトークンを管理する方法。
- デザイントークンのカプセル化:MUIやAngular Materialのようなライブラリを通じてカスタムトークンを渡す方法。
CSS変数やテーマプロバイダーを扱っている方は、ぜひ参考にしてください。
記事の全文はこちらから:https://dev.to/matin676/the-web-wasnt-built-for-material-you-but-we-build-it-anyway-2gdc