UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお！

シリーズの概要

Todoサービスをデザインしてたらなーんと不思議！UIの1画面をどうやってデザインするのか？サイズはどう選ぶのか？などなどを1度体験できるシリーズを始めました！

DailyUIのような感じで「XXXXをデザインする」というお題形式で丁寧に進めていきます。

‍
作った目的

UI初心者むけ！自転車の補助輪みたいに”ゼロベースでUIを一緒に作りながらデザインの決め方を学べる”シリーズです。

• いきなり真っ白の状態からUI作れと言われても困る
• まだまだFigmaの使い方もままならない
• サイズとか位置とかどうやって決めてるのよ？？
• などなど、の疑問をとりあえず1回一緒にやりましょか〜という内容になってます:bulb:
• ‍

Todoサービス（ブラウザ）を作りながら、ビジュアル/使いやすさ/UI構造を1度全て通るチュートリアルシリーズです。

「UIビジュアル基礎」と兄弟関係のシリーズです。ビジュアル基礎は解説->理解->実践で、こちらはとりあえず手を動かしながら1度体験してみよう〜形式です。
ビジュアル基礎もぜひこの後にやったり、疑問に思ったら一部見てみてみたりしてください〜！💡

‍

‍

Figmaファイル

動画で使うFigmaファイルはこちら🙋♂️

https://www.figma.com/file/zpUBNsTFPdJakAHROnPGib/%F0%9F%A7%81%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%A7%E5%AD%A6%E3%81%B6UI%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9?node-id=66%3A3654&t=VqWEULFsVRq3rtFk-1

‍

‍

お題

お題は「Todoサービス」です。ブラウザのUIをデザインしていきます。Todoサービスはエンジニアリングではよく基本の題材として出てくるもので、ソフトウェア設計の”作る/編集/削除”を学ぶ上でシンプルな題材です。

UIデザイナーも同じくその構造を知っておくべきでもあるので、今回はTodoサービスをデザインしながらソフトウェア構造の基本もなんとな〜く学んじゃいましょ！

‍

‍

完璧を目指すよりまずはやり切る

動画内で色々喋っているかとは思いますが、少しずつでいいので取り入れていきましょう。話している内容を今の時点ですらすら使えるようになっていると現場レベル3−5年ぐらいです。まずは1度体験する。別のデザインで改めて使えるようにする。という反復、質より量を意識してデザインしていくと楽しいし、スキルアップも早いでしょう〜！

‍

シリーズの概要

Todoサービスをデザインしてたらなーんと不思議！UIの1画面をどうやってデザインするのか？サイズはどう選ぶのか？などなどを1度体験できるシリーズを始めました！

DailyUIのような感じで「XXXXをデザインする」というお題形式で丁寧に進めていきます。

‍
作った目的

UI初心者むけ！自転車の補助輪みたいに”ゼロベースでUIを一緒に作りながらデザインの決め方を学べる”シリーズです。

• いきなり真っ白の状態からUI作れと言われても困る
• まだまだFigmaの使い方もままならない
• サイズとか位置とかどうやって決めてるのよ？？
• などなど、の疑問をとりあえず1回一緒にやりましょか〜という内容になってます:bulb:
• ‍

Todoサービス（ブラウザ）を作りながら、ビジュアル/使いやすさ/UI構造を1度全て通るチュートリアルシリーズです。

「UIビジュアル基礎」と兄弟関係のシリーズです。ビジュアル基礎は解説->理解->実践で、こちらはとりあえず手を動かしながら1度体験してみよう〜形式です。
ビジュアル基礎もぜひこの後にやったり、疑問に思ったら一部見てみてみたりしてください〜！💡

‍

‍

Figmaファイル

動画で使うFigmaファイルはこちら🙋♂️

https://www.figma.com/file/zpUBNsTFPdJakAHROnPGib/%F0%9F%A7%81%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%A7%E5%AD%A6%E3%81%B6UI%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9?node-id=66%3A3654&t=VqWEULFsVRq3rtFk-1

‍

‍

‍

お題

お題は「Todoサービス」です。ブラウザのUIをデザインしていきます。Todoサービスはエンジニアリングではよく基本の題材として出てくるもので、ソフトウェア設計の”作る/編集/削除”を学ぶ上でシンプルな題材です。

UIデザイナーも同じくその構造を知っておくべきでもあるので、今回はTodoサービスをデザインしながらソフトウェア構造の基本もなんとな〜く学んじゃいましょ！

‍

‍

完璧を目指すよりまずはやり切る

動画内で色々喋っているかとは思いますが、少しずつでいいので取り入れていきましょう。話している内容を今の時点ですらすら使えるようになっていると現場レベル3−5年ぐらいです。まずは1度体験する。別のデザインで改めて使えるようにする。という反復、質より量を意識してデザインしていくと楽しいし、スキルアップも早いでしょう〜！

‍

‍