Cookpad Techconf 2016/01/23 「今日なに作ろう」を支えるデザイン　ーエンジニアとの協業ー

1. 「今日なに作ろう」を
支えるデザイン
Mari kimura
2016/01/23
- エンジニアとの協業 -

2. 自己紹介
木村 真理 mari kimura
ユーザーファースト推進室 デザイナー
• 2006- デザイナー
• 2015/06- Cookpad
Cookpad iOS/Android Design
• パンとインターネットと青いものがすき
App Design/Web Design/DTP/HTML,Sass…

3. 自己紹介
＼エディタも青く躾けております／

4. 今日のお話
クックパッドにおける
デザイナー x エンジニアの
協業について
事例を共に紹介

5. アジェンダ
•ユーザーファースト推進室の役割
•エンジニアとの協業について
•まとめ

6. ユーザーファースト
推進室の役割

7. 15
クックパッドデザイナー
Designer

8. 15
Designer
クックパッドデザイナー
illustration
UI Design
HTML/CSS
Markup
Rails
Coding
Service
Design
Direction
定性・定量
調査
Visual
Design
iOS
Dev

9. ユーザーファースト推進室
クックパッド全体のサービスを、横断/俯瞰的に
捉えてユーザーファーストを加速させる
集客 さがす 新規会員獲得 のせる
デザイナー
ユーザーファースト推進室

10. ユーザーファースト推進室の役割
•クックパッドファンユーザーを増やす
•ユーザー体験向上のための新規開発・改善
•デザイン開発環境の整備
•デザイン手法・思想の啓蒙

11. ユーザーファースト推進室の役割
ユーザーファーストな
サービスとは？

12. ユーザーファーストなサービスとは
•ユーザが期待した通りの結果を
得ることができる
•ユーザがついつい夢中になってしまう
•人におすすめしたくなる

13. ユーザーファーストなデザイン
機能ではなく、
ストーリーで考える

14. ストーリーで考える
機能
• レシピ検索
• レシピ保存
ストーリー
「今日なに作ろう？」が決まる
今日の夕飯の献立
何度も作るお気に入りの
レシピをいつでも見返す
ことができる

15. ストーリーで考える
•機能にフォーカスすると目的を失いがち
•ユーザのどんな問題を解決できるのか
•「ユーザー」を主語にして考える

16. エンジニアとの
協業について
クックパッドの開発手法

17. クックパッドの開発手法
•仮説検証
•プロトタイピング
•デザインフレームワーク
•デザインレビュー
•定性・定量調査
And More …

18. クックパッドの開発手法
•仮説検証
•プロトタイピング
•デザインフレームワーク
•デザインレビュー
•定性・定量調査
And More …

19. クックパッドの開発手法
プロトタイピング

20. プロトタイピングの目的
•仮説検証
•アイデアを共有
•小さく・すばやく試せる
チーム/ユーザー
エンジニア工数を取らない

21. プロトタイピングの種類
•ペーパープロトタイピング
•デザインプロト
•アニメーションモック
•動画モック

22. 事例
動画自動再生UI実装時の
動画モック作成

23. 動画モック作成事例
動画自動再生テストのためのUI

24. 動画モック作成事例
通常のデザインプロトタイプに加え
動画による動作モックを作成

26. 動画モック作成事例
こういうの
作りたいす！
OK!
これなら実装
できそう
最高かよ…！
Engineer
Designer

27. プロトタイピング導入の利点
•開発の初期段階で
実現したい具体的なイメージを
チームに共有・確認できる
•実装後の手戻りがない

28. クックパッドの開発手法
デザインフレームワーク

29. デザインフレームワーク
•Sara
•iOS UI
•アイコンフォント
•オリジナル数字フォント
クックパッドUIデザインフレームワーク
iOS クックパッドフレームワーク
特売情報 価格表記専用フォント

30. デザインフレームワーク
•見出し・リスト・ボタンなどのUIパーツ
•変数名によるカラーマネジメント

33. 定義した変数名はスタイルガイドにも活用

34. アイコンフォント

35. アイコンフォント
•よく使うアイコン・シンボルをフォント化
画像リソースを書き出す必要がない
ファイルサイズの削減

36. クックパッドの開発手法
デザインレビュー
• GitHubによるデザインレビュー
• デザインリリースマネージャー

37. クックパッドの開発手法
GitHub issue による
デザインレビュー

38. GitHub デザインレビュー
•作成したデザインは実装前にGitHubに
issueを立てて、目的や背景、デザインの
意図などを説明して、他のデザイナーや開
発者からレビューを受ける
•エンジニアがユーザー体験やUIなどを
変更をする場合もデザイナーのレビューを
受けてリリースする

39. github デザインレビュー:例1

40. github デザインレビュー:例1
! 「お問い合わせ履歴」はモーダル
に変更します
Designer
Engineer
「お問い合わせ履歴」は通知から
直接開くこともあるよ

41. github デザインレビュー:例2
Engineer
トップの新しいデザインを
タブレットの横画面でも
いいかんじに見せたい
@Android/design

42. github デザインレビュー:例2

43. github デザインレビュー:例2
Engineer
カード領域を広げた際の見せ方
どうする？

44. github デザインレビュー:例2

45. GitHub デザインレビュー
•品質の維持・向上
•デザイン変更の経緯が誰でも参照できる
•議論による新たな気付きも

46. デザイン
リリースマネージャー
クックパッドの開発手法

47. デザインリリースマネージャー
•アプリアップデートに含まれるユーザーの
体験やUIに変更がある箇所を把握し、
リリースまでの開発サポートを行う
•CF後に、アプリデザイナー全員でRC版の
アプリを端末ごとに、変更箇所∼全体の
チェックするデザイン確認会を主導

48. デザインリリースマネージャー
ここ、マージン広いす！
ここの文言、もうちょっと
分かりやすくしてあげたい
ログインしていなくても、
機能を知るきっかけがないのでは？
「フォロー」ボタンがみえてないと
ここはタッチフィードバックが
欲しいですね

49. デザインリリースマネージャーの目的
•アプリアップデート時に
ユーザー体験全般が損なわれていないか、
デザイナー全員で責任を持つ
•一斉・集中的にプロダクトを
触る機会を増やすことで、
アプリの現状と理想像を把握する

50. まとめ

51. まとめ
•常にユーザーの期待以上のものを
提供し続ける
•「ユーザー」を主語にしてあらゆるものを
考え続ける
デザイナーの目指すもの

52. まとめ
そのために…
エンジニアをはじめとする、
開発メンバーとコミュニケー
ションを密に取りながら
日々のデザインをしています

53. ありがとうございました！