1 【読書シェア会 vol.5】 

大手独立系 SIer企業 （担当 WEBサービス） ・バックエンドWEBエンジニア ・システムエンジニア ・プロジェクトマネージャー ISP系サービス企業 （担当 BtoB事業） ・プリセールス ・製品開発責任者(バックエンド開発) 上場系中堅ベンチャー企業 （担当 ブログ、ECサービス） ・バックエンドWEBエンジニア ・WEBディレクター ・エンジニアリングマネージャー ベンチャー企業 （担当 ファッションECサービス) ・エンジニアリングマネージャー ・製品開発責任者（企画・開発デザイン） ・取締役(製品・コーポレート) グローバル パブリッククラウド企業 ・技術サポートエンジニアマネージャー SaaS企業[現職] （担当 バックオフィスSaaS) ・プロダクトマネージャー 稲垣 剛之(いながき たけし) 　　　@ingktks7 株式会社 ラクス 開発本部 東京開発統括部 　 プロダクト部 製品管理課 課長 プロジェクト マネージャー バックグラウンド バックエンド エンジニア エンジニアリグ マネージャー プロダクト マネージャー 略歴 2 自己紹介 

3 プロダクト部とは？ 「デザイン」って理解していますか？ 

4 プロダクト部発足の経緯 「デザイン」=見た目・装飾・意匠を整えること 見た目を整える？ UI？ 視覚的に わかりやすくする？ ＵＸ？ 

5 プロダクト部発足の経緯 「デザイン」=見た目・装飾・意匠を整えること これらは狭義の意味の「デザイン」 見た目を整える？ UI？ 視覚的に わかりやすくする？ ＵＸ？ 

6 プロダクト部とは？ 「デザイン」=問題を解決するための設計・計画全般 ユーザーが 使いやすいアプリの設計 （UI/UXデザイン） 働きやすい組織の 仕組みを考える （組織デザイン） サービスの 提供フローを考える （サービスデザイン） 企業・サービスの 「伝わり方・つながり方」を設計 （コミュニケーションデザイン） 

7 プロダクト部とは？ これから紹介する書籍は それを理解するための最初の一歩の本です 

銀行とデザイン デザインを企業文化に浸透させるために 8 書籍紹介 著者 金澤洋さん, 金子直樹さん, 堀 祐子さん 　└三井住友銀行のインハウスデザイナー 内容(Amazonより抜粋) コロナ禍やDXの進展によりビジネス環境が変化する中、三井住友銀行（SMBC）は 2016年からインハウスデザイナーを採用し、UI/UXの視点でサービスを革新。 2019年のアプリ刷新や関連サービスの連携により、2021年にはグッドデザイン賞を受賞。 本書は、社内での理解獲得からDX推進まで、3人のデザイナーによる実体験を綴ったドキュメントです。 

9 こんな人におススメ ・　サービスのユーザー体験に課題を感じている人 ・　ステークホルダーが多く プロジェクトの進め方に悩んでいる ・　デザインの可能性を信じてる人 

10 どんなことが書いてあるか？ ■章立て 第1章：銀行のデザインシフト：銀行のデザイナー理解と浸透プロセス 第2章：チームとしての始動 ：具体的に取り組んだこと 第3章：デザインチームの足跡 ：SMBCアプリリニューアルで取り組んだこと 第4章：デザインチームの今 ：デザインシステム策定とSMBCグループへの浸透 第5章：これからのデザインチーム：これからと意識してきたこと ■書かれていること ・どうやってデザイナーが現場に入り込んでいったか ・その時どういった意識で望んでいたか ・アプリリニューアルという大きなプロジェクトでどんなことをしたか ・更にデザインを浸透させるためにどんなことをしたか 

11 どんなことが書いてあるか？ ■章立て 第1章：銀行のデザインシフト：銀行のデザイナー理解と浸透プロセス 第2章：チームとしての始動 ：具体的に取り組んだこと 第3章：デザインチームの足跡 ：SMBCアプリリニューアルで取り組んだこと 第4章：デザインチームの今 ：デザインシステム策定とSMBCグループへの浸透 第5章：これからのデザインチーム：これからと意識してきたこと ■書かれていること ・どうやってデザイナーが現場に入り込んでいったか ・その時どういった意識で望んでいたか ・アプリリニューアルという大きなプロジェクトでどんなことをしたか ・更にデザインを浸透させるためにどんなことをしたか ■読みどころ ポイント① 　●デザイナー＝見た目を整える人 ← 初期はこの状態 　　└ 企画担当者が簡単なワイヤーを作ってパートナー会社のデザイナーに直してもらっていた この状態をどうひっくり返したか 

12 どんなことが書いてあるか？ ■章立て 第1章：銀行のデザインシフト：銀行のデザイナー理解と浸透プロセス 第2章：チームとしての始動 ：具体的に取り組んだこと 第3章：デザインチームの足跡 ：SMBCアプリリニューアルで取り組んだこと 第4章：デザインチームの今 ：デザインシステム策定とSMBCグループへの浸透 第5章：これからのデザインチーム：これからと意識してきたこと ■書かれていること ・どうやってデザイナーが現場に入り込んでいったか ・その時どういった意識で望んでいたか ・アプリリニューアルという大きなプロジェクトでどんなことをしたか ・更にデザインを浸透させるためにどんなことをしたか ■読みどころ ポイント② 　●SMBCダイレクトリニューアル 　　 3年で実施 初期：1,828画面　→ リニューアル後：1,125画面 デザイン負債をどう解消したのか？ 

とにかく顔を出す できることは何でもする 13 共感・刺さったこと ●初期フェーズに意識していた働き方 相談増える 領域増える 全体⾒える 横串提案可能 上記による好サイクル 

とにかく顔を出す できることは何でもする 14 共感・刺さったこと ●初期フェーズに意識していた働き方 相談増える 領域増える 全体⾒える 横串提案可能 上記による好サイクル どんな役割でも通用する 初期フェーズの働き方 

15 学び① ●インハウスデザイナーが必要なこと ・所属する組織のビジネスを学ぶ ・要件を俯瞰してアウトプットを考える ・デザイナー自身が体験する ・軸を作って振り返る ・共通言語を明確化する ●デザインの4原則 ・近接　関連する情報を近くに置きグループ化 ・整列　ルールに沿って整列配置 ・反復　決めたデザインルールを繰り返す ・対比　異なる要素はメリハリをつけて対比 【非デザイナー必見】読むだけですぐに活用できる！デザインの基本4原則について より引用 

16 学び② ●デザインシステムの構築 └ 一貫性を持たせたデザインを提供する他ための考え方や仕組みデザインの 共通コンポーネントのルールを定めたもの └ 工夫 　　OK例とNG例で具体化 　　どういう場合にこのタブを使うか，まで丁寧に記述 　　理由のわかるエラーコードへの改善 　　AppleやGoogleのデザインシステムをチェック ●デザイナーとして意識すべきこと ・バランス感覚 ・諦めない姿勢 ・マネジメント層への定期報告 ・デザイナー以外にデザインの価値を伝える ・フワッとした考えは可視化 

17 学び② ●デザインシステムの構築 └ 一貫性を持たせたデザインを提供する他ための考え方や仕組みデザインの 共通コンポーネントのルールを定めたもの └ 工夫 　　OK例とNG例で具体化 　　どういう場合にこのタブを使うか，まで丁寧に記述 　　理由のわかるエラーコードへの改善 　　AppleやGoogleのデザインシステムをチェック ●デザイナーとして意識すべきこと ・バランス感覚 ・諦めない姿勢 ・マネジメント層への定期報告 ・デザイナー以外にデザインの価値を伝える ・フワッとした考えは可視化 楽楽シリーズは まさに絶賛 「デザインシステム」構築中 

18 ご清聴ありがとうございました！ ITサービスで企業の成長を継続的に支援します! この経営理念の実現のためにバックオフィスの業務のDX化を推進 デザインシステムの策定とUI/UXの改善に挑んでいます プロダクトデザイナー採用応募