質問しよう
トップ
/
ゼロからはじめるUI情報設計
/
要件をUIに反映するデザインの流れ

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

November 10, 2022
情報設計
保存
保存中
すべてを閲覧するにはBONOメンバーシップに登録しよう
BONO - プロと学ぶUIとUXのコミュニティ
詳細

要件を反映するUIをデザインする流れはこちら

要件を踏まえ、UIをどうつくるべきか?を検証しながら進めていくデザインの流れを実践します。
実際のお仕事でもこの流れを踏みつつデザインします。

実際は途中でチームメンバーに共有して確認したり、意見をもらったりします。
デザイナーからメンバーにアイデアを共有もするのでその練習やイメージを掴むことも進めながらできると思います。

このシリーズもこの流れに則って進めていきます。

1.まずは内容を把握する

いきなり作る前にデザインする内容を把握します。
ビジネスや自分が関わっているサービスの話からデザインは始まるので、まずはそこをしっかり把握します。

2.UIの要件を整理します

このシリーズでもコアになるパートです。
UIに必要な情報、いつどんな時に使われるのか?のユースケース、その画面で何をできるようになるべきなのか?のタスクなどを洗い出していきます。

これがなくてもUIを作ることは可能ですが「なぜこのUIでないといけないのか?」という視点を持ちにくいです。つまり方向性がないまま作っても何が良いのか決められないんですね。

3.UIの構造を考えパターンを作ります

整理したことを踏まえてUIのアイデアを作っていきます。
1案だけではなく、整理した情報や構造をもとに、考えうるUIをしらみつぶしに作っていきます。
あらゆる可能性を検討して、なるべく多く実際に触れる形にしてどれが要件に1番合う形かを比較し吟味していきます。

4.作成したUIを検証します

今回は割愛しますが、UIの方向性が何個かできたら社内や実際のユーザーさんに1度見てもらいます。
デザイナーは客観性を失いやすいです。なので客観的な他の視点を入れながら今の方向性が上手くいきそうか、検証していきます。

5.最後にUIの細かい部分を

ここまできて細かい部分をブラッシュアップします。
今までの工程がずれているとUIは作り直しになってしまうんですね。

要件を反映するUIをデザインする流れはこちら

要件を踏まえ、UIをどうつくるべきか?を検証しながら進めていくデザインの流れを実践します。
実際のお仕事でもこの流れを踏みつつデザインします。

実際は途中でチームメンバーに共有して確認したり、意見をもらったりします。
デザイナーからメンバーにアイデアを共有もするのでその練習やイメージを掴むことも進めながらできると思います。

このシリーズもこの流れに則って進めていきます。

1.まずは内容を把握する

いきなり作る前にデザインする内容を把握します。
ビジネスや自分が関わっているサービスの話からデザインは始まるので、まずはそこをしっかり把握します。

2.UIの要件を整理します

このシリーズでもコアになるパートです。
UIに必要な情報、いつどんな時に使われるのか?のユースケース、その画面で何をできるようになるべきなのか?のタスクなどを洗い出していきます。

これがなくてもUIを作ることは可能ですが「なぜこのUIでないといけないのか?」という視点を持ちにくいです。つまり方向性がないまま作っても何が良いのか決められないんですね。

3.UIの構造を考えパターンを作ります

整理したことを踏まえてUIのアイデアを作っていきます。
1案だけではなく、整理した情報や構造をもとに、考えうるUIをしらみつぶしに作っていきます。
あらゆる可能性を検討して、なるべく多く実際に触れる形にしてどれが要件に1番合う形かを比較し吟味していきます。

4.作成したUIを検証します

今回は割愛しますが、UIの方向性が何個かできたら社内や実際のユーザーさんに1度見てもらいます。
デザイナーは客観性を失いやすいです。なので客観的な他の視点を入れながら今の方向性が上手くいきそうか、検証していきます。

5.最後にUIの細かい部分を

ここまできて細かい部分をブラッシュアップします。
今までの工程がずれているとUIは作り直しになってしまうんですね。

要件を反映するUIをデザインする流れはこちら

要件を踏まえ、UIをどうつくるべきか?を検証しながら進めていくデザインの流れを実践します。
実際のお仕事でもこの流れを踏みつつデザインします。

実際は途中でチームメンバーに共有して確認したり、意見をもらったりします。
デザイナーからメンバーにアイデアを共有もするのでその練習やイメージを掴むことも進めながらできると思います。

このシリーズもこの流れに則って進めていきます。

1.まずは内容を把握する

いきなり作る前にデザインする内容を把握します。
ビジネスや自分が関わっているサービスの話からデザインは始まるので、まずはそこをしっかり把握します。

2.UIの要件を整理します

このシリーズでもコアになるパートです。
UIに必要な情報、いつどんな時に使われるのか?のユースケース、その画面で何をできるようになるべきなのか?のタスクなどを洗い出していきます。

これがなくてもUIを作ることは可能ですが「なぜこのUIでないといけないのか?」という視点を持ちにくいです。つまり方向性がないまま作っても何が良いのか決められないんですね。

3.UIの構造を考えパターンを作ります

整理したことを踏まえてUIのアイデアを作っていきます。
1案だけではなく、整理した情報や構造をもとに、考えうるUIをしらみつぶしに作っていきます。
あらゆる可能性を検討して、なるべく多く実際に触れる形にしてどれが要件に1番合う形かを比較し吟味していきます。

4.作成したUIを検証します

今回は割愛しますが、UIの方向性が何個かできたら社内や実際のユーザーさんに1度見てもらいます。
デザイナーは客観性を失いやすいです。なので客観的な他の視点を入れながら今の方向性が上手くいきそうか、検証していきます。

5.最後に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に反映するデザインの流れ

November 10, 2022
情報設計
すべてを閲覧するにはBONOメンバーシップに登録しよう
BONO - プロと学ぶUIとUXのコミュニティ
詳細

要件を反映するUIをデザインする流れはこちら

要件を踏まえ、UIをどうつくるべきか?を検証しながら進めていくデザインの流れを実践します。
実際のお仕事でもこの流れを踏みつつデザインします。

実際は途中でチームメンバーに共有して確認したり、意見をもらったりします。
デザイナーからメンバーにアイデアを共有もするのでその練習やイメージを掴むことも進めながらできると思います。

このシリーズもこの流れに則って進めていきます。

1.まずは内容を把握する

いきなり作る前にデザインする内容を把握します。
ビジネスや自分が関わっているサービスの話からデザインは始まるので、まずはそこをしっかり把握します。

2.UIの要件を整理します

このシリーズでもコアになるパートです。
UIに必要な情報、いつどんな時に使われるのか?のユースケース、その画面で何をできるようになるべきなのか?のタスクなどを洗い出していきます。

これがなくてもUIを作ることは可能ですが「なぜこのUIでないといけないのか?」という視点を持ちにくいです。つまり方向性がないまま作っても何が良いのか決められないんですね。

3.UIの構造を考えパターンを作ります

整理したことを踏まえてUIのアイデアを作っていきます。
1案だけではなく、整理した情報や構造をもとに、考えうるUIをしらみつぶしに作っていきます。
あらゆる可能性を検討して、なるべく多く実際に触れる形にしてどれが要件に1番合う形かを比較し吟味していきます。

4.作成したUIを検証します

今回は割愛しますが、UIの方向性が何個かできたら社内や実際のユーザーさんに1度見てもらいます。
デザイナーは客観性を失いやすいです。なので客観的な他の視点を入れながら今の方向性が上手くいきそうか、検証していきます。

5.最後にUIの細かい部分を

ここまできて細かい部分をブラッシュアップします。
今までの工程がずれているとUIは作り直しになってしまうんですね。

要件を反映するUIをデザインする流れはこちら

要件を踏まえ、UIをどうつくるべきか?を検証しながら進めていくデザインの流れを実践します。
実際のお仕事でもこの流れを踏みつつデザインします。

実際は途中でチームメンバーに共有して確認したり、意見をもらったりします。
デザイナーからメンバーにアイデアを共有もするのでその練習やイメージを掴むことも進めながらできると思います。

このシリーズもこの流れに則って進めていきます。

1.まずは内容を把握する

いきなり作る前にデザインする内容を把握します。
ビジネスや自分が関わっているサービスの話からデザインは始まるので、まずはそこをしっかり把握します。

2.UIの要件を整理します

このシリーズでもコアになるパートです。
UIに必要な情報、いつどんな時に使われるのか?のユースケース、その画面で何をできるようになるべきなのか?のタスクなどを洗い出していきます。

これがなくてもUIを作ることは可能ですが「なぜこのUIでないといけないのか?」という視点を持ちにくいです。つまり方向性がないまま作っても何が良いのか決められないんですね。

3.UIの構造を考えパターンを作ります

整理したことを踏まえてUIのアイデアを作っていきます。
1案だけではなく、整理した情報や構造をもとに、考えうるUIをしらみつぶしに作っていきます。
あらゆる可能性を検討して、なるべく多く実際に触れる形にしてどれが要件に1番合う形かを比較し吟味していきます。

4.作成したUIを検証します

今回は割愛しますが、UIの方向性が何個かできたら社内や実際のユーザーさんに1度見てもらいます。
デザイナーは客観性を失いやすいです。なので客観的な他の視点を入れながら今の方向性が上手くいきそうか、検証していきます。

5.最後にUIの細かい部分を

ここまできて細かい部分をブラッシュアップします。
今までの工程がずれているとUIは作り直しになってしまうんですね。

要件を反映するUIをデザインする流れはこちら

要件を踏まえ、UIをどうつくるべきか?を検証しながら進めていくデザインの流れを実践します。
実際のお仕事でもこの流れを踏みつつデザインします。

実際は途中でチームメンバーに共有して確認したり、意見をもらったりします。
デザイナーからメンバーにアイデアを共有もするのでその練習やイメージを掴むことも進めながらできると思います。

このシリーズもこの流れに則って進めていきます。

1.まずは内容を把握する

いきなり作る前にデザインする内容を把握します。
ビジネスや自分が関わっているサービスの話からデザインは始まるので、まずはそこをしっかり把握します。

2.UIの要件を整理します

このシリーズでもコアになるパートです。
UIに必要な情報、いつどんな時に使われるのか?のユースケース、その画面で何をできるようになるべきなのか?のタスクなどを洗い出していきます。

これがなくてもUIを作ることは可能ですが「なぜこのUIでないといけないのか?」という視点を持ちにくいです。つまり方向性がないまま作っても何が良いのか決められないんですね。

3.UIの構造を考えパターンを作ります

整理したことを踏まえてUIのアイデアを作っていきます。
1案だけではなく、整理した情報や構造をもとに、考えうるUIをしらみつぶしに作っていきます。
あらゆる可能性を検討して、なるべく多く実際に触れる形にしてどれが要件に1番合う形かを比較し吟味していきます。

4.作成したUIを検証します

今回は割愛しますが、UIの方向性が何個かできたら社内や実際のユーザーさんに1度見てもらいます。
デザイナーは客観性を失いやすいです。なので客観的な他の視点を入れながら今の方向性が上手くいきそうか、検証していきます。

5.最後に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で必要なアクションを整理する