質問しよう
シリーズ目次

ゼロからはじめる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 : アクションエリアをデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

トップ
/
ゼロからはじめるUIビジュアル
/
UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!
レイアウト

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

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

シリーズの概要

Todoサービスをデザインしてたらなーんと不思議!UIの1画面をどうやってデザインするのか?サイズはどう選ぶのか?などなどを1度体験できるシリーズを始めました!

DailyUIのような感じで「XXXXをデザインする」というお題形式で丁寧に進めていきます。


作った目的

UI初心者むけ!自転車の補助輪みたいに”ゼロベースでUIを一緒に作りながらデザインの決め方を学べる”シリーズです。

  • いきなり真っ白の状態からUI作れと言われても困る
  • まだまだFigmaの使い方もままならない
  • サイズとか位置とかどうやって決めてるのよ??
  • などなど、の疑問をとりあえず1回一緒にやりましょか〜という内容になってます:bulb:

Todoサービス(ブラウザ)を作りながら、ビジュアル/使いやすさ/UI構造を1度全て通るチュートリアルシリーズです。

「UIビジュアル基礎」と兄弟関係のシリーズです。ビジュアル基礎は解説->理解->実践で、こちらはとりあえず手を動かしながら1度体験してみよう〜形式です。
ビジュアル基礎もぜひこの後にやったり、疑問に思ったら一部見てみてみたりしてください〜!💡

Figmaファイル

動画で使う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=66%3A3654&t=VqWEULFsVRq3rtFk-1

お題

お題は「Todoサービス」です。ブラウザのUIをデザインしていきます。Todoサービスはエンジニアリングではよく基本の題材として出てくるもので、ソフトウェア設計の”作る/編集/削除”を学ぶ上でシンプルな題材です。

UIデザイナーも同じくその構造を知っておくべきでもあるので、今回はTodoサービスをデザインしながらソフトウェア構造の基本もなんとな〜く学んじゃいましょ!

完璧を目指すよりまずはやり切る

動画内で色々喋っているかとは思いますが、少しずつでいいので取り入れていきましょう。話している内容を今の時点ですらすら使えるようになっていると現場レベル3−5年ぐらいです。まずは1度体験する。別のデザインで改めて使えるようにする。という反復、質より量を意識してデザインしていくと楽しいし、スキルアップも早いでしょう〜!

シリーズの概要

Todoサービスをデザインしてたらなーんと不思議!UIの1画面をどうやってデザインするのか?サイズはどう選ぶのか?などなどを1度体験できるシリーズを始めました!

DailyUIのような感じで「XXXXをデザインする」というお題形式で丁寧に進めていきます。


作った目的

UI初心者むけ!自転車の補助輪みたいに”ゼロベースでUIを一緒に作りながらデザインの決め方を学べる”シリーズです。

  • いきなり真っ白の状態からUI作れと言われても困る
  • まだまだFigmaの使い方もままならない
  • サイズとか位置とかどうやって決めてるのよ??
  • などなど、の疑問をとりあえず1回一緒にやりましょか〜という内容になってます:bulb:

Todoサービス(ブラウザ)を作りながら、ビジュアル/使いやすさ/UI構造を1度全て通るチュートリアルシリーズです。

「UIビジュアル基礎」と兄弟関係のシリーズです。ビジュアル基礎は解説->理解->実践で、こちらはとりあえず手を動かしながら1度体験してみよう〜形式です。
ビジュアル基礎もぜひこの後にやったり、疑問に思ったら一部見てみてみたりしてください〜!💡

Figmaファイル

動画で使う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=66%3A3654&t=VqWEULFsVRq3rtFk-1

お題

お題は「Todoサービス」です。ブラウザのUIをデザインしていきます。Todoサービスはエンジニアリングではよく基本の題材として出てくるもので、ソフトウェア設計の”作る/編集/削除”を学ぶ上でシンプルな題材です。

UIデザイナーも同じくその構造を知っておくべきでもあるので、今回はTodoサービスをデザインしながらソフトウェア構造の基本もなんとな〜く学んじゃいましょ!

完璧を目指すよりまずはやり切る

動画内で色々喋っているかとは思いますが、少しずつでいいので取り入れていきましょう。話している内容を今の時点ですらすら使えるようになっていると現場レベル3−5年ぐらいです。まずは1度体験する。別のデザインで改めて使えるようにする。という反復、質より量を意識してデザインしていくと楽しいし、スキルアップも早いでしょう〜!

シリーズの概要

Todoサービスをデザインしてたらなーんと不思議!UIの1画面をどうやってデザインするのか?サイズはどう選ぶのか?などなどを1度体験できるシリーズを始めました!

DailyUIのような感じで「XXXXをデザインする」というお題形式で丁寧に進めていきます。


作った目的

UI初心者むけ!自転車の補助輪みたいに”ゼロベースでUIを一緒に作りながらデザインの決め方を学べる”シリーズです。

  • いきなり真っ白の状態からUI作れと言われても困る
  • まだまだFigmaの使い方もままならない
  • サイズとか位置とかどうやって決めてるのよ??
  • などなど、の疑問をとりあえず1回一緒にやりましょか〜という内容になってます:bulb:

Todoサービス(ブラウザ)を作りながら、ビジュアル/使いやすさ/UI構造を1度全て通るチュートリアルシリーズです。

「UIビジュアル基礎」と兄弟関係のシリーズです。ビジュアル基礎は解説->理解->実践で、こちらはとりあえず手を動かしながら1度体験してみよう〜形式です。
ビジュアル基礎もぜひこの後にやったり、疑問に思ったら一部見てみてみたりしてください〜!💡

Figmaファイル

動画で使う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=66%3A3654&t=VqWEULFsVRq3rtFk-1

お題

お題は「Todoサービス」です。ブラウザのUIをデザインしていきます。Todoサービスはエンジニアリングではよく基本の題材として出てくるもので、ソフトウェア設計の”作る/編集/削除”を学ぶ上でシンプルな題材です。

UIデザイナーも同じくその構造を知っておくべきでもあるので、今回はTodoサービスをデザインしながらソフトウェア構造の基本もなんとな〜く学んじゃいましょ!

完璧を目指すよりまずはやり切る

動画内で色々喋っているかとは思いますが、少しずつでいいので取り入れていきましょう。話している内容を今の時点ですらすら使えるようになっていると現場レベル3−5年ぐらいです。まずは1度体験する。別のデザインで改めて使えるようにする。という反復、質より量を意識してデザインしていくと楽しいし、スキルアップも早いでしょう〜!

ゼロからはじめる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 : アクションエリアをデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

閉じる

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