Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンドエンジニアが変える現場のモデリング意識/modeling-awaren...

uggds
July 06, 2022

 フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers

uggds

July 06, 2022
Tweet

More Decks by uggds

Other Decks in Programming

Transcript

  1. 自己紹介 宇賀神 誠也(UGA @uggds) • 前職はSIer@TISでサーバーサイドメインのエンジニア • フロントエンドエンジニアに転身と同時に独立、 フリーランスで受託開発6年目 •

    兼業で、現在スタートアップのCTOとしても活動中 スタートアップの方 受託開発で参画している方(数十人の中の1人) CTO CEO
  2. $MJDLNF 想定した表示 目的のものを 見つける 想定した操作 想定した遷移 従来は UI設計だけだった 1. ユーザーが想定した表示をする

    2. ユーザーが目的のものを見つけることができる 3. ユーザーが想定した操作ができる 4. ユーザーが想定した状態遷移をする Ϣʔβʔ フロントエンドが解決したいユーザーの関心事
  3. $MJDLNF 想定した表示 目的のものを 見つける 想定した操作 想定した遷移 JSライブラリの進化で ロジックがかけるようになり 状態遷移も含めて フロントエンドの関心事になった

    1. ユーザーが想定した表示をする 2. ユーザーが目的のものを見つけることができる 3. ユーザーが想定した操作ができる 4. ユーザーが想定した状態遷移をする Ϣʔβʔ フロントエンドが解決したいユーザーの関心事
  4. $MJDLNF 想定した表示 目的のものを 見つける 想定した操作 想定した遷移 Ϣʔβʔ フロントエンドが解決したいユーザーの関心事 サーバー API

    例えばSPAなどではバックエンドが表示を補完するため だけに存在するような場合もあり フロントエンドが解決する領域が広く複雑になった => UI設計だけでなくソフトウェア設計が必要
  5. コンポーネント分割の注意点 どの粒度でも コンポーネント分割できるが 「見た目の粒度」で分割すると失敗する Atomic Design Atomic Designという有名な分割手法 があり、画面を5つの粒度で分割する 概念があるが

    何を原子?分子?有機体?にするか など解釈がまちまち かえってコミュニケーションコストが 高くなったり、無駄なものを作る可能 性がある
  6. 「見た目の粒度」以外に意味をつける GUI的に関心のある 単一要素 GUI的に関心のある 複数要素 ドメインモデル こちらが意図した 箇所に誘導する ユーザが求める情報 をページにまとめる

    原子 分子 有機体 テンプレート ページ サービスや業務に関心を持たない GUI要素のまとまり (リンク、ボタン、フォーム) サービスや業務に関心を持つ ドメイン要素のまとまり ちゃんと意味づけをすれば Atomic Design でもやれる
  7. 「見た目の粒度」以外に意味をつける GUI的に関心のある 単一要素 GUI的に関心のある 複数要素 ドメインモデル こちらが意図した 箇所に誘導する ユーザが求める情報 をページにまとめる

    サービスや業務に関心を持たない GUI要素のまとまり (リンク、ボタン、フォーム) サービスや業務に関心を持つ ドメイン要素のまとまり そしたらもう Atomic Design じゃなくて良くない? GUI モデル ページ レイアウト
  8. デザインシステム本に書かれていたこと ①そのプロダクトの目的と価値は何か? Webサイトの対象ユーザーとその目的、ニーズ、動機を理解しよう! ②デザインで解決したい課題は何か? デザインで何を解決しようとしているのかを明らかにしよう! ③デザイン原則 「らしさ」を表す指針となるシンプルなフレーズを定義しょう! ④どうやって機能パターンを切り出すか 目的達成に向けて、主にどのような行動をユーザーに促したいかを 考え、どの粒度でパターンを分割をするか。

    ⑤どうやって認知パターンを切り出すか 誰にどのように認知して欲しいかについて考える。 (華やかで洗練されたもの?、真面目な雰囲気?) さらに、それを実現する手段についても考える (手書き風?イラスト?写真?白黒?) ⑥共通言語とデザインパターンの共有方法 上記で考えた機能パターンと認知パターンをどうやって、チーム で共有するか
  9. デザインシステム本に書かれていたこと ①そのプロダクトの目的と価値は何か? Webサイトの対象ユーザーとその目的、ニーズ、動機を理解しよう! ②デザインで解決したい課題は何か? デザインで何を解決しようとしているのかを明らかにしよう! ③デザイン原則 「らしさ」を表す指針となるシンプルなフレーズを定義しょう! ④どうやって機能パターンを切り出すか 目的達成に向けて、主にどのような行動をユーザーに促したいかを 考え、どの粒度でパターンを分割をするか。

    ⑤どうやって認知パターンを切り出すか 誰にどのように認知して欲しいかについて考える。 (華やかで洗練されたもの?、真面目な雰囲気?) さらに、それを実現する手段についても考える (手書き風?イラスト?写真?白黒?) ⑥共通言語とデザインパターンの共有方法 上記で考えた機能パターンと認知パターンをどうやって、チーム で共有するか エンジニアが読んでも面白く、 デザインシステムとシステム設計は通じるところがある! と感じた