【DailyCocoda! 8日目】計算機アプリの計算画面

こんにちはー、mintoです！

今回はDailyCocoda!8日目のお題、「計算機アプリの計算画面」を作成しました！
今回のUIデザインにあたってのターゲットは以下のように指定されています。

恥ずかしながら家計簿をつけたことがないのですが、僕も今回のターゲットと同じ飽き性なところがあるので、飽きのこないデザインとミスなく最短で計算できるような電卓になるようにしました。

完成品

そして完成したものがこちらです！

以下、デザインした上で気をつけたポイントを箇条書きで説明していきます。

・30代の女性がターゲットなので、「大人可愛い」をイメージして、可愛らしさを出しつつも、ポップになりすぎないように背景は落ち着いた色にして、メインカラーのピンクを適宜使用しています。
ピンクはパステルカラーにすることも考えたのですが、白の背景だとやや字がぼやける印象があったので、暗めのピンクを使用し、コントラストを担保しつつ、甘くなりすぎない大人な印象になるよう心がけました。

・ミスなく最短で計算できるように、ボタンの大きさをできる限り大きく取って、押し間違いが出ないようにしました。
ボタンの数値や記号は、ボタンの色とぼやけることがないように明瞭をはっきりさせるように心がけ、フォントサイズもiOS標準電卓より大きくしています。

・入力した計算式に誤りがないかどうかも、最短で計算するには大事なポイントであるため、現在入力している計算式も表示されるようにしています。入力した数値が間違っていれば、計算式の隣りにあるピンクの「×」ボタンで一つずつ数値を削除することが可能です。Cボタンだと入力した計算式すべてクリアされてしまうので、適宜使い分けられればと。

・計算式の削除ボタンは他の電卓アプリより大きめにしてタップしやすいようにしています。

・電卓を使う上でこれまで用いた計算を確認したい機会（前月と今月の出費の比較等）が多いと思うので、計算履歴機能（画面右上の時計アイコンをタップ）をつけることで、自分の記憶に頼らず確認しながら計算できるような想定をしています。

・ボタンの配置は基本的にiOS標準電卓に沿っており、iOS標準電卓から移行しても迷いなく操作できるようにしています。ただ、今回のターゲットは家計簿をつけるので、消費税の計算を多用すると想定し、税込みボタンを追加してワンタップで簡単にできるようにしています。

・「＝」ボタンは使用頻度が一番高いボタンだと判断し、他の記号ボタンとは別に、ボタンをメインカラーで塗ることでわかりやすくしています。

・ボタンのカラーで数値と記号を差別化することも考えましたが、例えば記号ボタンにすべてメインカラーをつけてしまうと、ピンクの印象が更に強くなり、少し幼さや飽きが出てしまうのではないかと考え、ボタンではなく記号にメインカラーを使用して、落ち着いた印象を優先させました。

・計算結果はいちばん重要な情報だと思うので、フォントサイズは一番大きい80pxにしていて、視認性を確実にするようにメインカラーではなくブラック系のカラーを使用しています。また、80pxのフォントサイズで7桁まで入力できる想定でいます。

・操作のフィードバックに関しては、「＝」をタップしたときはピンクの背景を薄くすることで認識できるようにしています。それ以外のボタンをタップしたときは、薄いピンクに色が変わるようなインタラクションにしています。

デザインの感想

電卓の機能面はもっと使いやすくできたかなと思いましたが（計算履歴ををスワイプするだけで見れるみたいな）、今回はミスなく押しやすいボタンの配置で最速で計算できるような設計を第一優先としました。

計算結果と計算中の表示を分けるのも、視線が行ったり来たりするのでどうだったかなーと思ったり。。。

インタラクションに関してはマテリアルデザインのガイドラインで知識を深めたいと思います！

ではまた次回！