3月15日に、フロントエンドコミュニティ UIT の19回目となるミートアップ UIT Meetup vol.19『デザインシステムのリアル』を開催しました。本記事では、イベントの内容について振り返っていきます。
なお、本編のアーカイブについては以下の YouTube 動画より閲覧が可能となっております。まだ見ていないかた、見逃したかたはぜひ視聴いただければと思います。本記事では、各セッション紹介でチャプターへのリンクを貼り付けているため、特定のトークから再生を始めることも可能です。
YouTube: https://www.youtube.com/watch?v=poMrzn_2wLY
UITとは？
UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共催など、LINE に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動しています。
ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。現在は UIT Meetup の開催以外にも、LINE Engineering Blog での記事の公開や、Podcast「UIT INSIDE」を配信しています。
過去にはVue.jsの最新情報をキャッチアップする「Vue三昧」、昨今のワークスタイルの変化とエンジニアとの関係について考える「The new normal for frontend」など、最新技術の情報から、技術以外のテーマまで幅広く取り扱っています。ぜひ、次回や過去イベントについてもこちらから確認してみてください。
当日の様子
今回は3つのセッションとフリートークをお届けしました。
Session 1『デザインシステムを作る意味あるの？』
12:52 より
最初のセッションは、LINE の UIT の Alan さんにデザインシステムをまだ持たないプロジェクトや会社はそれを導入する際に組織の規模や持っているリソースに合わせてどういう選択肢が一番合うのかを紹介していただきました。
デザインシステムの導入にあたって、OSS のデザインシステムや OSS のコンポーネントライブラリを採用した場合やフルスクラッチ実装で実装した場合のメリットとデメリットについて整理して説明していただきました。そしてチームの規模に応じてそれぞれの選択肢がどれぐらいおすすめかを紹介していただきました。
デザインシステムを作るのにアクセシビリティ専門メンバーが必要と言及してくれるの心強いな #uit_meetup
— やまのく (@yamanoku) March 15, 2023
デザインシステムを一から自前で作るかはもう一度ちゃんと検討してみようと思った
— とよへい (@t0yohei) March 15, 2023
#uit_meetup
Session 2『SmartHR Design Systemのシステム』
42:28 より
続いて2つ目のセッションは SmartHRの ibulog さんより、デザインシステムを便利に利用してもらうために、またデザインシステムそのものの運用負荷を低減するためにやってきたことを紹介していただきました。
SmartHR のデザインシステムはデザイナのためだけでなく、デザイン、エンジニアリング、UX ライティングなどプロダクト開発に必要なものすべてが対象にしているそうです。
また開発者にとってより使いやすいデザインシステムとなるように、Storybook をデザインシステムに埋め込むなどの工夫もされているそうでした。
#uit_meetup
— Alan Dávalos (@AlanGDavalos) March 15, 2023
「デザインのためじゃないデザインシステム」
いい話だ
Session 3『真の scalable を目指した Web Components design system の失敗と今後』
1:06:16 より
最後のセッションはメルカリの Engineering Manager の Yutaro さんより、Web Components 製のデザインシステムの課題や今後の design system、別の技術スタックに移行する際に発生している難しさについてお話していただきました。
Web Components 特有の様々な問題に対する workaround として ShadowDOM を使わず LightDOM で実装する方針を選択したり、SEO や SSR などの課題があることを紹介していただきました。
また移行先である React での書き換えも容易ではないとのことでした。
あーShadow DOMという概念が生まれたので従来のものはLight DOMって呼ぶのか #uit_meetup
— wtnabe, yet another yak shaver (@wtnabe) March 15, 2023
ShadowDOMを使わず
— おこじょ (@okojo_designer) March 15, 2023
LightDOMで実装する
デジャヴのように繰り返される
#uit_meetup
フリートーク
1:29:10 より
全てのセッションが終わったあとはフリートークを開催しました。
登壇者同士で各社のデザインシステムの困りごとに関する質問や情報共有を行いました。
確かに開発急ぐからって想定外の使われ方するのあるあるな気がする。
— りもざ@フロントエンドになりたい (@f0lst_um) March 15, 2023
#uit_meetup
広く使ってもらうようにすることでステークホルダーが多くなって、社内政治が生まれるっていう自分の足を撃ちに行ってる感がなきにしも...w#uit_meetup
— とよへい (@t0yohei) March 15, 2023
おわりに
今回で19回目となる UIT Meetup は各社の取り組みを通じてデザインシステムのリアルな話を行いました。
このイベントがデザインシステムを運用している方や採用しようとしている方に有益な情報になれば幸いです！
発表いただいたみなさま、そして視聴いただいたみなさまありがとうございました！
なお、今回の UIT Meetup の Aftershow を UIT INSIDE で来週公開する予定です。ぜひそちらもご視聴ください！