Webエンジニアのデザイン実装との付き合い方

Transcript

1. Web エンジニアの デザイン実装との向き合い方 2021/11/10 Sendai Front-End User Group
2. 自己紹介 江口 拓弥 インフラ知識が壊滅的なWebのフロントエンド開発者 2018年に東京から仙台にお引越ししてきました 2019年から新規事業開発やってます akathea_
3. 弊社の新規事業開発の開発フロー 1. デザイナーが Figma でデザイン 2. エンジニアが Vue や React で実装 3. エンジニアが機能開発 4. エンジニアが機能レビュー 5. デザイナーがデザインレビュー 6. リリース
4. 弊社の新規事業開発の開発フロー 1. デザイナーが Figma でデザイン 2. エンジニアが Vue や React で実装 3. エンジニアが機能開発 4. エンジニアが機能レビュー 5. デザイナーがデザインレビュー 6. リリース
5. Figma / XD 使ってますか？
6. 例えば Figma でこんなカンプが用意されていたとして
7. これだけの情報が読み取れる Inspectタブに移動すると… 縦横、角丸の量がわかる！ 色もわかる！ 影の適用量、オフ セットもひと目で！
8. これだけの情報が読み取れる CSSで見たほうがわか りやすい場合はこっち を確認してもOK
9. これだけの情報が読み取れる フォント情報も確認できる
10. めっちゃ便利！
11. ...なのか？
12. 「書いてあるとおりに実装するだけ」では品質は上がらない
13. なぜこのデザインになったのかを理解する方が重要 実装の正しさよりもこっちの情報が大切
14. デザイナーは神ではないので、時には間違ってしまう時もある
15. デザイナーは神ではないので、時には間違ってしまう時もある 安全操作に破壊操作色が適用されてしまっている カンプにない outlined なボタンが爆誕している Human Interface Guidelines 的に逆
16. うちのデザイナー、Figmaにこんな情報書き込んでくれないよ・・・

17. デザイナーに求めよう エンジニアが実装しやすいようなファイル/カンプにしてもらおう エンジニアが実装しやすい → 爆速デリバリー可能 → ユーザーへの価値提供の高速化 ユーザーのことを考えて行動しよう
18. デザイナーが作った仕様に従わないといけないんじゃないの？

19. デザイナーに求めよう エンジニアが違和感を感じていることは利用者も違和感を感じる 実装しているからこそ感じる違和感をデザイナーに伝えよう。 それは良いUIなのか？いいUXを産むのか？一緒に考えよう。 ユーザーのことを考えて行動しよう
20. デザインに口出しできるほど見た目のことはよくわからん

21. エンジニアも一定レベルでデザインのお作法を押さえておこう 正解のある世界では、基本に忠実であれ Web「アプリケーション」であれば、正解のデザインが存在する。 （Material Design、OOUI、Human Interface Guidelines 等） →エンジニアが十分指摘できる世界 正解のない世界では、テストと採点をしよう Web「サイト/メディア」の場合、正解は１つではない。 GA、ABテスト、ヒューリスティック分析を使って、正解を見つけていこう。 →デザイナーやマーケの仕事だが、エンジニアがテスト・採点に貢献はできる
22. 最後に、デザイナーに知ってほしいこと （時間があれば…）
23. 1. Pixel perfect is Dead... マルチスクリーンの世界では実現不可であることを理解しよう Figma / XD で指定した通りになっていない場合 どこが妥協できない（=価値を毀損しているのか）を 明確にエンジニアに伝えよう （あらかじめドキュメント起こしたりカンプにコメントしておこう） 求めているルックアンドフィールをエンジニアに共有しよう どうしてもカンペキに仕上げたい場合は デザイナーがコーディングすることをお勧めします
24. 2. Solid Layout is Dead soon... レスポンシブデザイン時代のカンプのあり方を考えよう 1024px と 375px のデザインだけあっても中間はどうする？ （タブレット、iPhone SE / Max / Plus は？） 大雑把でいいので、状態間のルックアンドフィールが 確認できる資料があると成果物のイメージ共有に役立ちます。 わからないことはエンジニアを質問攻めにしよう！ & エンジニアに求めよう！ & 意思決定をエンジニアが手助けしよう！（手助けする！と宣言しよう）
25. まとめ
26. いいデザインといい実装 = 良いUI/UX UI実装とデザインの境界線をあえてぼかす フロントエンド（特にプレゼンテーション層の実装者）はデザイナーを、 デザイナーはフロントエンドエンジニアのことを理解する努力をしよう。 隣接する職域同士です。反発しあうのではなく、手を取り合いましょう。 ユーザーのことを考えて行動しよう（本日３回目）
27. おわり