Tsukutta

風変わりなUIのアプリの作成

MUS - My Usual Shoppingの開発にあたって

この記事のアプリ

MUS - My Usual Shopping

詳細 →

初めまして、JoeK3816と申します。

よろしくお願いいたします。

買い物リスト系アプリのUI

私が作ったMUS - My Usual Shoppingは買い物リスト系のiPhoneアプリです。

通常、買い物リストのアプリは以下のようにチェックリストが使用されています。

(Markdown記法のToDoチェックリストについては✅で表記しています)

✅キャベツ

✅大根

✅にんじん

MUS - My Usual Shoppingを作成するにあたり、当初はこの方式を採用するつもりでいました。

ですが、頭の中のイメージとして何か違うんだよなぁ...と思うようになりました。

というのも、✅を右側に置きたいという考えがあったのです。

でも✅は項目の左側に配置するというのが、一般的な考えであってそれが形式でもあります。

右側に置いてしまうとどうも見栄えが悪いというのも問題点でした。

なぜ右側に配置したいのか?

✅が左側にあると片手で持った時に指が届かない・操作しづらいということが念頭にありました。

右側にあれば容易にタップできます。

これを実現したいと思うようになりました。

どう対処したか?

考えた結果、以下のようにすればいいのではないかと思いつきました。

  • 商品の在庫があるものを緑色とする
  • 商品の在庫がないもの(もしくは少ないもの)を赤色とする
  • 緑色と赤色をボタンにしてタップしたら切り替わるようにする

これなら右側に配置しても違和感はなくなると思いました。

そしてこのボタンを"アルカウボタン"と命名することにしました。

作り上げた結果

一般的な買い物リスト系のアプリとしては随分見た目が風変わりなものになりました。

ですが、アルカウボタンを右側に配置出来たのでタップしやすくなりました。(左利きの方にとっては操作しづらいことと思います。この点については改善を図りたいと思っています。)

ただのボタンですが、チェックリストの固定概念を外していこうと思いながら進めていき解決策が見つかり良かったと思います。

操作のしやすさを実感していただけたら嬉しいです。

最後まで読んでいただきありがとうございました。

実際に使ってみる

MUS - My Usual Shopping

この記事が良かったら

JoeK3816 さんへの応援になります

シェア
0フォロワー

Comments(0)

No comments yet

Log in to leave a comment

Log in to comment