Daily UI #6

こんにちは！
本日はユーザープロフィールのUIを制作していきます！
今回は日常をアップするSNSのプロフィール画面を想定して制作します。
まずはいつも通り、必要な要素の書き出しと主要アプリのトレースをしてユーザープロフィール画面がどのようなものかを把握します。

ユーザープロフィール画面に必要な要素を書き出す。

名前、ユーザーネーム、プロフィール、アイコン写真…
この辺りはユーザーがどんな人かを表示する情報なのでマストで必要そうです。一方で、書き出していく過程で「この情報は必要か？」と思ったものもありました。フォロー数、フォロワー数、投稿数、いつからこのアカウントを使用しているか、共通のフォロワーなどです。

調べてみたり、こうなのではないか？という考察をしてみた結果が以下です。
フォローフォロワー数：アカウントの大きさ（知名度というよりも影響力）を示すもの。インフルエンサーとして活動する場合はこういった数値が大切になってくると思いますが、友人と繋がることだけを目的とした利用者にとっては必要な表示なのかな？と疑問に思いました。
投稿数：投稿数が多い方がフォローしてみたくなる心理かな？とも思ったけど、過去の投稿が多いだけかもしれないし、一気にアーカイブする可能性もありますよね。これはいらない気がする。
いつからこのアカウントを使用しているか：即席で作った捨て垢じゃないことの証明になり、信頼度が測れると書かれている記事を見て、なるほどと思いました。個人間での取引などがあるSNSには有効な記載だと思います。
共通のフォロワー：メリットとしては、フォローする前に自分と相手の共通フォロワーを知ることができる点です。一方で、鍵垢の場合フォローする前から共通のフォロワーを知られてしまうのはちょっと嫌だなと思う場合もありそうです。

既存アプリのユーザープロフィール画面をトレースしてみる。

今回はInstagramのトレースをしてみました。
トレースから学んだこと
・写真と写真の間に、余白がある。
・文字サイズは10~11pxと小さめだが太さで強弱を出している。
・唯一20pxの文字サイズを使用しているのはユーザーネームの部分。
・黒やグレーを基調とした配色。（UIのデザインが投稿写真を邪魔させないため？）
・複数枚投稿の場合、右上にアイコン表示がある。
・一番下の列の投稿写真は、端がタブバーに隠れるようになっている。（続きがあることをユーザーに伝え、スクロールさせるため？）

ユーザープロフィール画面を制作してみる

今回は縦型の写真に特化した投稿型SNSのユーザープロフィール画面を想定して、制作しました！

プロフィール項目はしっかりと残しつつ、一つ一つの画像を大きく見られるようなデザインにしました。
いかがだったでしょうか？今回も最後までお読みいただきありがとうございました🙇‍♀️❣️