今回から”毎日UIを作りなら基礎パターンを身につけていける”シリーズを始めます！
音声SNSをテーマにして、よく参考にされるSNSアプリで出てくる画面を作っていくシリーズになります。

ぜひメンバーの方はフィードバックの相談も"#質問なんでもどうぞ"のチャンネルで投稿していくださいー！

DAY1のお題です。「新規登録画面」を作りましょう

動画で使っている”お題紹介スライド"はこちら↓
https://www.figma.com/file/YISpSYHYEn9qkiz4qD6yR0/%E9%9F%B3%E5%A3%B0SNS%E3%82%A2%E3%83%97%E3%83%AA?node-id=5%3A29

「新規登録」の基本を解説します。
カイクンが作成したUIのポイント解説も合わせて話しています。自分の作ったUIと見比べて気づきをメモしましょう。

□ 作成したUIのリンク
--------------------

https://www.figma.com/file/O65Gdwf5lOxj3lLWRJ46b0/%5B%E8%A7%A3%E8%AA%AC%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%5DDailyUI?node-id=301%3A123

‍

‍

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

00:36 結論 - この動画で伝えたいこと
03:54 新規登録UIの基本
05:49 配色-作成したUIの解説
11:16 作成したUIの改善ポイント

□ FormUIの基本 - 動画で使っているドキュメント
https://www.notion.so/takumikai/DAY1-FormUI-UI-UI-8c2d42f569d94fab807068709c4db5f2

‍

□ 参考記事

- Form design best practices

- UI cheat sheet: text fields

- Material Design - Form

‍

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

00:00 フォームUIの基本を解説
02:00 Form基本パターン
03:35 iOSとAndroidのフォーム
06:55 エラーパターン
07:31 フォームのステータス
08:06 ラベル有り？なし？どっち？

‍

‍

‍

□ 動画で使っているNotion

https://www.notion.so/takumikai/UI-1c8cfc5daee14b23a25bdf980a1b3bf8

‍

□ SFフォントのDL

https://developer.apple.com/fonts/

□ Noto Sans JPのDL

https://fonts.google.com/specimen/Noto+Sans+JP

‍

DAY2です。音声SNSの投稿が並ぶ「フィードUI」を作りましょう

”お題紹介スライド"はこちら↓

https://www.figma.com/proto/YISpSYHYEn9qkiz4qD6yR0/%E3%81%8A%E9%A1%8C%E7%B4%B9%E4%BB%8B%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89-%E9%9F%B3%E5%A3%B0SNS%E3%82%A2%E3%83%97%E3%83%AA?page-id=96%3A12&node-id=96%3A67&viewport=1075%2C435%2C0.1666061282157898&scaling=contain

‍

‍

※編集前の撮って出しです。編集したらアップデートしますが、早く見たい人もいるかもなので

□ 作ったUIとスライドはこちらから見れます

https://www.figma.com/file/8u9xhFFIj468bRMYjH69iq/DAY2?node-id=4%3A13

‍

DAY4です。音声SNSの投稿をする際の画面「投稿の入力UI」を作りましょう

”お題紹介スライド"はこちら↓

https://www.figma.com/proto/YISpSYHYEn9qkiz4qD6yR0/%E3%81%8A%E9%A1%8C%E7%B4%B9%E4%BB%8B%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89-%E9%9F%B3%E5%A3%B0SNS%E3%82%A2%E3%83%97%E3%83%AA?page-id=98%3A0&node-id=98%3A55&viewport=713%2C483%2C0.1666061282157898&scaling=contain

‍

‍

‍

※編集前の撮って出しです。編集したらアップデートしますが、早く見たい人もいるかもなので

□ 作ったUIとスライドはこちらから見れます
https://www.figma.com/file/QAYGMx1Rfwj1ABKB7YBzO8/DAY3?node-id=1%3A1557

DAY4です。音声SNSで投稿を検索できる「検索画面のUI」をデザインしよう。

”お題紹介スライド"はこちら↓

https://www.figma.com/proto/YISpSYHYEn9qkiz4qD6yR0/%E3%81%8A%E9%A1%8C%E7%B4%B9%E4%BB%8B%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89-%E9%9F%B3%E5%A3%B0SNS%E3%82%A2%E3%83%97%E3%83%AA?page-id=101%3A0&node-id=102%3A50&viewport=747%2C480%2C0.1666061282157898&scaling=contain

‍

‍

‍

□ ■作成したUI - プロトタイプ

https://www.figma.com/proto/eqGCx4IbHJ1gkBIcrQYZSs/DAY4?page-id=1%3A623&node-id=14%3A25&viewport=2129%2C1504%2C0.3011507987976074&scaling=min-zoom

■スライドのURL

https://www.figma.com/file/eqGCx4IbHJ1gkBIcrQYZSs/DAY4?node-id=1%3A1143

‍

DAY6です。音声SNSの「通知UI」をデザインしよう。

”お題紹介スライド"はこちら↓

https://www.figma.com/proto/YISpSYHYEn9qkiz4qD6yR0/%E3%81%8A%E9%A1%8C%E7%B4%B9%E4%BB%8B%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89-%E9%9F%B3%E5%A3%B0SNS%E3%82%A2%E3%83%97%E3%83%AA?page-id=103%3A0&node-id=103%3A69&viewport=703%2C483%2C0.1666061282157898&scaling=contain

‍

‍

‍

‍

■作成したUIのリンク

https://www.figma.com/file/ek4FnzHtQTInsrdjw9yNNq/DAY5?node-id=17%3A5&t=G2XW3vAcxfQjVUDi-1

‍

■スライドのリンク

https://www.figma.com/file/1EBln9zJiTbCSlPMSlAV58/DAY6?node-id=8%3A429

‍

‍

DAY6です。基本的な「設定UI」をデザインしよう。

”お題紹介スライド"はこちら↓

https://www.figma.com/proto/YISpSYHYEn9qkiz4qD6yR0/%E3%81%8A%E9%A1%8C%E7%B4%B9%E4%BB%8B%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89-%E9%9F%B3%E5%A3%B0SNS%E3%82%A2%E3%83%97%E3%83%AA?page-id=103%3A1&node-id=103%3A135&viewport=567%2C483%2C0.13112254440784454&scaling=contain

‍

□ ■作成したUI
https://www.figma.com/proto/1EBln9zJiTbCSlPMSlAV58/DAY6?page-id=6%3A496&node-id=11%3A705&viewport=1403%2C1155%2C0.27502942085266113&scaling=min-zoom

‍

■スライドのURL
https://www.figma.com/file/1EBln9zJiTbCSlPMSlAV58/DAY6?node-id=8%3A429

‍