BtoBデザイナーによるBtoBデザイナーのためのLT勉強会にて発表したLT資料 https://b2b-designer-lt-1.peatix.com/ エンジニアが画面設計して感じた点、エンジニアと一緒に仕事をするために身につけておくと良いスキルや、心構えなどをデザイナーの方向けに語りました

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. 「このデザイン実現できません」の行間
裏側のデータ構造に起因することが９割
非機能要件を満たすコストとのトレードオフ
（速度性能、メンテナンス性能、etc）

13. プロダクトにとっては
どちらも大切
(性質・状況にはよる)
鵜呑みにする必要はない

14. ただし・・・
開発が進めば進むほど手戻りの
ダメージは双方にとって大きい

15. Ⅲ. エンジニアと”協同”して
サービスをつくる

16. プログラム開発にはいるまえに
ワイヤーの時点で詳細まで
エンジニアと話し合う

17. プログラム開発にはいるまえに
要素に過不足は
ないか？
複数選択か？
単一選択か？
データが存在しない
時はどうする？
この条件は
実現できるか？
この条件は実現できるか？

18. (基本的には)
画面はデータベースの投影である
 データベース（≠SQL）とは何か
 データ構造についての最低限の知識
（テーブル、リレーション、etc）
データベースを知ることでエンジニアとのやり取りも
スムーズになる

19. 正しい使い方を簡単に、誤った使い方を困難に
良いインタフェースとは次の2つの条件を満たすインタフェー
スのことです。
正しく使用する方が操作ミスをするより簡単
誤った使い方をすることが困難
妥協しないポイントを定める
中途半端に作ってUXを著しく損ねるくらいなら
機能単位でリリース見送りも検討する

20. エンジニアもデザイナーも
「最高のサービスを作る」
という同じ目的を持つ仲間
お互い歩み寄りながら進もうZE☆
いちばん大切なこと

21. Thank you