デザインとフロントエンドの最先端！ 最新ツールを駆使したデザインから実装、そしてプロトタイプまでのシームレスな流れ【第9回】

Transcript

1. 最新ツールを駆使したデザインから実装、そして
   プロトタイプまでのシームレスな流れ
   SIer/情シス向け「ITとデザインは仲良し︕」シリーズ 第9回
   2021/12/9
   デザインとフロントエンド最先端！
   

   View Slide

2. 1. スピーカーの紹介
   2. 登場⼈物（ツール）のご紹介
   3. デザイン・実装課題
   4. デザインから実装までのプロセス
   5. まとめ
   今⽇の内容
   

   View Slide

3. ● Moreno Quiroga Jacobo => モレノ キロガ ハコボ
   ● コロンビア（南⽶）出⾝で2013年来⽇
   ● デザインの背景を持つエンジニア
   ● Fixel株式会社でフロントエンド実装、デザインシステム実装に努める
   スピーカー
   

   View Slide

4. 今⽇の登場⼈物（ツール）のご紹介
   

   View Slide

5. UXHub
   デザインシステム制作と
   運用のための
   SaaSプラットフォーム
   Fixel Design System
   業務システム向け汎用的
   デザインシステムの
   テンプレート
   UXPin Merge
   実装したUIコンポーネントを使
   ったプロトタイピングツール
   &
   https://www.uxpin.com/merge
   https://uxhub.tokyo
   UXPin Merge
   https://uxhub.tokyo
   &
   今⽇使⽤するツール
   

   View Slide

6. ● Fixel Design Systemの略
   ● Fixel株式会社が開発している汎⽤的なデザインシステムのテンプレート
   ● 汎⽤的なデザインガイドラインと再利⽤できるUIコンポーネントのコードを
   提供
   FDSとは
   

   View Slide

7. ● デザインシステムを⼿軽に制作・運⽤できるSaaSプラットフォーム
   ● FDS、または他の既存のデザインシステムを複製してカスタマイズすること
   で、デザインシステムの量産ができる
   ● ⾃由にカスタマイズ可能
   ● Figmaのスタイルをインポートすることでデザインを変更
   ● UXHubのUIでデザイントークンを変更することでデザインを変更
   ● デザインシステムの管理に必要な機能を提供
   ● 履歴管理
   ● バージョン管理
   ● UIコンポーネントのダウンロードなど
   UXHubとは
   

   View Slide

8. ● コーディングされたUIコンポーネントを使って⼿軽にプロトタイピングを作
   成できる
   ● 既にあるUIコンポーネントを使って、デザイナーだけではなく、ビジネスパ
   ーソンやエンジニアでもプロトタイプを作成可能
   UXPin Mergeとは
   

   View Slide

9. デザイン・実装課題
   ● FDSをカスタマイズして、UXPin Mergeに使えるようにする
   ● UXPinで作った画⾯をコードに使う
   

   View Slide

10. デザインから実装までのプロセス
    

    View Slide

11. ❶
    デザインの
    カスタマイズ
    ❷
    UIコンポーネントに
    デザインの変更を
    適用
    import
    ❸
    プロトタイピング
    実コード
    に適用
    ❹
    UIコンポーネント
    の構成
    ❺
    UIコンポーネント
    プロダクト
    デザイン
    適用
    

    View Slide

12. ❶ デザインのカスタマイズ︓
    FDSのFigmaテンプレートを使ってデザインをカスタマイズする
    その流れ：
    1. FDSのFigmaファイルを複製する。
    2. Figma上でDesign Tokensを好きなように変更する。
    <実装/>
    

    View Slide

13. ❷ UIコンポーネントにデザインの変更を適⽤︓
    UXHubにデザイントークンを登録する
    その流れ：
    1. UXHub上でFDSを複製する。
    2. 「Figma連携」ツールを使用して、デザイントークンをインポートする。
    <実装/>
    

    View Slide

14. ❸ プロトタイピング︓
    UXPin Mergeと繋いだFDSを更新して、プロトタイピング
    その流れ：
    1. FDSが入ったUXPinのboilerplateを更新する
    2. デザイナーはFDSのコンポーネントの見た目や属性を変えたり、画面上に配
    置して、プロトタイプを作成
    3. エンジニアはプレビューのSpecのタブから、実装に必要なコードを入手
    <実装/>
    

    View Slide

15. ❹ UIコンポーネントの構成︓UXPin
    ❺ UIコンポーネント︓UXHub
    プロダクトのコードに反映：
    1. UXHubからUIコンポーネントを入手して反映
    2. UXPinからUIコンポーネントのレイアウトされたコードを入手して反映
    <実装/>
    

    View Slide

16. まとめ
    

    View Slide

17. ❶
    デザインの
    カスタマイズ
    ❷
    UIコンポーネントに
    デザインの変更を
    適用
    import
    ❸
    プロトタイピング
    実コード
    に適用
    ❹
    UIコンポーネント
    の構成
    ❺
    UIコンポーネント
    プロダクト
    デザイン
    適用
    

    View Slide

18. 今⽇お⾒せしたことは、
    ●
    FDS、UXHub、UXPin Mergeを駆使すると、ほぼノーコードでフロントエンドのコー
    ドが作成できる
    ●
    ただし、UXPin Mergeは事前準備をきちんとしておく必要はある
    ● デザイナーとエンジニアの密な協業が必要
    ●
    デザイナーとエンジニア間のハンドオーバーの課題を解決できる⽷⼝は⾒えてきた
    ●
    今回はデモのために全部繋いだけど、各ツールを適材適所に使うこともあり︕
    ● FDS︓デザインシステムのテンプレート
    ● UXHub︓デザインシステムの制作、管理を⼿軽に
    ● UXPin Merge︓誰でもプロトタイピング︕
    ●
    将来に期待︕
    

    View Slide

19. 最後に
    

    View Slide

20. 20
    Fixelのデザインシステムの作成・運⽤⽀援サービス
    • デザインシステムカスタマイズ
    • デザインシステム公開
    • デザインテーマ変更機能
    • コメントなどフィードバック
    • 公開・編集などの権限管理
    • バージョン管理・履歴管理
    UXHub
    デザインシステムプラットフォーム
    • 必要なガイドライン、UI部品が揃
    っている
    • 複製&カスタマイズすることで新
    しいデザインシステムを瞬時作成
    可能
    Fixel Design System
    業務システム向け汎用的
    デザインシステムのテンプレート
    • 多数の実績からのノウハウ
    • UXHubとFDSを有効活用し、費
    用低減・工期短縮
    プロフェッショナルサービス
    デザインシステム作成・運用支援
    ＋ ＋
    https://fixel.co.jp/lp/design-system/
    https://uxhub.tokyo
    

    View Slide

21. MAKE DESIGN EASY
    SIer/情シスのデザインパートナー
    Q&A
    

    View Slide

22. 最後に
    ●
    デザインシステムに興味があるデザイナーを募集しております。
    ●
    業務システムのUX/UIデザインに興味があるデザイナーを募集しています。
    ● 周りに興味のありそうな⽅に、
    是⾮ご紹介ください。
    ● 申し込みは弊社のウェブサイトから
    お願いします︕
    https://fixel.co.jp/blog/recruit-20210929/
    

    View Slide

23. MAKE DESIGN EASY
    SIer/情シスのデザインパートナー
    ありがとうございました︕
    アンケート記⼊のお願い
    

    View Slide