【自主制作】架空SNSのUIデザイン

OVERVIEW

Daily UI#1 サインアップ画面の制作に取り組みました。

YEAR 2023

制作期間:9時間(5日間)

制作範囲: 架空SNS要件設定/デザインコンセプト /情報設計 /キャッチコピー/ロゴ

使用ツール:Figma

成果物

制作要件

Daily UI#1:サインアップに関連するページ、モーダル、フォーム、またはアプリ画面。イベントやコンテストなど、イメージできるコンテンツなら何でも構わない。

⇒「自分の持っている着物を共有して、着物友達やコミュニティがつくれるSNSがほしいな」という思いから、架空のSNSをイメージし、アプリのサインアップ画面を制作しました。

情報設計

●目的

ターゲットへのSNSへの登録を促す

●ターゲット

着物、着付け、和装、ファッションに興味のある30代の女性

工夫したところ

●入力フォームやボタンの配置

入力フォームやボタン同士の幅、大きさ、それぞれの位置、視認性の高い配色を意識して、スマホの操作でもタップしやすい配置にしました。

●SNS名「Obi-オビ-」とロゴの作成

Obiは「帯」を由来とし、人と人とを「結ぶ」イメージから名付けました。

ターゲットが着物好きな女性なので、「i」の点を和風な花にして、印象に残るようなロゴを作りました。

【第1案】


【第2案】


【第1案】では、印象付けるためと思い、太めで角ばったフォントを使いましたが、

女性らしさが足りないと感じました。フォントを選びなおし、【第2案】では丸みをおびた細めのフォントにすることで、より女性らしさを表現しました。

●名前とパスワードの登録確認チェック機能

名前とパスワードが入力されなければ「はじめる(登録)」ボタンをタップできない仕様にし、入力の二度手間を防ぐようにしました。

●「ログイン」も設置

すでに登録しているユーザーも、公式HPから遷移したり、アプリの再ダウンロードでこのページに遷移した場合、すぐにログインページに飛ぶことができるようにしました。


感想や学んだこと

サインアップ画面を初めて制作しましたが、どんな要素や機能が必要なのかすぐには思いつきませんでした。既存のSNSアプリのサインアップ画面を参考にしようにも、すでに登録済みのアプリではサインアップ画面が飛ばされてマイページに遷移してしまう、といったところが大変でした。架空SNSにはどんな人がどんな風に投稿しているのか妄想してみるのが楽しかったです。また架空サービスを作ってみたいと思いました。