「デザインプロセスワークショップ」やDX人材育成を目的としたコンテンツ提供など、グッドパッチは企業向けにさまざまなマインドセットやスキルアップを目的とした研修やワークショップを展開しています。その中で、デザイン組織の強化・拡大に伴うより専門性の高いご相談にお応えする場面も増えてきています。
今回、株式会社マネーフォワードさんより「デザイナーがWebアプリケーションの構造理解を深めることでエンジニアとのコミュニケーションをより活発にしたい。その上で、よりスピード感を持ってプロダクト開発を進められるようにしたい」というご相談を受けました。
これまで、あらゆる業界のクライアントと共創を行ってきたGoodpatch。これまでの経験・知見をもとに、マネーフォワードさんのデザイナー向けに「エンジニアリング基礎研修」を実施しました。本記事では、開催の背景から当日の様子までをご紹介します。
今回の研修のベースになっている「エンジニアリング基礎研修」については、こちらの記事でも詳しくまとまっているので、ぜひご覧ください。
ご依頼の背景と決め手
「お金を前へ。人生をもっと前へ。」をミッションに掲げるマネーフォワードさんは、事業成長に伴い、デザイン組織の規模を拡大しています。加えて、組織拡大とともにデザイナーのキャリアやバックグラウンド、デザインスキルの多様性が顕著になりはじめていたそうです。
こういった状況下で、Webアプリケーションとして開発・実装をするときの観点を踏まえたデザインデータの情報設計や構造設計に関わる共通言語をデザイナーが獲得することで、エンジニアとの共創力や開発スピードの向上を促したいという必要性が高まりました。
過去に、GoodpatchはマネーフォワードさんへモデルベースUIデザインについて理解・実践するワークショップを開催した実績があります。当時の目的は、デザイン組織において「チーム全体で共通したプロダクトデザインスキルを身につける」ことでした。
この前回ワークショップの実施後、デザインマネージャーによるとチーム内での発話量が増えた実感があったそうです。加えて「デザイナー向けのエンジニアリング研修」を実施してくれる期待感があったことから、今回もGoodpatchへお声かけいただきました。
マネーフォワードさんは複数拠点にデザイン組織がまたがっているため、研修はすべてオンラインでの開催となりました。
研修概要
今回の研修はマネーフォワードさんのデザイン組織の約6〜7割を占める、UIデザイナーを主な対象とし、2日間かけて行われました。
プロダクト品質の向上に向け「ソフトウェアデザインにおけるエンジニアリングの基礎的観点の獲得を目指す」ことを、研修全体の方針に掲げました。
Day1.デジタルプロダクト開発概論セミナー
Day1では「知る」ことをゴールに設定し座学を実施しました。
知っているとエンジニアとコミュニケーションが取りやすくなる知識に絞り、エンジニアが日々扱っている技術や開発プロセスの概要を解説。考慮漏れや手戻りを防止する網羅的なUIデザインの勘所を知っていただきます。
これにより、デザイナー・エンジニア双方の共通言語を増やすことを目指しました。
Day1-1.エンジニアリング基礎
まずは、ソフトウェアはどのように動き・作るのかというエンジニアリングの基礎的な部分についてレクチャー。具体的には、以下のようなテーマで講義を行いました。
- Webサイトを構成する要素
- ネットワーク通信のしくみ
- データベースとAPIのしくみ
- エンジニアとのコミュニケーションにおける基本
マネーフォワードさんのデザイン組織はジュニアからシニアのメンバーまで層が厚く多様なバックボーンを持つため、ばらつきのある知識・認識のベースを揃えることが狙いでもあります。
ソフトウェアの仕組みを理解しておくことで、どのようなタイミングで通信が行われるのか、エラーが発生するのかといったことが理解できます。これにより、UIデザインの段階から気を付けておくべきポイントを抑えることができるようになります。
Day1-2. UIデザインとエンジニアリングの関係性
次に、UIデザインとエンジニアリングの関係性について解説。「動的」な性質を持つソフトウェアをデザインするためには、デザイナーは状態変化を考慮しておく必要があります。そのために今回は「UI Stack」と呼ばれる概念をお伝えしました。
デジタルプロダクト開発概論で扱った「ソフトウェアが動作する仕組み」とUI Stackを関連づけて知ることで、ソフトウェア上で起こり得るすべての状態を網羅したUIデザインを提案できるようになります。
Day1-3.振り返り
各座学パートの合間には、気づきや感想・質問などを書き出し学びを共有する時間を設定。知識の定着を図ります。
講義を通して感じた疑問は、講師であるGoodpatchのデザイナー・エンジニアへ質問いただき、活発な意見交換と質疑応答の時間となりました。
研修当日の振り返りの様子
Day2.課題演習フィードバック
日程を改め開催されたDay2では「実践し習得する」ことをゴールに設定。
エンジニアリングのプロセスや実装工程を、自ら「実践」してみることでUIデザイナーに必要なエンジニアリングの基礎知識や観点を「習得」。ソフトウェア開発におけるUIデザイン制作のクオリティ向上に繋げることが狙いです。
Day2-1. UIデザインとエンジニアリング 〜コンポーネント編〜
まず、UIデザインとエンジニアリングについてコンポーネントの観点から解説。ユーザーや開発現場の混乱を防ぐため「UIをパターン化しUIに一貫性を持たせること」「完璧な設計よりも、継続的な改善が大切であること」などをレクチャーしました。
その後、具体例をもとに演習を実施。
実は、受講者にはDay1後に課題が課されていました。「要件に沿って指定デザインのUI Stackを完成させる」という題材に対し、模範解答と作成時のポイントを解説していきます。
Day2-2.HTMLとCSS
続いて、HTMLとCSSそれぞれの仕組みについて説明。その後は受講者自身が課題として作成したUIデザインを基に、CSSを触りながら「ボタンの背景色を変える」「四角ボタンを角丸ボタンに変更する」といった変更を加える演習を通じて理解を深めました。
研修後の声
参加者の声
研修実施後、受講者に行ったアンケートの一部をご紹介します。
「エンジニアリングについての知識は、個人で調べても「わからない」となってしまうことが多かったのですが、図で噛み砕いて説明していただき、とても理解しやすかったです」
「エンジニアの方の意見や観点を伺いながらデータのやり取りについての基礎やUI Stackについて知ることができました。おかげで開発側の方との連携の仕方についても知見が広がった気がします」
「普段ミーティングでよく耳にする言葉（API、テーブル、JSONなど）の意味や概念をよく理解できました」
「エンジニアリングがあまり得意ではなく、割と毛嫌いしてしまっていたのですが、ざっくりとした知識からの導入で勉強のモチベーションアップに繋がりました」
「コンポーネントを設計するときに網羅すべきStateなど改めて意識しようと強く思いました。また、早く担当プロダクトのコンポーネントを整理したいなとワクワクしてきました！」
「デザイナーの共通認識を揃えるという意味で、有意義な時間だったと思います。踏み込んだ内容を分かりやすく解説いただけました」
研修後のポジティブな変化
また、今回研修についてご相談いただいたデザイン組織のマネージャー陣からは、受講者の変化について以下のような声もいただいています。
「デザイナーが、UI Stackの観点を持ちデザインデータを用意することができるようになったため考慮漏れが減った。また、APIに関するコミュニケーションが以前よりスムーズになった」
「データベースを意識したUI作成が以前よりもできるようになった」
「受講前と比べるとエンジニアとの会話がスムーズになっている感触がある」
最後に
今回はUIデザイナー向けエンジニアリング基礎研修を実施しましたが、最近ではディレクターやデザイナーの方々向けに同研修を開催することも増加しています。
Goodpatchでは、ご要望に合わせたワークショップや研修をカスタマイズして提供可能です。お問い合わせいただいた後、ワークショップ実施の金額やその他事例などもお伝えいたします。こちらからぜひお気軽にご相談ください！
