Figmaデータ
https://www.figma.com/file/7ct9AyiGQYMZqwOHsRo9oy/%E3%80%90%E3%83%AA%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%80%91%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA?node-id=80%3A42

1. 改善点をラフに目星を立てる
2. 参考デザイン集める ⭐️時間かけた方がよい
3. ラフ作る:パターンを書く
4. ビジュアルに落とす

‍

動画の目次

1. 00:34  今日の概要とUIトレース前提の説明
2. 03:08  各UIトレースのレベル
3. 04:48 Lv.1のやり方と欠点
4. 05:52 Lv.2の解説
5. 06:14 Lv.2 - ブロックで考える
6. 09:57 Lv.2 - 余白やフォントサイズを測って整理する
7. 22:55 質問 Pxのズレが起きる時どうしたら？
8. 33:12 Lv.3 の解説
9. 40:07 そもそもUIは複数画面のフローでトレースするとよい
10. 42:00 質問 WebプロダクトもMaterial Design を使う？- 使います
11. 46:00 質問 レイヤーもちゃんとして、トレースした方が良い？- 可能なら絶対
12. 47:52 質問 チームに共有しやすいデータファイルとは？ - レイヤー整理、コンポーネント

BONOメンバーが作ったUIをリデザインしながら「スタリング」と「情報設計」について学ぶ回です。
今回は基本的なスタイルについて話しています。

細かい違いに思うかもしれませんが、ベースを作る部分なのでここがズレると他をどれだけ調整しても「なんかしっくりこない」要因になる。
そんな部分をこの動画では梃入れしています。

‍

□ 目次
------------------

00:47 動画のテーマ
03:01 添削待ってます
03:55 リデザインしたらたとえばこうなる
06:37 基本UIを使おう
15:41 ボーダーと情報量
15:41 徹底的にパクろう（盗む）
31:45 質疑応答
‍
‍


‍

前回に引き続きSuicaに送金機能を付けたら？のUIをリデザインします。
今回は情報設計を軸にリデザインします。1番伝えたい、これはその次・・・と考えることによってUI表現にもメリハリがつきます。

□ 目次
------------------

04:05 今のUIの改善ポイントを考える
08:13 まずは盗むことから考える
11:04 パターン1を作る
14:25 パターン2を作る
24:05 質問:1-タップできる部分が手に近い方が良いのは？
35:07 質問:2-タップできる部分が手に近い方が良いのは？
39:32 質問:3-支払うボタンは何で下側に配置されてるの？
43:32 質問:4-Paypayはなんでマイナポイントなど導線が多い？少ない方がシンプルで使いやすいじゃない？
‍
■