見出し画像

初めてUIデザインを制作しました！〜Daily Cocoda001〜

달@UIデザイナー

初めまして。
現在uiデザイナーを目指してwebデザインの職業訓練校に通っている現在19歳のTaruです。

今回初めてuiデザインをCocodaさんのお題を使って作成したので、その時の情報設計や反省点についてまとめてみたいと思います。

Daily Cocodaについて

まず知っている方も多いと思いますが、”Daily Cocoda”について簡単に紹介しておこうかなと思います。
”Daily Cocoda”とは、CocodaTrainingという株式会社almaさんが提供しているサービスの一つです。全部で50のお題があり、その一つ一つにペルソナと設計するものがあらかじめ設定されています。
特徴としては、uiデザインに興味を持ち始めた初心者の方でも取り組みやすく、最初のアウトプットとして非常に有益なものだと思います。
※2022年9月30日にサービスがクローズしてしまうみたいなので、興味のある方はお早めに！

今回のお題について

今回私が取り組んだDaily Cocoda001のお題は、SNSプロフィール画面。
ターゲットには
プライベートも楽しむ働き盛りな女性。
＃26才女性　＃JILLSTUART　＃LUMINE　＃きれいめ　＃パステル　＃ネイル
要望：生活の中で撮る写真をオシャレに見せたい！
が挙げられていました。
こんな感じで、ペルソナが興味のありそうなワードを複数提示してくれているので、ペルソナに対するイメージが膨らみやすいのが面白いなと思いました。

制作の流れ①ペルソナの具体化

まず私は、ペルソナの具体化から始めました。
MindNodeなどのマインドマップ作成ツールは今回は使わず、より自由度が高く手軽だと思ったので紙に書いてみました。

かなり見にくくてゴメンナサイ。

こんな感じで自分の思ったことをどんどん書き出してみました。
自分の中で働き盛り+Jillstuart＆パステル好きは、美容に携わる仕事っぽいなと印象を受けたので、最終的に職業はフェミニンブランドのアパレル業が一番近いんじゃないかという結論になりました。
また、最近のSNSが知人との繋がりよりも承認欲求を満たすために用いられている傾向にあると思っているのですが、ペルソナ像からもそのような印象を受けたので、今回作るサービスもそこを重視してみようと思いました。

制作の流れ②参考にするアプリ

DailyCocodaでは、課題ごとに参考にするおススメのアプリを３つ挙げてくれます。
今回の課題では、Pinterest・Twitter・Instagramでしたが、PinteresとTwitterについては、ペルソナが”生活をオシャレに見せるSNSサービス”として用いるのには違和感を感じたため、Instagramだけに絞りました。また、女性ユーザーの使う美容に特化したSNSとして、Lipsも参考にしました。

制作の流れ③UIコンポーネントと追加した機能

まず、全体的な設計としてユーザーの操作感の違和感をなくすために、InstagramやTwitterなど有名なSNSとほぼ近いような形にしました。
元々あるものに、ペルソナが求めていそうな機能を足していくようなイメージです。
具体的には、タブバー(画面数は５つ)、写真はグリッドタイプのリスト、フォローボタン(follow黒⇨following白)などを既存のSNSから活用しました。
また、デザインを極力シンプルにすることで、コンテンツ自体を目立たせるように意識しました。
追加した要素は、
・他SNSに一瞬で飛べるリンク(あくまで今回のサービスはInstagramなど既存のSNSに完全に取って代わるサービスとしては使われないだろうと思うので)
・＠ユーザー名を一番目立つ場所に配置(誰かを調べるときには、名前よりもユーザー名使いませんか？)
・カスタマイズ性(ユーザー名のフォントや背景色を選択できる)
（背景については、Twitterのように画像をInput出来る様にすることも検討しましたが、画像によってはユーザー名が見えにくくなるかと思ったので断念しました。）
・trend機能(投稿する画像の参考になるような流行をリストアップ。ここについてはいずれ実際に具体化していきたいです！！)
・shop機能(Instagramにも起用されましたが(2018年)、美容に関心のある方はかなり重宝すると思ったので必須要素)

制作の流れ④実際に制作した完成品

ここまでが実際に制作物を作るまでに私が行った情報設計の流れです。
本来なら、ワイヤーフレームを作るはずなのですが、なんか作れそうな気がする！とりあえずアウトプットしてみたい！と思ったので、今回は端折りました。
そして、実際に制作した完成品がこちらになります。

投稿した画像は私が撮影したものです。笑

反省点

まず一番の反省としては、今回の制作を授業やアルバイトの隙間時間に行い一週間ぐらいかけてしまったので、計画的に進行を進められなかったことです。所々おざなりになってしまったかなと。
また、コンポーネントのサイズを適当に作ってしまったので、だいぶコーディングの負担になってしまいます。
ただ、実際に一からアウトプットするのは初めてだったので、このnote記事作成も含めてとても楽しかったです！
他の方の作品を見て、自分にはまだまだ至らない点が多いなとひしひし感じておりますが、次回は反省を意識して制作に取り組みたいと思います。


ここまで、読んでくださった方ありがとうございました。
近日Daily Cocoda002の記事を作成するので、誰かの目にとまれば嬉しいです。
ではまた次回まで！



この記事が気に入ったらサポートをしてみませんか？