🩵Daily UI#001 | Sign Up

記事・サムネデザイン・ロゴデザイン ： MISA
文字数 ： 約4500字

はじめに

お久しぶりです、初めましての方は初めまして、
MISAです💫

今回は、【Daily UI#001 | Sign Up】
ということで、記していきます！

作成したデザインを載せただけでなく、過程の詳細もちゃんと書いたので、
Daily UIの進め方や、この人はこんな感じで作ったのか、という面で参考にしていただければ嬉しいですd(￣ ￣)

このDaily UIを始めていくにあたり、毎日投稿はやめることにしました。
やめるのが早すぎるかもしれませんが、「Daily UIを適当にやりたくはない」という思いと、他の予定との兼ね合いでそのようにしました。
１週間やった上での決断だったため、断念というよりも、自分にとってより良い方を選んだと捉えていただければなと思います◯
文字数も中身も良くなっていると思うので、ぜひ読んでいただきたいです( ・∇・)

前回の投稿はこちら↓　（Daily UIを始めるきっかけが書いてあります）

Daily UIをやるにあたって

まず前提として、PC版、SP版は両方とも用意する。
進め方は以下の通りに進める。

進め方

1. どのような場でどのような人が使うのかということを定義する

2. そもそもその機能(#001であればSign Up)ではどのような機能が使われているのかを調査する

3. 1と照らし合わせ、必要な機能などを考える

4. figmaでデザイン作成していく

5. このnoteでまとめを行う

ᕦ(ò_óˇ)ᕤやってみる

---

1.どのようなサービスでどのような人が使うのかということを定義する

ここでは、どのようなサービスでどのような人が使うのかを想定し、明確に定義していこうと思います。
一つのサービスに対して100作成するということもできますが、
多くのテーマやジャンルに触れ、それに対して思考するきっかけになると思ったので、なるべく毎回別の定義ができるように努めることにしました。

・・・・・

テーマ

Sign Upということで、新しく登録する方がいるサービスということになりますね。
色々ありますが、今回は音楽配信サービスにおける、新規登録画面にしようと思います。
ここからの検討としては以下のことをやってみようと思います。

想定ユーザー（年齢、性別、ライフスタイル。深掘りするならペルソナ）
UIポイント（ユーザーに対して、どう扱ってほしいのか）
情緒のポイント（ユーザーにどういう印象を与えたいか）

https://sinap.jp/blog/archive/2164

想定ユーザー

• 年齢層：多いのは10-30代　※以下の引用を参考
  しかし、それ以上の方々の利用もある

• ライフスタイル：いつでもどこでも音楽を聴きたい・CDを買ったりなどといったことをせずにすぐ音楽を聴きたい・時代、ジャンル問わずたくさんの種類の音楽が聴きたい

定額制音楽配信サービスのうち有料サービスでは20代～30代の利用率が最も高く、無料サービスでは10代～20代の利用率が高い傾向が見られる。総じて年齢層が高くなるほど音楽配信サービスの利用率は低下する傾向が見られ、現時点では10〜30代が音楽配信サービス市場を支えていると言えそうだ。

https://ictr.co.jp/report/20221111.html

UIポイント

可能な限り動きを減らしたい。
スムーズに利用開始にたどり着けるようにしたい。
必要最低限の入力にとどめつつ、入力ミスで入力し直しなどという事態にならないようにしたい。

情緒のポイント

簡単に使えるという印象を与えたい。
「CDを買ったりなどといったことをせずにすぐ音楽を聴きたい」と想定ユーザーにあったように、レコードやCDといったアナログなものの良さでもあり大変な部分でもある「手間」を省きたい人が使うため、この登録のポイントでも手間がないという印象を与えたい。

---

2. そもそもその機能ではどのような機能が使われているのかを調査する

テーマなどが定義できたため、ここからはこのSign Upにおいてどのような機能が必要なのか、使われているのかを調査していく。
音楽アプリや、そのほかのSign Upについて確認する。
大体の配置順で記述した。

調査結果

• 名前

  • フルネーム

  • First name, Last name

  • （その名前がプロフィールに表示されるか否かのメッセージ）

• E-mail アドレス

• パスワード

  • 表示、非表示の切り替えボタン

  • confirm password（パスワード確認用の再入力欄）※これにも表示、非表示ボタン

• 利用規約、プライバシーポリシーなどへの同意チェックボックス

• Sign Upボタン

• 外部アカウントでの登録ボタン

  • Google

  • Apple

  • facebook

  • Instagram

  • Twitter（現在はX）

  • in

• すでにログインしていた方用のログインページへ促すリンクボタン（最初の場合もあり）

その他

• 大体は一面でSign Upのボタンまであったが、メールだけ入力させて次のページに進ませ、パスワード入力させるというものもあった。しかしそれには上部に◯/◯というように今何ページ目にいるのかが表示されていた。

• 生年月日、性別、国・地域を入力させるものも。年齢制限があるからだろう。

• Apple MusicやPrime MusicではAppleIDやAmazon IDを利用するため、想定と異なった登録フローだった。

---

3. 1と照らし合わせ、必要な機能などを考える

ここまでをやってきて、今回作成するものに必要な機能を絞っていく。
今回は、以下の機能をつけることにした。

つける機能

今回のSign Upでつける機能をリスト上に書いた画像

• 名前

  • フルネーム

  • （その名前がプロフィールに表示されるか否かのメッセージ）

• E-mail アドレス

• パスワード

  • 表示、非表示の切り替えボタン

• 利用規約、プライバシーポリシーなどへの同意チェックボックス

• Sign Upボタン

• 外部アカウントでの登録ボタン

  • Google

  • Apple

  • facebook

• すでにログインしていた方用のログインページへ促すリンクボタン

配色など

• メインカラー：紺

理由：紺色の音楽配信アプリがないから。かなりの色がすでに使用されているため、そもそも選択肢があまりなかった。
本当は色の持つ意味などを考慮して行うべきだが、今回は配置は機能メインにしたため、「他のアプリのコピーにならない色」という観点を第一にして紺色にした。

4. figmaでデザイン作成していく

作成したものがこちらです-_-bｺﾁﾗ⇩

フレームワーク

PCとSP版を用意しました。

完成デザイン

こちらもPCとSP版を用意しました。カラーや装飾を追加。

---

作成してのコメント

実際に作成して感じたことは、結構大変ということですね、、
見慣れている画面であっても、何の機能があるかを完全に覚えているわけではないので、簡単ではありませんでした。
作成している途中で気付いた、必要な機能もあったので、
作成してみることはやはり価値があるなと感じました(*´꒳`*)
また、必要な機能を列挙しても、それが本当に画面に入るのか、入れてぎゅうぎゅうにならないのかなどを実際に作りながら感じることができるのが良いと感じました。
ここからは作成した結果分かったことと、迷ったことを書いていこうと思います。

作成して分かったこと、迷ったこと

配置についてで、入力部分がPCでは右側、SPでは下よりによっていると思うのですが、それは入力のしやすさを意識していると感じました。
特にSPの場合は、片手で持っていた場合に上の方のボタンを押すのは大変です。
そのため、下に寄せるのは自分が書いたUIポイントにおいても妥当であると感じ、実際に自分のデザインにも取り入れました。

あとは、「パスワードを忘れた場合」というところですね。
最初の列挙の時点では完全に抜けていました。

全体として、縦横のラインを揃えるのは容易だと感じました。
ただ、他のアカウントでサインアップのところが難しかったです。
なぜなら、SP版で「〇〇で続行」と書くと、それに一行使ってしまうので画面全体がいっぱいいっぱいになってしまいます。
メアドとパスワードだけとかであれば良さそうですね。
そのため、その続行というのを削除し、上部に配置しました。
参考サイトではグーグルなどのアイコンだけのボタンを配置しているのもよく見受けられました。
確かにグーグルやフェイスブックなどのアイコンの認知度的には良い気もしますが、万が一うまく表示されなかったり、アイコンを知らない人、音声読み上げ機能を使用している人がいた場合に、テキストがあった方がいいと考えたので、テキストは残す選択をとりました。
（音声読み上げ機能については、アイコンのalt部分にちゃんと記載すれば大丈夫そうですが、、、）

あとは同じ箇所で、Google、Facebook、Appleの文字数が異なるので、
それに合わせて枠も幅を調整するのかを迷いました。
今回は、全てFacebookに合わせていると入らなかったので、
それぞれの文字数に合わせて調整しました。

他にも色々ありますが、文章がかなり長くなってしまっているので割愛します。( ・∇・)

---

サムネに一言

今回もサムネに対して（めっちゃ長い）一言やっていきますーー
投稿自体が久しぶりになってしまったので、サムネ作りも久しぶりでしたー
Daily UIは全て統一デザインにするか、バラバラにするか迷ったのですが、
ブランディングの面や、スピードの面で言えば統一の方が良さそうですが、
100までやっているうちに絶対にデザインの質は上げられるし、
それなのに001の頃（今）のデザイン力で作ったものを使い続けるのはなあという想定（？）と、
純粋に毎回考えて作った方が力がつきそうなので、毎回変えることにしました( ´∀｀)ﾏｲﾆﾁ ｼﾞｬﾅｸﾅｯﾀｼ !!

デザインとしては、Daily UIで作成したものと同じイメージになるものにしました。
全く一緒ではないですが、サムネを見返しただけでどの作成物の記事か連想できると良いと考えたからです( ・∇・)
シンプルなものであれば、だんだん素早く作れるようになってきたのがよかったです◯

---

おわりに

今回は、【Daily UI#001 | Sign Up】ということで書いてきました！

いかがだったでしょうか(°▽°)
何か参考になれば嬉しいです〜

今回も読んでくださり、ありがとうございました‼︎

---

P.S.

久しぶりとなってしまった理由としては、Daily UIが時間を要するだけでなく、他がめちゃくちゃ忙しいというのがあります、、(￣∇￣)
やらなければならないことで忙しいのに加え、最近はライブにも行っていました！
本当に最高でした( ；∀；)ᕤ
ライブに行くと、日常生活の中でつい見落としてしまっていたことに気付かされたり、いつの間にか忘れてしまっていたことを思い出させられたりします。
音楽を楽しみに行っているのがもちろん一番なのですが、
それと同時に、ライブは私にとっての立ち止まれる場であり、かつ加速させてくれる場所なのかもしれないと思いました(*´∇｀*)

あとは、めっちゃ好きだと思った照明の配色を覚えてきたので、それも色々活かしたいと思いますーーー
今年はいっぱいライブ行くぞーᕦ(ò_óˇ)ᕤｵｰ

私も皆さんも素敵な日になりますように