アプリを生み出す現場でUI/UXデザイナーが意識するべきこと

アプリを生み出す現場でUI/UXデザイナーが意識するべきこと

1. 1. アプリを生み出す現場で UI/UXデザイナーが意識するべきこと 2016.01.25 Tunnel株式会社 高橋彩
2. 2. ー 自己紹介 高橋 彩 Tunnel株式会社 デザイナー 「RoomClip」に関わるデザイン全般取り扱い中 制作会社でweb受注とフォトブックアプリの デザイナーとして７年勤務。 2014年１月にTunnel社に参加。 観葉植物と盆栽が楽しくて次はアクアリウムやりたい。
3. 3. RoomClipとデザイン設計について 組織の中でのデザイナーの立ち位置 1 2 エンジニアとのコミュニケーションを 円滑にするために実践したこと 3 ー 今日お話ししたいこと
4. 4. RoomClipとデザイン設計について 1
5. 5. 『日常の創造性を応援する』 部屋の写真を投稿するインテリア専門SNS
6. 6. Web（PC・SP）／ iOS ／ Android ー サービスの展開
7. 7. MAU 月間PV累計写真投稿数 トレンドに敏感で消費活動が活発な2〜30代が中心 77%が女性ユーザー 130万人 100万枚 8000万 ー サービスの状況
8. 8. デザイナー フロントエンド エンジニア バックエンド エンジニア ８人 ー 開発チーム
9. 9. Photoshop Illustrator イラスト HTML・CSS JS サーバー知識 アプリ開発環境全般 典型的な「機能実装はやらない見た目デザイナー」 まかせて！ まかせて！ 描けるよ！ イケル 書けません 微妙 ほぼわかりません ー デザイナースキル
10. 10. ・webサイト(PC/SP) ・iOSアプリ ・Androidアプリ ・ロゴ ー 業務で作ったもの ・名刺 ・フライヤー／チラシ ・店頭スタンドPOP ・公式グッズ （バッジ・ステッカーなど）
11. 11. ・アプリのアップデートと機能改善 ・webからの登録率向上施策 →新規の実装や既存ページ構成の見直し →登録経路のABテスト ・通常運用 →イベント開催の画像作成／管理 ー デザイナーの現在の任務
12. 12. ー 開発環境 業務のほぼすべてをPhotoshopで完結させてます
13. 13. ー 開発環境 正直Sketch気になってるんですが
14. 14. ー 開発環境 Adobe Preview CCに感動していたら タイミングを逃しました。 （おすすめです）
15. 15. ー 開発までのデザインの流れ Photoshopでモックを作成 エンジニアからのフィードバック 社内プレビュー 実装スタート
16. 16. ー サンプル
17. 17. エンジニアとのコミュニケーションを 円滑にするために実践したこと 2
18. 18. Episode1. 開発のためのデザイン準備 Episode2. 作ったデザインの本質を理解してもらう Episode3. 早めのフィードバック
19. 19. 作り始める前に、 アプリやwebが何でできているのか理解する Episode1. 開発のためのデザイン準備
20. 20. iOS ヒューマンインターフェース ガイドライン Android マテリアルデザイン ガイドライン ー ガイドライン
21. 21. 全然違います！ Webの画面設計 アプリの画面設計 ー ガイドライン
22. 22. アプリの設計はガイドラインなしには作れません ※ゲームはまた事情がちょっと違うかと思いますが ー ガイドライン
23. 23. ●エンジニアの人たちが何を作っているのか きちんと理解した上で、理由付けのできるデザインを 作れるようになる ●コードが書けるようになる必要はない （※書けるに越したことはない）
24. 24. 実装する人にデザインの解釈をわかりやすく伝える Episode2. 作ったデザインの本質を 理解してもらう
25. 25. 10pxずれてる！ 指示してないBold 色が違う 線が太い フォント小さい？ 角丸の具合が バラバラ 影が濃すぎ ー 開発実装後… マージンおかしい
26. 26. よくありました （ダメです） ー 開発実装後…
27. 27. [原因] デザイナーが何を考えて作ったか きちんと伝えられてない 基本、デザイナーが悪い ー 開発実装後…
28. 28. デザインパターンとパーツに名前をつけて共通言語化 例） ー RoomClipで実践したこと
29. 29. ・解釈を相手任せにしなくなったことで パーツのブレがなくなった ・コミュニケーションコストが大幅に減った ・エンジニア主体で、デザイナーを介さずにクオリティの 担保されたページの増産が可能になった ・エンジニア、デザイナ双方で試行錯誤の回り道が減った ・デザイナーがページの量産に工数を吸い取られなく なったので、ブラッシュアップに専念できるようになった ー 結果
30. 30. ●デザイナーは最初のフレームワークをしっかりきめる ●作ったデザインをただ仕様書として投げない ●デザインの意味を理解してもらうことで、 お互い同じ目線での画面作りができるようになる ー まとめ
31. 31. Episode3. はやめのフィードバックを こころがける お互いの仕様にズレが無いか確認しながら進める
32. 32. ・描画ソフト使えない人からすると、 正直何してるかわからない ・進捗が見えづらい。 ・はかどってるのか遅れてるのかいまいち判断つかない。 ー デザイナーがどう見られているか デザイナーの作業は不透明になりやすい
33. 33. ゴールが同じでも見てるものが異なる ー デザイナーとエンジニアの目線
34. 34. ズレが無いよう確かめならがすすめないと怪我の元に ー デザイナーとエンジニアの目線
35. 35. ひどい時はどちらもあさっての方に迷走することがあります ー デザイナーとエンジニアの目線
36. 36. 煮詰まってきたら 全社プレビュー ー デザイナーとエンジニアの目線
37. 37. ー RoomClipであった全社プレビュー とあるボタンの実装で起きたエピソード
38. 38. ー RoomClipであった全社プレビュー 開発チームと他の人の意見が全く違った
39. 39. ー RoomClipであった全社プレビュー アプリを見すぎた開発チームよりも ユーザーの目線に近いので、 新しい視点で見えてくるものがある
40. 40. ●デザイナーが高めたい完成度と、 エンジニアが必要としている仕様はズレることがある 都度確かめながら進むべし ●エンジニアとデザイナーだけで判断せず、 最後は他の人を巻き込んでレビューしてもらうべし ー まとめ
41. 41. 組織の中でのデザイナーの立ち位置 3
42. 42. 突然ですが、デザイナーとして こんな悩みを抱えたことはありますか？ Q
43. 43. ・発言する機会が少ない。 決定事項をいわれた通りの形にするだけになってる ・スケジュール含めて決定事項だから改善を提案する余地がない しかしリリース後のツッコミはデザイナーに来る ・工数が不透明で理解してもらえない 「１ページだしちゃちゃっと１日でやれる範囲でできない？」 ・細かい差し込みに追われて便利屋状態 サービス主軸の作業がどんどん押していく わりとありがちなデザイナーの悩み ー わりとありがちなデザイナーの悩み
44. 44. なんだか仕事がすべて 受け身になってしまっている
45. 45. （※『そんなことで悩んだことないよ！？』 という方は、ここから先 こういう奴もいるんだな程度にお聞きください）
46. 46. 悩んだことある方！ （私はあります）
47. 47. 現状をロジカルに捉えられていない デザイナーがこういった悩みを 持ってしまう理由
48. 48. ・お化粧屋さんになっていませんか？ ・見た目をキレイにするだけが仕事じゃない！ ユーザーの体験までデザインすることが求められている ・受け身のデザイナーを喜ぶ組織などいない 本来デザイナーだって 自発的にどんどん提案していくべき！
49. 49. 「提案」ってなにさ？ 「手段」を実行したらどうなるかの仮説
50. 50. この仮説を立てるために根拠となる数値や、 プロダクトの課題、問題点を把握する必要がある
51. 51. （やや偏見ですが） 多くのデザイナーはこのへんに苦手意識を持ちがち ・日頃、根拠となる情報を追って無い ・数値とか言われると単純に毛嫌い
52. 52. デザイナー以外は… デザイナーは… ロジックありきの仕事だから そこから逃げちゃだめ 常にプロダクトの状態を自覚する 常にデザイナーに情報をオープンに
53. 53. ●デザイナーだってどんどん提案して行っていい ●肩書きに基づいて自分の範囲を限定してはダメ！ 自分もサービスを良くするためのメンバーだと きちんと自覚すべし ●サービスの状況が理解できていれば、 中身のない無茶振りなのか・本当に急ぎで必要なのか 理解できるようになる ー まとめ
54. 54. ●受け身にならない！ ●サービスに対して 影響力のあるデザイナーになろう ー まとめ
55. 55. 総まとめ
56. 56. ●デザイナーはプロジェクトの起点になるが、 全てを取り仕切るトップダウンではない ●エンジニアは全てを見透かして完璧に組み上げて くれる魔法使いではない ●コミュニケーション大事！ ●ユーザー第一！
57. 57. おわり ご静聴ありがとうございました
58. 58. Tunnel社では、一緒にRoomClipをより良くしてくれる 仲間を募集しております。 募集職種：エンジニア／デザイナー／他 http://www.tunn-el.com