shimaenaga

shimaenaga

Daily UI #007 （Settings）

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

shimaenaga

    • Daily UI #006 （User Profile）

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

      shimaenaga

      • Daily UI #005 （App Icon）

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

        shimaenaga

        • Daily UI #004 （Calculation）

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

          shimaenaga

        Daily UI #007 （Settings）

        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