見出し画像

【アウトプット】UI/UXデザイナーへの道!

※こちらの記事はスクールに了承いただいて書いているものです。

3月から、PLAY THE DESIGNERというオンラインスクールでUI/ UXを学ぶことを決めました。

せっかく受講するので、定期的にアウトプットをできればと考え、スクールに相談して、3ヶ月の受講期間の間に5〜6回ほどアウトプットの記事を書こうと思っています。

初回はデザインの基本と、ボタンやフォームのステータスについて、事前に作成した「新規登録画面」を元に学びました!

デザイン4原則

まずは、デザインの基本的な考え方である4原則から。頭には入っていても、実際には整列が甘かったりしていたので、改めて気をつけようと思いました。

近接:関連要素は近づける
整列:揃える(縦・横・中央など)
コントラスト:異なる要素は明確に違うとわかるようにする
反復:似ている要素は繰り返して一貫性を持たせる

フォーム ・ボタンのステータス

●フォームのステータス

フォームは空欄(Empty)、入力時はカーソルを用意する。

エラーの表示は、どんなに慣れているユーザーでもミスはするので、丁寧に表現する。どこが間違っているのか、何が間違えているのかが一目見てわかるようにすると良い。

フォームのステータス


●ボタンのステータス

ボタンは、Enable(アクティブ)の状態とDisable(非アクティブ)の状態がある。Enable(アクティブ)/Disable(非アクティブ)は、色を変えるなどしてわかりやすく表現する(コントラスト)

ボタンのステータス

また、メインカラーを使用したボタンは1画面につき1つが好ましい。
他にも同じページにボタンがある時は、表現の仕方を変えると良い。
例:枠を作る・色を変える・文字色を変えるなど

役割の違うボタン

余白の取り方

実際に作っていると、余白をどれくらい取るのかとても悩みました…

狭すぎると窮屈になるし、広げすぎても間抜けな感じになってしまうし、かといって自分がこれ!と思うような余白の決まりみたいなのも分からないし…

よく使用されているのは、8の倍数、10の倍数(偶数が好ましい)です。
8の倍数と決めたら、それに沿って余白を取るとデザインに統一感が生まれるので、今後はこれを指標にして作っていきたいと思います!!

ユーザーがどんな体験をしたいのかを想像する

デザインを考えるときに、具体的に「誰」が使用するのかを想像して作ると思います。10代女性が好むデザインと、30代男性が好むデザインはきっと大部分で違いがあるからです。

私は今まで、大体30代ぐらいの女性、とかやんわりとしたものしか想定してきていませんでした。でも、ペルソナを立てる上で本当に大切なのは、年代や性別ではなくて、そのユーザーが「このアプリに何を求めているか、どんな体験をしたいか」を想像することです。

例えば、今回の課題だった新規登録の画面。よくあるのは、「IDとパスワードを入力してください。」だと思うのですが、正直うんざりするときありませんか?…私はありました!!実際に、登録が面倒で使わなかったアプリもあります。

新規登録画面は、登録してくれないことにはユーザーはアプリを使用してくれないので、重要な役割を担っている画面だと思います。
これを突破するにはどうすればいいか考えなくてはいけません。

では具体的に、どんなアプローチの仕方があるのかを考えてみました。
→サードパーティのログイン認証を活用する(Google、 Facebookなど)
→メールアドレス・パスワード以外の登録方法はないか
→魅力を伝えて登録を促す(「簡単登録」や、そのアプリの「売り」の部分を伝えることで登録の手間を感じさせない、など)

ユーザーがどんな体験をしたいのかを想像することによって、実際に自分がデザインするときにより具体的に想像できるし、イメージやアイデアも湧きやすいと思いました!

初回から盛り沢山な内容で、あっという間の1時間でした。。余白のルールなど、改めて聞くのちょっとな…って思っていたことでも、丁寧に教えてくださって、とてもありがたかったです。

本当は、2回目の授業のアウトプットも一緒に、と思っていたのですが、第1回目のボリュームがかなり多くなってしまったので、次に回したいと思います。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

ありがとうございます!励みになります!
14
デザインを仕事にしたい。お笑いが好き。デザインでお笑いに関わる仕事をしたい。