シリーズ目次

/

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

/

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

レイアウト

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

2023

年

12

月

04

日

スキルを上げて、創造のための武器を手に入れよう

すべての動画閲覧には、メンバーシップ加入が必要です

メンバー登録について

この動画のゴール

この動画では「ナビゲーション」エリアをデザインしていきます！
UIに欠かせない情報構造の理解と、余白の考え方、サイズの考え方などを作りながら学ぶことができます。

合わせて、かなり細かい”整列”のやり方や、余白サイズを選ぶ意味の話などなど、分かりやすく印象の良い見た目を作るためのめちゃくちゃ細かいポイントもシェアしてます〜〜！
ぜひ一緒にトライしてみてください。

‍

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=101%3A15707&t=4m6z4X9UpqDr6zb8-1

‍

この動画のゴール

この動画では「ナビゲーション」エリアをデザインしていきます！
UIに欠かせない情報構造の理解と、余白の考え方、サイズの考え方などを作りながら学ぶことができます。

合わせて、かなり細かい”整列”のやり方や、余白サイズを選ぶ意味の話などなど、分かりやすく印象の良い見た目を作るためのめちゃくちゃ細かいポイントもシェアしてます〜〜！
ぜひ一緒にトライしてみてください。

‍

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=101%3A15707&t=4m6z4X9UpqDr6zb8-1

‍

この動画のゴール

この動画では「ナビゲーション」エリアをデザインしていきます！
UIに欠かせない情報構造の理解と、余白の考え方、サイズの考え方などを作りながら学ぶことができます。

合わせて、かなり細かい”整列”のやり方や、余白サイズを選ぶ意味の話などなど、分かりやすく印象の良い見た目を作るためのめちゃくちゃ細かいポイントもシェアしてます〜〜！
ぜひ一緒にトライしてみてください。

‍

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=101%3A15707&t=4m6z4X9UpqDr6zb8-1

‍

‍

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

TodoサービスホームUI

TodoサービスホームUI

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

閉じる

/

/

This is some text inside of a div block.

Heading

スキルを上げて、創造のための武器を手に入れよう

すべての動画閲覧には、メンバーシップ加入が必要です

メンバー登録について

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

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

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

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Bold text

Emphasis

^Superscript

_Subscript

0 Comments

Active Here: 0

Login or register to join the conversation.

My Profile Image

Logout Edit Profile

Be the first to leave a comment.

Loading

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.

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.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.