見出し画像

Funにまなぶ、OOUIのススメ。

こんにちは!マネーフォワードでデザイナーをしているひびきです。
今回はHRデザイン部で実施した「OOUIを復習する取り組み」について対談形式で振り返ってみたいと思います✏️

HRデザイン部についてもっと知りたい方はこちら👇

こんな人に読んでもらいたい!👉

  • これからOOUIを学習しようと思っている方

  • OOUIを復習しようと思っている方

登場人物🗣️

登場人物の顔写真
ニコニコの登場人物たち

HRデザイン部プロダクトデザイナーのゆず、りな、ひびきの3名でお送りいたします🌱

学習教材📚

今回は、オブジェクト指向UIデザイン - 使いやすいソフトウェアの原理を使用しました。

学習のしかた✍️

ひとことサマリ

  • (初中級者向け)本のワークの要件に、新しい要件を付け足したり削ったりしてみることで、難易度の調整をして学習を進める✏️

  • (上級者向け)身近なアプリケーションをリバースモデリング&リデザインしてみる📱

復習を始めた経緯

ひびき:
そもそもどうして復習を始めたのか、という話から始めましょう!マネーフォワードに限らない話だと思いますが、OOUIをUIデザインの前提知識として据えているデザイン組織はたくさんありますよね。
りな:
これまでいた組織では各々で学習していたので、同じ組織でも理解度などにばらつきがありました。でもマネーフォワードでは「デザイナーは必修」という姿勢で、個々人ではもちろん、チームでのワークとして学んでOOUIの定着の深度を揃える取り組みが盛んなのには驚きました!
ひびき:
なるほど〜。僕は新卒でマネーフォワードに入社した際に研修でやりました!毎日当たり前のようにOOUIを知っている前提で議論をしていますね。
ゆず:
ですね。ただ昔少しさらっただけだったり、途中までしかやっていないという方もちらほらいるような状況でしたね。マネーフォワードではデザイナーはもちろん、PdMの方もOOUIの基礎を知っている方がいて驚いた記憶があります。
ひびき:
どんどん新しいメンバーが入ってきているマネーフォワードではOOUIへの理解もまちまちなので、いっそのことみんなで復習しよう!となったわけです。

座談会の様子の写真
「みんなで学習できるのって貴重ですよね!」

復習その①:「オブジェクト指向UIデザイン」を活用

ひびき:
とはいえ普段からデザイン業務をしているわけなので、一からというわけではなく、サクッと教科書を復習してより実用的な学習をしましたね。
りな:
でしたね。でも学習の進め方は初学者でも参考になるかも!
ゆず:
ですね!最初に行ったのは、3章に出てくる「学校名簿アプリケーション」のデザインでしたね。
ひびき:
とりあえずプロセスを丁寧になぞりましたね。ただ、業務的な目線で本に記載してある要件を見ていると、どうしても要件が少なくて付け足したりしましたね。

追加の要件と情報のリスト
「先生が使う」アプリである前提と、青い付箋の要件を追加
(参考:https://www.sociomedia.co.jp/9556)

りな:
うんうん。いつも触れているプロダクトに引っ張られて想像力が膨らんでしまう場面は多かったかも。誰が使うのかも明確にしましたね。
ゆず:
既存の要件に新しく情報を付け足しながらやっていくスタイルは良かったですね!要件次第では難易度を上げたりもできますね。
りな:
逆に削れば難易度を下げたりもできそう!
ゆず、ひびき:
良さそう!

OOUIのプロセスに沿って進めたFigma
復習がてら手順通りに各々でもくもく

復習その②:リバースモデリング&リデザイン

ひびき:
次はリバースモデリングをしましたね。リバースモデリングとは端的にいえば、すでに完成しているアプリケーションを分析してオブジェクトや情報構造を明らかにしていくプロセスです。
(リバースモデリングについてもっと詳しく知りたい方はこちら
ゆず:
結構難しかったです。リバースモデリングのあとに、リデザインもしたことでかなりOOUIが体に染みつきました。
りな:
確かに!しかも自分がユーザーだから色々な視点から考えられたり、改めてアプリを観察することで発見もありましたね。こんなページあったんだ、みたいな。

座談会の様子の写真
「リバースモデリングって言うのは…」

ゆず:
そうそう!楽しみながらワイワイ進められましたね。同じものを見ていてもそれぞれ視点が違くて一人では気付けないような発見や学びがあって面白かった!
ひびき:
ちなみに僕たちは某緑のコーヒーショップのアプリをお題にしましたね!よくみんなで買いに行くのでお題を考えるときに自然と浮かびましたね。
りな:
リバースモデリング難易度もちょうど良かったし、楽しみながらできたので良いお題でしたね!
ゆず:
ですね!楽しみながらできるのってとても大切だし、おすすめしたい学習方法ですね!

アプリの全画面を分析したFigmaの画面
画面を構成しているオブジェクトやビューを分析しているようす

学習を通して✍️

ひとことサマリ

  • 当たり前の知識も定期的に復習するのが大切

  • マネーフォワードのカルチャーや、デザイナーが孤独じゃない環境ってとても貴重なものだということが再認識できた

  • HRデザイン部ってLOVE&QUICKだよね

OOUIを復習してみて

ひびき:
復習してみてどうでしたか?
りな:
曖昧な知識をしっかり補正するのって大切ですね、ちゃんと基礎があることでどっしり立てるというか
ひびき:
ですね。OOUIに限らず、自分や組織の中で当たり前になってる知識も定期的に話題に出したり、学び直すのって大事だなーって思いました。
ゆず:
ですね〜。あとマネーフォワードの自主学習の文化を改めて感じました!みんなで学習できるのって当たり前じゃないです。デザイナーって孤独に学習することが多いように感じるので。
りな:
ほんとにそう!普通は目先のタスク優先で学習や読書の時間が後回しになることが多いけど、マネーフォワードは輪読会や勉強会も盛んでいろんな学習の機会がありますね!
ひびき:
確かに!マネーフォワードのカルチャーの中でも、FunとTeamworkを体現した取り組みでしたね!

座談会の様子の写真
「LOVE&QUICKだよね!」

りな:
あとは、HRデザイン部のLOVE&QUICKなカルチャーも感じました!呼びかけたらすぐに集まって実施されるし、お互いのことを思いやってWin-Winな方法も考えていけましたね!
ゆず:
LOVEですね🫶
ひびき:
こういう素敵な文化はしっかりと残していきたいですね!とっても貴重な環境だと思います!
りな、ゆず:
うんうん
ひびき:
いい振り返りの機会になりましたね!ありがとうございました!
じゃあ休憩がてら某コーヒーショップでもいきましょうかね☕️
りな、ゆず:
いいですね〜いきましょう!

登場人物の集合写真
3人でもパシャリ📸

マネーフォワードのデザイナー組織が気になる方はデザイナーサイトへ!

応募はこちらから!


この記事が気に入ったらサポートをしてみませんか?