$30 off During Our Annual Pro Sale. View Details »

UIコンポーネントライブラリをうまく使うためにできること / components-with-designer

mottox2
September 21, 2023

UIコンポーネントライブラリをうまく使うためにできること / components-with-designer

mottox2

September 21, 2023
Tweet

More Decks by mottox2

Other Decks in Technology

Transcript

  1. UIコンポーネントライブラリを

    うまく使うためにできること
    フロントエンドの開発生産性〜Online Conference〜 @mottox2

    View Slide

  2. @mottox2
    たまにウェブフロントエンドエンジニアなUIデザイナー

    View Slide

  3. UIデザイナーとフロントエンドエンジニア間での見方の違い

    認識をあわせることで得られるメリットを考える
    今日は の事例を話します

    View Slide

  4. 本LTの前提
    Not for meに感じる人もいると思います
    小規模チーム
    シングルプロダクト
    C向けアプリ
    マルチプロダクト
    B向けアプリ
    大規模

    View Slide

  5. そもそもコンポーネントライブラリを使っている?
    1. 使わず、
    アプリ内に直接書いている

    2. 使っている

    3. 社内共通ライブラリを作って使っている

    View Slide

  6. UIライブラリの導入
    € B向けとか、
    世界観を要求されない場面で有i
    W 少ないインプットでアウトプットを得た`
    W 統一感・アクセシビリティがある程度担保されF
    € ありものを入れるだけで満足してないr
    € デザイナーの視点も反映して導入すると生産性に効く?
    Web3感を出したい!みたいな

    View Slide

  7. 避けたい未来
    8 技術的な都合だけで進めてしまv
    8 デザイナーや偉い人からの
    「なんかダサい」
    といった
    理由でフロントエンドをリプレースする未e
    8「なんかダサいね」
    と言いつつ、
    やる気不十分で開発・
    デザインし続ける未e
    8 初速がよくても短期間でこうなると生産性は高くない

    View Slide

  8. うまく使うためのポイント
    1. UIライブラリ自体の選定

    2. ライブラリのテーマ設定

    3. デザインファイルへの反映

    View Slide

  9. UIライブラリ自体の選定
    依存するライブラリ、
    コンポーネントの充実度、
    スターや利用者数を見て採用を判断しよう
    UI自体のトンマナが古くないか、
    足りないコン
    ポーネントをデザインしやすいかが気になる
    エンジニア
    デザイナー

    View Slide

  10. ライブラリのテーマ設定
    導入してコンポーネントが使えたらそれで満足
    そもまま使うと微妙な箇所があって直したい

    けどどこをいじれるかわからない
    エンジニア
    デザイナー
    サービスロゴの色やグラデをボタンで使いたい、日本語フォントが入ると見た目が悪い

    View Slide

  11. デザインファイルへの反映
    導入したテーマに沿った配色をしてほしい、
    4pxグリッドだと実装しやすいなー
    どこをいじれるかわからない、
    もやもやする

    何をデザインに反映すればいいかわからない
    エンジニア
    デザイナー

    View Slide

  12. 実例
    入れたものではなく、
    入れる際にエンジニアデザイナーの視点で

    それなりに満足できる妥協点を目指すことが重要と考えています。

    View Slide

  13. shadcn-uiを選定
    y ニュートラルなUIがよY
    y 足りないコンポーネントをデザインしやすい

    外部UIコンポーネントを追加してもなじませやすY
    y 多分一から作っても似たような見た目になりそ$
    y コンポーネントの種類は足りないけど目をつぶっ'
    y(正確にはコンポーネントライブラリではない)

    View Slide

  14. shadcn-uiを選定
    default new-york

    View Slide

  15. shadcn-uiのテーマ設定
    p 設定箇所を確認し、
    newyorkというテーマを利9
    p newyorkはdefaultと比べてスペーシングとフォントサイ
    ズが小さめに作られている。

    View Slide

  16. アイコンはMaterial Symbolsを利用
    – 標準ではRadix Iconsだったが、
    小さなサイズ用なのに加
    えて種類が少なくて運用が大変そP
    – VariableFontとして提供されているMaterial Symbols
    に置き換え“
    ( 種類も多く、
    Figmaプラグインもよい

    View Slide

  17. アイコンはMaterial Symbolsを利用
    weight: 100 weight: 300 weight: 600 filled, weight: 300
    t VariableFontなのでアプリにあったものを選べる

    View Slide

  18. 微妙な箇所を修正
    B 日本語を入れると違和感の出る箇所を修'
    B 行間や太さに違和感が出る箇所の対
    B スペーシングに違和感のある場所の対
    B 割れ窓を塞ぎたい

    View Slide

  19. デザインファイルへの反映
    shadcn/uiが利用している
    CSS VariablesをFigmaの
    デザインファイルに登録。

    デザインする際に、
    同じ値を
    使う。

    View Slide

  20. 導入してみた感想
    e コスパよくそれなりに満足のいくコンポーネント基盤が
    出来て良さそう、
    他のデザインに時間を使えてい
    e それなりに長期間耐えうるものになりそうな予I
    e ライブラリに学習コストをかける必要がある。

    View Slide

  21. おわりに
    i 単純に効率が良く進めるだけでなく納得感を持てる8
    i コンポーネントライブラリだけでこれだけの観点があe
    i デザイナーの視点も入れることで質が得られる8
    i デザイナーのやる気が高まる→仕事の質があがる→
    アプリに対する愛着が湧く→生産性があがる

    View Slide

  22. Thank you!

    View Slide