UIデザイナーのおしごと

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

© 2016 Goodpatch Inc. All rights reserved. どんな就活をしたか意識していた就活の軸 • サービスデザインに上流からexecutionまで  携わることができる • 自分の成長と会社の成長がリンクする環境  → 裁量権・オーナーシップを持って仕事を任せてくれる会社。年功序列とか存在しないところ。受けた会社 • クックパッド、ヴォラーレ、アイスタイル、楽天、フリークアウト • →ヴォラーレ株式会社（SEO・Webコンサルティング会社）にデザイナー職で入りました。  1年2ヶ月で転職して、グッドパッチには第二新卒で入社。 6 大学4年の自分。休学していったアメリカ帰りだったので↑ 基本物事を舐めてた…。笑（あの頃は若かった…）公開時削除某ジョブに参加した時の金髪の写真です…汗

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

© 2016 Goodpatch Inc. All rights reserved. 22 5IF&MFNFOUTPG6TFS&YQFSJFODFT IUUQVYEFTJHODPNBTTFUT&MFNFOUTPG6TFS&YQFSJFODFQEG ؽآُ،ٕرؠ؎ٝ ؎ٝة٦ؿؑ٦أرؠ؎ٝ ؎ٝةؙٓءّٝرؠ؎ٝ شؽ؜٦ءّٝرؠ؎ٝ ؎ٝؿًؓ٦ءّٝرؠ؎ٝ ؎ٝؿًؓ٦ءّٝ ،٦ؗذؙثٍ 堣腉➬圫 ؝ٝذٝخ銲実 ِ٦ؠ٦ךص٦ؤ ؟؎زך؞٦ٕ٥湡涸 Ⱗ⡤涸䬄韋涸 6*رؠ؎ٝ٥ 㹋鄲 ؿؑ٦ؤ ؟٦ؽأ鏣鎘 ؿؑ٦ؤ ؝ٝإفز  鏣鎘 ؿؑ٦ؤ -FBO$BOWBT ِ٦ؠ٦ؿٗ٦㔳堣腉銲実♧鋮 1SPUUדך فٗزة؎ف 媮ꥡٌرٕ ؿؑ٦ؤ ➿邌涸ז،ؐزفحز

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

© 2016 Goodpatch Inc. All rights reserved. このサービスを通じてのビジネスゴール、ターゲットユーザー、  ユーザーゴールを定義しよう 41 STEP 1 ゴール設定・課題発見ビジネスゴール無料利用期間中のライトユーザーをミドルユーザーに引き上げる。  1起動あたりSV数の増加、1起動あたり視聴数の増加、マイリストへの追加数増加ターゲットユーザー 20代後半社会人女性、海外ドラマ好き huluを海外ドラマ視聴したいというきっかけで使い始めた人スマートフォンアプリでhul●を利用しているターゲットユーザーのゴール他の面白い海外ドラマに出会って、時間をつぶせるゴールや体験の定義には色々なフレームワークがあるので、プロダクトに合ったものを選びつつ、参考にしてみてください。（Lean Canvas, VP Mapなど）

Slide 42

Slide 42 text

© 2016 Goodpatch Inc. All rights reserved. 現状のiOSアプリだと… 42 STEP 1 ゴール設定・課題発見ホーム検索ホーム>絞り込みホーム>海外ドラマ・TVカテゴリメニューうーん、あんまりピンとくる動画ないなー。。海外ドラマに絞って探したい… 絞り込み発見！海外ドラマといっても幅広い… 一覧性が低くて探しにくい… カテゴリー発見！しかし、テレビ番組で絞ると、海外と日本の分けられないのね…

Slide 43

Slide 43 text

Slide 44

Slide 44 text

© 2016 Goodpatch Inc. All rights reserved. 理想の体験を起こしてみる 44 STEP 2 設計アプリ起動・トップページカテゴリを絞って再度ザッピングお気に入り追加トップページから面白そうなものを  ザッピング心理・欲求行動フロー動画個別ページで動画の内容確認動画視聴面白そうな動画ないかな〜この動画面白そう、観たい！更新されたらまた  観たい！必要な主な機能 • トップページ • コンテンツ一覧 • 動画画像、タイトル、マイリスト追加数 • カテゴリ絞り込み • ソート絞り込み • 動画個別ページ • タイトル • 動画画像 • 動画説明 • マイリスト追加数 • マイリスト追加ボタン • シリーズ動画一覧

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

© 2016 Goodpatch Inc. All rights reserved. 情報設計・レイアウト配置 —行動動線の工夫ポイントを検討 48 STEP 2 設計アプリ起動・トップページカテゴリを絞って再度ザッピングお気に入り追加トップページから面白そうなものを  ザッピング心理・欲求行動フロー動画個別ページで動画の内容確認動画視聴面白そうな動画ないかな〜この動画面白そう、観たい！更新されたらまた  観たい！必要な主な機能 • トップページ • コンテンツ一覧 • 動画画像、タイトル、マイリスト追加数 • カテゴリ絞り込み • ソート絞り込み • 動画個別ページ • タイトル • 動画画像 • 動画説明 • マイリスト追加数 • マイリスト追加ボタン • シリーズ動画一覧 1. 自分が今何を見ているのか、分かりやすくする 2. 「映画トップ」「テレビトップ」を見ていて面白い編集性のある見せ方に 3. 目当てのカテゴリに行きやすくする

Slide 49

Slide 49 text

Slide 50

Slide 50 text

© 2016 Goodpatch Inc. All rights reserved. 情報設計・レイアウト配置 — ワイヤーフレームの作成 50 STEP 2 設計 • ワイヤーフレームを作る目的：  情報に過不足がないか、ナビゲーションなど大きなレイアウトに問題がないか確認するため • 作る時のポイント：まずは白黒で、細部にこだわらない。ワイヤーフレームについては以前ブログを書きました  「Webサービス・アプリ開発におけるワイヤーフレームとは」構造レベルのデザインに問題がないか確認できればいいのでこの粒度でもok prottを使ってペーパープロトタイピングしたりしてもいい

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Slide 54

Slide 54 text

© 2016 Goodpatch Inc. All rights reserved. • iOSアプリの多くはUIKitフレームワークで定義されたUI要素をベースに作られている  AppleのHuman Interface Guideline • まずはiPhone標準アプリのトレースをしつつ、どんなUI要素でできているのか　意図を自分なりに解明するのがオススメです。自分が作るものがどういう風に形作られていくのかをまずは知ろう 54 STEP 3 ビジュアルデザイン Xcodeの画面

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

© 2016 Goodpatch Inc. All rights reserved. GoodpatchのUIデザイナーの働き方 60 受託 • 多様なビジネスのデザインに関われる（FinTech, IoT, ヘルスケア, 医療… etc） • クライアントのデザインプロセスの変革・プロダクトに貢献できる自社プロダクト • 自分がユーザーとなる、日本・世界のデザインプロセスの向上のためのプロダクトづくりに関われる共通 • コンセプト作りから実際のデザイン・実装まで関われる • デザインが大好きな経営者、Project Manager, エンジニアと働ける！

Slide 61

Slide 61 text

Slide 62

Slide 62 text

© 2016 Goodpatch Inc. All rights reserved. 62 MERYは、トレンドに敏感な女の子のための無料まとめアプリです。毎日読んでも飽きないように、新しいアイテムと出会えるように。Webサイト以上のリッチな体験ができるよう、アプリの設計、デザイン、運用フェーズでの改善に関わりました。 UI設計、UIデザイン、運用 iPhone / Android http://mery.jp/ 実績

Slide 63

Slide 63 text

Slide 64

Slide 64 text

Slide 65

Slide 65 text

© 2016 Goodpatch Inc. All rights reserved. デザイン分野での強みテクノロジー領域ビジネス領域 GoodpatchのUIデザイナーのキャリアのイメージ 65 ビジュアルデザイン、情報設計・UI設計・サービス設計、プロトタイピング、実装　に関するスキル・経験を積む - プロフェッショナル志向 or マネジメント志向 - スキルやある特定領域での強みを伸ばしていく

Slide 66

Slide 66 text

© 2016 Goodpatch Inc. All rights reserved. GoodpatchのUIデザイナーのキャリアイメージ課題解決の本質さえ掴んでいれば、デザインの対象や業界が変わってもデザインをすることができる 66 デザインスキルを活かしつつよりプロダクト全体の設計〜事業に関わっていきたいこれまでの経験を生かしながら、デザインを通してクライアント、ユーザー、社会に適切なカタチの幸せを提供していきたい。調査設計から開発まで、領域に制限なくプロダクトに関われるデザイナーを目指したい。また、  人と人をつなぐコミュニケーションのハブ的存在になる！ UIデザイナーとしてのスキルを伸ばしつつ、IoT分野にいずれ挑戦したい

Slide 67

Slide 67 text

Slide 68

Slide 68 text

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Slide 72

Slide 72 text

© 2016 Goodpatch Inc. All rights reserved. もし、UIデザインに挑戦したい！と少しでも思っているのに、挑戦したことが無いなら… • 自分自身がよくつかうアプリをリデザインしてみるなど、  ユーザー視点にたって課題発見・ゴールの定義・デザインの作成を  行ってみてください！ UIデザインのスキルを上げたい方 • iOS or Google のデフォルトアプリのメイン画面をトレースするのを  最低3つはやりましょう。  色、フォントサイズ、要素間のmargin、どんなコンポーネントを採用しているのか、  そこにどんな意図があるのか…  72 ↑LINEマンガスケッチの例  （iOS純正ではないけど…）

Slide 73

Slide 73 text

Slide 74

Slide 74 text