賃貸アプリで基本UIトレーニング
基本パターンをガイドラインで習得
賃貸アプリで基本UIトレーニング
賃貸アプリを題材にUIデザイン。マテリアルデザインの「Component」をデザインしながら身につけられます。
金額
4,378~
/月
完了目安
1~2
ヶ月
メンバーシップについてはこちら

コースの目的

賃貸アプリを題材にUIデザイン。マテリアルデザインの「Component」をデザインしながら身につけられます。

コースの詳細へ

コース内容
デザインをはじめよう
SECTION
お題-物件検索結果UIをデザインしよう

UIをデザインしながらマテリアルデザインの「Component」を身につけていくシリーズのお題です。

▼ このお題の「Component」

Cards
Buttons: floating action button

▼ 目次

00:00 動画の説明
00:50 どんな画面をデザイン?
02:10 要件の詳細
03:24 Card UIを身につけよう!
05:39 FABボタンを使おう
06:21 デザインする時に注意すること

06:43
カテゴリ
お題-物件検索結果UIをデザインしよう
無料
メンバー限定
SECTION
お題-ホーム画面をデザインしよう

▼  お題のスライド
https://www.figma.com/proto/LA5PSiEkXTJw67M8uAucty/Weekly02%3A%E3%81%8A%E9%A1%8C-%E8%B3%83%E8%B2%B8%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%83%9B%E3%83%BC%E3%83%A0%E7%94%BB%E9%9D%A2?page-id=0%3A1&node-id=1%3A74&viewport=241%2C48%2C0.05&scaling=contain&starting-point-node-id=1%3A74

▼ このお題のUIの基本インプット

「TxtFields」でフォームの基本的なサイズ等を真似する
○ ”選択モード”の遷移挙動について知ろう&実践しよう
 1 【ナビゲーション】<,←と×の違いを具体例を見ながら考えよう
 2 【ナビと遷移】"×キャンセル"はいつ使うのか?

○ 倍数でサイズを決めよう
 ・動画

07:27
カテゴリ
お題-ホーム画面をデザインしよう
無料
メンバー限定
SECTION
お題-お気に入りリストをデザインしよう

□ スライド
https://www.figma.com/file/AGq7BtJArbAL6Lut8bCUSI/Weekly03%3A%E3%81%8A%E9%A1%8C-%E3%80%8C%E8%B3%83%E8%B2%B8%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E2%80%9D%E3%81%8A%E6%B0%97%E3%81%AB%E5%85%A5%E3%82%8A%E3%83%AA%E3%82%B9%E3%83%88%E2%80%9D%E3%81%AEUI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=1%3A78

▽UIの基本インプット

・境界線の使い方
 https://material.io/components/dividers

・リストデザイン
 https://material.io/components/lists

05:26
カテゴリ
お題-お気に入りリストをデザインしよう
無料
メンバー限定
SECTION
お題-条件変更のUIをデザインしよう

□ スライド

https://www.figma.com/proto/0wIq8vsYOijWhsa4PE9FXY/Weekly04%3A%E3%81%8A%E9%A1%8C-%E3%80%8C%22%E2%80%9D%E3%81%AEUI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?page-id=0%3A1&node-id=1%3A256&viewport=241%2C48%2C0.05&scaling=contain&starting-point-node-id=1%3A256

▼ UI基本のインプット

1.ハーフモーダルを使ってデザイン

ハーフモーダルについてはこちらの記事
モーダルの考え方についてはこちら

2.チェックボックスとラジオボタン

「Switches - Other selection controls」をマストで読もう
「Checkboxes」「Radio buttons」を読もう

09:20
カテゴリ
お題-条件変更のUIをデザインしよう
無料
メンバー限定
ABOUT
コース詳細