Daily UI #006 （User Profile）

Daily UI 6日目のお題は「User Profile」。
SNSのプロフィール画面を制作します。

制作過程

今回は4時間弱ほどかかりました。

制作の流れ
前回の反省点の確認：1分
リサーチ・要件定義：58分
ラフ：12分
ワイヤーフレーム：50分
ビジュアル：1時間47分
---------------------------------------
計　3時間48分

要件定義

SNSのプロフィール画面を想定し、ChatGPTに要件を詰めてもらいました。

サービス名：ConnectMe
サービス内容：人々をつなぎ、交流を促進するSNS
機能：画像投稿、テキスト投稿、動画投稿 、ストーリーズ機能、コメント機能、ダイレクトメッセージ、ハッシュタグ機能、フォロー機能、プロフィール編集、通知機能
サービスカラー：黄（プライマリ）、白（セカンダリ）
------------------------------------
投稿について：
・画像メインの投稿、画像と併用したテキスト投稿もできる
・画像サイズ：1080x1080pxの正方形
・フォロワー数や投稿の質・頻度などを重要な指標として考えている
・ユーザーがアプリを開いているかどうかを確認する機能はなし
競合との連携について：
・他のSNSとの連携も重要だと考えている。
・ログイン連携、投稿の自動共有、フォロワーの同期、コンテンツのインポートなどを、連携のための機能として提供する。
------------------------------------
ペルソナ： 佐藤美咲（27歳・マーケティング担当）
・SNSを活用し、仕事関連の情報収集やネットワーキングを行っている。
・プライベートな交流や趣味に関する情報もシェアしており、友人とのつながりを大切にしている。
・プロフィールの充実や投稿の活発化を通じて、より多くの人とコミュニケーションを取りたいと考えている。
------------------------------------
アプリのタブ分け：
・ホーム: ユーザーのタイムラインやフィードを表示するタブ
・検索: ユーザーが他のユーザーや投稿を検索できるタブ
・新規投稿タブ
・メッセージ: ダイレクトメッセージやチャットの履歴を表示するタブ
・プロフィール: ユーザーのプロフィール情報や設定を表示するタブ

デザインコンセプト：
・明るさと活気
・シンプルさと親しみやすさ
・オープンさと包括性
・楽しさと創造性

リサーチ

既存のSNSやフリマアプリを中心に調べました。

主に参考にしたもの
・既存サービス（Instagram, Twitter, note, Pinterest, Twitch, Gravity, LIPS, minne, メルカリ, Yahoo!フリマ, 楽天市場, ヤフオク）
・Dribbbleのデザイン（「user profile」で検索）

考察

画像メインのプロフィール画面は、大体３分割してあるものが多かったです。Instagramとかメルカリとかがそうです。
１番見やすい＆一度にたくさん画像が見られるのが３つなんだろうなと思います。

ラフ

一旦紙に描きます。ここは割愛。

ワイヤーフレーム

ラフを基に制作したワイヤーフレームがこちら ↓

左がすべての投稿を見られるタブです。Instagramみたいなイメージです。
右はフォルダ分け機能を考えました。同じ話題に関する投稿はまとめて見られたらいいなと思って作りました。

ビジュアル

制作途中の画面です。
すべての投稿タブを作るか、フォルダ分けタブを作るかでさまよっています。すべての投稿タブは、３分割だとまるっきりInstagramになってしまうので、なんとか回避すべく強弱をつけたりしています。

完成

制作したUIがこちら ↓

迷いに迷って、フォルダ分けのタブの画面を作りました。
ちょっと大きい角丸長方形のところが固定の投稿で、その下に時系列で投稿が続きます。

デザインのポイント

（１）アカウント内検索

画面右上に、特定のユーザーの投稿内で検索ができる機能をつけました。モバイル版 X（Twitter）にもありますね。個人的にめちゃめちゃ便利だと思っているので、こちらにもつけました。
が、画像メインの投稿でテキスト検索をどこまで使うのか…とココを書いてる時に思いました。

（２）タブバーのデザイン

いつも似たようなデザインになるのを避けるため、作ったことのない浮くタイプのタブバーにしてみました。背景が透けているのは、投稿画像により集中できるようにするためです。確か過去のPinterestのタブバーが同じ原理で作られていた、はず。

制作してみて

・どこかで見たことあるようなデザインを回避しようといろいろ試したのは良かったと思います。これから、よりオリジナリティを出せるようになりたいです。

・色味似ている問題を解消すべく新しい色に挑戦できたのも良かったです。が、やっぱり黄色は使うの難しいですね…。黄色はコントラスト比がとりにく使いにくい、という話をどこかで見たんですが、実際作ってみて改めて実感しました。純粋な黄色ではなくちょっとオレンジみがあるのはそういう理由です。
前にNotionのUIトレースをした際に、Notionの色味は黄色がかったグレーなことに気づいたので、既存サービスで使っているならいけるかなと思ったんですが、難易度が高かった模様です。時間のあるときに、黄色を使っている既存UIを見てみたいです。