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やポイントを考えて明示するのは大事だと思いました。
ここまでお読みいただき、ありがとうございました！
それではまた！