見出し画像

10月に作成したUIまとめ

デザイナーのasatoです。

今回は10月に個人的に作成したUIデザインをまとめてみようと思います。

今回デザインを作成するにあたって、以下のサービスを使用しました。

Daily Cocoda!のDaily UIです。
Daily Cocoda!とは、デザインのお題が掲載されているサービスです。


DailyGraphic #001 SNSのプロフィール画面

*以下引用
ターゲット プライベートも楽しむ働き盛りの女性
生活の中で撮る写真をオシャレに見せたい

画像1

感想(振り返り)
プロフィール画面だったので、フォロワー数や写真、名前などの様々な情報が一目で分かるように設計しました。
写真は一覧で見れるようにしたことで自分の過去の投稿を簡単に遡れるようにしました。
プロフィール画面は情報が多いので、それをどうやって分かりやすく配置するかを考えながら作成していました。


2つ目 音楽アプリの新規登録画面

*以下引用
ターゲット オシャレ好きな男子大学生 
新しい音楽に出会いたい

画像2

感想(振り返り)
ターゲットはオシャレ好きな男子学生、新しい音楽に出会いたいとのことで不思議な図形を上下に配置して未知のものに出会えるような雰囲気を演出しました。またグラデーションを使用して未来感を出しています。
新規登録の設計自体はシンプルにして登録へのハードルを下げています。
こういった不思議な図形や淡めの色のデザインは個人的にやっていて楽しい反面、チープになってしまったり弱い画面になってしまうので図形を見切れさせたり濃い色を使用したりして調整しました。

3つ目 メッセージアプリのチャット画面

*以下引用
ターゲット 仕事で忙しいビジネスマン
仕事でのやりとりを効率化したい

画像3

感想(振り返り)
シンプルな画面にして、メッセージが目に飛び込みやすいようにしました。
ビジネス面でのメッセージアプリは機能もシンプルが良いかなと思い、左下にファイル添付のアイコンを載せています。

4つ目 レシピの検索画面

*以下引用
ターゲット 食べ盛りな子供を持つ夫婦
冷蔵庫にある食材で美味しいご飯を作りたい

画像4

感想(振り返り)
検索キーワードを入れる項目は分かりやすく一番上に配置しました。
人気のレシピやカテゴリーから探す項目は写真やアイコンを入れてイメージがつきやすいようにしています。
時短したい人向けにお気軽レシピという項目も載せています。
元気で温かみのあるオレンジを使用して親切さを演出しています。
どういう項目があるとこのターゲットの人は嬉しいのか考えるのが難しかったです。他の料理アプリを参考にしつつ作成しました。

5つ目 天気アプリの予報アイコン

*以下引用
ターゲット 部活に勉強に忙しい高校生
毎日確認したくなる天気予報アプリが欲しい

画像5

感想(振り返り)
天気アプリであることが一目で分かるように天候をアイコン内に配置、背景に青空の色を取り入れて他のアプリと並んでも目立つようにしました。
天候の配置や見せ方に迷いました。形を全部入れると情報量が多くて遠目から見づらいので。結果、形を半分まで見せたり形をシンプルにしたりしてみました。

さいごに
今回からUI作成を初めてみました。
グラフィックとはまた勝手が違うので、試行錯誤しながら作っていきたいと思います!

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