企画、エンジニア、デザイナーがともに学ぶ―――OOUIプログラムを開催!

alt

パーソルキャリアのサービス企画開発本部では、サービス企画、エンジニア、デザイナーなど専門人材のスキル向上のために、定期的に研修や勉強会の機会を設けています。今回のテーマは「オブジェクト指向UI(以下、OOUI)デザイン」。業界をリードするソシオメディア株式会社の藤井 幸多氏を講師に招いて研修を実施しました。

研修の仔細な内容については触れられませんが、当社のバリューでもある”成長マインド”を持った参加者の受講の様子をお伝えします!

 

オブジェクトベースUIデザイン研修の目的

ロジカルにUI設計するために、OOUIという考え方が注目されている、と藤井氏は話します。

alt

ソシオメディア株式会社 藤井 幸多氏

これまでUI設計は、デザイナーの経験や感覚、一般論で進められることが多く、はっきりしたルールやロジックは定義されていませんでした。そのため、デザイナーやエンジニアが、ある種の共通言語で語り、協業するために、OOUIを学ぶことの重要性を感じる機会が増えています。

 

今回、本研修を導入したサービス開発統括部 UXデザイングループ リードデザイナーの佐藤匠生は、目的としてこのようなことを話しています。

 

「プロジェクトを進めていく中で、エンジニアとデザイナーの”オブジェクト指向”をお互いに理解し合うことが重要だということを感じていました。特にオブジェクトの抽出の仕方は非常に難しく、正解がないものです。なので今回、研修で一緒にワークすることを通じて、それが理解しあえると良いと思い、ソシオメディアさんに相談しました」

alt 

講演による座学とワークアウトを組み合わせた研修を「初級編」、「中級編」と分けて、2日間のプログラムで実施。今回は新型コロナウイルスの影響もあり、オンライン受講もできるようにし、仙台拠点や自宅からリモートワーク参加も合わせて、計30名ほどのメンバーで研修がスタートしました。

 

※【OOUI】object-oriented user interface、オブジェクト指向のUI設計

 

OOUIを紐解く

OOUIとは、オブジェクト指向のインターフェイス。つまり関心の“対象”を手掛かりに操作設計されたユーザーインターフェースのこと。

 

OOUIの原則として「オブジェクトが見えていて直接的に働きかけられる」ことや「オブジェクトは自身の性質と状態を体現する」ことが挙げられます。また「オブジェクト選択→アクション選択」という操作手順を基本として「Aのオブジェクトを変更すればBのオブジェクトが変更されるというようにすべてのオブジェクトが互いに協調しながらUIが構成される」という特徴があります。

 

オブジェクトに対してタスクという対になる概念もありますが、「タスクでUIを構造化すると動詞が先に来て”名詞”が隠れ、操作対象がわかりにくく『やること』を事前に決めないと操作しにくくなります。OOUIでは逆に“名詞”を手掛かりにし、「やること」を後で決められる構造にするため、情報システムや作業者による探索、創意工夫が期待されるものに向いています」、とOOUIの利点が語られました。

 

では、なぜオブジェクトベースではなくタスクベースになってしまうのか? その理由は、 

① 設計方法が言語化されていない

当たり前にやっていることなので言語化されておらず、最適な設計方法のナレッジが共有されていない

② 業務分析や要求分析の結果を過度に実現しようとする

クライアントの要求(ニーズ)を手掛かりにUIとしてまとめるとタスクベースになってしまいがち

③ 手続き型のプログラミング言語の設計スタイルを引きずってしまう

タスクに必要なオブジェクトを定義して、ユーザーはそれに応じて自由な操作をしながら目的を達成するようにすることが本来は重要

 

と解説されました。

 

そして、OOUIはユーザー、開発者側双方にメリットがあると藤井氏。

「OOUIの利点はユーザーにとってわかりやすく、自分なりの方法で作業を進めることができる点。まず対象が見えているので自分なりにどうしようかというのを決めることができます。そのため、『自分でシステムを使っている』という感覚になり学習の意欲も高まる可能性が高い。システム全体の画面数も減るため作業効率も上がり、開発者側の設計はシンプルに。結果としてユーザーと開発者双方が生産的なるということが言えます」とまとめられました。

 

リアリティのあるテーマでアプリケーションを考える 

藤井氏による講演の後は、参加者が実際に考え、手を動かすプログラムへ。

あるテーマのアプリケーションを題材に、まずはオブジェクトを抽出して、メインオブジェクトを中心にプロパティとアクションを紐付ける。次に、メインオブジェクトごとにコレクションとシングルビューを用意して、1対1、1対多などの関係性を踏まえ、呼び出し関係を整理するなどビューとナビゲーションを検討。

最後にレイアウトパターンの選択し、アクションを配置、コレクションとシングルの表現パターンを選択するなどプレゼンテーションを検討します。

alt

 

テーマは、

初級編の1日目は

レベル1. メモアプリケーション

レベル2. 社員名簿アプリケーション

レベル3. イベント運営アプリケーション

中級編の2日目は

レベル4. 会議室予約アプリケーション

レベル5. 家族で遊べる場所を探すアプリケーション

レベル6〜9. 商品管理アプリケーション

 

それぞれのテーマごとに15〜20分ほどのワークの時間が設けられた後、藤井氏による模範解答の一つを提示、解説がされました。参加者からはオブジェクトをより詳細に理解するための質問があがったり、オンラインによる参加者とは、オンラインホワイトボードサービス「Miro」を利用して、タイムリーにチェックやアドバイスを受けるなど活発なやりとりがありました。

alt

Miroを使ってワークを提出

alt

藤井氏からタイムリーにアドバイスをもらいます

 

またレベルが上がっていくごとに、同じテーブルにつく参加者同士でのコミュニケーションも深まり、参加者のモチベーションの高さを感じる時間になりました。

 

参加者からの声「とても濃密な時間が過ごせました」

2日間かけて、レベル1〜9までのワークアウトを行い、参加者の顔が見る見るうちに険しくなっていました(笑)研修が終わる頃には何かきっかけを掴んでいるメンバーや、まだ苦戦している様子のメンバー、積極的に藤井氏に質問をするメンバーなど、その場にいるメンバー全員でOOUIをモノにしようとしている姿が非常に印象的で、改めて学びの重要性を理解した気がします。

 

実際に参加したメンバーからは、こんな声が寄せられました。

 

「ものすごい濃密な時間で、頭の整理が追いつかず、後半ついていけていない部分があったのですが。。。ものすごく勉強になりました!!今後デザイン(画面設計)をする上でも、モデルの抽出とインタラクションを意識していきたいと思います!」(デザイナー)

「いろんな職種・役職・肩書きの人が同じものづくりのプロセス・時間を共有するのは価値が大きいと思いました。色んな人がいることで、スキルの獲得にとどまらず共通言語が増えてプロジェクトでのコミュニケーションの円滑化という副産物もありそうです。(難易度としてもいろんな人がやるには程よい)」(エンジニア)

「OOUI、今の所デザイナーをエンジニアの思考に引き上げるっていう内容に感じてる。これできてるデザイナーや企画者とはめちゃくちゃ仕事がしやすくなりそう!」(エンジニア) 

「オブジェクトベースの考え方はUI設計だけはなく、ライフスタイル(部屋の配置など)やプレゼン資料にも活用できそう」(サービス企画担当)

「IA/UI設計などは昔から業務でやっていたのですが、これまで感覚的にしかやれていなかったことを超高解像度で言語化/体系化して頂いた気持ちです。オブジェクトベースとタスクベースの違い、モデルの抽出や汎化、インタラクションの考え方など、想像以上に豊かな学びがありました。」(リードディレクター)

ご協力いただきましたソシオメディア株式会社の藤井様、また関係者皆様、本当にありがとうございました。

そして2日間の受講したメンバーの皆さま、お疲れ様でした!

(取材・編集=近藤由美(エーアイプロダクション)/文=武田光晴(エーアイプロダクション)/撮影=古宮こうき)

alt

alt

藤井 幸多 Kota Fujii

1980年、東京都に生まれる。ソシオメディア株式会社ユーザーインターフェースデザイナー。ビジネス用アプリケーションやその他様々なアプリケーションのデザインコンサルティングを経験。UI設計、ユーザビリティテスト、デザインガイドラインの策定、デザイン評価、OOUIの方法論やデザイントレーニングプログラムの開発と実施などを通してデザイン組織への支援を行う。

alt

佐藤匠生 Shoi Sato

サービス企画開発本部 サービス開発統括部 UXデザイン第1グループ リードデザイナー

民泊系スタートアップ、不動産テック企業などで新規事業立ち上げやWeb/アプリにおけるUI設計に従事。2018年よりパーソルキャリアに参画。UI/UX領域の専門家として複数の新規プロジェクトを支援する傍ら、デザイン組織の立ち上げにも奮闘中。

※2020年4月現在の情報です。