記事一覧
Daily UI #020（Location Tracker）
Daily UI 20日目のお題は「Location Tracker」。
地図アプリの画面を制作します。
制作過程今回は4時間弱でした。
リサーチ
既存の地図アプリを主に参考にしました。
要件定義
地図アプリを制作することにしたので、使用目的などをChatGPTに詰めてもらいました。
ラフ
ここは割愛。
ワイヤーフレーム
制作したワイヤーフレームがこちら ↓
ビジュアル
制作
Daily UI #019 （Leaderboard）
Daily UI 19日目のお題は「Leaderboard」。
ゲームの順位画面を制作します。
制作過程今回は9時間弱でした。だいぶ彷徨ってしまった…
リサーチ・要件定義
ゲームのスコア順位画面を制作することにします。いつものようにChatGPTに要件を詰めてもらいました。ゲームUIは経験が全然なくて方向性が定まらなかったので、デザインのテイストも考えてもらいました。
リサーチは、Drib
Daily UI #018 （Analytics Chart）
Daily UI 18日目のお題は「Analytics Chart」。
noteのダッシュボードを制作します。
制作過程今回も4時間くらいでした。
要件定義
noteのアクセス状況画面が文字多めだったので、これをグラフ化したら見やすいんじゃないかと思い、制作のテーマに設定。「もし今のアクセス状況画面をグラフで表現するなら」を想定し、使う色などは現行noteに合わせることにします。ペルソナのみ
Daily UI #017 （Purchase Receipt）
Daily UI 17日目のお題は「Purchase Receipt」。
通販の注文確認メールを制作します。
制作過程今回は4時間くらいでした。
要件定義
以前作った通販アプリで商品を買った際の注文確認メールを作ることにします。
合わせて必要な項目も考えていきます。今回は細かい情報が多いので盛りだくさんです。
リサーチ
手元にあった注文確認メールと、紙のレシートを主に参考にしました。
Daily UI #016 （Pop-up Overlay）
Daily UI 16日目のお題は「Pop-up Overlay」。
通販アプリのポップアップを制作します。
制作過程今回も4時間半くらいでした。
要件定義
以前作った通販アプリで表示するポップアップを作ることにします。
合わせて、ポップアップでの訴求内容も考えていきます。
リサーチ
既存アプリのポップアップや、Pinterestのバナーデザインを参考にしました。
ラフ
制作したラ
Daily UI #015 （On/Off Switch）
Daily UI 15日目のお題は「On/Off Switch」。
暗記シートで隠して覚えるアプリを制作します。
制作過程今回は4時間半くらいでした。何を作るか決めるのに結構時間がかかりました。
要件定義
switchと聞いてぱっと浮かんだのは設定画面ですが、前に作ったことがあるのと単調でつまらなくなりそうだったので却下。だいぶ悩んだ結果、暗記用のアプリを制作することにしました。朝の満員電車
Daily UI #014 （Countdown Timer）
Daily UI 14日目のお題は「Countdown Timer」。
料理中に使うタイマーを制作します。
制作過程今回は3時間くらいでした。
リサーチ
PinterestやDribbbleを主に参考にしました。デザインにかなり幅があって面白かったです。
途中で粘土っぽいデザインを発見してかわいかったので挑戦することにしました。クレイモーフィズムというらしい。
要件定義
いつものように
Daily UI #013 （Direct Message）
Daily UI 13日目のお題は「Direct Message」。
生成AIアプリのチャット画面を制作します。
制作過程今回は3時間半くらいでした。
リサーチ
よくあるSNSのDMだと、既存のもののトレースになってしまうので、少し違うものが作りたいなと思い、生成AIのアプリにすることに。なので、既存の生成AIの画面を主に参考にしました。
要件定義
いつものようにChatGPTに土台を考
Daily UI #012 （E-commerce Shop）
Daily UI 12日目のお題は「E-commerce Shop」。
通販アプリの商品詳細画面を制作します。
制作過程今回は5時間ほどでした。下の方まで画面を作ったため、時間がかかりました。
リサーチ
既存の通販アプリを主に参考にしました。
要件定義
いつものようにChatGPTに土台を考えてもらい、こちらで調整しました。
今回は、ペルソナが買いそうな商品にするために、かなり細かめに決
Daily UI #011 （Flash Message）
Daily UI 11日目のお題は「Flash Message」。
前回制作した画像管理アプリの転送時フィードバックを制作します。
制作過程今回も大体3時間くらいでした。
リサーチ
そもそもFlash Messageとはどういうものなのか、軽く調べました。ざっくり見たところユーザーのアクションに対するフィードバックで、他のUIパーツで言うとtoastが近いようです。
toastと似たもので
Daily UI #010 （Social Share）
Daily UI 10日目のお題は「Social Share」。
画像管理アプリの転送画面を制作します。
制作過程今回は3時間ほどかかりました。
要件定義
個人的に、スマホからパソコンへ画像を送ることが結構多いので、画像保存・管理アプリ内でより簡単に転送できるUIを作ろうと思います。
普段はLINEのKeepメモを経由して送っているんですが、PC版LINEは立ち上がりが遅くてあんまりスムー
Daily UI #009 （Music Player）
Daily UI 9日目のお題は「Music Player」。
プレイリスト画面を制作します。
制作過程今回は2時間ほどかかりました。
要件定義
実は、過去にMusic Playerの画面を作ったことがあったので、デザインはそれを基に制作しました。以前作ったのが曲の再生画面だったので、今回はプレイリストの一覧画面を作ることにします。
リサーチ
既存の音楽サービスを主に参考にしました。リス
Daily UI #008 （404 Page Design）
Daily UI 8日目のお題は「404 Page Design」。
URLが間違っていたりするときに出る画面を制作します。
制作過程今回は3時間半ほどかかりました。
エラーコードの種類
今回作るのは404エラー画面ですが、こういう３桁数字でエラーを表すやつって他にもありますよね。いくつか取り上げると下の通り。
他にもたくさんありました。こういうのをエラーコードというらしいです。内容と数字
Daily UI #007 （Settings）
Daily UI 7日目のお題は「Settings」。
アプリの設定画面を制作します。
制作過程今回は2時間半ほどかかりました。
要件定義
前回決めたSNSアプリの要件で作ることにします。
色のみ変えています。
リサーチ
既存のSNSやDribbbleを中心に調べました。
考察
ほとんどレイアウトが同じで、あんまりデザインの幅がなさそうな印象でした。まったく同じだと練習にならないのと
Daily UI #006 （User Profile）
Daily UI 6日目のお題は「User Profile」。
SNSのプロフィール画面を制作します。
制作過程今回は4時間弱ほどかかりました。
要件定義
SNSのプロフィール画面を想定し、ChatGPTに要件を詰めてもらいました。
リサーチ
既存のSNSやフリマアプリを中心に調べました。
考察
画像メインのプロフィール画面は、大体３分割してあるものが多かったです。Instagram
Daily UI #005 （App Icon）
Daily UI 5日目のお題は「App Icon」。
スマホやパソコンのアプリのアイコンを制作していきます。
制作過程今回は約5時間半かかりました。
要件定義
ビジネス向けのメールアプリを想定し、ペルソナや色をChatGPTに考えてもらいました。
リサーチ
既存アプリやPinterestを参考にしました。
考察
メールアプリを見る感じ、青が多めでした。ビジネスっぽさや落ち着いた感じ