shimaenaga

shimaenaga

Daily UI #013 （Direct Message）

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

shimaenaga

    • Daily UI #012 （E-commerce Shop）

      Daily UI 12日目のお題は「E-commerce Shop」。 通販アプリの商品詳細画面を制作します。 制作過程今回は5時間ほどでした。下の方まで画面を作ったため、時間がかかりました。 リサーチ 既存の通販アプリを主に参考にしました。 要件定義 いつものようにChatGPTに土台を考えてもらい、こちらで調整しました。 今回は、ペルソナが買いそうな商品にするために、かなり細かめに決めています。サービスカラーは今まで使ったことのない色をこちらで指定しました。

      shimaenaga

      • Daily UI #011 （Flash Message）

        Daily UI 11日目のお題は「Flash Message」。 前回制作した画像管理アプリの転送時フィードバックを制作します。 制作過程今回も大体3時間くらいでした。 リサーチ そもそもFlash Messageとはどういうものなのか、軽く調べました。ざっくり見たところユーザーのアクションに対するフィードバックで、他のUIパーツで言うとtoastが近いようです。 toastと似たものでsnackbarがよく挙げられますが、toastはメッセージのみ、snackba

        shimaenaga

        • Daily UI #010 （Social Share）

          Daily UI 10日目のお題は「Social Share」。 画像管理アプリの転送画面を制作します。 制作過程今回は3時間ほどかかりました。 要件定義 個人的に、スマホからパソコンへ画像を送ることが結構多いので、画像保存・管理アプリ内でより簡単に転送できるUIを作ろうと思います。 普段はLINEのKeepメモを経由して送っているんですが、PC版LINEは立ち上がりが遅くてあんまりスムーズではないです。AirDropは見知らぬ人が出てくるのがなんか嫌なので使ってませ

          shimaenaga

        Daily UI #013 （Direct Message）

        shimaenaga

          Daily UI #009 （Music Player）

          Daily UI 9日目のお題は「Music Player」。 プレイリスト画面を制作します。 制作過程今回は2時間ほどかかりました。 要件定義 実は、過去にMusic Playerの画面を作ったことがあったので、デザインはそれを基に制作しました。以前作ったのが曲の再生画面だったので、今回はプレイリストの一覧画面を作ることにします。 リサーチ 既存の音楽サービスを主に参考にしました。リスト型のデザインが使えそうと思ったので、Instagramの保存済みの画面も少し参

          shimaenaga

          Daily UI #009 （Music Player）

          shimaenaga

          Daily UI #008 （404 Page Design）

          Daily UI 8日目のお題は「404 Page Design」。 URLが間違っていたりするときに出る画面を制作します。 制作過程今回は3時間半ほどかかりました。 エラーコードの種類 今回作るのは404エラー画面ですが、こういう３桁数字でエラーを表すやつって他にもありますよね。いくつか取り上げると下の通り。 他にもたくさんありました。こういうのをエラーコードというらしいです。内容と数字をセットで知っているのは、404くらいな気がします。 要件定義 いつも通りC

          shimaenaga

          Daily UI #008 （404 Page Design）

          shimaenaga

          Daily UI #007 （Settings）

          Daily UI 7日目のお題は「Settings」。 アプリの設定画面を制作します。 制作過程今回は2時間半ほどかかりました。 要件定義 前回決めたSNSアプリの要件で作ることにします。 色のみ変えています。 リサーチ 既存のSNSやDribbbleを中心に調べました。 考察 ほとんどレイアウトが同じで、あんまりデザインの幅がなさそうな印象でした。まったく同じだと練習にならないのと、設定画面って階層が深くなりがちでどこにいるか分からなくなるので、違うレイアウト

          shimaenaga

          Daily UI #007 （Settings）

          shimaenaga

          Daily UI #006 （User Profile）

          Daily UI 6日目のお題は「User Profile」。 SNSのプロフィール画面を制作します。 制作過程今回は4時間弱ほどかかりました。 要件定義 SNSのプロフィール画面を想定し、ChatGPTに要件を詰めてもらいました。 リサーチ 既存のSNSやフリマアプリを中心に調べました。 考察 画像メインのプロフィール画面は、大体３分割してあるものが多かったです。Instagramとかメルカリとかがそうです。 １番見やすい＆一度にたくさん画像が見られるのが３つ

          shimaenaga

          Daily UI #006 （User Profile）

          shimaenaga

          Daily UI #005 （App Icon）

          Daily UI 5日目のお題は「App Icon」。 スマホやパソコンのアプリのアイコンを制作していきます。 制作過程今回は約5時間半かかりました。 要件定義 ビジネス向けのメールアプリを想定し、ペルソナや色をChatGPTに考えてもらいました。 リサーチ 既存アプリやPinterestを参考にしました。 考察 メールアプリを見る感じ、青が多めでした。ビジネスっぽさや落ち着いた感じ、信頼性をイメージできるからでしょうか。イラストはほとんどがメールのアイコンでし

          shimaenaga

          Daily UI #005 （App Icon）

          shimaenaga

          Daily UI #004 （Calculation）

          Daily UI 4日目のお題は「Calculation」。 電卓アプリを制作していきます。 制作過程今回は約3時間かかりました。 要件定義 買い物時に使うことを想定し、それに合わせたペルソナや色をChatGPTに考えてもらいました。 リサーチ Dribbbleや既存サービス、電卓機を主に参考にしました。 考察 既存サービスの中で特にいいなと思ったのが、「計算機+式が見える電卓」。 ・＝を押す前に計算結果が表示されるところ ・合計の種類が選べるところ（税込・平均

          shimaenaga

          Daily UI #004 （Calculation）

          shimaenaga

          Daily UI #003 （Landing Page）

          Daily UI ３日目のお題は「Landing Page」。 サービスや商品を宣伝するページですね。よくLPと略してるのを見ます。日本語にするなら「特設サイト」辺りが近いんでしょうか。 制作過程今回は５時間弱かかりました。 要件定義 今回はジブリの映画「借りぐらしのアリエッティ」のランディングページを制作することにします。架空のサービスにすると中身を考えるのが大変（なうえ質が低くなりやすい）なので、既存のコンテンツを借りることにしました。 中でも、ジブリ映画は作品ご

          shimaenaga

          Daily UI #003 （Landing Page）

          shimaenaga

          Daily UI #002 （Credit Card Checkout）

          Daily UI ２日目のお題は「Credit Card Checkout」。 クレジットカードの決済画面を制作します。 制作過程約３時間で制作しました。 要件定義 参考にできるサービスの多い、ネット通販での決済を想定しました。 前回忘れていたターゲットも決めました。 リサーチ 前回の反省を活かし、Dribbbleで「creditcard checkout」「Family」などで検索。他に、過去に使ったことのあるサービスも参考にしました。 考察 ↑を見ると、大体

          shimaenaga

          Daily UI #002 （Credit Card Checkout）

          shimaenaga

          Daily UI #001 （Sign Up）

          Daily UIはじめました。 １日目のお題は「Sign Up」。 Sign Upとは似た言葉に「Log In・Log On・Sign In」がありますが、下のような違いがあるそう。 Log In・Log On・Sign Inは大体同じ意味で、Sign Upのみ意味が違うよう。なので、今回制作するのは新規登録画面ですね。 制作過程約３時間で制作しました。 リサーチ MobbinでSignUp画面を中心に検索しました。まだ何のサービスにするか決めていなかったので、とり

          shimaenaga

          Daily UI #001 （Sign Up）

          shimaenaga