OOUI コンテンツ中心のUI設計
UIモデル

OOUI コンテンツ中心のUI設計

情報設計の基本、”オブジェクト指向UIデザイン”解説&実践シリーズ
完了目安
1週間
1日2-3時間を継続して行えた時の目安の計算をしています。自分で目標を立てて取り組みましょう
概要
進め方
概要
進め方
専用チャンネルで質問や交流しよう
同じレベルの人と交流したり、進捗共有しよう
コミュニティへ
PURPOSE OF SERIES
なんで作ったの?🤔

ユーザーファーストなUI構造の考え方を身につけよう

ソフトウェアの情報設計の基本概念「OOUI-オブジェクト指向UIデザイン」について理解していくシリーズです。概念理解の解説だけではなく実際にUIを作りながら”オブジェクトベース”でUIを作るとはどういうことか?その逆の”タスク思考”とはどういうことかも学べます。

また実際にUIを考える上で必要な「UI要件定義」の情報構造についても学ぶことができます。

ユーザーのやりたいことやユースケースに従って、最適な情報構造をデザインするためのOOUIの基礎概念を身につけましょう。

PURPOSE OF SERIES

何をデザインできるの?💪

基礎知識

“オブジェクト指向UIデザイン”を身につけよう

何じゃそら!→使いやすいUIを考える基本の考え方です
“オブジェクト指向UIデザイン”を身につけよう
アウトプット

メンバー閲覧用のダッシュボードをデザイン

紹介する手順を手を動かしながら学ぼう
メンバー閲覧用のダッシュボードをデザイン
情報設計

UIの
”ページ情報の構造”を整理しよう

使いやすいUIには最適な情報の整理が不可欠な理由を知ろう
UIの
”ページ情報の構造”を整理しよう
情報整理

アクションと情報の配置パターンを知ろう

アクションできる、情報を閲覧できる、この2つがUIで必要なエリアです。
アクションと情報の配置パターンを知ろう
1on1
シリーズ完走で面談しよう🔮

学びをアウトプットして
カイクンとデザイン面談しよう

シリーズを7割以上終了したアウトプットをフォームから投稿すると、30分カイクンとデザイン面談ができます。
アウトプットのフィードバックや、理解の相談、今後の学習の進め方など内容はメンバーが自由に決めてOKです💡
シリーズに関係ない内容でも大丈夫です。

詳細と応募フォームはこちら
CONTENTS
さあ始めよう!👌
1.どっちがよいUI?なぜコンテンツ中心設計がユーザーを満足させやすいのか

なぜオブジェクト指向のUIデザインが重要なのかをしゃべっています。

□ 書籍 「オブジェクト指向UIデザイン」
https://www.amazon.co.jp/dp/B0893RK6WC/ref=cm_sw_r_tw_dp_W4HGJSYFDSVKWY9BVCNJ

学びや気づきはシェアしてくれると嬉しいです!💡
※スクショなど歓迎です。

※悪意のある転載はやめてね

24:27
無料
メンバー限定

1.どっちがよいUI?なぜコンテンツ中心設計がユーザーを満足させやすいのか

2.お題-最初にやってみよう

■ お題のスライドはこちら

https://www.figma.com/proto/5Lx4F7DU9QbwBR2eanddFP/オブジェクト指向UIデザイン?page-id=57%3A67&node-id=80%3A109&viewport=584%2C358%2C0.14613112807273865&scaling=contain&starting-point-node-id=80%3A109

■ まずはやってみよう!

1.コンテンツ中心の考え方を知る前にやってみよう
2.次の動画から考え方を学べる動画
3.動画を見てもう1度同じお題を提示します。Before/Afterで比較してみよう

04:57
無料
メンバー限定

2.お題-最初にやってみよう

3.お題解答-オブジェクト指向を使って論理的にデザイン

オブジェクト指向のデザインフローを使ってお題をデザインしてみました。
最終成果のアウトプット UIがどうか。も大事ですが、このシリーズでは、そのアウトプットを”論理的に組み立てられているか”にフォーカスしてみましょう。

オブジェクト指向の考え方を動画で見たら、次から早速各ステップごとに思考とプロセスを身につけるために学んでいきましょう。

□ 作成したUIのデザインデータはこちら
https://www.figma.com/proto/5Lx4F7DU9QbwBR2eanddFP/オブジェクト指向UIデザイン?page-id=321%3A6470&node-id=329%3A10219&viewport=241%2C48%2C0.11&scaling=min-zoom&starting-point-node-id=329%3A10219&show-proto-sidebar=1

15:15
無料
メンバー限定

3.お題解答-オブジェクト指向を使って論理的にデザイン

なぜ"オブジェクト"を中心にするのか?【答えはUIで要件を満たしたいから】

後半ではこのシリーズでオブジェクト指向UIデザインのやり方の中身をざっくり話しています〜!
オブジェクト指向のUIデザインをする上では、”オブジェクトを中心に考える”という話を初回にしました。
それがUIで目的を実現する際にも必要であることを話してます。

■ スライドのデータ
https://www.figma.com/file/5Lx4F7DU9QbwBR2eanddFP/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=1%3A208

04:33
無料
メンバー限定

なぜ"オブジェクト"を中心にするのか?【答えはUIで要件を満たしたいから】

オブジェクトとは?【UIのメインコンテンツ】

オブジェクト思考UIで大事な”オブジェクトとは何か”についてしゃべっています。
繰り返しになりますが、よくわからないな〜という人は注意深くみてくだされ!

■ スライドのデータ
https://www.figma.com/file/5Lx4F7DU9QbwBR2eanddFP/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=72%3A1381

07:24
無料
メンバー限定

オブジェクトとは?【UIのメインコンテンツ】

オブジェクトの要素を考えよう

”このUIで本当に要件を満たしているのか?”を考えるときに大事なポイントの1つが「表示する情報」です。
そもそも何を表示するのか?を決めるオブジェクトを考えるフローで、表示要素を考えておきましょう。

ちなみに完璧に考えてからUIを作る必要はないです。具体物のUIを作って気づくことも多いので行ったり来たりしましょう。

□ 動画で使っているスライド

https://www.figma.com/file/5Lx4F7DU9QbwBR2eanddFP/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=170%3A2596

08:00
無料
メンバー限定

オブジェクトの要素を考えよう

オブジェクトからページ構成を考える

この動画からUIのフロー図(ページ構成に近い)を考えていくオブジェクト指向UIデザインへ入っていきます。
ちょっと難しい概念なので完璧に作れるようになる。というより、”あー今から作るUIと画面の構成はこうなっているのか〜”を言語化するための考え方。ぐらいで最初は見てもらうのが良いと思います。

この知識がなくても良いUIは考えられます。が、再現性や別の人に説明するときに力になってくれる考え方です。

□ スライドのリンクはこち

https://www.figma.com/file/5Lx4F7DU9QbwBR2eanddFP/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=173%3A780

08:25
無料
メンバー限定

オブジェクトからページ構成を考える

ページはコレクションとシングルが8割

オブジェクトからページを考えるときは「コレクション(オブジェクトのアイテムを並べる)」と「シングル(アイテムの詳細)」に大きく分けれます。

□ スライドはこちら

https://www.figma.com/file/5Lx4F7DU9QbwBR2eanddFP/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=174%3A2035

03:59
無料
メンバー限定

ページはコレクションとシングルが8割

起点になるページ群「ルートナビゲーション」

UIのフロー図、ページ構成を考えてるときに「起点になるページ」=「階層でいうと1番上のページ」をルートナビと呼んで紹介しています。

主にユーザーが”想起する”オブジェクトが来ることが多いです。

■スライド

https://www.figma.com/file/5Lx4F7DU9QbwBR2eanddFP/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=174%3A3337

06:19
無料
メンバー限定

起点になるページ群「ルートナビゲーション」

UIフロー図を作ろう

色々紹介しましたが、フロー図の作成手順とイメージの動画です!
詳しくみたい方はスライド活用ください。完璧にやらないといけないというよりかは、自分の中だけでも作ろうとしているUIの構造がどうなっているのかを整理するための手法だと思ってます。個人でやる場合は、まずはそこからトライです。

■ スライド

https://www.figma.com/file/5Lx4F7DU9QbwBR2eanddFP/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=174%3A3987

11:05
無料
メンバー限定

UIフロー図を作ろう

プレゼン:整理した情報を使って楽にUIパターンを出す方法

いよいよオブジェクト指向をやってきた成果が見えます!(長かった!w
この動画を見ると、なぜ今まで整理してきたのか、UIを作るのにどう貢献するのかがわかると思います。

□ 動画の中で使っているデザインとスライドのデータ

https://www.figma.com/proto/5Lx4F7DU9QbwBR2eanddFP/オブジェクト指向UIデザイン?page-id=72%3A3867&node-id=311%3A287&viewport=241%2C48%2C0.17&scaling=min-zoom&starting-point-node-id=311%3A287&show-proto-sidebar=1

23:44
無料
メンバー限定

プレゼン:整理した情報を使って楽にUIパターンを出す方法

UIは使い手の気持ちに紐づく必要があります

オブジェクト指向に限った話ではないですが、今までやってきた整理やこれから作るUIも全て、使い手に紐づいて設計される必要があることを話してます。
UXデザインの概念の基本でもあります。

□ 動画の中で使っているデザインとスライドのデータ

https://www.figma.com/file/5Lx4F7DU9QbwBR2eanddFP/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=489%3A685

05:20
無料
メンバー限定

UIは使い手の気持ちに紐づく必要があります

デザインするエリアは"情報"と"アクション"の2つが9割

UIのビジュアルデザインは基本的に「情報」と「アクション」の2つのエリアで情報を整理されていることが多いです。
その中で各エリアごとに考えていく、とやりやすいです。

□ 動画の中で使っているデザインとスライドのデータ

https://www.figma.com/file/5Lx4F7DU9QbwBR2eanddFP/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=490%3A2869

14:29
無料
メンバー限定

デザインするエリアは"情報"と"アクション"の2つが9割

ABOUT
シリーズについて💡

概要

UIの情報設計の基本である「OOUI-オブジェクト指向UIデザイン」を学びます。そもそも”オブジェクト指向”とは?という概念から、実際にその概念でデザインしていく方法を学びます。UIは基本的には”コンテンツ”を主役にして設計されるものであり、ユーザーもそれを扱ったり閲覧することで基本的にメリットを得ます。その考え方の土台になる知識とスキルを身につけましょう。

スケジュール

1-2週間。トライもやる場合は時間が掛かるので作業時間を確保して臨みましょう。閲覧のみの場合は1度ざっと見て大枠の方向性を確認しながら理解していくと良いでしょう。特に初学者は概念を100%理解する傾向がありますが、実際に使わないと理解することは難しい分野です。

コースレベル

初級レベル:より本格的にUI/UXデザインを始めたい人。

誰におすすめ

・ユーザーに対してメリットのあるUI設計をしたい方。
・情報設計について理解したい人
・これからUI/UXデザインを始めたい人

動画数
12
お題数
This is some text inside of a div block.
カテゴリ
【UIデザイン】インタラクションデザイン
Design
カテゴリ
This is some text inside of a div block.