この記事は mipass というパスワード管理アプリを私がどうやって作っていったかを連載記事にしたものです。連載記事の目次はこちら。
画像の再使用を禁止します
「プログラムは得意。デザインは苦手」
そんな風に思ってる人、多いんじゃないでしょうか。
大丈夫です。デザインはそんなに難しいものじゃありません。
ただ、理解しておくコツはあると思います。
今回のリスト画面を通じて、そのコツを紹介します！
パスワードリスト画面
パスワード情報１つを１行とし、全てのデータを表示するためのリストです。
スマフォのようなスムーズなスクロールを可能にしているのは unity の ScrollView のお陰。
ただし、この ScrollView、登録データの数に応じて指数関数的に重くなってしまうので、そのまま使うわけにはいきません。
1000 個表示しても処理が重くならないよう、以下のコンポーネントを追加使用します。
GitHub
元の記事
リストに必要な項目を考える
- タイトルをつける
- リスト上のボタンを押すと、表示された内容をコピーする
- リストの項目を編集できる
- URL ボタンを押すと、指定した URL にジャンプする（ブラウザが開く）
この条件を満たした UI を考えてみたいと思います。
まずは失敗例から見てみましょう。
失敗したデザイン
パッと見てどの情報が重要かよくわかりませんし、９つもあるボタンのどれを押したらいいのか、押していいのか絶対迷ってしまいますよね。
ちなみに、✖を押すと登録したデータがスッと消えます。
情報がいらない事もある。だから✖ボタンで消すようにした。親切心からやったとプログラマーＡ氏は言っております。
初めて使った人はなんとなく✖を押したら重要なデータが消え、戻せないことに嘆き、慣れた人でもうっかり間違えて押して消す……このボタンを消してくれ、という依頼が殺到することでしょう。
これでもリストに必要な項目を満たし、余計とは言えどそれ以上の機能があるんです。
完成品はこうです。同じ情報のはずなのに、ごちゃごちゃせずスッキリとしています。
ボタンの数も適切で、登録画面は別の画面に分けています。
私もデザイナーと言うより、どちらかと言えばプログラマーでご飯をいただく身なのでなぜこういう失敗をしてしまうのかがわかります（失敗を積み重ねてきました）。
プログラマーの思う「機能的」デザインというのは、
- １画面に全ての情報を頑張って入れようとする
- 情報の重要度とかおかまいなしに、全ての情報を等間隔、同じサイズで作る
- コントロールの間を極端に狭くしてしまう（1 の思想により、そうせざるを得ない）
「とにかく全部出来るよう１画面にまとめる」に走りがち、ということです。
使いやすくするためのコツは、
- 出来るだけ情報量を減らす
- 情報の重要度に合わせ、フォントのサイズ、色を変える。視線を誘導しやすい配置にする
- コントロールの間は十分にスペースを取る。取れない程情報過多の場合、別画面に分ける事を検討する
先ほどの失敗品をコツに合わせ、少し変えてみました。
相変わらず古臭いイメージなのは別として、もうそれほど使い方に悩むことはなくなったと思います。
プログラマーが持っているといいデザイン力は、絵を描き、デコレーションする事ではなく「ユーザーが直感で上手に使えるよう、誘導する」デザイン力です。
大きな会社であればそもそも企画からデザイナーを通し、XD かなんかでデザイン案が降りてきて、そのまま作ればいいだけかもしれません。
個人製作は、そうはいきません。また、小さな会社の場合デザイナーを雇ってないケースもあるでしょう。
B to B のアプリを作っている会社は、専門デザイナーがいないこと、よくあります。
番外編：Excel のツールが失敗する理由
少し話か変わりますが、10 年使われてきた自社製の Excel（Access）ツールがもう限界だ……安く、早く、この問題を解決できないか。こんな話をよく聞きます。
こういう案件の場合、そのほとんどが先の使いづらいデザインになっています。
それで済めばまだいい方で、中には画面下の分割線をクリックすると専用機能が発動する（しかも、割と頻繁に使う）なんて裏技みたいな仕様も見たことがあります。（市販のツールでした）
ここで問題なのは Excel（Access）ではなく、必要を求められ拡張し続けてきた違法建築のようなアプリの仕様であり、デザインです。
おそらく会社の中で、こういうのが好きだったり、得意な「１人」が「自分が使えればいい」と拡張していったのでしょう。他人が使う必要はないので、わかりやすいかどうか検討する必要がなかったはずです。
今だと FileMaker、Notion、Kintone あたりが代替品？（違う？）
どうせ選ぶなら、データのクラウド共有はマストにしたいですよね。
Excel は、これが無理。本当に。
ただ、どれを選んでリファインしたとしても、それを使って作り上げられる今後の違法建築デザイン、魔改造仕様が止むことはなく、早晩足を引っ張るようになります。
これを防ぐのはとても難しいです。
属人性を下げたところで、全員が将来に飽和しないデザインを思い描けなければ結果は一緒ですし……。そうして 10 年に１回のオーバーホールは、今後も繰り返されていくのだと思います。
キャラクター透過
記事が公開される頃までに実装完了しているか怪しいですが、こういう付け足しも考えています。
画像の再使用を禁止します
いつもお世話になっている Conoha の「このはちゃん」使用許可を頂けたので。
ただ、それ以外のキャラも考えたり、選択式にした場合の UI やら仕様やら、など色々考えていて先に進んでいません💦
