Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UIコンポーネントライブラリをうまく使うためにできること / components-with-...
Search
mottox2
September 21, 2023
Technology
7
3.9k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
September 21, 2023
Tweet
Share
More Decks by mottox2
See All by mottox2
もう一歩進めたい OG画像の動的生成
mottox2
7
2k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
7.3k
Figma Plugin公開までの壁を乗り越える
mottox2
3
3.6k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
720
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.9k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
670
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.2k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
33k
プレイヤー目線の技術ブランディング / personal branding
mottox2
4
4.6k
Other Decks in Technology
See All in Technology
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
260
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
620
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
2
220
初めてのDatabricks Apps開発
taka_aki
1
230
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
170
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
150
WEBサービスを成り立たせるAWSサービス
takano0131
1
200
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
110
Kubernetes self-healing of your workload
hwchiu
0
320
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
140
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
10
6.3k
旅で応援する✈️ NEWTが目指すコミュニティ支援とあたらしい旅行 / New Travel: Supporting by NEWT on Your Journey
mii3king
0
130
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
How GitHub (no longer) Works
holman
315
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Mobile First: as difficult as doing things right
swwweet
225
10k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
The Invisible Side of Design
smashingmag
302
51k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
The Cult of Friendly URLs
andyhume
79
6.6k
The Language of Interfaces
destraynor
162
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Transcript
UIコンポーネントライブラリを うまく使うためにできること フロントエンドの開発生産性〜Online Conference〜 @mottox2
@mottox2 たまにウェブフロントエンドエンジニアなUIデザイナー
UIデザイナーとフロントエンドエンジニア間での見方の違い 認識をあわせることで得られるメリットを考える 今日は の事例を話します
本LTの前提 Not for meに感じる人もいると思います 小規模チーム シングルプロダクト C向けアプリ マルチプロダクト B向けアプリ 大規模
そもそもコンポーネントライブラリを使っている? 1. 使わず、 アプリ内に直接書いている 2. 使っている 3. 社内共通ライブラリを作って使っている
UIライブラリの導入 B向けとか、 世界観を要求されない場面で有i W 少ないインプットでアウトプットを得た` W 統一感・アクセシビリティがある程度担保されF ありものを入れるだけで満足してないr
デザイナーの視点も反映して導入すると生産性に効く? Web3感を出したい!みたいな
避けたい未来 8 技術的な都合だけで進めてしまv 8 デザイナーや偉い人からの 「なんかダサい」 といった 理由でフロントエンドをリプレースする未e 8「なんかダサいね」 と言いつつ、
やる気不十分で開発・ デザインし続ける未e 8 初速がよくても短期間でこうなると生産性は高くない
うまく使うためのポイント 1. UIライブラリ自体の選定 2. ライブラリのテーマ設定 3. デザインファイルへの反映
UIライブラリ自体の選定 依存するライブラリ、 コンポーネントの充実度、 スターや利用者数を見て採用を判断しよう UI自体のトンマナが古くないか、 足りないコン ポーネントをデザインしやすいかが気になる エンジニア デザイナー
ライブラリのテーマ設定 導入してコンポーネントが使えたらそれで満足 そもまま使うと微妙な箇所があって直したい けどどこをいじれるかわからない エンジニア デザイナー サービスロゴの色やグラデをボタンで使いたい、日本語フォントが入ると見た目が悪い
デザインファイルへの反映 導入したテーマに沿った配色をしてほしい、 4pxグリッドだと実装しやすいなー どこをいじれるかわからない、 もやもやする 何をデザインに反映すればいいかわからない エンジニア デザイナー
実例 入れたものではなく、 入れる際にエンジニアデザイナーの視点で それなりに満足できる妥協点を目指すことが重要と考えています。
shadcn-uiを選定 y ニュートラルなUIがよY y 足りないコンポーネントをデザインしやすい 外部UIコンポーネントを追加してもなじませやすY y 多分一から作っても似たような見た目になりそ$ y コンポーネントの種類は足りないけど目をつぶっ'
y(正確にはコンポーネントライブラリではない)
shadcn-uiを選定 default new-york
shadcn-uiのテーマ設定 p 設定箇所を確認し、 newyorkというテーマを利9 p newyorkはdefaultと比べてスペーシングとフォントサイ ズが小さめに作られている。
アイコンはMaterial Symbolsを利用 標準ではRadix Iconsだったが、 小さなサイズ用なのに加 えて種類が少なくて運用が大変そP VariableFontとして提供されているMaterial Symbols
に置き換え ( 種類も多く、 Figmaプラグインもよい
アイコンはMaterial Symbolsを利用 weight: 100 weight: 300 weight: 600 filled, weight:
300 t VariableFontなのでアプリにあったものを選べる
微妙な箇所を修正 B 日本語を入れると違和感の出る箇所を修' B 行間や太さに違和感が出る箇所の対 B スペーシングに違和感のある場所の対 B 割れ窓を塞ぎたい
デザインファイルへの反映 shadcn/uiが利用している CSS VariablesをFigmaの デザインファイルに登録。 デザインする際に、 同じ値を 使う。
導入してみた感想 e コスパよくそれなりに満足のいくコンポーネント基盤が 出来て良さそう、 他のデザインに時間を使えてい e それなりに長期間耐えうるものになりそうな予I e ライブラリに学習コストをかける必要がある。
おわりに i 単純に効率が良く進めるだけでなく納得感を持てる8 i コンポーネントライブラリだけでこれだけの観点があe i デザイナーの視点も入れることで質が得られる8 i デザイナーのやる気が高まる→仕事の質があがる→ アプリに対する愛着が湧く→生産性があがる
Thank you!