UI PATTERN 入門
基本パターンをガイドラインで習得
UI PATTERN 入門
良いUIに必須なパターン出しの方法を体感しよう
金額
4,378~
/月
完了目安
1~2
ヶ月
メンバーシップについてはこちら

コースの目的

良いUIに必須なパターン出しの方法を体感しよう

コースの詳細へ

コース内容
デザインをはじめよう
SECTION
シリーズの進め方:UIのパターン作りを実践しながら学ぼう

架空のカフェの店舗で使うモバイルオーダーアプリをデザインしていきます。動画では他シリーズの「UI IDEA」の動画内で作ったUIを元にパターンを作っていきます。

Figmaがあればこちらからコピーしてパターンを作成することができます

自分で作成したラフをベースにパターンを作っていくことでも勧められます。やりやすい方を選びましょう。

2:53
カテゴリ
シリーズの進め方:UIのパターン作りを実践しながら学ぼう
無料
メンバー限定
SECTION
なぜパターンを出した方が良いのか

パターンを出した方が良い理由<br>①UIの成功確率が上がる<br>②失敗しても次の行動が早い<br>パターンを出すと作る量が増えるので必然的にグラフィックを作るスキルや判断するスキルが伸びやすいというのもあります。

5:51
カテゴリ
なぜパターンを出した方が良いのか
無料
メンバー限定
SECTION
パターンの出し方

パターンの出した方<br>①対象の画面をパーツごとに分類する<br>②パーツごとにパターンを出す<br><br>あると良い知識<br>①Materialデザインでコンポーネントを知る<br>②有名アプリで実践的な応用UIを知る<br><br>パターンの出し方を解説しています。画面の目的別でもパターンは作れますが、今回は目的は定まった状態での出し方の話をしています。

6:56
カテゴリ
パターンの出し方
無料
メンバー限定
SECTION
マテリアルデザインで基本パーツを知る

UIの基本パターンが書かれているマテリアルコンポーネントの見方を解説します。
全てを1度に覚える必要はありません。必要な時に見に来れるように内容を把握しておくと、実際に自分がUIを作る時、また見る時に便利です。

ぜひ1度目を通して、基本的なUIコンポーネントを把握しておきましょう。

10:06
カテゴリ
マテリアルデザインで基本パーツを知る
無料
メンバー限定
SECTION
参考UIの調べ方

参考UIの調べ方

①類似サービスを調べる
②同じモデルのサービスを調べる
③テンション上がるのを調べる

基本UIの視点で応用や実践しているサービスを見るとより高い解像度で参考になると思います。

6:43
カテゴリ
参考UIの調べ方
無料
メンバー限定
SECTION
ホーム画面パターン作成 ヘッダー

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

ヘッダーは基本的に「ナビゲーションとアクション」の2つを表すパーツです。
今回の重要なポイントは「店舗を選択できる感」を出すことかなと思って作っていました。

iOSのパターンはヘッダーではないですが、ページの階層トップでしっかりタイトルを示すスタイルが特徴です。
下の階層になるとヘッダーが出てきたりします。

20:51
カテゴリ
ホーム画面パターン作成 ヘッダー
無料
メンバー限定
SECTION
ホーム画面 フィルター

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

フィルターのパターンはそこまで多くはないですが、情報を並列に表示するのによく使われるパターンです。

情報を隠すと基本的に観ている人に気づかれにくくなるので、整理はしやすいですが機能させようとすると注意が必要です。

13:06
カテゴリ
ホーム画面 フィルター
無料
メンバー限定
SECTION
ホーム画面 コンテンツ

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

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

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

22:08
カテゴリ
ホーム画面 コンテンツ
無料
メンバー限定
SECTION
ホーム画面 パターンからUIを作成

作りながらあーでもこーでもないとやってみました。<br>ホームUIを作る上では1番参考になるのかなと思っています。

みなさんも正解はないのでいろいろ考えてパターンをまとめてみてください。

ビジュアルを詰めるシリーズの時にあらためて、ビジュアルと機能性が1番良い表現を考えたいと思います。

23:24
カテゴリ
ホーム画面 パターンからUIを作成
無料
メンバー限定
SECTION
ダメな店舗選択UIをリデザインしよう

■ 店舗選択画面、参考UIのデータ

基本コンポーネント&参考UIリンク

■ ”このUIを改善したパターン出します"
・なぜやるとよいのか
1. スキルが上がる<br>
2. UIのパターンにつながる.しらみつぶし
3. 何となく作らずにロジックでやるので、ビジュアルをコントロール力をつけられる

・どうやってやるのか
1. フローを書いて必要な要素をまとめる
2. 要素ごとにできることをアイデア出し
3. 対応ラフを書く

9:30
カテゴリ
ダメな店舗選択UIをリデザインしよう
無料
メンバー限定
SECTION
カイゼン要素を出そう

■ 店舗選択画面、参考UIのデータ
基本コンポーネント&参考UIリンク

12:29
カテゴリ
カイゼン要素を出そう
無料
メンバー限定
SECTION
参考を元に検索UI作成

ダメな部分を改善するUIパターンを作っていきましょう

■ 店舗選択画面、参考UIのデータ
基本コンポーネント&参考UIリンク

21:50
カテゴリ
参考を元に検索UI作成
無料
メンバー限定
SECTION
店舗選択部分をカイゼン

次は店舗を探す、選択する部分のUIパターンを出していきます。
まずはラフでパターン出ししていきましょう

■ 店舗選択画面、参考UIのデータ
基本コンポーネント&参考UIリンク

9:37
カテゴリ
店舗選択部分をカイゼン
無料
メンバー限定
SECTION
UIパターンを作成しよう

ラフを具体化してパターンを出そう

■ 店舗選択画面、参考UIのデータ

基本コンポーネント&参考UIリンク

16:27
カテゴリ
UIパターンを作成しよう
無料
メンバー限定
SECTION
店舗選択のリストUI作成

■ 店舗選択画面、参考UIのデータ

基本コンポーネント&参考UIリンク

10:41
カテゴリ
店舗選択のリストUI作成
無料
メンバー限定
SECTION
UIを統合、完成させる

今まで作成したUIパターンを1つにして最終的なUIを仕上げましょう。

■ 店舗選択画面、参考UIのデータ

基本コンポーネント&参考UIリンク

16:07
カテゴリ
UIを統合、完成させる
無料
メンバー限定
SECTION
STEP4で作るものを確認

□ これから改善するのUI
https://figma.fun/kGe3Ki

□ 動画で使っている資料

https://figma.fun/r28Beu


□ 作成したデザインをみる

https://figma.fun/tyEXD6

8:32
カテゴリ
STEP4で作るものを確認
無料
メンバー限定
SECTION
「商品詳細」画面の改善

□ 動画で使っている資料
https://figma.fun/r28Beu

□ 作成したデザインをみる
https://figma.fun/JP6TVv

11:50
カテゴリ
「商品詳細」画面の改善
無料
メンバー限定
SECTION
「カート導線」を改善

動画で使っている資料
https://figma.fun/eVJjOo

□ 作成したデザインをみる
https://figma.fun/b0aBlx

7:01
カテゴリ
「カート導線」を改善
無料
メンバー限定
SECTION
「カート」画面を改善

□ 動画で使っている資料
https://figma.fun/r28Beu

□ 作成したデザインをみる
https://figma.fun/ic4lCJ

12:41
カテゴリ
「カート」画面を改善
無料
メンバー限定
SECTION
「確定/履歴」画面を改善

□ 動画で使っている資料
https://figma.fun/uZfGW7

□ 作成したデザインをみる
https://figma.fun/LiJ9xv

6:27
カテゴリ
「確定/履歴」画面を改善
無料
メンバー限定
SECTION
まとめ-Before/After比較

動画を見た/手を動かして気づいたことなどはブログなどにまとめておきましょう。
言語化するとデザインをコントロールする力が上がります。

□ 改善前のUI
https://figma.fun/kGe3Ki

□ 改善後のUI
https://figma.fun/f8YLPV

2:44
カテゴリ
まとめ-Before/After比較
無料
メンバー限定
ABOUT
コース詳細