プロポーザル

デザインシステムは、思想や原則といった「ルール」、再利用可能なUIコンポーネントである「実装」、それらの利用方法を示す「ドキュメント」の3要素で構成されます。
特に「ドキュメント」は、デザイナーとエンジニアとをつなぐ共通言語として極めて重要な役割を担います。
ドキュメントが参照しやすく、運用しやすいかたちになっていないデザインシステムは、その機能を発揮できないまま腐っていくことでしょう。

このトークではそんなデザインシステムの根幹をなすドキュメントサイトの技術選定について話します。
ドキュメントサイトに必要な要件を整理し、それらを満たすための最適な技術は何なのかについて考えます。
加えてドキュメントサイトのユーザビリティや生成AI活用のために注意したいポイントなどについても解説します。

私が2021年に公開して、現在もシェアが続いている「俺流レスポンシブコーディング」は、当時現役だったIEのためにほぼメディアクエリに依存した実装の紹介となっていました。

しかし、IEがサポート終了した現在では、grid, min(), max(), clamp(), コンテナクエリといったレスポンシブコーディングにおける「ゲームチェンジャー」的な機能が広く利用でき、メディアクエリへの依存度を大きく下げることが可能となりました。

このトークでは、これらのモダンなCSS機能を駆使し、「メディアクエリは適した場面でのみ使用する」ことを目指す、Intrinsicなレスポンシブコーディングの手法を紹介します。

また、progress(), スタイルクエリ, if(), Anchor Positioningなど、将来のレスポンシブコーディングをさらに進化させる機能についても予習として解説します。

「HTMLって単なるマークアップ言語？JavaScriptがないと動的なUIは作れない？」そんな固定観念は、もう捨ててください！
実はHTMLはここ数年で革命的な進化を遂げ、かつてないほど表現力豊かで強力な言語になっています！これまでJavaScriptの実装が必須だったポップアップやモーダル、複雑なインタラクション、パフォーマンス最適化など、多くのことがHTMLだけで、宣言的かつシンプルに実現できるようになりました。
本トークでは、そんなモダンHTMLの持つ真の力を凝縮してお届けします。