シリーズ目次

ゼロからはじめるUI情報設計

20
1.シリーズ全体像と手順
sss
1.シリーズ全体像と手順

1.シリーズ全体像と手順

どんなシリーズ?
05:09
どんなシリーズ?

どんなシリーズ?

シリーズをやるメリット
04:08
シリーズをやるメリット

シリーズをやるメリット

要件をUIに反映するデザインの流れ
06:58
要件をUIに反映するデザインの流れ

要件をUIに反映するデザインの流れ

【補足】おすすめの道具:紙とペン
03:09
【補足】おすすめの道具:紙とペン

【補足】おすすめの道具:紙とペン

2.要件内容を把握する
sss
2.要件内容を把握する

2.要件内容を把握する

お題を把握する-デザインの前に始めること
09:54
お題を把握する-デザインの前に始めること

お題を把握する-デザインの前に始めること

補足:内容がわからない時は1人で考えない
04:10
補足:内容がわからない時は1人で考えない

補足:内容がわからない時は1人で考えない

3.UIの要件定義をしよう
sss
3.UIの要件定義をしよう

3.UIの要件定義をしよう

UIの要件定義をトレースしよう
06:24
UIの要件定義をトレースしよう

UIの要件定義をトレースしよう

【重要】UIの要件を整理する意味あります?
05:59
【重要】UIの要件を整理する意味あります?

【重要】UIの要件を整理する意味あります?

トレースするUI要件定義の完成形をチェック
10:05
トレースするUI要件定義の完成形をチェック

トレースするUI要件定義の完成形をチェック

①ユースケース:UIを人がいつ使うか整理しよう
05:34
①ユースケース:UIを人がいつ使うか整理しよう

①ユースケース:UIを人がいつ使うか整理しよう

②行動フロー : UIで必要なアクションの整理
08:23
②行動フロー : UIで必要なアクションの整理

②行動フロー : UIで必要なアクションの整理

③オブジェクト:表示する情報を書き出そう
11:55
③オブジェクト:表示する情報を書き出そう

③オブジェクト:表示する情報を書き出そう

④タスク:UIで必要なアクションを整理する
07:43
④タスク:UIで必要なアクションを整理する

④タスク:UIで必要なアクションを整理する

UIのリサーチをしよう
xxx
UIのリサーチをしよう

UIのリサーチをしよう

1.作る前にUIを調べよう
03:32
1.作る前にUIを調べよう

1.作る前にUIを調べよう

UIリサーチの方法:同じカテゴリーのものを調べる
06:55
UIリサーチの方法:同じカテゴリーのものを調べる

UIリサーチの方法:同じカテゴリーのものを調べる

UIリサーチ:まずは構造から参考にしよう
04:58
UIリサーチ:まずは構造から参考にしよう

UIリサーチ:まずは構造から参考にしよう

UIの見た目よりまずは、構造を参考に仕様
02:40
UIの見た目よりまずは、構造を参考に仕様

UIの見た目よりまずは、構造を参考に仕様

UIのVer1.0をデザインする
xxx
UIのVer1.0をデザインする

UIのVer1.0をデザインする

UI制作スタート:手書きで情報設計
23:07
UI制作スタート:手書きで情報設計

UI制作スタート:手書きで情報設計

UI情報構造のデザインをトレースで実践学習
38:50
UI情報構造のデザインをトレースで実践学習

UI情報構造のデザインをトレースで実践学習

1.0を壊して自分で改善する
xxx
1.0を壊して自分で改善する

1.0を壊して自分で改善する

UI情報設計をブラッシュアップするには? - Ver.1で終わるのはハーゲンダッツ
04:36
UI情報設計をブラッシュアップするには? - Ver.1で終わるのはハーゲンダッツ

UI情報設計をブラッシュアップするには? - Ver.1で終わるのはハーゲンダッツ

ラフをデザインしたら、叩いてアイデアを出そう
13:08
ラフをデザインしたら、叩いてアイデアを出そう

ラフをデザインしたら、叩いてアイデアを出そう

「フィッシュボーン図」で課題解決のアイデアを効率よく考える
15:10
「フィッシュボーン図」で課題解決のアイデアを効率よく考える

「フィッシュボーン図」で課題解決のアイデアを効率よく考える

優先度を付ける。UIアイデアをパターンでデザインしていこう
23:12
優先度を付ける。UIアイデアをパターンでデザインしていこう

優先度を付ける。UIアイデアをパターンでデザインしていこう

UIの質の上げ方:テーブルUIをデザインする
21:23
UIの質の上げ方:テーブルUIをデザインする

UIの質の上げ方:テーブルUIをデザインする

配色はアクションからUIに指定していく
16:19
配色はアクションからUIに指定していく

配色はアクションからUIに指定していく

UIをブラッシュアップする方法:詳細ページの完成UIを紹介
36:45
UIをブラッシュアップする方法:詳細ページの完成UIを紹介

UIをブラッシュアップする方法:詳細ページの完成UIを紹介

お疲れ様でした!
ss
お疲れ様でした!

お疲れ様でした!

おわりに:ゼロからはじめる情報設計
07:00
おわりに:ゼロからはじめる情報設計

おわりに:ゼロからはじめる情報設計

作成したラフに自分でツッこみを入れる

ラフがラフである理由は”荒くても良いから形になっている”ことにあります。この完璧じゃない具体物から”要件を満たすためには”さらにどうしたら良いのか、その視点をコメントしましょう。

ツッコミを入れたFigma
https://www.figma.com/design/LVkZw68g5yIabsYGmDEvf0/%F0%9F%9B%AB%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E6%83%85%E5%A0%B1%E8%A8%AD%E8%A8%88-I%E5%87%BA%E5%BC%B5%E7%94%B3%E8%AB%8B?node-id=323-1142&t=DUBGf49LeW1oCbJd-1

ツッコむポイント

2つです。「ユーザーが軸」になっているか。「要件を満たす」ための視点か。です。ボタンが小さい、押しづらい、そういうのも大事ですが、1番はそれが「要件を満たすため」に必要だから、ボタンが小さいのか。になります。

スタイリングはまずは”ふつう”のものをいつでもデザインして欲しいので限りなく単純なクオリティの低さはスルーできると本来は良いです。が、最初はそんな完璧にもできないので、どうしてもスタイルが気になる人は項目を分けてツッコミを入れましょう。

デザイナーは放っておくと見た目しか気にかけないようになってしまいがちです。この癖がある人はうまく自覚しつつ”構造”と”スタイリング”で考えるポイントや時間を区別しましょう。

ツッコみをする時は参考デザインを

ツッコミの方法論は特に手法がありません。”UIの理解”と”要件、ユーザーの理解”の深さによって良いツッコミができるかどうかが決まってきます。

ただセンスではありません。既存のUIを知っているかどうかなどの、知識と経験になります。

なので、まずはUIからヒントを得るために参考UIを集めて、比較してツッコミを考えたりしてみましょう。

作成したラフに自分でツッこみを入れる

ラフがラフである理由は”荒くても良いから形になっている”ことにあります。この完璧じゃない具体物から”要件を満たすためには”さらにどうしたら良いのか、その視点をコメントしましょう。

ツッコミを入れたFigma
https://www.figma.com/design/LVkZw68g5yIabsYGmDEvf0/%F0%9F%9B%AB%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E6%83%85%E5%A0%B1%E8%A8%AD%E8%A8%88-I%E5%87%BA%E5%BC%B5%E7%94%B3%E8%AB%8B?node-id=323-1142&t=DUBGf49LeW1oCbJd-1

ツッコむポイント

2つです。「ユーザーが軸」になっているか。「要件を満たす」ための視点か。です。ボタンが小さい、押しづらい、そういうのも大事ですが、1番はそれが「要件を満たすため」に必要だから、ボタンが小さいのか。になります。

スタイリングはまずは”ふつう”のものをいつでもデザインして欲しいので限りなく単純なクオリティの低さはスルーできると本来は良いです。が、最初はそんな完璧にもできないので、どうしてもスタイルが気になる人は項目を分けてツッコミを入れましょう。

デザイナーは放っておくと見た目しか気にかけないようになってしまいがちです。この癖がある人はうまく自覚しつつ”構造”と”スタイリング”で考えるポイントや時間を区別しましょう。

ツッコみをする時は参考デザインを

ツッコミの方法論は特に手法がありません。”UIの理解”と”要件、ユーザーの理解”の深さによって良いツッコミができるかどうかが決まってきます。

ただセンスではありません。既存のUIを知っているかどうかなどの、知識と経験になります。

なので、まずはUIからヒントを得るために参考UIを集めて、比較してツッコミを考えたりしてみましょう。

作成したラフに自分でツッこみを入れる

ラフがラフである理由は”荒くても良いから形になっている”ことにあります。この完璧じゃない具体物から”要件を満たすためには”さらにどうしたら良いのか、その視点をコメントしましょう。

ツッコむポイント

2つです。「ユーザーが軸」になっているか。「要件を満たす」ための視点か。です。ボタンが小さい、押しづらい、そういうのも大事ですが、1番はそれが「要件を満たすため」に必要だから、ボタンが小さいのか。になります。

スタイリングはまずは”ふつう”のものをいつでもデザインして欲しいので限りなく単純なクオリティの低さはスルーできると本来は良いです。が、最初はそんな完璧にもできないので、どうしてもスタイルが気になる人は項目を分けてツッコミを入れましょう。

デザイナーは放っておくと見た目しか気にかけないようになってしまいがちです。この癖がある人はうまく自覚しつつ”構造”と”スタイリング”で考えるポイントや時間を区別しましょう。

ツッコみをする時は参考デザインを

ツッコミの方法論は特に手法がありません。”UIの理解”と”要件、ユーザーの理解”の深さによって良いツッコミができるかどうかが決まってきます。

ただセンスではありません。既存のUIを知っているかどうかなどの、知識と経験になります。

なので、まずはUIからヒントを得るために参考UIを集めて、比較してツッコミを考えたりしてみましょう。

ゼロからはじめるUI情報設計

20
1.シリーズ全体像と手順
sss
1.シリーズ全体像と手順

1.シリーズ全体像と手順

どんなシリーズ?
05:09
どんなシリーズ?

どんなシリーズ?

シリーズをやるメリット
04:08
シリーズをやるメリット

シリーズをやるメリット

要件をUIに反映するデザインの流れ
06:58
要件をUIに反映するデザインの流れ

要件をUIに反映するデザインの流れ

【補足】おすすめの道具:紙とペン
03:09
【補足】おすすめの道具:紙とペン

【補足】おすすめの道具:紙とペン

2.要件内容を把握する
sss
2.要件内容を把握する

2.要件内容を把握する

お題を把握する-デザインの前に始めること
09:54
お題を把握する-デザインの前に始めること

お題を把握する-デザインの前に始めること

補足:内容がわからない時は1人で考えない
04:10
補足:内容がわからない時は1人で考えない

補足:内容がわからない時は1人で考えない

3.UIの要件定義をしよう
sss
3.UIの要件定義をしよう

3.UIの要件定義をしよう

UIの要件定義をトレースしよう
06:24
UIの要件定義をトレースしよう

UIの要件定義をトレースしよう

【重要】UIの要件を整理する意味あります?
05:59
【重要】UIの要件を整理する意味あります?

【重要】UIの要件を整理する意味あります?

トレースするUI要件定義の完成形をチェック
10:05
トレースするUI要件定義の完成形をチェック

トレースするUI要件定義の完成形をチェック

①ユースケース:UIを人がいつ使うか整理しよう
05:34
①ユースケース:UIを人がいつ使うか整理しよう

①ユースケース:UIを人がいつ使うか整理しよう

②行動フロー : UIで必要なアクションの整理
08:23
②行動フロー : UIで必要なアクションの整理

②行動フロー : UIで必要なアクションの整理

③オブジェクト:表示する情報を書き出そう
11:55
③オブジェクト:表示する情報を書き出そう

③オブジェクト:表示する情報を書き出そう

④タスク:UIで必要なアクションを整理する
07:43
④タスク:UIで必要なアクションを整理する

④タスク:UIで必要なアクションを整理する

UIのリサーチをしよう
xxx
UIのリサーチをしよう

UIのリサーチをしよう

1.作る前にUIを調べよう
03:32
1.作る前にUIを調べよう

1.作る前にUIを調べよう

UIリサーチの方法:同じカテゴリーのものを調べる
06:55
UIリサーチの方法:同じカテゴリーのものを調べる

UIリサーチの方法:同じカテゴリーのものを調べる

UIリサーチ:まずは構造から参考にしよう
04:58
UIリサーチ:まずは構造から参考にしよう

UIリサーチ:まずは構造から参考にしよう

UIの見た目よりまずは、構造を参考に仕様
02:40
UIの見た目よりまずは、構造を参考に仕様

UIの見た目よりまずは、構造を参考に仕様

UIのVer1.0をデザインする
xxx
UIのVer1.0をデザインする

UIのVer1.0をデザインする

UI制作スタート:手書きで情報設計
23:07
UI制作スタート:手書きで情報設計

UI制作スタート:手書きで情報設計

UI情報構造のデザインをトレースで実践学習
38:50
UI情報構造のデザインをトレースで実践学習

UI情報構造のデザインをトレースで実践学習

1.0を壊して自分で改善する
xxx
1.0を壊して自分で改善する

1.0を壊して自分で改善する

UI情報設計をブラッシュアップするには? - Ver.1で終わるのはハーゲンダッツ
04:36
UI情報設計をブラッシュアップするには? - Ver.1で終わるのはハーゲンダッツ

UI情報設計をブラッシュアップするには? - Ver.1で終わるのはハーゲンダッツ

ラフをデザインしたら、叩いてアイデアを出そう
13:08
ラフをデザインしたら、叩いてアイデアを出そう

ラフをデザインしたら、叩いてアイデアを出そう

「フィッシュボーン図」で課題解決のアイデアを効率よく考える
15:10
「フィッシュボーン図」で課題解決のアイデアを効率よく考える

「フィッシュボーン図」で課題解決のアイデアを効率よく考える

優先度を付ける。UIアイデアをパターンでデザインしていこう
23:12
優先度を付ける。UIアイデアをパターンでデザインしていこう

優先度を付ける。UIアイデアをパターンでデザインしていこう

UIの質の上げ方:テーブルUIをデザインする
21:23
UIの質の上げ方:テーブルUIをデザインする

UIの質の上げ方:テーブルUIをデザインする

配色はアクションからUIに指定していく
16:19
配色はアクションからUIに指定していく

配色はアクションからUIに指定していく

UIをブラッシュアップする方法:詳細ページの完成UIを紹介
36:45
UIをブラッシュアップする方法:詳細ページの完成UIを紹介

UIをブラッシュアップする方法:詳細ページの完成UIを紹介

お疲れ様でした!
ss
お疲れ様でした!

お疲れ様でした!

おわりに:ゼロからはじめる情報設計
07:00
おわりに:ゼロからはじめる情報設計

おわりに:ゼロからはじめる情報設計

閉じる

0 Comments

Active Here: 0
Be the first to leave a comment.
Loading
Load Previous
Someone is typing...
No Name
Set
4 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your comment will appear once approved by a moderator.
Load Previous
No Name
Set
2 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your reply will appear once approved by a moderator.
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More