
【2ヶ月目】手を動かしてツール(Figma)に慣れる #音声SNS編
前回までのお話
https://note.com/mochiko322/n/ne0ce8db643a3
今回からはBONOを使ってUIの学習をしていきます。
BONOでは学習のプログラムが分かりやすく、UIデザイナーに必要な要素の習得に向かって1つづつ丁寧に段階を踏んで学んでいくことができます。実際に手を動かしてツールに慣れていきつつ、UIで考えなければならないことを学習していきました。
お題 : 音声SNSをつくろう
こちらではまず、新規会員登録ページを作成しました。
根本的に大切なことは個性ではなく、ユーザビリティ。MENTAでも聞いたのは、「UIデザイナー=ユーザビリティの専門家」ということ。
Before
まず私が作ったのがこれ。
メルカリを参考にしてレイアウトを組んでいきました。

UIに個性のあるデザインは特に不要ですが、さすがに無難すぎて、そっけない印象です。
After
次に解答動画を見てブラッシュアップ

SNSということで、色があった方がポップ、楽しげでいいなと思ったので背景色も設定。明るめの紫でタイトルもいれました。線も消してすっきり。利用規約が上下にかかるよう、ログインボタンをつめて間隔を均等に。
線って重要ですね。他のアプリでも線の扱いは特に気にして見るようになりました👀
全体的にBeforeより登録したくなるような、気がします。笑
そして最後まで作成したものがこちら。
カイさんの(カイさんでいいのか…)説明がめちゃくちゃ分かりやすく、スムーズに制作できました。
Figmaも少しづつ使えるようになり、UIのレイアウトの基本も分かるようになってきて楽しい!!BONOのおかげです。
ご説明にあったように、今はまだ、ツールを少〜し動かせるようになってきただけ。これからより重要な中身のこと(コンセプトやユーザー理解など)をくわしく進めていくとのことです。ワクワク〜✨