DailyUI 004 - Calculator

4日目のDaily UIになります。今日のお題は電卓です。

参考にしたサイト・アプリ

1 . iPhoneの電卓

2 . 万能電卓：多機能計算機

3 . 電卓 シンプルでスタイリッシュな計算アプリ

4 . Haseba Calculator

5 . シンプル電卓・シンプルで美しい電卓アプリ

デザインする上で考えたこと・気をつけた点

1 . テーマカラーを設定

今回はテーマカラーを紫にしました。白の背景でも黒の背景でも目を引く色ではないかと思います。

2 . ダークモード

今回は初めてダークモードを制作してみました。最近のアプリやWebサイトではダークモードが実装されているものも多く、中にはiPhone本体のダークモード設定が反映されるアプリも存在します。今後アプリをデザインする上ではダークモードのデザインも欠かせないと考えます。

3 . 戻るボタン

iPhoneの電卓にはない戻るボタンを入れました。iPhoneの電卓は間違った際、数字をスワイプすることで消すことは可能ですが、その機能を知らない人も多いです。そのため今回制作したデザインにはひと目で分かるように戻るボタンを入れました。

4 . 設定画面

今回、設定画面のデザインまではできませんでしたが設定画面への遷移を想定し、％と戻るボタンを上にバーを入れています。こちらを下にスワイプをすると設定画面が開くという想定にしています。

制作したデザイン

今回制作したデザインがこちらになります。参考デザイン収集から完成まで2時間程度でした。

まとめ・感想

• ダークモードを考えるのがとても楽しかったです。最近のアプリではダークモードが実装されていることも多いため、今後デザインを作る上ではダークモードの実装を考えた配色を選び方をしないといけないと感じました。

• 今回の電卓のデザインはとても楽しかったです。今まで作ったデザインの中ではかなり気に入ってるデザインです。