Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
EN
Uploaded by
Mari Kimura
PDF, PPTX
29,436 views
Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf 2016/01/23 「今日なに作ろう」を支えるデザイン ーエンジニアとの協業ー
Design
◦
Read more
26
Save
Share
Embed
Embed presentation
Download
Download as PDF, PPTX
1
/ 53
2
/ 53
3
/ 53
4
/ 53
5
/ 53
6
/ 53
7
/ 53
8
/ 53
9
/ 53
10
/ 53
11
/ 53
12
/ 53
13
/ 53
14
/ 53
15
/ 53
16
/ 53
17
/ 53
18
/ 53
19
/ 53
20
/ 53
21
/ 53
22
/ 53
23
/ 53
24
/ 53
25
/ 53
26
/ 53
27
/ 53
28
/ 53
29
/ 53
30
/ 53
31
/ 53
32
/ 53
33
/ 53
34
/ 53
35
/ 53
36
/ 53
37
/ 53
38
/ 53
39
/ 53
40
/ 53
41
/ 53
42
/ 53
43
/ 53
44
/ 53
45
/ 53
46
/ 53
47
/ 53
48
/ 53
49
/ 53
50
/ 53
51
/ 53
52
/ 53
53
/ 53
More Related Content
PDF
機能追加を行う際に考慮したい3つのポイント
by
Miwa Kuramitsu
PDF
開発した新技術から、新しい価値を作るためのクックパッド検索チームのプロダクト開発手法
by
Hiroto Igarashi
PDF
What matters to technology driven business
by
Ohno Shin'ichi
PDF
R&D at Foodtech company - #CookpadTechConf 2016
by
Aki Ariga
PPTX
小さく早い改善がスマホのサービス開発を変える
by
Hiroto Igarashi
PDF
Holiday のデザインと開発 - ユーザーに価値を届けるためのプロトタイピングから実装まで
by
Keisuke Tada
PDF
アメーバピグのユーザ体験を定量/定性で捉える方法
by
寛 水野
PDF
風呂場で考えるUIデザイナーの未来
by
Masayuki Uetani
機能追加を行う際に考慮したい3つのポイント
by
Miwa Kuramitsu
開発した新技術から、新しい価値を作るためのクックパッド検索チームのプロダクト開発手法
by
Hiroto Igarashi
What matters to technology driven business
by
Ohno Shin'ichi
R&D at Foodtech company - #CookpadTechConf 2016
by
Aki Ariga
小さく早い改善がスマホのサービス開発を変える
by
Hiroto Igarashi
Holiday のデザインと開発 - ユーザーに価値を届けるためのプロトタイピングから実装まで
by
Keisuke Tada
アメーバピグのユーザ体験を定量/定性で捉える方法
by
寛 水野
風呂場で考えるUIデザイナーの未来
by
Masayuki Uetani
What's hot
PDF
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
by
Keisuke Tada
PDF
デザインツール戦争とMaterial Theme Editor
by
Asami Yamamoto
PDF
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
by
schoowebcampus
PDF
いいデザインのために組織の一人ひとりができること
by
Masahiko Yoshikawa
PDF
クックパッドデザイナーが実践するユーザーファースト
by
Miwa Kuramitsu
PPTX
UXデザインのスキルを武器に新規事業のPOをやるとどうなるか #postudy
by
英明 伊藤
PDF
SketchがAndroidのUIデザインに向いているワケ
by
Asami Yamamoto
PPTX
Uxデザイナーがpoとして開発チームと”握る”ためにやっていること 170927
by
英明 伊藤
PDF
UIも大事だよ。という話。@Opt Group Tech Day
by
Tetsuya Takeda
PDF
20190730_オーダーメイドチームビルディング 〜選球眼と勝負球~
by
大貴 蜂須賀
PPTX
新規サービスの開発中にPoが何かを決断するために必要だったこと
by
英明 伊藤
PDF
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
by
Mikihiro Fujii
PDF
某外資系企業でデザインチームを作った話 〜デザイナーが組織の中での価値を最大化させるために〜
by
Yu Uno
PPTX
Poがuxデザインをする上で何を指標にしてきたか
by
英明 伊藤
PPTX
ディレクターとして取り組むHCD業務の実際
by
寛 水野
PPTX
グローバルを目指すサイボウズ式UXリサーチ_UT事例発表170607
by
Yuta Saito
PDF
Uxマップを使ったサービス改善
by
Keisuke Tsukayoshi
PDF
UI Crunch#3:プロトタイピングにおける「段階」
by
Satoru MURAKOSHI
PPTX
BtoB新規事業を舵取りするためのユーザー調査
by
英明 伊藤
PDF
UIデザイナー最終防衛マニュアル
by
Taiki Kawakami
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
by
Keisuke Tada
デザインツール戦争とMaterial Theme Editor
by
Asami Yamamoto
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
by
schoowebcampus
いいデザインのために組織の一人ひとりができること
by
Masahiko Yoshikawa
クックパッドデザイナーが実践するユーザーファースト
by
Miwa Kuramitsu
UXデザインのスキルを武器に新規事業のPOをやるとどうなるか #postudy
by
英明 伊藤
SketchがAndroidのUIデザインに向いているワケ
by
Asami Yamamoto
Uxデザイナーがpoとして開発チームと”握る”ためにやっていること 170927
by
英明 伊藤
UIも大事だよ。という話。@Opt Group Tech Day
by
Tetsuya Takeda
20190730_オーダーメイドチームビルディング 〜選球眼と勝負球~
by
大貴 蜂須賀
新規サービスの開発中にPoが何かを決断するために必要だったこと
by
英明 伊藤
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
by
Mikihiro Fujii
某外資系企業でデザインチームを作った話 〜デザイナーが組織の中での価値を最大化させるために〜
by
Yu Uno
Poがuxデザインをする上で何を指標にしてきたか
by
英明 伊藤
ディレクターとして取り組むHCD業務の実際
by
寛 水野
グローバルを目指すサイボウズ式UXリサーチ_UT事例発表170607
by
Yuta Saito
Uxマップを使ったサービス改善
by
Keisuke Tsukayoshi
UI Crunch#3:プロトタイピングにおける「段階」
by
Satoru MURAKOSHI
BtoB新規事業を舵取りするためのユーザー調査
by
英明 伊藤
UIデザイナー最終防衛マニュアル
by
Taiki Kawakami
Cookpad Techconf@kimura 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.
ありがとうございました!
Download