見出し画像

Daily UI #021~#040をやってみた!

こんにちは!
1月の半ばからDaily UIをはじめているのですが、5分の2が終わりました!
今回は#021から#040までを振り返りたいと思い、noteを書いてみます。
ちなみに#001~#020はこちらから↓
https://note.mu/amarillo_tori/n/nace4f15783c0
ではさっそく。

#021  Monitoring Dashboard

各部屋の温度・湿度などの状況が確認できて、遠隔でエアコンとか操作できるアプリの画面を作りました!
このお題は理解して、何を作ろうか考えるのに時間がかかり、さらに配置に時間がかかり、配色に時間がかかり…昨日から苦戦していました。形にできてスッキリ⭐️

#022  Search

googleさんを参考にして丸い検索窓を作りました!

#023  Onboarding

Day21のホームモニタリングアプリのチュートリアル画面を作りました!
アプリをインストールして最初にいろいろ説明されても覚えきれないと思うので、3ステップの簡単なものにしました。

#024  Boarding Pass

搭乗券です。飛行機をパスで書いたのがみそ!
席やゲートなど必要事項の見やすさとワクワク感を意識しました。

#025  TV App

TV系アプリを利用しないので、ボタンの位置や作品の情報など、何があればユーザーが使いやすいのか、よく考えました。
大好きな宝塚の動画アプリを想定しました。色は公式サイトと同じ紫!スワイプで次の作品に遷移できるのがポイントです。

#026  Subscribe

Day12のEコマースを土台に、メルマガのポップアップを作ってみました!
控え目に、でも存在感もあって、お得感がある、を意識しました🌟

#027  Dropdown

お知らせをドロップダウンしてみました!
内容と位置をもうちょっと考えれば良かったなぁと。。事務的なお知らせなら、こんなに目立つところに要らないですもんね😨

#028  Contact Us

お問合わせフォームを作りました。Simple is better.
・確認画面があった方が親切
・アクティブになってる項目が一目でわかった方が親切
・いきなりフォームに入るよりも一言あった方が親切
を意識しました。

#029  Map

Day20のマップアプリの続きというか詳細を作りました!
移動手段がわかるアイコンを入れれば良かったと思います。

#030  Pricing

コワーキングスペースの料金表を作りました!
スタンダードを強調するのにどうすればいいか、色を変えたりサイズを変えたり…結局サイズを大きくしてみました。
○×の表をもっと見やすくできたらなと思います。

#031  File Upload

ドラッグでファイルをアップロードできるUIを作りました!

#032  Crowdfunding Campaign

女性向けのクラウドファンディングサイトを想定してみました!
このジャンルのアプリ/サイトを利用しないので、なかなかイメージするのが難しかったです(・・;)
文章と写真の配置を考え今の配置になったのですが、まとまりは良くても縦長の写真を用意するのが難しいかなとも思います。

#033  Customize Product

今回はバッグのECを作ってみました。
この前とあるブランドのサイトを覗いてた時にわかりやすい!と思い、
・カラー毎の在庫の有無
・店舗在庫の検索
を取り入れてみました。

#034  Car Interface

「見やすい」に特化した速度メーターを作りました。
速度を太いゲージで示し、真ん中にも数字で載せましたが、素人感が否めないUIになってしまいました。

#035  Blog Post

ビーチに特化したブログサイトを作りました!
GOAL:ユーザーが読みたくなる&目的に合った記事を探せる
・写真を大きく見せて興味を引く
・カテゴリーに分けて目的の記事を探せるようにする
を意識しました。

#036  Special Offer

ECでポイントが届いた時のポップアップを作りました!
GOAL:ポイントの付与によってユーザーを購入へ導く。ただし、ユーザーに不快な思いをさせない。
・このポップアップを見て、すぐに検索画面へ遷移できるようにボタンを設置
・フォントサイズを大きくしてポイント額を強調
・このUIだけでは表現できなかったが、“何度もポップアップさせない“→何回も出てくると不快

#037  Weather

お天気アプリを作りました。
GOAL:必要な情報をすぐに確認できるUI
・スクロールなし(ファーストビュー)で全ての情報を入れる
→天気を調べる時は、出かける前や出先でパッと確認したいと思うので、必要な情報だけを瞬時に読み取れるUIが最適だと思いました
・スワイプで翌日の天気に遷移できる

#038  Calendar

カレンダーアプリを作りました。
GOAL:シンプル&見やすい!に尽きるUI
・googleカレンダーを参考に、シンプルな配置・色使いにしました
・月を俯瞰して見つつ、日ごとの予定も同時にわかるよう、下からスライドインする仕様にしました

#039  Testimonials

コスメサイトを想定してレビューページを作りました。
・商品名下に星の表示
→ファーストビューで星評価を確認できる
・星と文章で的確なレビューを発信
・投稿者と星、文章との間の余白
→@ cosmeさんを参考に、詰めすぎず、空きすぎない余白を意識しました

#040  Recipe

レシピサイトを作ってみました!
GOAL:作ってみたいと思うレシピサイト
・ビジュアルを大きく、ファーストビューで「おいしそう!作ってみたい」と思わせる
・難易度を示すことでユーザーに安心感を与える
・手順はスワイプ式にしてみました
 →一つ一つの工程を大きいサイズで見れる
 →料理の合間に見ても、どの工程を見ていたかすぐわかる

以上です。
今タームのお題は"TVアプリ"や"クラウドファンディング"など、普段自分が使わないものがちょくちょくありました。そんな時は、一般的なサイト/アプリではどんな情報が載っているのかをいつもよりも調査して、改善点はないかを考えています。
もう一点、今タームの途中から"GOAL"の項目が出現しています。これまでも漠然と"使いやすい"は意識していましたが、各お題ごとに具体的なGOALやポイントを考えて明示するのは大事だと思いました。

ここまでお読みいただき、ありがとうございました!
それではまた!

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