シリーズ目次

ゼロからはじめる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
おわりに:ゼロからはじめる情報設計

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

トップ
/
ゼロからはじめるUI情報設計
/
UI情報設計をブラッシュアップするには? - Ver.1で終わるのはハーゲンダッツ
UI要件

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

2023
10
09
スキルを上げて、創造のための武器を手に入れよう
すべての動画閲覧には、メンバーシップ加入が必要です
メンバー登録について

ラフは具体イメージを沸かせるために

前回まででUIを1つ具体的なイメージをデザインしてみました。動画を観る方は「結構出来上がったらこれで良いのでは?」と思うかもしれません。(実際イメージのついてる僕が作っているので、そんなにいじる必要はないかもしれません)が、ラフは完成度を求めるものではないです。要件を基本を踏襲して具体的にしてみる(UI)とどうなるか?を自分の目で見れるようにするためのものです。なので完璧でなくて良いし、荒くともまずは形にすればOKです。

このフェーズでは、このラフを使って目に見える形で「要件」と「具体」を照らし合わせて”さらにどうすれば要件を満たした良いUIになるか”のアイデアを検討していきます。

要件とUIを照らしてアイデアを出そう

ラフで作成したUIが本当に要件を満たせているか?よりよく満たせる形はないか?議論した方が良い箇所はないか?を整理していきましょう。自分で自分が作ったラフUIを”よりよくするため(改善)”にはどうしたら良いのかを考えていきます。これがデザイナーとしてはとても重要です。自分で自分のアイデアをブラッシュアップできる、人の意見や教えがなくても進めていける突破力は提案力にもデザイン力にも直結していきます。

改善の目線はあくまで”ユーザー”であり”要件”です。自分の感覚だけで考えないようにしましょう。

これらの癖を付けつつ、具体イメージで想像しやすくなった状態でさらにアイデアを出していきましょう。

ラフは具体イメージを沸かせるために

前回まででUIを1つ具体的なイメージをデザインしてみました。動画を観る方は「結構出来上がったらこれで良いのでは?」と思うかもしれません。(実際イメージのついてる僕が作っているので、そんなにいじる必要はないかもしれません)が、ラフは完成度を求めるものではないです。要件を基本を踏襲して具体的にしてみる(UI)とどうなるか?を自分の目で見れるようにするためのものです。なので完璧でなくて良いし、荒くともまずは形にすればOKです。

このフェーズでは、このラフを使って目に見える形で「要件」と「具体」を照らし合わせて”さらにどうすれば要件を満たした良いUIになるか”のアイデアを検討していきます。

要件とUIを照らしてアイデアを出そう

ラフで作成したUIが本当に要件を満たせているか?よりよく満たせる形はないか?議論した方が良い箇所はないか?を整理していきましょう。自分で自分が作ったラフUIを”よりよくするため(改善)”にはどうしたら良いのかを考えていきます。これがデザイナーとしてはとても重要です。自分で自分のアイデアをブラッシュアップできる、人の意見や教えがなくても進めていける突破力は提案力にもデザイン力にも直結していきます。

改善の目線はあくまで”ユーザー”であり”要件”です。自分の感覚だけで考えないようにしましょう。

これらの癖を付けつつ、具体イメージで想像しやすくなった状態でさらにアイデアを出していきましょう。

ラフは具体イメージを沸かせるために

前回まででUIを1つ具体的なイメージをデザインしてみました。動画を観る方は「結構出来上がったらこれで良いのでは?」と思うかもしれません。(実際イメージのついてる僕が作っているので、そんなにいじる必要はないかもしれません)が、ラフは完成度を求めるものではないです。要件を基本を踏襲して具体的にしてみる(UI)とどうなるか?を自分の目で見れるようにするためのものです。なので完璧でなくて良いし、荒くともまずは形にすればOKです。

このフェーズでは、このラフを使って目に見える形で「要件」と「具体」を照らし合わせて”さらにどうすれば要件を満たした良い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
おわりに:ゼロからはじめる情報設計

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

閉じる

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

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