
Daily UI #006 「User Profile」
Daily UI 6回目のお題は、「User Profile」ということでファッションSNSユーザープロフィールのデザインを作成しました。
今回の制作時間は5時間ほどです!
1、リサーチ
今回はこの3つのSNSをリサーチしました!この中でもWEARというアプリは同じファッションのカテゴリーのSNSなのですごく参考になりまりた。
・WEAR
・X
2、簡単なペルソナ
今回もChatGPTなどを使いながらペルソナの詳細を詰めていきます!
ペルソナ

ペルソナがファッションSNSにに求めるもの
①投稿ギャラリー
投稿を一覧で表示し、コーディネートやスタイルを一目で把握できる。
トップにピン留め投稿で自分が特に見てほしい投稿を固定できる機能も嬉しい。
②フォロワー情報
フォロワー数とフォロー数の表示のユーザー同士の影響力や人気度がわかる。
③共有機能
プロフィール全体をSNSやメッセージで簡単にシェアできる。
3、ビジュアル
完成作品

作品特徴
1、投稿一覧
投稿一覧で表示できるようにして各投稿、動画を縦長の投稿にすることで全身写真が載せやすい投稿一覧にしました。ペルソナでユーザーが一番見せたい投稿をピン留め投稿機能を入れて見せられる機能の実装。
2、フォロワー情報
フォロー、フォロワーの数が見やすいように数字のテキストサイズを大きくしたり数字以外のテキストカラーの明度を落としてユーザーが見たい情報を強調表示させて見やすくしました。
3、自己紹介文コメント
自己紹介文機能は初対面のユーザーに「この人はどんな人か」を瞬時に伝えられてさらに詳しく知りたくなるきっかけを作れます。また、URLや具体的なリンクを入れることで、プロフィールを訪問した人がサイト訪問、フォロー、連絡などの明確な誘導につながって訪問者がブランドや商品を見やすくなると思いました。
プロトタイプも作成したのでご覧ください!Daily UI 006「User Profile」プロトタイプこちら↓
4、まとめ
学んだこと
・見せたい情報を強調させて見せる方法
・投稿するジャンルによっての投稿の見せ方
課題
・今回ビジュアルをWEARを参考にしながら作ったんですが、参考に引っ張られすぎて、コンテンツの配置がほとんど同じ感じになってほぼトレースになってしまったので、オリジナリティーを出せるようにもっとリサーチを増やしてデザインの幅を広げたいなと思いました。
次もDaily UIの制作記事を投稿していきます!
最後までご覧いただきありがとうございました!