UIコンポーネントライブラリをうまく使うためにできることフロントエンドの開発生産性〜Online Conference〜 @mottox2
View Slide
@mottox2たまにウェブフロントエンドエンジニアなUIデザイナー
UIデザイナーとフロントエンドエンジニア間での見方の違い認識をあわせることで得られるメリットを考える今日は の事例を話します
本LTの前提Not for meに感じる人もいると思います小規模チームシングルプロダクトC向けアプリマルチプロダクトB向けアプリ大規模
そもそもコンポーネントライブラリを使っている?1. 使わず、アプリ内に直接書いている2. 使っている3. 社内共通ライブラリを作って使っている
UIライブラリの導入 B向けとか、世界観を要求されない場面で有iW 少ないインプットでアウトプットを得た`W 統一感・アクセシビリティがある程度担保されF ありものを入れるだけで満足してないr デザイナーの視点も反映して導入すると生産性に効く?Web3感を出したい!みたいな
避けたい未来8 技術的な都合だけで進めてしまv8 デザイナーや偉い人からの「なんかダサい」といった理由でフロントエンドをリプレースする未e8「なんかダサいね」と言いつつ、やる気不十分で開発・デザインし続ける未e8 初速がよくても短期間でこうなると生産性は高くない
うまく使うためのポイント1. UIライブラリ自体の選定2. ライブラリのテーマ設定3. デザインファイルへの反映
UIライブラリ自体の選定依存するライブラリ、コンポーネントの充実度、スターや利用者数を見て採用を判断しようUI自体のトンマナが古くないか、足りないコンポーネントをデザインしやすいかが気になるエンジニアデザイナー
ライブラリのテーマ設定導入してコンポーネントが使えたらそれで満足そもまま使うと微妙な箇所があって直したいけどどこをいじれるかわからないエンジニアデザイナーサービスロゴの色やグラデをボタンで使いたい、日本語フォントが入ると見た目が悪い
デザインファイルへの反映導入したテーマに沿った配色をしてほしい、4pxグリッドだと実装しやすいなーどこをいじれるかわからない、もやもやする何をデザインに反映すればいいかわからないエンジニアデザイナー
実例入れたものではなく、入れる際にエンジニアデザイナーの視点でそれなりに満足できる妥協点を目指すことが重要と考えています。
shadcn-uiを選定y ニュートラルなUIがよYy 足りないコンポーネントをデザインしやすい 外部UIコンポーネントを追加してもなじませやすYy 多分一から作っても似たような見た目になりそ$y コンポーネントの種類は足りないけど目をつぶっ'y(正確にはコンポーネントライブラリではない)
shadcn-uiを選定default new-york
shadcn-uiのテーマ設定p 設定箇所を確認し、newyorkというテーマを利9p newyorkはdefaultと比べてスペーシングとフォントサイズが小さめに作られている。
アイコンはMaterial Symbolsを利用 標準ではRadix Iconsだったが、小さなサイズ用なのに加えて種類が少なくて運用が大変そP VariableFontとして提供されているMaterial Symbolsに置き換え( 種類も多く、Figmaプラグインもよい
アイコンはMaterial Symbolsを利用weight: 100 weight: 300 weight: 600 filled, weight: 300t VariableFontなのでアプリにあったものを選べる
微妙な箇所を修正B 日本語を入れると違和感の出る箇所を修'B 行間や太さに違和感が出る箇所の対B スペーシングに違和感のある場所の対B 割れ窓を塞ぎたい
デザインファイルへの反映shadcn/uiが利用しているCSS VariablesをFigmaのデザインファイルに登録。デザインする際に、同じ値を使う。
導入してみた感想e コスパよくそれなりに満足のいくコンポーネント基盤が出来て良さそう、他のデザインに時間を使えていe それなりに長期間耐えうるものになりそうな予Ie ライブラリに学習コストをかける必要がある。
おわりにi 単純に効率が良く進めるだけでなく納得感を持てる8i コンポーネントライブラリだけでこれだけの観点があei デザイナーの視点も入れることで質が得られる8i デザイナーのやる気が高まる→仕事の質があがる→アプリに対する愛着が湧く→生産性があがる
Thank you!