Daily UI #001 （Sign Up）
Daily UIはじめました。
１日目のお題は「Sign Up」。
Sign Upとは
似た言葉に「Log In・Log On・Sign In」がありますが、下のような違いがあるそう。
Log In・Log On・Sign In
ユーザー名やパスワードを入れてサービスに入る
・Log In…主にネット上のサービス利用時に使用
・Log On…主にWindowsの立ち上げ時に使用
・Sign In…上記２つに比べて新しい表現
（上３つはあまり明確に区別されていない）
Sign Up
サービスに新規登録する
Log In・Log On・Sign Inは大体同じ意味で、Sign Upのみ意味が違うよう。なので、今回制作するのは新規登録画面ですね。
制作過程
約３時間で制作しました。
制作の流れ
リサーチ・考察：39分
要件定義：24分
ラフ：10分
ワイヤーフレーム：23分
パターン検討：13分
ビジュアル：45分
微調整：22分
----------------------------
計 ２時間56分
リサーチ
MobbinでSignUp画面を中心に検索しました。まだ何のサービスにするか決めていなかったので、とりあえず思いついたサービスのSign Up画面を集めました。SNSが多かったです。
主に参考にしたサービス
Duolingo, LINE, Discord, Pinterest, Slack, Spotify, Twitter, ChatGPT, Notion, Evernote, note, facebook, Airbnb, Instagram, Uber, Messenger, Teams, Amazon
考察
↑を見ると、大きく２パターンのデザインがありました。
（１）ボタンのみ
画面上部にサービスのロゴやイラスト、下部にボタンがあるタイプ。そのうち、①ボタンがログイン・新規登録の２択のみのものと、②新規登録の方法が複数あるものの２種類ありました。
（２）ボタン＋入力フォーム
こちらは、ログイン・新規登録ボタンの他に、新規登録時の入力フォームまで１つの画面にあるタイプ。入力内容は電話番号・ユーザー名・パスワードなど、サービスによってまちまち。
情報量の多い順に並べると、
（２）ボタン＋入力フォーム
⋁
（１）②ボタンのみ（複数選択）
⋁
（１）①ボタンのみ（２択）になります。
情報量が多い方が練習になりそうなので、（２）ボタン＋入力フォーム で作ることにします。
要件定義
ChatGPTに考えてもらったものを基に、こちらで調整して決めました。
サービス名：Dreamscape
サービスカラー：青、紫
サービス内容：ユーザーが文章や画像を作成し、他のユーザーに共有できるプラットフォーム（note・Notion・Evernoteのようなもの）
新規登録方法：メールアドレス、Googleアカウント、Apple ID
合わせて、画面に含める項目も決めていきます。
項目
・サービスロゴ、サービス名
・見出し（welcome to～的なやつ）
・メールアドレス
・パスワード
・ユーザーID
または
・Googleアカウントで続ける
・Apple IDで続ける
・新規登録ボタン
・利用規約とプライバシーポリシーに同意
・ヘルプ
ラフ
一旦紙に描きます。ここは割愛。
ワイヤーフレーム・パターン検討
ラフを基に制作したワイヤーフレームがこちら↓
（１）がラフ通り、（２）～（４）はパターン違いです。
いくつかパターンを考えて１番しっくりきた（１）にしました。
ラフではサービスロゴを入れようと思ってたんですが、入らなかったので諦めました。代わりに、バックボタンをつけて前の画面でログイン・新規登録の２択を表示し（＝①ボタンのみ（２択）タイプ）、その上部にロゴを載せる想定でいくことにしました。
ビジュアル
色やロゴを加えたものがこちら↓
（１）だと少し物足りなかったので、Messengerを参考にフォームの背景に色をつけました（２）。ラフ感が抜けて、いい感じになったんじゃないでしょうか…？
微調整
最後に余白を調整します。同じ項目間は同じ余白にしました。
が、一部視覚調整でサイズを変えたところもあります。
完成
制作したUIがこちら ↓
サービス名がDreamscapeなので、ゆめかわな感じにしてみました。色のせいか、なんとなく宇宙みも感じます。
ユーザーIDは、仮のものがあらかじめ入っており、リロードのアイコンを押すと作り直せる想定です（手動入力もできる想定）。noteを参考にしました。
UIのポイント
（１）フォームの位置
キーボードで隠れない高さにすべての入力フォームがくるようにしました。
（２）「または」の点線
既存デザインだと実線のものばかりだったので、ちょっと違う風にしてみようと思い、点線にしました。
（３）本文の色
真っ黒じゃないところがポイント。
サービスカラーに合わせて、少しだけ青を足しています。
制作してみて
・制限時間は決めずにやったところ、思ったよりビジュアルの制作に時間が かかっていることが判明。体感ではリサーチや要件定義に時間がかかっていると思っていたので、ちょっと意外でした。ワイヤーからほとんどレイアウトを変えていないので、もう少し短縮できるとよかった。
・ターゲットやペルソナを考えるのをすっかり忘れていました…。どこまで要件を詰めるか悩ましいですが、フォントサイズや色にも関わってくるので次回はある程度決めてから取り掛かりたい。
・あんまり個性がないのも反省点。もう少しオリジナリティを出せるようにしたいです。MobbinよりDribbbleの方が幅広いデザインを見られる印象があるので、次回からはDribbbleを中心に探そうと思います。
この記事が気に入ったらサポートをしてみませんか？