「ガチで使えるアカウント管理アプリ」を考えてみた ~UIデザイン編~

前回のnoteでは、要件定義の部分をしっかり固めることができました。今回は、それをデザインに落とし込み、なんとかカタチにすることができたので、制作の過程をちゃちゃっと追いつつ、機能ごとに説明していこうと思います。

目次

1、ワイヤーフレームの作成
2、ワイヤーフレームを具体化
3、機能のブラッシュアップ
4、まとめ

1、ワイヤーフレームの作成

プロトタイピングソフトで本格的に画面を作る前に、紙に簡単なラフ(ワイヤーフレーム)を描きました。

2、ワイヤーフレームを具体化

先ほどのワイヤーフレームを、Adobe XDでちょっとキレイに作りました。

3、機能のブラッシュアップ

まず考えるべきは、コア機能である

・ID・パスワードをソッコーでコピーできる
・目当てのアカウント情報がすぐ見つかる

この2点を達成する方法です。

●目当てのアカウント情報がすぐ見つかる

まず、『ID・パスワードをソッコーでコピーできる』機能として、

①アプリを開いた時点でボタンがあり、押せばすぐコピーできる
②右スライドでユーザー名、左スライドでパスワードをコピーできる

この2つが思い浮かびましたが、どちらがいいかはこの時点で分かりませんでした。
そのため、実際にiPhone上でモックを確認してみることにしました。

すると、①は、すこしボタンが小さく、押しにくいと感じました。
この配置だと、ボタンを2つ置くのは難しいかな〜と思い、②に方向性を固めました。

●ID・パスワードをソッコーでコピーできる

次に『目当てのアカウント情報がすぐ見つかる』機能です。

案として『タグ付け』『フォルダ分け』など、色んな方法を考えました。
なお、競合の1Passwordはタグ付け機能があり、他のよくわからん管理アプリ(暴言ではないです)はフォルダ分け機能が付いていました。
なので実際に使ってみたのですが、どちらもちょっとよく分かりません。初見で操作が難しいと、使う気が失せるな〜と感じました。

僕は、一番シンプルで分かりやすい方法は『お気に入り』かな〜と考えました。
今回は、よくログインするアカウントの情報を『お気に入り』して、すぐアクセスできるような機能をつけようと思います。

お気に入りの表示方法は2パターン考えました。
しかし、①の方法だと、コピー時のスライド操作と被ってしまう事に気づき、②の表示方法(タブバー)をとる事にしました。

これで、コア機能の方針は概ね固まりました。

●パスワード入力

パスワード入力に関してですが、今回のターゲットは

すぐアカウントにログインしたい人

という設定でした。

そのため、長いパスワードを打ち込ませたり、パスワード入力に煩わしさを感じさせてしまうと、このアプリの存在価値はゼロです。
そのため、

・テンキー入力
・6桁のパスコード
を、採用しました。

テンキー入力にした理由としては、iPhoneのパスコードロックと同じ形式で見慣れているので、操作に手間取ることがないからです。ちなみに、Evernoteのパスコードロックもこの形式です。おそらく同じ理由でテンキー形式を採用しているのでしょう。
また、iOSキーボードが表示される時間も短縮することができます。

4桁の数字では流石に心許ないので、6桁にしました。(こちらの記事参照)

追記:2018/10/31

ちょっとデザインがあまりにもダサすぎたので、改善しました。

●アカウントの表示方法

これが一番苦戦しましたね…

『目当てのアカウント情報がすぐ見つかる』という命題があるので、パッと見て分かるようなデザインにしたいと思ったのですが、行き着いた先がこれです。

この表示方法は、LINEやTwitterなど、多くのアプリで使われており、見慣れているため、このような形式にしました。
アイコン画像は、自動で表示される方法と、画像を設定できる方法の二通りを想定しました。
ユーザー名を表示している理由としては、同じサービスで複数のアカウントを持っている場合に、どちらか判別させるためです。また、金融関係のIDは伏せ字にして、セキュリティ面を考慮しています。

●動き

今回、Adobe XDに『自動アニメーション』という機能が追加されました。これにより、モックアップの動作の幅が広がりました。めっちゃ嬉しい。
今回のスライド操作も、この自動アニメーションがなければ成立しませんでした。

モックを実際に動かした動画を撮ってみたので、ご覧ください!!

4、まとめ

なんとか完成しました!!!

一つ実感したのが、UIトレースの力、すげえ!!!ということです。
Twitterでも呟いたのですが、タブバー、ナビゲーションバー、余白の取り方、アイコンサイズ、文字サイズ、カラーなど、かなり活かすことができました。トレースで学んだ事は、自分で1からデザインを作るときに、めちゃくちゃ有効であるということが分かりました。

また、Cocoda!は本来、UIデザインの訓練のためのサービスだと思いますが、上流の要件定義をかなり詰めました。(前回note参照)これは、将来サービス開発の工程から関わりたいという思いがあり、その練習のために行いました。
そして、UIデザイン面のスキルを伸ばそうと思うと、もっと色んなアプリをトレースして、インプット量を増やす必要があるな〜とも思いました。

あと、今回は「あったらマジで欲しいぞ…」と思えるようなアプリを制作することが目標でした。
このnoteを見て「マジで欲しい」と思ったiOSエンジニアさんがいれば、ぜひ一緒に作りましょう(笑)

以上になります!
2回に渡りましたが、ここまで読んでくださり、ありがとうございました!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

今度あなたのnoteも読みに行きます〜!!
57

Yudai

スタートアップでUI/UXをやる大学生です。デザインに関する事や、考えた事をアウトプットします。

サービス開発シリーズ

自主練習でサービス開発をしてみた系の記事です。
3つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。