shimaenaga

shimaenaga

Daily UI #028（Contact Page）

Daily UI 28日目のお題は「Contact Page」。 情報共有サービスの画面を制作します。 制作過程今回は4時間くらいでした。 リサーチ お問い合わせページは以前作ったことがあるので、同じのを作るのもなんだかなあと思って探したところ、ユーザー同士が質問しあうコミュニティサービスを作ることにしました。ヤフー知恵袋をもう少しかっちりさせたイメージです。お題と若干ズレる気がしないでもないですが、まあ良しとします。 要件定義 いつものようにChatGPTに要件を

shimaenaga

    • Daily UI #027（Dropdown）

      Daily UI 27日目のお題は「Dropdown」。 単位換算アプリの画面を制作します。 制作過程今回は4時間半くらいでした。 リサーチ 単位などを換算するアプリを制作することにしたので、既存の単位変換アプリを主に参考にしました。 要件定義 いつものようにChatGPTに要件を詰めてもらいました。 合わせて、必要な項目も考えます。 ラフ ここは割愛。 ワイヤーフレーム 制作したワイヤーフレームがこちら ↓ いろいろな単位が変換できる想定です。すべての

      shimaenaga

      • Daily UI #026（Subscribe）

        Daily UI 26日目のお題は「Subscribe」。 写真加工アプリの課金画面を制作します。 制作過程今回は3時間半くらいでした。 要件定義 写真を加工・編集するアプリ内で、有料のフィルターを選択した際に表示するポップアップを制作することにします。いつものようにChatGPTに要件を詰めてもらいました。 合わせて、必要な項目も考えます。 リサーチ DribbbleとPinterest、iPhone写真アプリを主に参考にしました。 ラフ ここは割愛。 ワ

        shimaenaga

        • Daily UI #025（TV App）

          Daily UI 25日目のお題は「TV App」。 動画配信サービスの動画再生画面を制作します。 制作過程今回は4時間くらいでした。 リサーチ 既存の動画配信サービスを主に参考にしました。無料で見られるテレビ局関連のものが多かったです。 要件定義 いつものようにChatGPTに要件を詰めてもらいました。 ちなみに、ペインポイントというのはペルソナが抱えている悩みや問題（そのうち、お金を払ってでも解決したい根強いもの）のことを指すらしいです。ちょっと前からChat

          shimaenaga

        Daily UI #028（Contact Page）

        shimaenaga

          Daily UI #024（Boarding Pass）

          Daily UI 24日目のお題は「Boarding Pass」。 航空券アプリの画面を制作します。 制作過程今回も3時間半くらいでした。 リサーチ 既存の飛行機予約アプリや紙の航空券などを参考にしました。DribbbleやPinterestも「Boarding pass」等で検索しました。 要件定義 いつものようにChatGPTに要件を詰めてもらいました。あまり飛行機に乗らない人をターゲットに設定しています。 合わせて、必要な項目も考えます。 ワイヤーフレーム

          shimaenaga

          Daily UI #024（Boarding Pass）

          shimaenaga

          Daily UI #023（Onboarding）

          Daily UI 23日目のお題は「Onboarding」。 興味のあるトピックを選ぶ画面を制作します。 制作過程今回は3時間半くらいでした。 リサーチ 最初は、アプリでできることを複数画面を使って表現しているやつにしようかと考えていました。 が、普段自分が見るときは大体すっ飛ばしているなあと思い、ユーザーが興味のあるトピックを選んでホームをカスタマイズする画面を作ることにしました。なので、トピックを選ぶ画面のある既存アプリを中心にリサーチしました。 要件定義 い

          shimaenaga

          Daily UI #023（Onboarding）

          shimaenaga

          Daily UI #022（Search）

          Daily UI 22日目のお題は「Search」。 シラバスの絞り込み検索画面を制作します。 制作過程今回は5時間弱でした。 リサーチ 既存の大学のシラバスを主に参考にしました。まとめサイトがあったので、国立大学が多めです。 要件定義 いつものようにChatGPTに要件を詰めてもらいました。 合わせて、必要な項目も考えます。項目多めです。 ラフ ここは割愛。 ワイヤーフレーム 制作したワイヤーフレームがこちら ↓ 複数選択をしたい&すべての選択肢を一覧

          shimaenaga

          Daily UI #022（Search）

          shimaenaga

          Daily UI #021（Home Monitoring Dashboard）

          Daily UI 21日目のお題は「Home Monitoring Dashboard」。 家電を操作できるアプリの画面を制作します。 制作過程今回は約3時間半でした。 リサーチ 既存のホームモニターアプリを主に参考にしました。意外とたくさんあってびっくりしました。 要件定義 いつものようにChatGPTに要件を詰めてもらいました。 ラフ ここは割愛。 ワイヤーフレーム 制作したワイヤーフレームがこちら ↓ ビジュアル 制作途中 ↓ タブバーは、スポッ

          shimaenaga

          Daily UI #021（Home Monitoring Dashboard）

          shimaenaga

          Daily UI #020（Location Tracker）

          Daily UI 20日目のお題は「Location Tracker」。 地図アプリの画面を制作します。 制作過程今回は4時間弱でした。 リサーチ 既存の地図アプリを主に参考にしました。 要件定義 地図アプリを制作することにしたので、使用目的などをChatGPTに詰めてもらいました。 ラフ ここは割愛。 ワイヤーフレーム 制作したワイヤーフレームがこちら ↓ ビジュアル 制作途中 ↓ 完成 制作した画面がこちら ↓ 徒歩で行く場合のルートを表示して

          shimaenaga

          Daily UI #020（Location Tracker）

          shimaenaga

          Daily UI #019 （Leaderboard）

          Daily UI 19日目のお題は「Leaderboard」。 ゲームの順位画面を制作します。 制作過程今回は9時間弱でした。だいぶ彷徨ってしまった… リサーチ・要件定義 ゲームのスコア順位画面を制作することにします。いつものようにChatGPTに要件を詰めてもらいました。ゲームUIは経験が全然なくて方向性が定まらなかったので、デザインのテイストも考えてもらいました。 リサーチは、DribbbleとPinterestを主に参考にしました。「Leaderboard」 で

          shimaenaga

          Daily UI #019 （Leaderboard）

          shimaenaga

          Daily UI #018 （Analytics Chart）

          Daily UI 18日目のお題は「Analytics Chart」。 noteのダッシュボードを制作します。 制作過程今回も4時間くらいでした。 要件定義 noteのアクセス状況画面が文字多めだったので、これをグラフ化したら見やすいんじゃないかと思い、制作のテーマに設定。「もし今のアクセス状況画面をグラフで表現するなら」を想定し、使う色などは現行noteに合わせることにします。ペルソナのみ簡単に設定しておきました。 合わせて必要な項目も考えていきます。noteのダッ

          shimaenaga

          Daily UI #018 （Analytics Chart）

          shimaenaga

          Daily UI #017 （Purchase Receipt）

          Daily UI 17日目のお題は「Purchase Receipt」。 通販の注文確認メールを制作します。 制作過程今回は4時間くらいでした。 要件定義 以前作った通販アプリで商品を買った際の注文確認メールを作ることにします。 合わせて必要な項目も考えていきます。今回は細かい情報が多いので盛りだくさんです。 リサーチ 手元にあった注文確認メールと、紙のレシートを主に参考にしました。 今回は、「文字のみ」という縛りで挑戦してみます。商品画像を貼った方が分かりやす

          shimaenaga

          Daily UI #017 （Purchase Receipt）

          shimaenaga

          Daily UI #016 （Pop-up Overlay）

          Daily UI 16日目のお題は「Pop-up Overlay」。 通販アプリのポップアップを制作します。 制作過程今回も4時間半くらいでした。 要件定義 以前作った通販アプリで表示するポップアップを作ることにします。 合わせて、ポップアップでの訴求内容も考えていきます。 リサーチ 既存アプリのポップアップや、Pinterestのバナーデザインを参考にしました。 ラフ 制作したラフがこちら ↓ LINEマンガや楽天市場を参考にしながら作りました。クーポンが

          shimaenaga

          Daily UI #016 （Pop-up Overlay）

          shimaenaga

          Daily UI #015 （On/Off Switch）

          Daily UI 15日目のお題は「On/Off Switch」。 暗記シートで隠して覚えるアプリを制作します。 制作過程今回は4時間半くらいでした。何を作るか決めるのに結構時間がかかりました。 要件定義 switchと聞いてぱっと浮かんだのは設定画面ですが、前に作ったことがあるのと単調でつまらなくなりそうだったので却下。だいぶ悩んだ結果、暗記用のアプリを制作することにしました。朝の満員電車で勉強するのってかなりハードル高いんですよね。プリント・単語帳プラス暗記シートだ

          shimaenaga

          Daily UI #015 （On/Off Switch）

          shimaenaga

          Daily UI #014 （Countdown Timer）

          Daily UI 14日目のお題は「Countdown Timer」。 料理中に使うタイマーを制作します。 制作過程今回は3時間くらいでした。 リサーチ PinterestやDribbbleを主に参考にしました。デザインにかなり幅があって面白かったです。 途中で粘土っぽいデザインを発見してかわいかったので挑戦することにしました。クレイモーフィズムというらしい。 要件定義 いつものようにChatGPTに土台を考えてもらいました。 必要な項目を考える 合わせて、画

          shimaenaga

          Daily UI #014 （Countdown Timer）

          shimaenaga

          Daily UI #013 （Direct Message）

          Daily UI 13日目のお題は「Direct Message」。 生成AIアプリのチャット画面を制作します。 制作過程今回は3時間半くらいでした。 リサーチ よくあるSNSのDMだと、既存のもののトレースになってしまうので、少し違うものが作りたいなと思い、生成AIのアプリにすることに。なので、既存の生成AIの画面を主に参考にしました。 要件定義 いつものようにChatGPTに土台を考えてもらい、こちらで調整しました。 Dribbbleに縁取りの線が太めのおもち

          shimaenaga

          Daily UI #013 （Direct Message）

          shimaenaga