ソシオメディアのロゴ

OOUI トレーニング

Sociomedia はこれまで様々なシステム開発プロジェクトを通じて OOUI(オブジェクト指向ユーザーインターフェース)の設計メソッドを研究してきました。そのメソッドを御社のエンジニアリング/デザインチームが習得し開発プロジェクトの中で実践していけるよう、Sociomedia のデザインコンサルタントが講師となって、ワークアウト方式(手を動かしながら練習課題に取り組む)のトレーニングを行います。

Sociomedia の OOUI 設計トレーニングは、雑誌ブログで話題になった Sociomedia 独自のデザインメソッドをより詳しく体系化し、UI設計の経験があまりないデザイナーやプログラマーの方でも段階的にその技術を体得していけるよう、難易度レベル別に用意された課題にワークアウト方式でチャレンジしていくものです。基本的にインハウスのエンジニア/デザイナー向けの内容となっており、Sociomedia のデザインコンサルタントが御社に伺って講師を務めます。

オンライントレーニングも可能です

講師と受講者ともに完全なオンライン環境でトレーニングを行う、オンライントレーニングも実施可能です。オンライントレーニングでは、Zoom, Hangout Meet, Miro, Google Slides といったリアルタイムコラボレーションツールを用いたリモート環境で、通常のトレーニングと同じ内容を実施いたします。リモート環境の選定について事前にご担当者様とお打ち合わせいたします。

Sociomedia OOUI 設計メソッド

Sociomedia OOUI 設計メソッドの基本は、ユーザー要求の文脈からオブジェクトを抽出し、そのオブジェクトを操作の対象物として画面を構成していくこと。またその際にシングルビューとコレクションビューを組み合わせながら、情報システムの典型的なUIデザインパターンにあてはめて操作体系を構築していくことです。

OOUI とは: オブジェクトを手がかりに操作設計されたユーザーインターフェース。オブジェクト=ユーザーの関心の対象。GUI のオブジェクト指向性を活かし、「名詞 → 動詞」の順序でユーザーが操作できるようにする。ユーザーが行うことを手がかりにするタスクベースUIと対照的な方法論。
ソフトウェアデザインのレイヤー。プレゼンテーション: スタイルやレイアウト(ルック)、インタラクション: 構造と機能(フィール)、モデル: ユーザーの関心対象の模式。
OOUI の設計ステップ: 1. モデル・オブジェクトの抽出、2. インタラクション・ビューとナビゲーションの検討、3. プレゼンテーション・レイアウトパターンの適用。
1. オブジェクトの抽出: アプリケーションがサポートするドメイン(ユーザーの活動領域)において、ユーザーのメンタルモデルに在る対象物(オブジェクト)を抽出する。
2. ビューとナビゲーションの検討: オブジェクトがそれぞれどのような単位と順序でユーザーに提示されるべきかを、ビュー(ひとまとまりの情報表示領域)の関係として検討する。ひとつのオブジェクトは多くの場合コレクション(集合)ビューと、シングル(単体)ビューを持つ。
3. レイアウトパターンの適用(デスクトップ): メールボックス一覧、メッセージ一覧、メッセージ詳細、の3ペインレイアウト。
3. レイアウトパターンの適用(モバイル): メールボックス一覧、メッセージ一覧、メッセージ詳細、それぞれがシングルペインの一画面になっていて画面遷移する。

ワークアウトの中では各課題に対して、オブジェクトモデル(対象概念)、インタラクション(構造と機能)、プレゼンテーション(表現方法)についてダイアグラムやスケッチ画を作成しながら検討していきます。

ワークアウトの記入シートのイメージ

トレーニングメニューは、初級、中級、上級の3コースで構成されています。まずは簡単な単機能アプリのUIから、最後には本格的なエンタープライズシステムのUIまでを題材にして、OOUI への理解とデザイン経験を深めていくことができます。

各レベルの受講は、前レベルの受講が必須となります。実施料金についてはお問い合わせください。2コース以上を同時にご依頼の場合には、ディスカウントがあります。

ご依頼・お問い合わせ

受講者人数に応じてお見積もりいたします。まずは依頼・問い合わせフォームからお気軽にご相談ください。担当の者より折り返しご連絡いたします。

初級コース

初級コースは、オブジェクト指向UIについての基礎と設計手法の概要を理解し、簡単な課題に取り組みながら OOUI のデザインを体験するコースです。

初級コースのスライドイメージ
内容
  • 講義: OOUI とは
  • 講義: OOUI の設計手法
  • ワークアウト: レベル 1 – 3
時間
  • 3時間
対象
  • インハウスのプログラマー、デザイナー、SE、PMなど、ソフトウェア開発に関わる方
人数
  • 10〜30名程度(人数に応じてお見積りします)
場所
  • お客様社内のセミナールーム/会議室等

ワークアウトの概要

レベル 1 1つのオブジェクトを題材にレイアウトまでの全体の流れを理解する
レベル 2 複数のオブジェクトを題材にナビゲーションとループに適したレイアウトパターンを理解する
レベル 3 オブジェクト表示形式のバリエーションとしてマッピング(地図表示)を理解する

中級コース

中級コースは、やや複雑な課題に取り組みながらオブジェクト指向UIのデザインスキルを実践レベルまで引き上げます。様々なタイプのアプリケーションを題材にして、モデリングの勘所やレイアウト表現のパターンなどを段階的に習得していきます。初級コースを受講した方向けのコースです。

中級コースのスライドイメージ
内容
  • ワークアウト: レベル 4 – 9
時間
  • 3時間
対象
  • 初級コースを受講した方(インハウスのプログラマー、デザイナー、SE、PMなど、ソフトウェア開発に関わる方)
人数
  • 10〜30名程度(人数に応じてお見積りします)
場所
  • お客様社内のセミナールーム/会議室等

ワークアウトの概要

レベル 4 オブジェクト表示形式のバリエーションとしてマッピング(カレンダー)を理解する
レベル 5 具象的なオブジェクトを題材に隠蔽されたオブジェクトを理解する
レベル 6 抽象的なオブジェクトを題材に隠蔽されたオブジェクトを理解する
レベル 7 隠蔽されたオブジェクトと既存のモデルとの組み合わせを理解する
レベル 8 隠蔽されたオブジェクトのモデリングとアクションのオブジェクト化を理解する
レベル 9 フィルタリングを通じてオブジェクトとプロパティの役割分担を理解する

上級コース

上級コースは、実際の事例を題材にしながら、現実のデザインプロジェクトで直面するような様々な要件に取り組みます。正解がひとつではない問題について、受講者同士と講師でディスカッションをしながら理解を深め、OOUI デザインの応用力を身につけます。中級コースを受講した方向けのコースです。

上級コースのスライドイメージ
内容
  • ワークアウト: レベル 10 – 12
  • ディスカッション
時間
  • 3時間
対象
  • 中級コースを受講した方(インハウスのプログラマー、デザイナー、SE、PMなど、ソフトウェア開発に関わる方)
人数
  • 10〜30名程度(人数に応じてお見積りします)
場所
  • お客様社内のセミナールーム/会議室等

ワークアウトの概要

レベル 10 業務上のタスクをUI上のオブジェクトに変換するパターンを活用する
レベル 11 現行業務の不合理を正してユーザーの新しいメンタルモデルを作る
レベル 12 OOUI における論理的整合性の弱点を見極め克服する

ご依頼・お問い合わせ

受講者人数に応じてお見積もりいたします。まずは依頼・問い合わせフォームからお気軽にご相談ください。担当の者より折り返しご連絡いたします。

実施されたお客様の声

NTTコミュニケーションズ株式会社様

普段、ここまで具体的に考えてやっていなかったので、ビジュアル化・言語化という意味で非常に助かった。

 

UTやリサーチの結果、じゃあどうやって形にしていけばよいのかの部分で活用できると考えます。

 

練習がたくさんあったところが良かった。手を動かすことで理解が深まった。

 

言語化出来なかったUI設計のベストプラクティスが理解できた。UIデザインの最適な設計手法をチームに共有する術が無かったので、スッキリと腹落ちした。また、OOUI のキモである「オブジェクト中心に設計する」という方法は、今後のUIデザインの現場で大いに役に立つ手法であると感じた。説明中心ではなく、ワーク中心な点も良かった。OOUI の勘所が1日で理解できた。

 

使いにくいシステム(タスクベース)がなぜ使いにくいのか、が理解でき、オブジェクトベースにするためのノウハウを知ることができた。自身が開発にかかわるシステムにも積極的に取り入れていきたいと思った。

 

今まさに GUI のプロトタイプ作成に取り掛かろうとしているところでしたので、ユーザ目線で使いやすい GUI デザインを考えるにあたり、勉強になるところが多々ありました。これまで “なんか使いにくいな” と感じていた社内システムはほぼ全て “動詞→名詞” の順番のインターフェースになっていることに気が付き、今回のトレーニングを通して使いやすい GUI のポイントを自分の中で言語化できたことが一番よかった点だと感じています。

 

要件をオブジェクトベースで画面に落とし込む考え方は、今後通して有用だと思った。

 

これまで感覚でやっていたことがきちんとプロセス化・言語化された感覚がありました。中級までやって、まだシンプルな要件だったがそれでも最初は悩んだので、少しずつでも実案件でもこの思想で考えていくようにしたい。

 

KDDI株式会社様

実践的だったのですぐ活用できると思います

エンジニア

要件の整理や、開発とデザイナーの認識合わせに使えそう。

エンジニア

自己流でUIデザインを考えていたのでオブジェクトベース、タスクベースの違いや特徴を知った上でデザインできるようになった。良い学びになった。

エンジニア

デザイン得意なメンバー不在でも、ぽいデザインをあてれそう。ER図をかけるエンジニアなら画面遷移、レイアウトをそこそこできるとわかった。

エンジニア

株式会社リクルートライフスタイル様

オブジェクトベースという発想で普段デザインやUIを考えていなかったのでその辺り非常に勉強になりました。デザイナーではないのでデザインはできないですが、WF書いたりデザインチェックの時に意見をその視点で見れるのはとても良いです。また、モデルの概念は抜け漏れを防ぐためにもいいなと思いました。

ディレクター

皆に考え方が浸透すれば、どういうモデルで考えてるの?というところからレビューできるのは良いなと思った。そこの構造の考え方の違いがプレゼンテーションにも現れると思うので。

マネージャー

ユースケースからオブジェクトを抽出・整理してエンティティ定義する過程など、意識的にやったことのない作業を体感できたのでよかった。

リサーチャー

自分が改修しているプロダクトのUIが、本来あるべき形を出すのに、活かせると思いました。改修する中でより良いUIUXに少しでも近づけていきたいと思っているのですが、そのあるべきをどう出すべきか悩んでいたので、今回の研修の考え方は、整理するのにとても役立ちそうだと感じました。

デザイナー

インプットと実践両方できた。講師からOOUIの思想に基づいて、どう画面設計するのが良いか聞きながら、自分の考えた画面と比較して考察できたのが良かった。

ディレクター

BASE株式会社様

今までなんとなく、で進めていた「なんでこのUIだといいのか」「なんでこのUIだとダメなのか」というのがオブジェクトベース思考をすることで言語化できるようになった。楽しく学べました。

 

デザイナーは、実際の業務では先に要件がまとまっているものを画面に落とし込んでいくことが多く、Object と View を自分で定義するという過程はほぼないのですが、今回 Object と View を自分で定義して、画面を作るという過程を体験でき、とても有意義でした。

 

オブジェクト指向UIについての書籍は事前に読んではいたものの、読んだだけで終わってしまっていたのが、実際に手を動かして作業することで、より理解することができたように思います。また、デザインするうえでは無意識に行っていた設計・UIの「ナゼ」がちゃんと言語化されたようで、そこがとても良かったです。

 

グループワークで楽しく学べました。

 

明確に言語化され、手を動かしながら実践することで学びが深まりました。

 

もやもやとしていたことが、言語化され、実際に手を動かすことで少しだけ感覚がわかったように思います。また、他サービスを触る時に、なんとなく使いづらいものが、タスクベースだったりして、今までとは違う感覚を得られたと思いました。

 

中級コースでかなり頭を悩ませたものの、サンプルのアプリケーションはまだまだシンプルなレベルだったので、実際の業務でスムーズに運用できるレベルになるにはまだまだ学習が必要なのだろうな、と感じました。ただ、UIの設計や評価に当たって、設計・デザインするメンバの間で1つの共通言語ができた意義は非常に大きいので、少しずつでも実務にインストールしていければと思います。

 

画面上のUIだけじゃなくてAR、VRなどの流動的に空間内で変化し続けるオブジェクトに対してのタスクはどのように考えたらいいかも考えてみたいと思いました!

 

横河電機株式会社様

ワーク形式で行う講義で、自分で頭と手を動かすのがとても良い刺激となり、また実践的で良かったです。今まで受講した各種セミナーの中でも、とくに印象深いセミナーとなりました。ありがとうございました。

エンジニア

初めは同じに見えるものを異なるオブジェクトとして抽出するということが理解できなかったのですが、ワークの過程で理解できるようになりました。今回、OOUI について学ぶことができ、非常に勉強になりました。前回の講義の後、自身が普段使っているチケットサイトやネットショッピングのサイトについて使いやすいものと使いづらいものとでどこが異なるのか比較して考えてみたのですが、使いやすさは OOUI であるということを実感しました。

デザイナー

タスクが足されていく流れが体感できたのが良かった。増殖しても、前のものをあまり動かさずに構成できることが実感できた。ルートナビゲーションの名前とクリックしたときに最初に見えるオブジェクトの関係性もわかり理解が深まった。

デザイナー

業務にいかせそうです。良かったです。

エンジニア

プロトタイプを作る上では、デザイナーのジャンプが必要で、そのジャンプの仕方はデザイナーの感性によるところが大きいと感じた。ただ、方法論としてプロジェクトメンバーが理解すれば、アジャイル開発には有効だと感じる。

デザイナー

株式会社プレイド様

UIの表現モデルを作るとき、エンジニアリングもデザインも重要なので、それを結ぶオブジェクトモデリング大事だなぁと思いました。

デザイナー

今までしっかり言語化できていなかった部分がスッキリして大満足。考えていくと、新規作成などのオブジェクトが不確定なときの在り方やオブジェクトが持つタスクが多くなりすぎる場合が頭の使いどころなのかなと感じました。

エンジニア

オブジェクトのモデリングは経験とかセンスがいるなー、とやってて感じました。全く回答例と違っていて、シンプルに難しかった。モデリングの工程でデータの持ち方やアクションをエンジニアと同じ認識で作ることができているプロダクトはきっと強いなーと思いました。

デザイナー

こういった前提知識が言語化されて共有されていると、プロダクト開発の効率が上がりそうだし、エンジニアもデザインに納得できそうだと思いました。

エンジニア

ブラザー工業株式会社様

要件から画面に落とし込むプロセスを構造的に説明してもらえたのは新鮮で、チーム内レビュー等の質も上がりそうだと期待できる内容でした。

 

これまで感覚的に考えていたことをロジカルに考えることで、学ぶことが多かったです!頭使いすぎてちょっと疲れた・・・

 

ワーク面白かった!そして勉強になりました!

 

かなり実践的な内容で面白かったです。

 

まだ使いこなせていませんが、早速、UI検討時に「オブジェクトベース」という視点が追加され、考えやすくなったような気がします。

 

画面にする前の要件同士の関係性をつかんでいくのが、難しかった。ロジカルに言葉のつながりを一度図解するのはあまり方法を知らないので疲れたましたが、勉強になりました。

 

ご依頼・お問い合わせ

受講者人数に応じてお見積もりいたします。まずは依頼・問い合わせフォームからお気軽にご相談ください。担当の者より折り返しご連絡いたします。