UIデザイナーのおしごと

2016/05/22 はたらくデザイン #01 デザインカンパニーで働くデザイナー編 登壇資料

Transcript

1. © 2016 Goodpatch Inc. All rights reserved. UIデザイナーのおしごと 2016/05/22 @ はたらくvivivitイベント Goodpatch, Inc. Senior UI Designer / Project Manager, Sumire Hibiya
2. © 2016 Goodpatch Inc. All rights reserved. 自己紹介 00.
3. © 2016 Goodpatch Inc. All rights reserved. 自己紹介 3 Goodpatch, Inc.
 Senior UI Designer / Project Manager 日比谷 すみれ 2013年9月 早稲田大学商学部卒 2013年10月 ヴォラーレ株式会社（ナイル株式会社）入社 2015年1月 株式会社グッドパッチ入社
4. © 2016 Goodpatch Inc. All rights reserved. どんなことをしているのか http://smrhby.com/?p=623 4 ؟٦ؽأ鏣鎘װ׵
   何㊣倯ぢ䚍寸׭װ׵ 1.69
   %FTJHOFS 6*رؠ؎ٝך⡲䧭 6*
   %FTJHOFS ث٦يך׋׭ך➬✲ 6OJU
   -FBEFS
   ˋ
   5FBN
   .BOBHFNFOU
5. © 2016 Goodpatch Inc. All rights reserved. 5
6. © 2016 Goodpatch Inc. All rights reserved. どんな就活をしたか 意識していた就活の軸 • サービスデザインに上流からexecutionまで
 携わることができる • 自分の成長と会社の成長がリンクする環境
 → 裁量権・オーナーシップを持って仕事を任せてくれ る会社。年功序列とか存在しないところ。 受けた会社 • クックパッド、ヴォラーレ、アイスタイル、楽天、フ リークアウト • →ヴォラーレ株式会社（SEO・Webコンサルティング 会社）にデザイナー職で入りました。
 1年2ヶ月で転職して、グッドパッチには第二新卒で入 社。 6 大学4年の自分。休学していったアメリカ帰りだったので↑ 基本物事を舐めてた…。笑（あの頃は若かった…） 公開時削除 某ジョブに参加した時の金髪の写真です…汗
7. © 2016 Goodpatch Inc. All rights reserved. 今日のプレゼンについて 01.
8. © 2016 Goodpatch Inc. All rights reserved. 昨年夏・冬と短期インターンの運営、新卒採用面接を担当 ※前職でも同じようなことを業務の傍らやっていた
9. © 2016 Goodpatch Inc. All rights reserved. 9
10. © 2016 Goodpatch Inc. All rights reserved. 10 「魔法をかけられている人」になるか 「魔法をかける人」になるか
11. © 2016 Goodpatch Inc. All rights reserved. 11 「魔法をかけられている人」になるか 「魔法をかける人」になるか “クリエイティブクラス”
12. © 2016 Goodpatch Inc. All rights reserved. 今日のゴール • UIデザイナーとして働くことがどんなことか、ある程度理解してもらう
 …面白そう！って思ってくれたらいいな • →自己分析・就活の軸の確立に反映できる 12
13. © 2016 Goodpatch Inc. All rights reserved. UIデザイナーとして働くってどういうこと？ 02.
14. © 2016 Goodpatch Inc. All rights reserved. UIデザイナーとは
15. © 2016 Goodpatch Inc. All rights reserved. 15 UIデザイナー
16. © 2016 Goodpatch Inc. All rights reserved. 16 UIデザイナー ユーザーの課題を発見し、解決する
17. © 2016 Goodpatch Inc. All rights reserved. 17 UIデザイナー 体験とユーザーの接点
18. © 2016 Goodpatch Inc. All rights reserved. 18 UIデザイナー プロダクトとユーザーとの接点における 問題発見・課題解決をする アプリのデザインをすること、と思われがちだけど、
 そうじゃない。（確かに今現在アプリの仕事は多いけど…）
19. © 2016 Goodpatch Inc. All rights reserved. 19 UIデザイナー プロダクトとユーザーとの接点における 問題発見・課題解決をする めっちゃ広い
20. © 2016 Goodpatch Inc. All rights reserved. 20 プロダクトを構成する要素は全て、 デザインの対象
21. © 2016 Goodpatch Inc. All rights reserved. UX Elements of User Experience 21 䒷欽+FTTF
    +BNFT
    (BSSFUU
    5IF
    &MFNFOUT
    PG
    6TS
    &YQFSJFODF
22. © 2016 Goodpatch Inc. All rights reserved. 22 5IF
    &MFNFOUT
    PG
    6TFS
    &YQFSJFODFT
    IUUQVYEFTJHODPNBTTFUT&MFNFOUTPG6TFS&YQFSJFODFQEG ؽآُ،ٕرؠ؎ٝ ؎ٝة٦ؿؑ٦أرؠ؎ٝ ؎ٝةؙٓءّٝرؠ؎ٝ شؽ؜٦ءّٝرؠ؎ٝ ؎ٝؿًؓ٦ءّٝرؠ؎ٝ ؎ٝؿًؓ٦ءّٝ
    ،٦ؗذؙثٍ 堣腉➬圫 ؝ٝذٝخ銲実 ِ٦ؠ٦ךص٦ؤ ؟؎زך؞٦ٕ٥湡涸 Ⱗ⡤涸 䬄韋涸 6*رؠ؎ٝ٥
    㹋鄲
    ؿؑ٦ؤ ؟٦ؽأ鏣鎘
    ؿؑ٦ؤ ؝ٝإفز
 鏣鎘
    ؿؑ٦ؤ -FBO$BOWBT ِ٦ؠ٦ؿٗ٦㔳
    堣腉銲実♧鋮 1SPUUדך
    فٗزة؎ف 媮ꥡٌرٕ ؿؑ٦ؤ ➿邌涸ז،ؐزفحز
23. © 2016 Goodpatch Inc. All rights reserved. 23 UIデザイナー ϓϩμΫτͱϢʔβʔͱͷ઀఺ʹ͓͚Δ
    ໰୊ൃݟɾ՝୊ղܾΛ͢Δ デザインの本質・ベースとなること
24. © 2016 Goodpatch Inc. All rights reserved. 24 プロダクトのデザイン＝ 様々な粒度の問題解決の集積
25. © 2016 Goodpatch Inc. All rights reserved. 25 複雑な情報やコミュニケーションを整理し、 問題発見・課題解決をすることは 今後何をやるにしてもベースとなる力
26. © 2016 Goodpatch Inc. All rights reserved. 実際のデザインワークフロー
27. © 2016 Goodpatch Inc. All rights reserved. 27 from HBO “Silicon Valley” http://www.hbo.com/silicon-valley
28. © 2016 Goodpatch Inc. All rights reserved. 28 from HBO “Silicon Valley” http://www.hbo.com/silicon-valley 米ドラマ「Silicon Valley」を観たくて 某動画配信サービスを契約してみた
29. © 2016 Goodpatch Inc. All rights reserved. 29 from HBO “Silicon Valley” http://www.hbo.com/silicon-valley ふとした時に「せっかく無料なんだし 他の動画観てみよ―」とアプリを起動してみる
30. © 2016 Goodpatch Inc. All rights reserved. 30 from HBO “Silicon Valley” http://www.hbo.com/silicon-valley 目的の動画がある場合はいいが、 何となく観たいものを探すときは使いづらい…
31. © 2016 Goodpatch Inc. All rights reserved. 31 from HBO “Silicon Valley” http://www.hbo.com/silicon-valley ライトユーザー：特定の動画目当ての視聴 ヘビーユーザー：サービス内での動画探し→視聴
32. © 2016 Goodpatch Inc. All rights reserved. 32 ヘビーユーザーに向けた、
 動画ザッピング体験をデザインしてみる
33. © 2016 Goodpatch Inc. All rights reserved. 33 from HBO “Silicon Valley” http://www.hbo.com/silicon-valley 某動画配信サービスのキャプチャ
34. © 2016 Goodpatch Inc. All rights reserved. 34 from HBO “Silicon Valley” http://www.hbo.com/silicon-valley 最終的にできたもの 公開時削除
35. © 2016 Goodpatch Inc. All rights reserved. 35 ※普段の流れをざっくり掴んでもらうための ラフなフローと思って見て頂ければ…
36. © 2016 Goodpatch Inc. All rights reserved. DESIGN PROCESS 36 
    (00%
    130#-&.4
    
    
    周⟝Ꟛ㨣⵸ 
    (00%
    130505:1&4
    
    
    ؿ؋٦أزٔٔ٦أתד 
    (00%
    1&01-&
    
    
    周⟝Ꟛ㨣湫䖓 
    (00%
    130%6$54
    
    
    فٗتؙز׾״׶״ֻ׃גְֻ
37. © 2016 Goodpatch Inc. All rights reserved. DESIGN PROCESS 37 
    (00%
    130#-&.4
    
    
    周⟝Ꟛ㨣⵸ 
    (00%
    130505:1&4
    
    
    ؿ؋٦أزٔٔ٦أתד 
    (00%
    1&01-&
    
    
    周⟝Ꟛ㨣湫䖓 
    (00%
    130%6$54
    
    
    فٗتؙز׾״׶״ֻ׃גְֻ ゴール設定・ 課題発見 設計 ビジュアルデザイン 実装 ざっくりこんな感じで進める
38. © 2016 Goodpatch Inc. All rights reserved. ゴール設定・課題発見 STEP 1
39. © 2016 Goodpatch Inc. All rights reserved. このサービスを通じてのビジネスゴール、ターゲットユーザー、
 ユーザーゴールを定義しよう 39 STEP 1 ゴール設定・課題発見 ビジネスゴール ライトユーザーをミドルユーザーに引き上げる。
 1起動あたりSV数の増加、1起動あたり視聴数の増加、マイリストへの追加数増加 ターゲットユーザー ターゲットユーザーのゴール
40. © 2016 Goodpatch Inc. All rights reserved. ターゲットユーザーの定義 40 STEP 1 ゴール設定・課題発見 ライトユーザー 目的の動画のみ視聴 ヘビーユーザー 動画視聴が習慣化 有料動画配信サービスの利用者のうち 38.2％は「観たいソフト」があって 利用開始している 一般社団法人 日本映像ソフト協会 2013年年度調査 2週間のお試し期間
41. © 2016 Goodpatch Inc. All rights reserved. このサービスを通じてのビジネスゴール、ターゲットユーザー、
 ユーザーゴールを定義しよう 41 STEP 1 ゴール設定・課題発見 ビジネスゴール 無料利用期間中のライトユーザーをミドルユーザーに引き上げる。
 1起動あたりSV数の増加、1起動あたり視聴数の増加、マイリストへの追加数増加 ターゲットユーザー 20代後半社会人女性、海外ドラマ好き huluを海外ドラマ視聴したいというきっかけで使い始めた人 スマートフォンアプリでhul•を利用している ターゲットユーザーのゴール 他の面白い海外ドラマに出会って、時間をつぶせる ゴールや体験の定義には色々なフレームワークがあるので、プロダクトに合ったものを選びつつ、参考にしてみてください。（Lean Canvas, VP Mapなど）
42. © 2016 Goodpatch Inc. All rights reserved. 現状のiOSアプリだと… 42 STEP 1 ゴール設定・課題発見 ホーム 検索 ホーム>絞り込み ホーム>海外ドラマ・TVカテゴリ メニュー うーん、あんまりピンとくる 動画ないなー。。 海外ドラマに絞って探したい… 絞り込み発見！ 海外ドラマといっても幅広い… 一覧性が低くて探しにくい… カテゴリー発見！ しかし、テレビ番組で絞ると、 海外と日本の分けられないのね…
43. © 2016 Goodpatch Inc. All rights reserved. 設計 STEP 2
44. © 2016 Goodpatch Inc. All rights reserved. 理想の体験を起こしてみる 44 STEP 2 設計 アプリ起動・ トップページ カテゴリを絞って 再度ザッピング お気に入り追加 トップページから 面白そうなものを
 ザッピング 心理・欲求 行動フロー 動画個別ページで 動画の内容確認 動画視聴 面白そうな動画ないかな〜 この動画面白そう、観たい！ 更新されたらまた
 観たい！ 必要な主な機能 • トップページ • コンテンツ一覧 • 動画画像、タイトル、マイリスト追加数 • カテゴリ絞り込み • ソート絞り込み • 動画個別ページ • タイトル • 動画画像 • 動画説明 • マイリスト追加数 • マイリスト追加ボタン • シリーズ動画一覧
45. © 2016 Goodpatch Inc. All rights reserved. ※体験設計のベースになるので、案件の時は
 スプレッドシートで管理し、更新・確認しやすくしています。 45 STEP 2 設計 公開時削除
46. © 2016 Goodpatch Inc. All rights reserved. 情報設計・レイアウト配置 46 STEP 2 設計 映画・テレビ共通のトップページだと、 今何を見ているのか分かりづらい・どこから探したらいいのか 分からないのでは？ 現在のサービス構造をトレースして俯瞰してみる
47. © 2016 Goodpatch Inc. All rights reserved. ザッピング体験に必要な要素を仮説として設定 47 STEP 2 設計 • 画面内のコンテンツの情報量を増やして、一覧性を上げる • 適度なカテゴリー分けから絞り込みが出来るようにする • ホーム画面の絞り込みと、メニューから行けるカテゴリーの粒度がバラバラで理解しづらいた め、整理・統一する
48. © 2016 Goodpatch Inc. All rights reserved. 情報設計・レイアウト配置 —行動動線の工夫ポイントを検討 48 STEP 2 設計 アプリ起動・ トップページ カテゴリを絞って 再度ザッピング お気に入り追加 トップページから 面白そうなものを
 ザッピング 心理・欲求 行動フロー 動画個別ページで 動画の内容確認 動画視聴 面白そうな動画ないかな〜 この動画面白そう、観たい！ 更新されたらまた
 観たい！ 必要な主な機能 • トップページ • コンテンツ一覧 • 動画画像、タイトル、マイリスト追加数 • カテゴリ絞り込み • ソート絞り込み • 動画個別ページ • タイトル • 動画画像 • 動画説明 • マイリスト追加数 • マイリスト追加ボタン • シリーズ動画一覧 1. 自分が今何を見ているのか、分かりやすくする 2. 「映画トップ」「テレビトップ」を見ていて面白い編集性のある見せ方に 3. 目当てのカテゴリに行きやすくする
49. © 2016 Goodpatch Inc. All rights reserved. 情報設計・レイアウト配置 — ハイレベルサイトマップの作成 49 STEP 2 設計 - ユーザーの行動導線の仮説を反映する - 競合サービスの導線を調査しつつ… 公開時削除
50. © 2016 Goodpatch Inc. All rights reserved. 情報設計・レイアウト配置 — ワイヤーフレームの作成 50 STEP 2 設計 • ワイヤーフレームを作る目的：
 情報に過不足がないか、ナビゲーションなど大きなレイアウトに問題がないか確認するため • 作る時のポイント：まずは白黒で、細部にこだわらない。 ワイヤーフレームについては以前ブログを書きました
 「Webサービス・アプリ開発におけるワイヤーフレームとは」 構造レベルのデザインに問題がないか確認できればいいのでこの粒度でもok prottを使ってペーパープロトタイピングしたりしてもいい
51. © 2016 Goodpatch Inc. All rights reserved. ビジュアルデザイン STEP 3
52. © 2016 Goodpatch Inc. All rights reserved. ビジュアルデザインは、機能と感情の両面から考える STEP 3 ビジュアルデザイン ボタンの押しやすさ 文章の読みやすさ 要素の分かりやすさ など 使ってどんな気持ちに なってもらいたい？ どんなイメージを 持ってもらいたい？ など
53. © 2016 Goodpatch Inc. All rights reserved. ビジュアルデザインは、機能と感情の両面から考える STEP 3 ビジュアルデザイン 画面内のコンテンツを増やす 自分がどこにいるのか 分かりやすく 特集を表に出す
54. © 2016 Goodpatch Inc. All rights reserved. • iOSアプリの多くはUIKitフレームワークで定義 されたUI要素をベースに作られている
 AppleのHuman Interface Guideline • まずはiPhone標準アプリのトレースをしつ つ、どんなUI要素でできているのか　意図を自 分なりに解明するのがオススメです。 自分が作るものがどういう風に形作られていくのかをまずは知ろう 54 STEP 3 ビジュアルデザイン Xcodeの画面
55. © 2016 Goodpatch Inc. All rights reserved. まとめ
56. © 2016 Goodpatch Inc. All rights reserved. 56 どんな風に ユーザーの課題を 解決しよう？ このプロダクトの 成長のために 何をすれば いいんだろう？ 情報設計は ユーザーにとって 分かりやすいものに なってる？ コンテンツに対して 適切なUIを 配置できている？ どんなブランド
 イメージにするのが 適切だろうか？ どう実装しよう？ どこにユーザーの 課題があるか？
57. © 2016 Goodpatch Inc. All rights reserved. 57 UIデザイナー ϓϩμΫτͱϢʔβʔͱͷ઀఺ʹ͓͚Δ
    ໰୊ൃݟɾ՝୊ղܾΛ͢Δ めっちゃ広い デザインの本質・ベースとなること
58. © 2016 Goodpatch Inc. All rights reserved. イメージこんな感じ 58 課題解決能力 プロダクトを作るのに必要な デザイン、テクノロジー、ビジネス それぞれの力
59. © 2016 Goodpatch Inc. All rights reserved. GoodpatchのUIデザイナーってどんな感じ？
60. © 2016 Goodpatch Inc. All rights reserved. GoodpatchのUIデザイナーの働き方 60 受託 • 多様なビジネスのデザインに関われる（FinTech, IoT, ヘルスケア, 医療… etc） • クライアントのデザインプロセスの変革・プロダクトに貢献できる 自社プロダクト • 自分がユーザーとなる、日本・世界のデザインプロセスの向上のためのプロダクトづくりに関われる 共通 • コンセプト作りから実際のデザイン・実装まで関われる • デザインが大好きな経営者、Project Manager, エンジニアと働ける！
61. © 2016 Goodpatch Inc. All rights reserved. クライアントサービスの主要お取引先 61 ※掲載許可を頂いている企業様のみ掲載しています。
62. © 2016 Goodpatch Inc. All rights reserved. 62 MERYは、トレンドに敏感な女の子のための無料まとめ アプリです。毎日読んでも飽きないように、新しいアイ テムと出会えるように。Webサイト以上のリッチな体験 ができるよう、アプリの設計、デザイン、運用フェーズ での改善に関わりました。 UI設計、UIデザイン、運用 iPhone / Android http://mery.jp/ 実績
63. © 2016 Goodpatch Inc. All rights reserved. 63 講談社の美容雑誌VOCE(ヴォーチェ)アプリのUIデザイン を企画設計しました。雑誌のコンテンツを使用できるこ とを強みにとり、モデルやタレントやコスメが美しく映 えるよう透明感のあるデザインにまとめました。 企画、UI設計、UIデザイン iPhone http://i-voce.jp 実績
64. © 2016 Goodpatch Inc. All rights reserved. 64 利用者数180万人を超える自動家計簿アプリMoney Forwardのデザインリニューアルを担当しました。 高機能なサービスをシンプルにまとめ、親しみやすいUI にデザインしました。 UI設計、UIデザイン iPhone https://moneyforward.com 実績
65. © 2016 Goodpatch Inc. All rights reserved. デザイン分野での 強み テクノロジー 領域 ビジネス 領域 GoodpatchのUIデザイナーのキャリアのイメージ 65 ビジュアルデザイン、情報設計・UI設計・サービス設計、 プロトタイピング、実装　に関するスキル・経験を積む - プロフェッショナル志向 or マネジメント志向 - スキルやある特定領域での強みを伸ばしていく
66. © 2016 Goodpatch Inc. All rights reserved. GoodpatchのUIデザイナーのキャリアイメージ 課題解決の本質さえ掴んでいれば、デザインの対象や業界が変わってもデザインをすることができる 66 デザインスキルを活かしつつ よりプロダクト全体の設計〜 事業に関わっていきたい これまでの経験を生かしながら、 デザインを通してクライアント、 ユーザー、社会に適切なカタチの 幸せを提供していきたい。 調査設計から開発まで、領域に制 限なくプロダクトに関われるデザ イナーを目指したい。また、
 人と人をつなぐコミュニケーショ ンのハブ的存在になる！ UIデザイナーとしてのスキル を伸ばしつつ、IoT分野にい ずれ挑戦したい
67. © 2016 Goodpatch Inc. All rights reserved. 蛇足ですが
68. © 2016 Goodpatch Inc. All rights reserved. 先ほどの図 68 課題解決能力 プロダクトを作るのに必要な デザイン、テクノロジー、ビジネス それぞれの力
69. © 2016 Goodpatch Inc. All rights reserved. 一番重要なのは
 「スタンス」 69 コンセプチュアルスキル （課題解決能力など） テクニカルスキル スタンス …物事や仕事に対する姿勢
70. © 2016 Goodpatch Inc. All rights reserved. そんなこんなで、 UIデザイナーになりたいというあなたへ 03.
71. © 2016 Goodpatch Inc. All rights reserved. 71 UIデザイナー ϓϩμΫτͱϢʔβʔͱͷ઀఺ʹ͓͚Δ
    ໰୊ൃݟɾ՝୊ղܾΛ͢Δ プロダクト全部、
 企画から実際のデザインまで デザインの本質・ベースとなること
72. © 2016 Goodpatch Inc. All rights reserved. もし、UIデザインに挑戦したい！と少しでも思っているのに、 挑戦したことが無いなら… • 自分自身がよくつかうアプリをリデザインしてみるなど、
 ユーザー視点にたって課題発見・ゴールの定義・デザインの作成を
 行ってみてください！ UIデザインのスキルを上げたい方 • iOS or Google のデフォルトアプリのメイン画面をトレースするのを
 最低3つはやりましょう。
 色、フォントサイズ、要素間のmargin、どんなコンポーネントを採用しているのか、
 そこにどんな意図があるのか…
 72 ↑LINEマンガ スケッチの例
 （iOS純正ではないけど…）
73. © 2016 Goodpatch Inc. All rights reserved. 73
74. © 2016 Goodpatch Inc. All rights reserved. Thanks for listening. !TNSICZ