SmartHRが考える プロダクトデザイナーの役割 あるいは、 プロダクトデザイナーの発見

2020/08/27に『ReDesigner Online Meetup 各社が考えるプロダクトデザイナーとは』で発表した資料です

Transcript

1. SmartHRが考える プロダクトデザイナーの役割 あるいは、 プロダクトデザイナーの発見 佐々木 勇貴 〜 ReDesigner Online Meetup 各社が考えるプロダクトデザイナーとは 〜 SmartHR プロダクトデザイングループ
2. 自己紹介
3. 2019年1月 株式会社SmartHR 入社 プロダクトデザイングループ所属 プロダクトマネージャーとプロダクトデザイナーを 兼務（最近はほぼプロダクトマネジメント寄り） グループ内での役割は「傲慢」、期待値はアジテー ション ・ ・ ・ ・ Yuki SASAKI tyoys00
4. 「傲慢」ってなに？という人へ SmartHRのプロダクトデザイングループは七つの大罪に基づいています
5. より詳しく知りたい方はこちらをどうぞ https://twitter.com/tyoys00/status/1253651814177599488
6. デザイン組織とSmartHR の事業
7. SmartHRのデザイン組織は2つに分かれています コミュニケーション デザイングループ デザイングループ プロダクト デザイングループ マーケティング、ブランディングにま つわるデザイン活動を行う。 グラフィック、印刷、映像、Webデザ イン・コーディング、などが期待値。 SmartHR 製品（＝アプリケーション）開 発にまつわるデザイン活動を行う。 UI デザイン、情報設計、UX リサーチ、フ ロントエド実装などが期待値。
8. プロダクトデザイングループの現在の構成
9. 事業と揮発体制
10. 今日話すこと
11. 今日話したいこと プロダクトデザイナーを 「プロダクト開発の専門性を持ったデザイナー」として再定義する
12. アジェンダ プロダクトデザインに対するギャップ プロダクトデザイナーのスキル プロダクトデザイナーのキャリアステップ
13. アジェンダ プロダクトデザインに対するギャップ プロダクトデザイナーのスキル プロダクトデザイナーのキャリアステップ
14. 募集要件にあうUIデザイナーに全然出会えない 書類選考でよく見る風景 スキルセットがミスマッチ スキルセットがミスマッチ スキルセットがミスマッチ スキルセットがミスマッチ
15. UIデザイナーの書類選考通過率は10%程度 いらすとやで見つけた10%のイラスト
16. 決してゼネラリストを求めているわけではない SmartHRのUIデザイナー募集要件 業務内容 ・SmartHR 製品の UI デザイン ・デザインシステムの構築 ・デザインにまつわる各種ガイドラインの策定、運用 ・プロダクトマネージャー、エンジニアとの協働および意思決定への関与 ・プロジェクト推進 必須要件 ・UIデザイナーとしての実務経験2年以上 ・デザインの中間成果物を含んだポートフォリオがあること ・アプリケーションやソフトウェアの仕組みについてへの理解、関心 ・デザインシステムへの理解・関心 ・オブジェクトデータモデルへの理解・関心指向への理解 ・SmartHR のミッション、バリューへの共感
17. 適当にUIデザイナーについて調べてみると… 転職エージェントのマイナビエージェント ｜ クリエイティブ職の転職に+Agent ｜ クリエイティブ職の職種図鑑 ｜ UI・UXデザイナー
18. 適当にUIデザイナーについて調べてみると… UIデザイナーの仕事 UIとは「User Interface（ユーザーインターフェース）」の略で、ユーザーと製品・ サービスとの接点のことを指します。UIデザイナーの仕事は、ユーザーと製品・サービ スとの接触がスムーズにいくデザイン、簡単にいえば「使いやすい」デザインを実現す ることです。 例えばWebサイトなら、商品がすっきり整理された構図、きれいな写真、見やすいカ ラーリング、最適な文字の大きさ、使いやすい検索機能などを意識して、ユーザーに とって使い勝手のいいサイトを目指します。 〜〜 技術面では、UIデザイナーなら、Photoshop、Sketch、Illustratorといったデザイン ソフトを使いこなせることが必須といえます。
19. 適当にUIデザイナーについて調べてみると… ソフトウェアの仕組みやデータモデルに対しての記述が全くない
20. 世のUIデザイナーと私たちが考えるUIデザイナーには大きな解離がありそう 一般的に言われるUIデザイナー ネイティブアプリ中心のデザイン経験 ルック&フィールからUIまで1人でデザインすることが強み 表層の差別化としてのデザインシステム デザインとエンジニアリングは分業 SmartHRで求めるUIデザイナー webアプリケーションのデザイン経験 データモデルを意識して設計できることが強み 開発効率化としてのデザインシステム デザインとエンジニアリングを分けない
21. アジェンダ プロダクトデザインに対するギャップ プロダクトデザイナーのスキル プロダクトデザイナーのキャリアステップ
22. SmartHRが考えるプロダクトデザイナーとは「プロダクト開発に特化したデザイナー」 いい感じの素材がなかったのでペトラ遺跡の素材をご鑑賞ください
23. プロダクトデザイナーの専門性 データモデルを理解した webアプリケーション デザイン デザインチームでの開発 スクラム開発への適応
24. モバイルアプリ webアプリケーション webアプリケーションに適したレイアウトパターンの引き出しを持っている データモデルを理解したwebアプリケーションデザイン モバイルはスタックレイアウトが中心なので、より自由度の高いwebアプリレイアウトパターンの引き出しが必要
25. データモデルからの情報設計と視覚表現を一致できる （ルックアンドフィールで先行で作らない） データモデルを理解したwebアプリケーションデザイン 最近よくやるtypescript風情報設計と画面レイアウト
26. データ型を意識したコンポーネント設計ができる デザインチームでの開発 ボタン font-size: 16 font-style:hoge font-weight:bold text-color: #ffffff width: 200px height:44px fill:#00A5AB radius: 8px デザインアプリケーションのアセットではなくデータ型を意識したコンポネート設計が重要 文字列 JSX プライマリ | セカンダリ 関数 論理 名前：ラベル 　　値： 名前：アイコン 　　値： 名前：種類 　　値： 名前：アクション 　　値： 名前：非活性情報 　　値：
27. ディスカバリートラックとデリバリートラックに働きかけられる スクラム開発への対応 スクラムチームに合わせて働き方を柔軟に変えられる Discovery Track Delivery Track 主にPM、PMM、リサーチャー 要件定義、リサーチ のアシスト 実装へのコミット 主にエンジニア プロダクトデザイナー
28. 要件・仕様が未確定な状態でもデザインを作りながら率先して定義していける スクラム開発への対応 PRDなどを待たずに先行してデザインを進めて、途中でマージしていく野武士スタイル PdM プロダクトデザイナー
29. アジェンダ プロダクトデザインに対するギャップ プロダクトデザイナーのスキル プロダクトデザイナーのキャリアステップ
30. スタートアップ初期に求められるUI/UXデザイナーと 大規模なプロダクト開発で専門性を発揮できるデザイナーは別物 お洒落なUI/UXデザイナー 悲しみから生まれたプロダクトデザイナー
31. 目指すべきプロダクトデザイナー像が発見できたプロセス 組織分割をきっかけに大胆なスキルセットの 選定が可能になる デザイナーの肩書きに捉われずに フロントエンドエンジニアとしてのキャリア を積んでいたメンバーを向かい入れることが 可能になる デザインとエンジニアリングを地続きで捉えられる グループカルチャーが醸成される
32. 今後はこのようなスキルセット・マインドセットを持ったプロダクトデザイナーが プロダクト開発の現場においてスタンダードになっていくと考えています デジタル野武士の図
33. 真面目にお話するとSmartHRのプロダクトデザイングループの仕事が プロダクトデザイナーのスタンダートになっていくと考えています
34. 真面目にお話するとSmartHRのプロダクトデザイングループの仕事が プロダクトデザイナーのスタンダートになっていくと考えています まずはSmartHRのプロダクトデザイングループがプロダクト開発の専門性を高めたいデザイナー のキャリアステップを約束する場になっていきたいと思います
35. プロダクトデザイナーになりたい方募集中 コーポレートサイト採用ページまたはWantedlyからお問い合わせください。