シリーズ目次

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

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

動画の目次

  1. 00:00 見どころとイントロ
  2. 01:34 ラフを描く手順
  3. 03:20 参考からアイデアを拝借する
  4. 05:31 紙でUIラフを描く
  5. 08:40 コンテンツのラフ
  6. 17:31 アクションのラフ
  7. 21:43 まとめと次

参考UIからアイデアを出す

自分の独自の考えではなく初心〜中級者ぐらいまでは、すでにあるUIの中からアイデアを選んで参考にして組み立てていきましょう。
ラフの段階からどこに何を配置するのか?を参考を見ながらアイデアを出していきます。

紙でラフを描いていく

いきなりデータを作らない理由としては、データでアイデアを考えるのは時間が掛かるから。手書きだとすぐにイメージを確認できる。そのため”何を作るのか”を紙でまとめてからデータで起こして詳細をチェックするという工程を取っています。

なのでこの段階で、どういう情報設計にすると要件を満たせるか?という視点でガンガンアイデアを出していきます。(動画だと1アイデアですが、こんなノリで色々出していくのもこの時点でありです)

UIの基本構造に則って考えていく

UIはあらゆるブロックで、ナビ、コンテンツ、アクションの3つの役割で構成されています。

それを意識して情報をデザインしていきます。

UI3つの基本構造についてはこちらの動画を。

https://www.bo-no.design/contents/uivisual-6-3

ブロックごとに情報を構造化していく

ラフの段階で、何をどういうグループにして、グループ内の情報はどういう関係性なのか?を考えながらデザインをしていきます。ポイントは情報同士の親子関係、グループ関係という”構造”を意識してまずは考えていくことです。

装飾は後から可能なので、肝心な伝えたい情報の優先度などが崩れてしまうとそれだけで良いUIを作ることから離れてしまいます。なのでこの段階から構造を意識して組み立てていきます。

12:11

動画の目次

  1. 00:00 見どころとイントロ
  2. 01:34 ラフを描く手順
  3. 03:20 参考からアイデアを拝借する
  4. 05:31 紙でUIラフを描く
  5. 08:40 コンテンツのラフ
  6. 17:31 アクションのラフ
  7. 21:43 まとめと次

参考UIからアイデアを出す

自分の独自の考えではなく初心〜中級者ぐらいまでは、すでにあるUIの中からアイデアを選んで参考にして組み立てていきましょう。
ラフの段階からどこに何を配置するのか?を参考を見ながらアイデアを出していきます。

紙でラフを描いていく

いきなりデータを作らない理由としては、データでアイデアを考えるのは時間が掛かるから。手書きだとすぐにイメージを確認できる。そのため”何を作るのか”を紙でまとめてからデータで起こして詳細をチェックするという工程を取っています。

なのでこの段階で、どういう情報設計にすると要件を満たせるか?という視点でガンガンアイデアを出していきます。(動画だと1アイデアですが、こんなノリで色々出していくのもこの時点でありです)

UIの基本構造に則って考えていく

UIはあらゆるブロックで、ナビ、コンテンツ、アクションの3つの役割で構成されています。

それを意識して情報をデザインしていきます。

UI3つの基本構造についてはこちらの動画を。

https://www.bo-no.design/contents/uivisual-6-3

ブロックごとに情報を構造化していく

ラフの段階で、何をどういうグループにして、グループ内の情報はどういう関係性なのか?を考えながらデザインをしていきます。ポイントは情報同士の親子関係、グループ関係という”構造”を意識してまずは考えていくことです。

装飾は後から可能なので、肝心な伝えたい情報の優先度などが崩れてしまうとそれだけで良いUIを作ることから離れてしまいます。なのでこの段階から構造を意識して組み立てていきます。

12:11

動画の全てはBONOメンバー限定です。

動画を観れるプランのアカウントでログイン/メンバーシップ登録すると、動画の全てを閲覧できます。
(会員の方で動画が閲覧できない場合は、マイページからプランの確認をお願いします)

プランのページはこちら。

目次

  1. 00:00 見どころとイントロ
  2. 01:34 ラフを描く手順
  3. 03:20 参考からアイデアを拝借する
  4. 05:31 紙でUIラフを描く
  5. 08:40 コンテンツのラフ
  6. 17:31 アクションのラフ
  7. 21:43 まとめと次

参考UIからアイデアを出す

自分の独自の考えではなく初心〜中級者ぐらいまでは、すでにあるUIの中からアイデアを選んで参考にして組み立てていきましょう。
ラフの段階からどこに何を配置するのか?を参考を見ながらアイデアを出していきます。

紙でラフを描いていく

いきなりデータを作らない理由としては、データでアイデアを考えるのは時間が掛かるから。手書きだとすぐにイメージを確認できる。そのため”何を作るのか”を紙でまとめてからデータで起こして詳細をチェックするという工程を取っています。

なのでこの段階で、どういう情報設計にすると要件を満たせるか?という視点でガンガンアイデアを出していきます。(動画だと1アイデアですが、こんなノリで色々出していくのもこの時点でありです)

UIの基本構造に則って考えていく

UIはあらゆるブロックで、ナビ、コンテンツ、アクションの3つの役割で構成されています。

それを意識して情報をデザインしていきます。

UI3つの基本構造についてはこちらの動画を。

https://www.bo-no.design/contents/uivisual-6-3

ブロックごとに情報を構造化していく

ラフの段階で、何をどういうグループにして、グループ内の情報はどういう関係性なのか?を考えながらデザインをしていきます。ポイントは情報同士の親子関係、グループ関係という”構造”を意識してまずは考えていくことです。

装飾は後から可能なので、肝心な伝えたい情報の優先度などが崩れてしまうとそれだけで良いUIを作ることから離れてしまいます。なのでこの段階から構造を意識して組み立てていきます。

12:11

ゼロからはじめる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