シリーズ目次

ゼロからはじめる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をデザインしていきましょう。
これもよく出てくるUIパターンの1つです。Webとアプリだと若干検索の挙動は異なりますが、Webでの検索挙動の基本デザインパターンだと思ってもらえたらと思います。
検索UI体験は凝ったことをやらない限りは機能的にバリエーションはほぼないので、周りのサービスを大いに参考にすべきだと思います。

動画の目次

  • 00:15 今日のポイント
  • 02:48 参考チェーーっくぅ!
  • 06:19 検索UIのデザイン開始
  • 11:21 履歴メニューをデザイン
  • 25:54 検索結果ページ
  • 43:45 検索ヒットなしの画面を作る

動画ポイント

こちら。振り返りに使えるなら使ってくれ〜い

Figmaのデータ

こちら〜!

https://www.figma.com/file/GMEs9Al3RXlXUEfhOTCsih/%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-(Copy)?type=design&node-id=488%3A23627&t=pB4p33d1v0sv6R4m-1

ToDoサービスのUI完成です!

次の動画ではこの次に何をすると良いか?などをお伝えしていきます。
オリジナルのアウトプットではないですが、この学習もまとめておくとポートフォリオに学習の記録として載せられます。
採用担当者も「情報への感度」、「学ぶ姿勢」などを採用項目としてみたりもしているのでどういう気づきを得られたかなどを残しておくとプラスになると思います。

検索UIをデザインしよう

最後の仕上げに検索のUIをデザインしていきましょう。
これもよく出てくるUIパターンの1つです。Webとアプリだと若干検索の挙動は異なりますが、Webでの検索挙動の基本デザインパターンだと思ってもらえたらと思います。
検索UI体験は凝ったことをやらない限りは機能的にバリエーションはほぼないので、周りのサービスを大いに参考にすべきだと思います。

動画の目次

  • 00:15 今日のポイント
  • 02:48 参考チェーーっくぅ!
  • 06:19 検索UIのデザイン開始
  • 11:21 履歴メニューをデザイン
  • 25:54 検索結果ページ
  • 43:45 検索ヒットなしの画面を作る

動画ポイント

こちら。振り返りに使えるなら使ってくれ〜い

Figmaのデータ

こちら〜!

https://www.figma.com/file/GMEs9Al3RXlXUEfhOTCsih/%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-(Copy)?type=design&node-id=488%3A23627&t=pB4p33d1v0sv6R4m-1

ToDoサービスのUI完成です!

次の動画ではこの次に何をすると良いか?などをお伝えしていきます。
オリジナルのアウトプットではないですが、この学習もまとめておくとポートフォリオに学習の記録として載せられます。
採用担当者も「情報への感度」、「学ぶ姿勢」などを採用項目としてみたりもしているのでどういう気づきを得られたかなどを残しておくとプラスになると思います。

検索UIをデザインしよう

最後の仕上げに検索のUIをデザインしていきましょう。
これもよく出てくるUIパターンの1つです。Webとアプリだと若干検索の挙動は異なりますが、Webでの検索挙動の基本デザインパターンだと思ってもらえたらと思います。
検索UI体験は凝ったことをやらない限りは機能的にバリエーションはほぼないので、周りのサービスを大いに参考にすべきだと思います。

動画の目次

  • 00:15 今日のポイント
  • 02:48 参考チェーーっくぅ!
  • 06:19 検索UIのデザイン開始
  • 11:21 履歴メニューをデザイン
  • 25:54 検索結果ページ
  • 43:45 検索ヒットなしの画面を作る

動画ポイント

こちら。振り返りに使えるなら使ってくれ〜い

Figmaのデータ

※BONOメンバー限定です。

ToDoサービスのUI完成です!

次の動画ではこの次に何をすると良いか?などをお伝えしていきます。
オリジナルのアウトプットではないですが、この学習もまとめておくとポートフォリオに学習の記録として載せられます。
採用担当者も「情報への感度」、「学ぶ姿勢」などを採用項目としてみたりもしているのでどういう気づきを得られたかなどを残しておくとプラスになると思います。

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