シリーズ目次

ゼロからはじめるUIビジュアル

10
Todoサービス ホームUI
sss
Todoサービス ホームUI

Todoサービス ホームUI

UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!
09:55
UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!

UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!

#2 : ヘッダーUIをデザインしよう
28:43
#2 : ヘッダーUIをデザインしよう

#2 : ヘッダーUIをデザインしよう

#3 : Todoブロックをデザインしよう
51:42
#3 : Todoブロックをデザインしよう

#3 : Todoブロックをデザインしよう

#4 : アクションエリアをデザイン
36:09
#4 : アクションエリアをデザイン

#4 : アクションエリアをデザイン

1度作ったUIは質上げしよう
sss
1度作ったUIは質上げしよう

1度作ったUIは質上げしよう

#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする
43:34
#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする

#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする

#6 : 全く別テイストにUIを変更する方法を教えます
37:25
#6 : 全く別テイストにUIを変更する方法を教えます

#6 : 全く別テイストにUIを変更する方法を教えます

作成アクションのUIデザイン
sss
作成アクションのUIデザイン

作成アクションのUIデザイン

#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう
52:51
#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう

#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう

#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう
45:48
#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう

#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう

フィルタ・検索のUIデザイン
sss
フィルタ・検索のUIデザイン

フィルタ・検索のUIデザイン

#8 フィルターUIデザインの基本
47:45
#8 フィルターUIデザインの基本

#8 フィルターUIデザインの基本

#9 検索UIデザインの基本
56:30
#9 検索UIデザインの基本

#9 検索UIデザインの基本

お疲れ!👏継続してつくる力を鍛える
sss
お疲れ!👏継続してつくる力を鍛える

お疲れ!👏継続してつくる力を鍛える

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ
20:37
【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

動画のゴール:アクション設置の考え方を知ろう

「アクション」をどこに配置するのか?考えながらUIをデザインしていきます。

アクションの配置の考え方には正解があるわけではないですがベストプラクティスがあります。
基本的に右にある、操作するオブジェクトの近くに存在する。というものです。これはどちらも”アクション”と”アクション対象”の関係性が見えやすいことからから来ています。大体は全体にアクションが作用したり、近くのものに作用したりすることをイメージできる位置として、この考え方で配置されているものが多いです。

嘘だと思って他サービスUIなどを見てみるとのさらに理解が深まると思います!

目次

  • 00:11 今日でUI土台が完成!
  • 01:28 デザインするものを確認
  • 06:42 追加をナビゲーションに
  • 09:53 追加をコンテンツエリアに
  • 13:44 アクションと配色の関係
  • 15:44 アクションに色を付ける
  • 16:52 なぜナビには色をつけないのか?
  • 18:30 編集と削除
  • 22:47 ホバーしたらメニューを表示
  • 28:18 プロトタイプ機能でメニューを表示
  • 34:50 次はスタイル調整です!

参考動画

階層について : 「6-1.平面の”階層”表現について」
https://www.bo-no.design/contents/uivisual-6-2

配色について:「4-1.ここからはじめる配色設計」
https://www.bo-no.design/contents/uivisual-3-2

アクション配置:「6-2.UIを構成する3ブロックを知ろう」
https://www.bo-no.design/contents/uivisual-6-3

Figmaのデータ

こちら

https://www.figma.com/file/zpUBNsTFPdJakAHROnPGib/%F0%9F%A7%81%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%A7%E5%AD%A6%E3%81%B6UI%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9?node-id=103%3A15929&t=okMMbwdeA4RaK6NJ-1

動画のゴール:アクション設置の考え方を知ろう

「アクション」をどこに配置するのか?考えながらUIをデザインしていきます。

アクションの配置の考え方には正解があるわけではないですがベストプラクティスがあります。
基本的に右にある、操作するオブジェクトの近くに存在する。というものです。これはどちらも”アクション”と”アクション対象”の関係性が見えやすいことからから来ています。大体は全体にアクションが作用したり、近くのものに作用したりすることをイメージできる位置として、この考え方で配置されているものが多いです。

嘘だと思って他サービスUIなどを見てみるとのさらに理解が深まると思います!

目次

  • 00:11 今日でUI土台が完成!
  • 01:28 デザインするものを確認
  • 06:42 追加をナビゲーションに
  • 09:53 追加をコンテンツエリアに
  • 13:44 アクションと配色の関係
  • 15:44 アクションに色を付ける
  • 16:52 なぜナビには色をつけないのか?
  • 18:30 編集と削除
  • 22:47 ホバーしたらメニューを表示
  • 28:18 プロトタイプ機能でメニューを表示
  • 34:50 次はスタイル調整です!

参考動画

階層について : 「6-1.平面の”階層”表現について」
https://www.bo-no.design/contents/uivisual-6-2

配色について:「4-1.ここからはじめる配色設計」
https://www.bo-no.design/contents/uivisual-3-2

アクション配置:「6-2.UIを構成する3ブロックを知ろう」
https://www.bo-no.design/contents/uivisual-6-3

Figmaのデータ

こちら

https://www.figma.com/file/zpUBNsTFPdJakAHROnPGib/%F0%9F%A7%81%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%A7%E5%AD%A6%E3%81%B6UI%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9?node-id=103%3A15929&t=okMMbwdeA4RaK6NJ-1

動画のゴール:アクション設置の考え方を知ろう

「アクション」をどこに配置するのか?考えながらUIをデザインしていきます。

アクションの配置の考え方には正解があるわけではないですがベストプラクティスがあります。
基本的に右にある、操作するオブジェクトの近くに存在する。というものです。これはどちらも”アクション”と”アクション対象”の関係性が見えやすいことからから来ています。大体は全体にアクションが作用したり、近くのものに作用したりすることをイメージできる位置として、この考え方で配置されているものが多いです。

嘘だと思って他サービスUIなどを見てみるとのさらに理解が深まると思います!

目次

  • 00:11 今日でUI土台が完成!
  • 01:28 デザインするものを確認
  • 06:42 追加をナビゲーションに
  • 09:53 追加をコンテンツエリアに
  • 13:44 アクションと配色の関係
  • 15:44 アクションに色を付ける
  • 16:52 なぜナビには色をつけないのか?
  • 18:30 編集と削除
  • 22:47 ホバーしたらメニューを表示
  • 28:18 プロトタイプ機能でメニューを表示
  • 34:50 次はスタイル調整です!

参考動画

階層について : 「6-1.平面の”階層”表現について」
https://www.bo-no.design/contents/uivisual-6-2

配色について:「4-1.ここからはじめる配色設計」
https://www.bo-no.design/contents/uivisual-3-2

アクション配置:「6-2.UIを構成する3ブロックを知ろう」
https://www.bo-no.design/contents/uivisual-6-3

Figmaのデータ

メンバー限定になります。

ゼロからはじめるUIビジュアル

10
Todoサービス ホームUI
sss
Todoサービス ホームUI

Todoサービス ホームUI

UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!
09:55
UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!

UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!

#2 : ヘッダーUIをデザインしよう
28:43
#2 : ヘッダーUIをデザインしよう

#2 : ヘッダーUIをデザインしよう

#3 : Todoブロックをデザインしよう
51:42
#3 : Todoブロックをデザインしよう

#3 : Todoブロックをデザインしよう

#4 : アクションエリアをデザイン
36:09
#4 : アクションエリアをデザイン

#4 : アクションエリアをデザイン

1度作ったUIは質上げしよう
sss
1度作ったUIは質上げしよう

1度作ったUIは質上げしよう

#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする
43:34
#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする

#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする

#6 : 全く別テイストにUIを変更する方法を教えます
37:25
#6 : 全く別テイストにUIを変更する方法を教えます

#6 : 全く別テイストにUIを変更する方法を教えます

作成アクションのUIデザイン
sss
作成アクションのUIデザイン

作成アクションのUIデザイン

#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう
52:51
#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう

#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう

#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう
45:48
#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう

#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう

フィルタ・検索のUIデザイン
sss
フィルタ・検索のUIデザイン

フィルタ・検索のUIデザイン

#8 フィルターUIデザインの基本
47:45
#8 フィルターUIデザインの基本

#8 フィルターUIデザインの基本

#9 検索UIデザインの基本
56:30
#9 検索UIデザインの基本

#9 検索UIデザインの基本

お疲れ!👏継続してつくる力を鍛える
sss
お疲れ!👏継続してつくる力を鍛える

お疲れ!👏継続してつくる力を鍛える

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ
20:37
【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

閉じる

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