Daily UI #006 「User Profile」ユーザープロフィール

6日目のお題

6日目のお題は「User Profile」のUIデザインということで、コスプレ特化型アプリ「CosComi」で製作していたプロフィールを添削し作成しました。

CosComiとは？

CosComiは現在製作中のコスプレイヤーやカメラマン、イベント運営会社などのコスプレ活動に特化したコミュニティアプリです！

アプリデザインが中心でプログラミングを用いた自体の実装予定はないですが、実践的なUIUXデザイン経験を積むために製作しており、以下の内容を実装することを計画しています。

• インスタ形式の画像投稿
• 制作のノウハウや日記を投稿できるブログ投稿
• コスプレアルバム制作機能
• 衣装や小道具の製作案件受注が行えるスキルマーケット　など

制作の流れ

ペルソナを設定

今までと違いレイヤーの活動内容ごとに複数のペルソナとカスタマージャーニーマップを設定しました。

• イベント参加や撮影に参加しているコスプレイヤー
• 衣装や小道具を製作している自作レイヤー
• コスプレ写真を撮影しているカメラマン
• 撮影スタジオ運営者

SNSのプロフィール画面を調査

X（旧Twitter）やInstagramなどのSNS、コスメアプリのLIPS、オンラインコミュニティ「リベシティ」などのプロフィール画面を参考にしました。

コスメアプリ「LIPS」さんのデザインを参照

全体的なデザインのベースは「LIPS」のUIデザインを参考にさせていただきました。

LIPSでは「ほしいコスメが見つかるアプリ」をコンセプトに、コスメの口コミを検索・投稿することができるクチコミアプリです。

LIPSはどんなアプリですか？

LIPSのプロフィールの特徴として文字サイズが全体的に小さいという印象がありました。
しかし、小さくても文字の太さに強弱をつけることで全体的な違和感がなく、ユーザーの情報視線を意識したデザインになっています。

UIデザインを作成

ユーザーの基本情報

ヘッダー画像から始まり、アイコン、フォロワー、ユーザー情報、自己紹介、使用してるSNS・URLなどの情報を掲載できるようになっています。

情報の階層化

フォントには「SF Pro」を使用し、ユーザーがプロフィールを見る際の導線を意識した文字サイズやカラーを指定しました。

コンテンツに応じてフォントの色を使い分けることで、情報の階層化を実現できます。
例えば、重要なタイトルや見出しに黒色を使用し、本文や補足情報に灰色を使用する場面が多いかと思います。

SNS情報

プロフィールに掲載可能なSNSは下記を想定しています。

• X（旧Twitter）
• Instagram
• TikTok
• Youtube
• Webサイト（URL）

コスプレイヤーのユーザー数や関連する情報発信者が多いコンテンツを選定しました。
Webサイトには、運営しているブログ、カメラマンとしてのポートフォリオ、イベントやスタジオ運営者のHPなどのURLを掲載することができます。

アルバム

アプリ内では、簡易的なコスプレ写真集を作ることができるアルバム作成機能の実装を想定おり、ユーザーの活動経歴やジャンル、またはカメラマンのポートフォリオとして活動内容を把握することができます。

アルバム機能を作ろうと思った理由

私もレイヤーとして3年ほど活動し、X（旧Twitter）とInstagramを使用しています。
Xを使用し感じていたことが ”今までの活動写真が過去に埋もれていく” ということです。

昔のTwitterでは「モーメント」と呼ばれるツイートをまとめられる機能があったのですが、2022年に廃止されてます。

と思ったことがきっかけです。
また、カメラマンや製作者の方のポートフォリオとして、スキルマーケットの取引時や写真撮影を依頼するかどうかの判断基準にもなります。

画像投稿型

コミュニティアプリとしての側面があるため「つぶやき機能」を持たせるか悩みましたが、
SNSで何かに特化した専門的な発信をするときに、

と呟いてもラーメン好きなユーザー以外は求めてないですし興味ないと思います。

ユーザー自身がコンテンツを考えて自発的に発信していけるようなプラットフォームにしたいと考えた結果、画像投稿型で実装することを検討しました。

画像投稿型によるメリット

• ビジュアルとしてのコンテンツの強み
  • 画像や動画を中心としたコンテンツは、情報を視覚的かつ直感的に伝えることができ、ユーザーが投稿内容を把握して興味を引きやすいという特徴があります。
• 視覚的なブランディングとプロモーション
  • 魅力的な画像や動画を通じて自己表現やプロモーションを行うことができ、SNS上でのプレゼンスを高めることで、ブランドの認知度や影響力を向上させることが可能です。

ブログ投稿

製作している作品の製作記録やイベント・撮影の日記などに活用することを想定した機能です。

スマホで記事を作成するにはパソコンの入力に比べてかなり労力が必要であると考えていたときに見つけたのが、参考にさせていただいてるコスメアプリ「LIPS」での投稿画面でした。

テンプレートパーツを用意

LIPSはコスメのクチコミアプリということで、簡潔な文章よりかは「商品のレビュー」「メイク方法」などの細かい情報が必要になってくるのですが、これらの必要な文章を「テンプレート」を使うことで簡単に作ることができます！

テンプレートによるメリット

• 効率的な投稿
  • テンプレートを使用することで、投稿する際に考えるべき要素が明確になります。
    これにより、ユーザーが効率的にコンテンツを作成して発信することが可能です。
• 初心者のサポート
  • 初心者やコンテンツ作成に不慣れなユーザーも簡単に投稿を開始することができます。
    テンプレートに従うことで、投稿のガイドラインとなり、ユーザーが自信を持ってコンテンツを発信することができます。
• 継続性
  • テンプレートを使用することで、毎回コンテンツの構造を考える手間が省けます。
    その結果、ユーザーが投稿の準備にかかる時間を節約することにより継続性を保つことができます。

コンテンツの内容にもよりますが、ブログやnoteなどで自らコンテンツを1から考えたことがない人にとっても有益なアプローチになると思います！

まとめ

プロフィールのUIデザイン制作を通してのまとめです。

• アプリの目的に合わせたユーザー情報の設計とコンテンツの構成が重要
• 文字サイズや太さ、カラーによる「情報の階層化」を心がける
• 「あのときああすればよかった」「だからこうしてみよう」という直感を大切にする
• テンプレートパーツを使用することによるユーザーアクションの促進

#006「User Profile」ユーザープロフィール プロトタイプはこちら ↓ ↓

以前のプロフィール案ではユーザーが得意または所有しているスキルを可視化した項目がありましたが、ユーザービリティ的な部分や表示しておく理由に関して特にメリットがないため削除することにしました。

制作中にコンテンツが増えることで不要な要素や似た機能があることに気づいたりしつつ、ユーザーが使いやすいアプリを考えていくことがUIUXデザインの面白さや難しさでもあると思いますので、今後も色々なアプリデザインを作っていこうと思います。

最後までご覧いただきありがとうございました！次回もよろしくお願いします！