Cookpad Techconf@kimura 2016/01/23

「今日なに作ろう」を 支えるデザイン

Mari kimura

2016/01/23

- エンジニアとの協業 -

自己紹介

木村 真理 mari kimura

ユーザーファースト推進室　デザイナー

• 2006- デザイナー• 2015/06- CookpadCookpad iOS/Android Design

• パンとインターネットと青いものがすき

App Design/Web Design/DTP/HTML,Sass…

自己紹介

＼エディタも青く躾けております／

今日のお話

クックパッドにおける デザイナー x エンジニアの

協業について 事例を共に紹介

アジェンダ

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

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

!15

クックパッドデザイナー

Designer

15Designer!

クックパッドデザイナー

illustration

UI Design

HTML/CSS Markup

Rails Coding

Service Design

Direction

定性・定量 調査

Visual Design

iOS Dev

ユーザーファースト推進室

クックパッド全体のサービスを、横断/俯瞰的に捉えてユーザーファーストを加速させる

集客 さがす 新規会員獲得 のせる

デザイナーユーザーファースト推進室

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

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

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

ユーザーファーストな サービスとは？

ユーザーファーストなサービスとは

•ユーザが期待した通りの結果を得ることができる

•ユーザがついつい夢中になってしまう •人におすすめしたくなる

ユーザーファーストなデザイン

機能ではなく、 ストーリーで考える

ストーリーで考える

機能

• レシピ検索

• レシピ保存

ストーリー

「今日なに作ろう？」が決まる今日の夕飯の献立

!

何度も作るお気に入りの レシピをいつでも見返す ことができる

!

ストーリーで考える

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

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

クックパッドの開発手法

•仮説検証 •プロトタイピング •デザインフレームワーク •デザインレビュー •定性・定量調査

And More …

クックパッドの開発手法

•仮説検証 •プロトタイピング •デザインフレームワーク •デザインレビュー •定性・定量調査

And More …

クックパッドの開発手法

プロトタイピング

プロトタイピングの目的

•仮説検証 •アイデアを共有 •小さく・すばやく試せるチーム/ユーザー

エンジニア工数を取らない

プロトタイピングの種類

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

事例

動画自動再生UI実装時の 動画モック作成

動画モック作成事例

動画自動再生テストのためのUI

動画モック作成事例

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

動画モック作成事例

こういうの 作りたいす！

OK! これなら実装 できそう

最高かよ…！ Engineer

Designer

プロトタイピング導入の利点

•開発の初期段階で実現したい具体的なイメージをチームに共有・確認できる

•実装後の手戻りがない

クックパッドの開発手法

デザインフレームワーク

デザインフレームワーク

• Sara • iOS UI • アイコンフォント •オリジナル数字フォント

クックパッドUIデザインフレームワーク

iOS クックパッドフレームワーク

特売情報 価格表記専用フォント

デザインフレームワーク

•見出し・リスト・ボタンなどのUIパーツ •変数名によるカラーマネジメント

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

アイコンフォント

アイコンフォント

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

クックパッドの開発手法

デザインレビュー• GitHubによるデザインレビュー • デザインリリースマネージャー

クックパッドの開発手法

GitHub issue による デザインレビュー

GitHub デザインレビュー

•作成したデザインは実装前にGitHubにissueを立てて、目的や背景、デザインの意図などを説明して、他のデザイナーや開発者からレビューを受ける

•エンジニアがユーザー体験やUIなどを 変更をする場合もデザイナーのレビューを受けてリリースする

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

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

! 「お問い合わせ履歴」はモーダル　 に変更します

Designer

Engineer

「お問い合わせ履歴」は通知から 直接開くこともあるよ

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

Engineer

トップの新しいデザインをタブレットの横画面でもいいかんじに見せたい@Android/design

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

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

Engineer

カード領域を広げた際の見せ方どうする？

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

GitHub デザインレビュー

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

デザイン リリースマネージャー

クックパッドの開発手法

デザインリリースマネージャー

•アプリアップデートに含まれるユーザーの体験やUIに変更がある箇所を把握し、リリースまでの開発サポートを行う

• CF後に、アプリデザイナー全員でRC版のアプリを端末ごとに、変更箇所～全体のチェックするデザイン確認会を主導

デザインリリースマネージャー

ここ、マージン広いす！

ここの文言、もうちょっと分かりやすくしてあげたい

ログインしていなくても、

機能を知るきっかけがないのでは？「フォロー」ボタンがみえてないと

ここはタッチフィードバックが 欲しいですね

デザインリリースマネージャーの目的

•アプリアップデート時にユーザー体験全般が損なわれていないか、デザイナー全員で責任を持つ

•一斉・集中的にプロダクトを触る機会を増やすことで、アプリの現状と理想像を把握する

まとめ

まとめ

•常にユーザーの期待以上のものを提供し続ける

•「ユーザー」を主語にしてあらゆるものを考え続ける

デザイナーの目指すもの

まとめ

そのために…

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

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