UIデザインの基本-応用
UIパターン

UIデザインの基本-応用

現場で使える考え方、流れ、組み立て方を身につけよう
完了目安
1日2-3時間を継続して行えた時の目安の計算をしています。自分で目標を立てて取り組みましょう
概要
進め方
概要
進め方
専用チャンネルで質問や交流しよう
同じレベルの人と交流したり、進捗共有しよう
コミュニティへ
PURPOSE OF SERIES
なんで作ったの?🤔

現場で使える考え方、流れ、組み立て方を身につけよう

PURPOSE OF SERIES

何をデザインできるの?💪

No items found.
1on1
シリーズ完走で面談しよう🔮

学びをアウトプットして
カイクンとデザイン面談しよう

シリーズを7割以上終了したアウトプットをフォームから投稿すると、30分カイクンとデザイン面談ができます。
アウトプットのフィードバックや、理解の相談、今後の学習の進め方など内容はメンバーが自由に決めてOKです💡
シリーズに関係ない内容でも大丈夫です。

詳細と応募フォームはこちら
CONTENTS
さあ始めよう!👌
お題:友人が聴いてる音楽がわかる機能の使い始めをデザインしよう

動画内で作ったFigmaの最終アウトプットやアイデア出しのファイルはこちらです。(ファイルの整理してません🙇

作成した後に参考になるかと思います。ぜひチャレンジしてみてください。

2:02
無料
メンバー限定

お題:友人が聴いてる音楽がわかる機能の使い始めをデザインしよう

目的の達成に必要な要素を洗い出そう

追加お題も、本編と流れは同じです。まずはお題を達成するために何が必要なのか。要素を洗い出していきましょう。達成状態のユーザーの行動フローをもとに考えていきます。

08:06
無料
メンバー限定

目的の達成に必要な要素を洗い出そう

既存フローを整理してアイデアを出そう

お題を達成するアイデアを出すために、同じように既存フローを整理して考えてみます

05:41
無料
メンバー限定

既存フローを整理してアイデアを出そう

起点になる画面からUIアイデアをデザインする

今回"使えるようになるまで"を考えた時に起点になる画面があるので、その画面を"初めてみる→使えるようになる"までを考えていきます。

08:04
無料
メンバー限定

起点になる画面からUIアイデアをデザインする

UIアイデアのリサーチ

1度ラフにUIを作ります。そのためにUIアイデアを収集します。

3:30
無料
メンバー限定

UIアイデアのリサーチ

パターンを1度作り切る

今回は全体像を把握するために1度ラフにUIを作っていきます。作った後はセルフフィードバックしてさらにUIを改善していきます。

7:58
無料
メンバー限定

パターンを1度作り切る

パターンを作り切るpart.2

前回同様、パターンを1度作り切ります。

10:35
無料
メンバー限定

パターンを作り切るpart.2

セルフチェックのために遷移をつける

実機に近い形で自分の目で見て触るのが大事です。スマホで触れるように遷移をつけていきます。

6:40
無料
メンバー限定

セルフチェックのために遷移をつける

UIグラフィックのリサーチ

自分で作ったUIを自分でフィードバックします。さらに自分で良くするためのアイデア、条件を満たしている部分を判断します。

4:37
無料
メンバー限定

UIグラフィックのリサーチ

紙ラフでUIパターンを出す

もう1度UIを作成するために、今度はしっかりパターンを出していきましょう

9:29
無料
メンバー限定

紙ラフでUIパターンを出す

新しいUIパターンを出すpart.1

ラフで出したパターンの1つ目を作っていきます。作りながらちょっと微妙な感覚に襲われます

13:01
無料
メンバー限定

新しいUIパターンを出すpart.1

新しいUIパターン出しpart.2

フェーズで訴求していく、もう1つの別パターンを作成していきます。最後に遷移を付けます。

40:19
無料
メンバー限定

新しいUIパターン出しpart.2

作成したUIを実機で確認

新しく作ったUIパターンの2つを実機で確認していきます。

4:30
無料
メンバー限定

作成したUIを実機で確認

条件を満たすUIにカイゼンする

完成する前に抜けていたポイントをUIで作っていきます。これも実機で触りながら気づいた点になります。

25:36
無料
メンバー限定

条件を満たすUIにカイゼンする

まとめ

今回最終的に出たアウトプットのまとめです。もし考えが抜けていた点があったり、逆に思いついたアイデアがあればUIに具体化していくとさらにスキルアップできると思います!

4:58
無料
メンバー限定

まとめ

ABOUT
シリーズについて💡
動画数
15
お題数
This is some text inside of a div block.
カテゴリ
【UIデザイン】インタラクションデザイン
Design
カテゴリ
This is some text inside of a div block.