シリーズ目次

UI PATTERN 入門

23
STEP-01
パターンを出す方法を知ろう
00
パターンを出す方法を知ろう

パターンを出す方法を知ろう

シリーズの進め方:UIのパターン作りを実践しながら学ぼう
2:53
シリーズの進め方:UIのパターン作りを実践しながら学ぼう

シリーズの進め方:UIのパターン作りを実践しながら学ぼう

なぜパターンを出した方が良いのか
5:51
なぜパターンを出した方が良いのか

なぜパターンを出した方が良いのか

パターンの出し方
6:56
パターンの出し方

パターンの出し方

マテリアルデザインで基本パーツを知る
10:06
マテリアルデザインで基本パーツを知る

マテリアルデザインで基本パーツを知る

参考UIの調べ方
6:43
参考UIの調べ方

参考UIの調べ方

STEP-02
ホームUIをパターン作成でカイゼン
00
ホームUIをパターン作成でカイゼン

ホームUIをパターン作成でカイゼン

ホーム画面パターン作成 ヘッダー
20:51
ホーム画面パターン作成 ヘッダー

ホーム画面パターン作成 ヘッダー

ホーム画面 フィルター
13:06
ホーム画面 フィルター

ホーム画面 フィルター

ホーム画面 コンテンツ
22:08
ホーム画面 コンテンツ

ホーム画面 コンテンツ

ホーム画面 パターンからUIを作成
23:24
ホーム画面 パターンからUIを作成

ホーム画面 パターンからUIを作成

STEP-03
店舗選択UIをパターン作成でリデザイン
11
店舗選択UIをパターン作成でリデザイン

店舗選択UIをパターン作成でリデザイン

ダメな店舗選択UIをリデザインしよう
9:30
ダメな店舗選択UIをリデザインしよう

ダメな店舗選択UIをリデザインしよう

カイゼン要素を出そう
12:29
カイゼン要素を出そう

カイゼン要素を出そう

検索の基本UIを知ろう
9:09
検索の基本UIを知ろう

検索の基本UIを知ろう

参考を元に検索UI作成
21:50
参考を元に検索UI作成

参考を元に検索UI作成

店舗選択部分をカイゼン
9:37
店舗選択部分をカイゼン

店舗選択部分をカイゼン

UIパターンを作成しよう
16:27
UIパターンを作成しよう

UIパターンを作成しよう

店舗選択のリストUI作成
10:41
店舗選択のリストUI作成

店舗選択のリストUI作成

UIを統合、完成させる
16:07
UIを統合、完成させる

UIを統合、完成させる

STEP-04
商品詳細・カート・確認UIをリデザイン
44
商品詳細・カート・確認UIをリデザイン

商品詳細・カート・確認UIをリデザイン

STEP4で作るものを確認
8:32
STEP4で作るものを確認

STEP4で作るものを確認

「商品詳細」画面の改善
11:50
「商品詳細」画面の改善

「商品詳細」画面の改善

「カート導線」を改善
7:01
「カート導線」を改善

「カート導線」を改善

「カート」画面を改善
12:41
「カート」画面を改善

「カート」画面を改善

「確定/履歴」画面を改善
6:27
「確定/履歴」画面を改善

「確定/履歴」画面を改善

STEP-05
UI PATTERN まとめ
00
UI PATTERN まとめ

UI PATTERN まとめ

まとめ-Before/After比較
2:44
まとめ-Before/After比較

まとめ-Before/After比較

■ 動画内で参考にしているUIをまとめた図はこちらから
基本コンポーネント&参考UI

ここは写真を最初にはめてやってますが、写真の統一感がないとあんまり良い感じには見えないですね・・・・

今は機能性を推して設計していますが、ビジュアルにこだわる際は写真にも反復性を持たせてください。

■ 動画内で参考にしているUIをまとめた図はこちらから
基本コンポーネント&参考UI

ここは写真を最初にはめてやってますが、写真の統一感がないとあんまり良い感じには見えないですね・・・・

今は機能性を推して設計していますが、ビジュアルにこだわる際は写真にも反復性を持たせてください。

UI PATTERN 入門

23
STEP-01
パターンを出す方法を知ろう
00
パターンを出す方法を知ろう

パターンを出す方法を知ろう

シリーズの進め方:UIのパターン作りを実践しながら学ぼう
2:53
シリーズの進め方:UIのパターン作りを実践しながら学ぼう

シリーズの進め方:UIのパターン作りを実践しながら学ぼう

なぜパターンを出した方が良いのか
5:51
なぜパターンを出した方が良いのか

なぜパターンを出した方が良いのか

パターンの出し方
6:56
パターンの出し方

パターンの出し方

マテリアルデザインで基本パーツを知る
10:06
マテリアルデザインで基本パーツを知る

マテリアルデザインで基本パーツを知る

参考UIの調べ方
6:43
参考UIの調べ方

参考UIの調べ方

STEP-02
ホームUIをパターン作成でカイゼン
00
ホームUIをパターン作成でカイゼン

ホームUIをパターン作成でカイゼン

ホーム画面パターン作成 ヘッダー
20:51
ホーム画面パターン作成 ヘッダー

ホーム画面パターン作成 ヘッダー

ホーム画面 フィルター
13:06
ホーム画面 フィルター

ホーム画面 フィルター

ホーム画面 コンテンツ
22:08
ホーム画面 コンテンツ

ホーム画面 コンテンツ

ホーム画面 パターンからUIを作成
23:24
ホーム画面 パターンからUIを作成

ホーム画面 パターンからUIを作成

STEP-03
店舗選択UIをパターン作成でリデザイン
11
店舗選択UIをパターン作成でリデザイン

店舗選択UIをパターン作成でリデザイン

ダメな店舗選択UIをリデザインしよう
9:30
ダメな店舗選択UIをリデザインしよう

ダメな店舗選択UIをリデザインしよう

カイゼン要素を出そう
12:29
カイゼン要素を出そう

カイゼン要素を出そう

検索の基本UIを知ろう
9:09
検索の基本UIを知ろう

検索の基本UIを知ろう

参考を元に検索UI作成
21:50
参考を元に検索UI作成

参考を元に検索UI作成

店舗選択部分をカイゼン
9:37
店舗選択部分をカイゼン

店舗選択部分をカイゼン

UIパターンを作成しよう
16:27
UIパターンを作成しよう

UIパターンを作成しよう

店舗選択のリストUI作成
10:41
店舗選択のリストUI作成

店舗選択のリストUI作成

UIを統合、完成させる
16:07
UIを統合、完成させる

UIを統合、完成させる

STEP-04
商品詳細・カート・確認UIをリデザイン
44
商品詳細・カート・確認UIをリデザイン

商品詳細・カート・確認UIをリデザイン

STEP4で作るものを確認
8:32
STEP4で作るものを確認

STEP4で作るものを確認

「商品詳細」画面の改善
11:50
「商品詳細」画面の改善

「商品詳細」画面の改善

「カート導線」を改善
7:01
「カート導線」を改善

「カート導線」を改善

「カート」画面を改善
12:41
「カート」画面を改善

「カート」画面を改善

「確定/履歴」画面を改善
6:27
「確定/履歴」画面を改善

「確定/履歴」画面を改善

STEP-05
UI PATTERN まとめ
00
UI PATTERN まとめ

UI PATTERN まとめ

まとめ-Before/After比較
2:44
まとめ-Before/After比較

まとめ-Before/After比較

閉じる

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