Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

sakito
September 21, 2023

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

sakito

September 21, 2023
Tweet

More Decks by sakito

Other Decks in Design

Transcript

  1. デザイナーとエンジニアで「機能」焦点を当てる - 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/
  2. デザイナーとエンジニアで「機能」焦点を当てる - 一緒にドキュメントを書く ‘ ドキュメントと機能コンポーネントがあることで一種のコンポーネントライブラリが作成できX ‘ コンポーネントライブラリやデザインシステムは1つだけである必要はなp ‘ プロダクト全体を包括する全体的なコンポーネントライブラリ、デザインシステd ‘

    各プロダクト毎に存在するローカルのコンポーネントライブラリ、デザインシステd ‘ ドキュメントと機能セットができることで、全体と各チームのローカルの行き来が可能になる 参照元:Design System Tiers 
 https://medium.com/eightshapes-llc/design-system-tiers-2c827b67eae1
  3. デザイナーとエンジニアで「機能」焦点を当てる - 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/