【アプリUI(自主練)】SNSのプロフィール画面

UI デザイン

Cocoda! という無料でUIデザインの練習ができるサービスを利用して UI/UX デザインの練習をしています。

Cocoda(ココダ)は、デザイナーに知見と経験を提供するコミュニティサービスです。UIUX・グラフィックなどの実践的なデザインコンテンツに取り組んだり、デザイ…
cocoda-design.com

アプリUIに関しては、50種類お題があるのですが、現在はまだ10パターンしかクリアできていません。

少しずつですが、その成果物を紹介していこうと思います。

Day1 SNSのプロフィール画面

ペルソナ

  • 20代女子大生
  • カフェでバイト
  • おしゃれな写真を撮るのが趣味
  • 交友関係は狭く、深く
  • 可愛らしい雰囲気だが、服装等はボーイッシュを好む

できること

  • アイコン画像の確認・変更
  • アカウント名表示
  • プロフィールの表示・編集
  • フォロー、フォロワー、投稿数の表示
  • フォロー
  • DM
  • 前画面へ遷移
  • メニュー展開

意識したこと、学んだこと

  • 写真が目立つように、色は必要最低限に絞った
  • 可愛さを表現するためメインカラーはピンクに
  • 甘くなりすぎないように、角丸の四角をベースにコンポーネントを作成
  • 必要最低限のことができればいいと割り切りった
  • 最初にいろいろ詰め込んで、あとから削っていく方が自分に向いていることがわかった

反省点

  • 初めから作り込みすぎてしまったため時間がかかった(ミニマルデザインを意識する)
  • 色は最後に決めようと思っていたが、いざ色をいれると印象が変わり再考することが多かった
  • 余白の使い方に満足いっていない
  • なんとなくのっぺりしている
  • 見せ方も下手くそ(おしゃれな背景画像が作れるように勉強する)

工数

2.25 h

感想

初めての作品です。
Instagram や Twitter を参考に考えましたが、あまり洗練されていない印象です。
その割に時間はやたらとかけてしまい、自分の力不足を感じました。
お題の「POP」や「可愛い」を意識した結果、メインカラーをピンクにしましたが、
この発想も安直なので、もう少し工夫できるようになりたいところではあります。

ただ、取り組んでいる間は時間を忘れて没頭できたので、
案外自分はこういう作業が好きなんだなあという新たな発見にもなりました。