Daily UI #014 / 015 / 016 / 017 / 018

アプリデザイン

制作範囲

制作ツール

制作期間

Daily UI #014「Countdown Timer」カウントタイマー

Daily UI #009で制作したミュージックプレイヤーのアプリデザインから流用し、曲を利用したカウントタイマーのUIデザインを作成しました。

ダークモードを背景に音楽のジャケットに合わせタイマーの進捗カラーが変わる仕様を想定しており、彼岸花のカラーに合わせた赤色になっています。

前回制作したミュージックアプリとしてのデザイン性を崩さぬように意識し、シンプルな形に仕上げました。

ボタンのオンオフを切り替えるスイッチのデザインということで、アプリやWebサイトに多いトグルスイッチを作成しました。

在り来たりなシンプルのボタンよりかは遊び心を持たせ、クリック後の機能を考慮した背景デザインにしました。

#012「E-commerce Shop」で制作した家具ECサイトを利用したポップアップを作成しました。

ポップアップの表示には「ライトボックス」「スライドイン」などの形式がありますが、今回はECサイトで多く使用されている「スライドイン」を採用し、右下に関連商品のポップアップを表示するデザインにしました。

#002で制作したアパレル系ECアプリを元にした領収書画面のUIデザインを作成しました。

AmazonなどのECサイトを参考にしたところ「購入確定 + お礼画面」と「購入履歴での注文内容確認」の2画面で構成されているので同じように「注文確定」「注文内容」の2画面を作成しました。

#018「Analytics Chart」ということで健康管理アプリで体重測定画面を想定したUIデザインを作成しました。

健康管理アプリの「あすけん」と「Google Fit」を参考にデザインを作成しました。
体脂肪率やカロリーなどの計測も簡単にアクセスできる導線を意識し、それぞれの項目への切り替えボタンを配置しています。

グラフは点と線を使ったシンプルなデザインで、数値を吹き出しにより明確化するパターンを採用しています。