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