エンジニアと"協同"してサービスをつくる

BtoBデザイナーによるBtoBデザイナーのためのLT勉強会にて発表したLT資料
https://b2b-designer-lt-1.peatix.com/

エンジニアが画面設計して感じた点、エンジニアと一緒に仕事をするために身につけておくと良いスキルや、心構えなどをデザイナーの方向けに語りました

Transcript

1. エンジニアと”協同”して サービスをつくる
2. Goemon @Allied Architects Inc. Web UX Engineer PHP / Laravel / MySQL / AWS etc. @yashikawa3 Follow Me!!♡
3. I. 直近のお仕事紹介 II. デザイナー vs エンジニア III. エンジニアと協同してサービスをつくる Agenda
4. あらためて⾃⼰紹介 ü Web開発10年くらい ü プログラム開発がメイン ü PMもやる ü デザインは素⼈同然
5. I . 直近のお仕事紹介
6. 担当範囲 ü プロジェクトマネジメント ü 要件定義 ü インフラ設計・構築 ü データベース設計・構築 ü アーキテクチャ設計 ü バックエンドプログラム開発 ü 画⾯設計
7. 突然ですが質問 画⾯設計(構成 / 要素決め)は誰がやってますか？ 1. デザイナー 2. エンジニア 3. プロダクトマネージャー 4. その他
8. 画⾯設計 ü ワイヤーフレーム作り Cacooべんり ⾃分 ：構成、要素決め デザイナ：Webデザイン
9. 画⾯設計 ↓ デザイン ↓ プログラム開発 この⼯程の⼿戻りが少ない
10. Ⅱ. デザイナー vs エンジニア ͜ͷσβΠϯ ࣮ݱ೉͍͠Μ Ͱ͢έυʂʁ
11. 思考プロセスの違い デザイナー どう伝えるか が主な関⼼事 エンジニア どう作るか が主な関⼼事
12. 「このデザイン実現できません」の⾏間 n裏側のデータ構造に起因することが９割 n⾮機能要件を満たすコストとのトレードオフ （速度性能、メンテナンス性能、etc）
13. プロダクトにとっては どちらも⼤切 (性質・状況にはよる) 鵜呑みにする必要はない
14. ただし・・・ 開発が進めば進むほど⼿戻りの ダメージは双⽅にとって⼤きい
15. Ⅲ. エンジニアと”協同”して サービスをつくる
16. プログラム開発にはいるまえに ワイヤーの時点で詳細まで エンジニアと話し合う
17. プログラム開発にはいるまえに 要素に過不⾜は ないか？ 複数選択か？ 単⼀選択か？ データが存在しない 時はどうする？ この条件は 実現できるか？ この条件は実現できるか？
18. (基本的には) 画⾯はデータベースの投影である ü データベース（≠SQL）とは何か ü データ構造についての最低限の知識 （テーブル、リレーション、etc） データベースを知ることでエンジニアとのやり取りも スムーズになる
19. 正しい使い⽅を簡単に、誤った使い⽅を困難に 良いインタフェースとは次の2つの条件を満たすインタフェー スのことです。 ü正しく使⽤する⽅が操作ミスをするより簡単 ü誤った使い⽅をすることが困難 妥協しないポイントを定める 中途半端に作ってUXを著しく損ねるくらいなら 機能単位でリリース⾒送りも検討する
20. エンジニアもデザイナーも 「最⾼のサービスを作る」 という同じ⽬的を持つ仲間 お互い歩み寄りながら進もうZE☆ いちばん⼤切なこと
21. Thank you