はじめに

株式会社Relicでフロントエンドエンジニアをしているみきです。
社内でオブジェクト指向UI（OOUI）の勉強会を開いてみたというお話しです。

OOUIを概念的に学ぶのは結構ハードルが高く、手を動かしていくのが重要になる中で、重めのタスクを伴う勉強会はなかなか継続が難しい...

そんな中でこの勉強会の試行錯誤や進め方が、少しでも参考になる場面があるといいなと思っています

目次

勉強会の目的
輪読会編
ワークアウト編
勉強会をやってみて

勉強会の目的

当初はこんな感じで目標を立てていました。

課題(なぜやるのか)
- デザイナーとデザインエンジニアの共通言語を育てる
- 機能の簡単なUIを提案するときのベースが、個人の経験値に委ねられている
- デザイナーとエンジニアが、気軽に、会話のネタ程度にUIについて相談できる環境を作る（交流の場を設ける）
課題に向けた定量目標
- 参加者全員がアプリをオブジェクト指向でデザインできるようになる
何をやるのか
- 輪読会（ワークアウトを含む）
- ワークショップ
誰とやるのか
- デザインエンジニアとデザイナーの希望者
- 気兼ねなく話せる環境を作りたいので５人程度が理想

メンバーを絞っているのは、この勉強会の前進である「デザイナーとデザインエンジニアの合同勉強会」なるものを企画した時に、希望者向けに広く募集をかけたらエンジニア議論が白熱してしまって、デザイナーさんを置いてけぼりにした苦い経験があるからです...

目的に沿った規模感が大事なんだなと。

勉強会の企画

教材

教材はOOUIに触れたことがある方ならおそらく目にしたことがある銀の弾丸本です。理由はデザイナーさん一押しだったので。

オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 (WEB+DB PRESS plusシリーズ)

輪読会の計画

勉強会の前半は輪読会、後半はワークアウト編とざっくり決まったところで、一口に輪読会といっても進め方はさまざまですよね。

輪読会の進め方は参加メンバーに投票形式で決めてもらいました。

ワークアウトの計画

後半のワークアウト編はタスクが発生する分、参加者への負担が増えるので進め方は迷いましたが、
先輩に相談のもと、もくもく会を取り入れることにしました。

ようは自習会で、タスクを進める時間を、勉強会内で確保してしまおうという考え方です。
計画段階では、もくもく会という名の自習会と、答え合わせの会が交互になるようにスケジュールを組みました。

輪読会編

勉強会は毎週木曜日の終業後30分間で、
2022年9月~12月の3ヶ月をかけて、本の1~3章を読みました。

アンケートに基づき、本を読んでの気づきと質問を事前に記載しておく方針です。

当日の内容は議事録に残して、今回参加できなかった方でも次回参加しやすいようにというのを心がけました。

メンバーのテコ入れ

メンバー編成についてですが、実は輪読会を終えたあたりで、「デザインエンジニアとデザイナーの希望者」の制限をとっぱらって参加者の見直しを行なっています。

理由は単純に参加人数が減ってきたことで、
活動の様子を聞いてお声掛けくれたバックエンドの方など数名が参加になりました。

普段からデータベースの設計を考えているBEの方のオブジェクト指向は大変参考になり、それと同時にメンバーを制限することのデメリットも実感しました

ワークアウト編

年明け1月からは、ワークアウト編に突入しました。
4章レベル1のタスクを1ヶ月かけて進めました。というのも...

初っ端から挫折

書籍では各タスク30分で進めるように設定されていて、当初の計画ではその30分をもくもく会で吸収するように設計していたのですが、ここに来てノンデザイナーではこのタスクを30分では終えられないということに気が付きます。

そこで進め方は下記のようになりました。
みんなでオブジェクト抽出
ビューとナビゲーションの検討
レイアウトパターンの適用

ワークアウトタスクはFigmaを使って進めました。

みんなでオブジェクト抽出
ワークアウトのメモを見ながら、おもいおもいにオブジェクトを書き出します。話しながらやっていると、なんだかんだ30分はあっという間です。

ビューとナビゲーションの検討
前回出したオブジェクトを書籍の解説と照らし合わせて答え合わせをしながら、ビューとナビゲーションの検討に入ります。

ビューとナビゲーションとはつまり、
項目一覧画面のコレクションビューと、項目詳細画面のシングルビューの検討のことなのですが、
ここも一からデザインを起こすととても勉強会の30分ではやりきれないのでチートします。

実際に存在するアプリのスクリーンショットから、コレクションビューとシングルビューの中でオブジェクトがどのように配置されているのかを研究します。

スクリーンショットを用意できなかった場合は、画面共有をしてもらって実際のメモアプリを見ながら話し合いをしました。

このスクリーンショット活用案は、参加してくれているデザイナーさんの「実在のアプリの構成を見比べるだけでも参考になる」のひとことから採用に至りました

レイアウトパターンの適用
最後にレイアウトパターンの適用です。上記の情報を、PC/SP画面に落とし込みます。
特に画面の小さいSP画面でビューをどう配置するかというのが、検討のポイントになってきます。

卒業制作物

勉強会の締めくくりは卒業制作物として、Excel管理されている社内Radioのアーカイブ一覧のビューをOOUI指向で検討することにしました。

いざ実践に入ると途端に初心を忘れるもので、「あれ、何を見せたいんだっけ」と話し合いながら作成を進めました。
サムネイル、カテゴリ、検索画面、アイコン等、わいわい脱線・検討しながら画面構築しました。

勉強会をやってみて

目的を振り返る

冒頭の目標を再掲

課題(なぜやるのか)
　デザイナーとデザインエンジニアの共通言語を育てる
　機能の簡単なUIを提案するときのベースが、個人の経験値に委ねられている
　デザイナーとエンジニアが、気軽に、会話のネタ程度にUIについて相談できる環境を作る（交流の場を設ける）
課題に向けた定量目標
　 ◯ 参加者全員がアプリをオブジェクト指向でデザインできるようになる
何をやるのか
　輪読会（ワークアウトを含む）
　ワークショップ（卒業制作）
誰とやるのか
　デザインエンジニアとデザイナーの希望者
　気兼ねなく話せる環境を作りたいので５人程度が理想

もちろんプロジェクトが忙しくなって途中から参加が難しくなったメンバーもいるので、
「参加者全員が」とはいきませんが、卒業制作では自分たちでOOUIをベースに画面を構築しました。

これでOOUIは完ペキ！というよりは、ここからの反復練習だという気持ちです。

勉強会の進め方はもちろん計画通りにいきませんでしたが、
振り返ってみると案外目的は達成できていたのではと感じます。

最後に

締めは本の一節の引用から、勉強会ででた名言を一つ

オブジェクト指向UIの大きな特徴はその操作が「オブジェクト選択→アクション選択」の手順になっていることです（図133）。...... これは「名詞→動詞」の順序と言うこともできます。
ソシオメディア株式会社,上野学,藤井幸多. オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 (WEB+DB PRESS plus) (Japanese Edition) (p.39). Kindle 版.

今年のGWはOOUIを勉強して、日常のオブジェクト指向UIを見つけてみませんか？

他のRelicメンバーが書いた記事は以下にまとめられているので、良ければ見てください！
https://dev.relic.co.jp/