Daily UI #004 「Calculation」電卓

4日目のお題

電卓

「Calculation」電卓のUIデザインになります。
私たちが利用する電卓には用途に合わせたそれぞれの電卓が存在しています。

• 通常の計算作業に使用され、一般的な計算目的にぴったりの普通電卓
• 会計や経済学、ビジネスなどの職業や業務でよく使用される実務電卓
• 数学や工学、科学などの専門分野で使用される関数電卓

スマホで利用される電卓には多くの場合、上記リスト内のものがある程度計算できたりするものが多いかと思います。

制作の流れ

簡易的なペルソナ設定

業種シートは今回は使用せず、電卓を使用する機会が多いユーザーをChatGPTからそのまま作成してもらい「公認会計士」のペルソナを設定しました。

彼が電卓アプリに求めるもの

①直感的なインターフェース
操作が簡単で、機能に素早くアクセスできる

②機能性
税金や割合、通貨換算など、多様な計算が可能であること

“>③カスタマイズ性
フォントサイズやカラーテーマの変更、履歴やメモ機能の利用など

電卓を調査

アプリ以外にも実機の電卓も含めて今回は調査しました。

Androidの電卓アプリ

右側のトグルボタンをクリックするとその他の関数や記号が表示されます。
表示されると数値ボタンの項目が縮小されて余計なスクロールが発生しないよう考慮されているようです。

UIデザインを作成

ダークモードとライトモードの切り替え

ペルソナの「カスタマイズ性」という部分で、ユーザーが自分の好みや環境に応じて選択できるようダークモードとライトモードの切り替え機能を実装しました。

ダークモードとライトモードの目的

• ライトモードは目に優しい表示で、夜間や暗い環境で使用する場合には、ダークモードが目の負担を軽減する効果があります。
• 充電がなくなってくると省エネのためダークモードになるときがありますが、明るさを軽減することによりバッテリー寿命を延ばすことができます。

アクセントカラーでは切り替え後のダークモード時のコントラスト比を意識したカラーを採用しています。

フォントサイズの切り替え

「拡大」の文言を一回り大きくすることにより、高齢の方がアプリを利用した際に、その機能が何を意味するのかをユーザーに明確に伝えることができると考えました。

オプションをトグルボタンで表示

他の計算方法を表示する機能はAndroidの電卓アプリを真似してみました。

Androidのアプリでは表示後に数値入力ボタンのサイズが縮小されるようになっているのですが、今回は実装する余裕がなかったので省略してます！

まとめ

Daily UI 4回目のまとめです。

• ダークモードとライトモードを意識したコントラスト比や標準的な機能として考慮しながらデザインする
• フォントサイズの切り替え後の見た目に考慮したリンクをデザインする

#004 「Calculation」電卓 プロトタイプはこちら ↓ ↓

関数や税率の計算などの機能を充実させることにより項目が増加した際の、視認性や操作性をどう保つかという観点でボタンの大きさや記号の優先度など悩む場面が多い電卓のデザインでした。

電卓は基本的な計算にしか使わないので、それ以上の使用方法が増えていくことで違ったデザインが作れるのではないかと思います。

最後までご覧いただきありがとうございました！
Daily UI 5回目もよろしくお願いします！