「機能」に対するデザインと開発の焦点を合わせる

Transcript

1. 「機能」に対するデザインと開発の焦点を合わせる フロントエンドの開発生産性〜Online Conference〜「これからのフロントエンドの未来」 生産性を高めるためにフロントエンドとデザインでそもそも議論したいこと
2. sakito サイボウズ株式会社 | Design Technologist 
 2019年に現職のサイボウズに中途入社しフロントエンドエキスパート チームに所属、2022年にデザインシステムチームを立ち上げ、2023年か ら自社製品であるkintoneのデザイン責任者とデザイン室のリーダーに なる。プロダクトと全社のデザイン組織づくりやプロセスの改善がいま のお仕事。犬が好き。 自己紹介
3. デザイナーとエンジニアで「機能」に対する焦点が異なる
4. デザイナーとエンジニアで「機能」に対する焦点が異なる デザイナー エンジニア 同じ機能を見ているが、
 焦点が異なると・・・
5. デザイナーとエンジニアで「機能」に対する焦点が異なるで起きる問題 p 機能の焦点が異なることでコンポーネントの切り口や独立性に齟齬が生まれY p エンジニアが考えてたコンポーネント設計と食い違… p データの取得単位やエラーを出す単位などに違いが生まれてくY p デザインされたものを実装するコストがあがってくY p リリースの遅延につながY p これらの焦点の違いは運用を重ねていくほど問題が浮き彫りになってくる
6. デザイナーとエンジニアで「機能」焦点を当てる
7. デザイナーとエンジニアで「機能」焦点を当てる - Atomic Designは悪くなかった Å 代表的なものとしてAtomic Designがある(いま推し進めたいというわけではない’ Å コンポーネントをAtoms,Molecules,Organismsに分け、これらを組み合わせて機能を作” Å できた機能を組み合わせるTempates,Pagesという概念もあ” Å これらのAtomsなどの概念は、デザイナーとエンジニアで粒度を合わせるための共通言語的なものだっ¶ Å ディレクトリ構成などが綺麗になるのはこれの副次的な効i Å うまくいかないの多くの場合に片方だけでやってしまうことがあ” Å デザイナー、エンジニアどちらかだけがAtomic Designを取り入れ” Å => 「機能」に対する焦点は合っていない => Atomic Design辛g Å Atomic Designの目的は自体は悪いものではなかった 引用元: 
 atomic design
 https://bradfrost.com/blog/post/atomic-web-design/
8. デザイナーとエンジニアで「機能」焦点を当てる - 一緒にドキュメントを書く i デザインができた段階で振る舞いと機能についてドキュメントを書くと認識が揃うコミュニ ケーションができt i デザイナーとエンジニアでコミュニケーションが発生する部分をテンプレートにしてお i インタラクションの挙動、機能が動作する、データ取得の単位...et— i 機能名や要素名へa i ドキュメントという中間生成物をきっかけにデザインと実装の観点を盛り込む デザイナー エンジニア ドキュメント エンジニア観点 デザイナー観点
9. デザイナーとエンジニアで「機能」焦点を当てる - 一緒にドキュメントを書く ‘ ドキュメントと機能コンポーネントがあることで一種のコンポーネントライブラリが作成できX ‘ コンポーネントライブラリやデザインシステムは1つだけである必要はなp ‘ プロダクト全体を包括する全体的なコンポーネントライブラリ、デザインシステd ‘ 各プロダクト毎に存在するローカルのコンポーネントライブラリ、デザインシステd ‘ ドキュメントと機能セットができることで、全体と各チームのローカルの行き来が可能になる 参照元：Design System Tiers 
 https://medium.com/eightshapes-llc/design-system-tiers-2c827b67eae1
10. デザイナーとエンジニアで「機能」焦点を当てる - Figma p Figmaのプロトタイプ機能でEventの発火などを 含んだ条件分岐ができるようになっX p デザイナーがFigmaで作ったUIに対して、エン ジニアがFigmaのプロトタイプを作ってみると 認識を合わせることができg p ノーコードで作成できるので、コードを書い たあとよりも認識の齟齬に気づいた時の手戻 りが早い場合があg p エンジニアもFigmaを使えるようになっておく とお得 参照元：Free Prototyping Tool: Build Interactive Prototype Designs | Figma
 https://www.figma.com/prototyping/
11. まとめ y デザイナーとエンジニアの焦点を合わせるのは、プロダクトを運用するにあたって、
 双方にメリットがあ1 y コミュニケーションを取るための共通言語をつくっていこう！ 詳しい話はこの後のディスカッションで...!!!