こんにちは。現在、学びなおしでデザインを学んでいます。
スローペースで進めています。100本のうち4本目です。
アプリ模写100本ノックとは、
「骨格を即興で模写する」
観察力・瞬発力を鍛えるための、
1回30分のトレーニング
詳しくは以下の記事に詳しくまとまっています。
手順は簡単
- 模写したいアプリを１つ選ぶ
- アプリを触りながら、気になったことをメモする（10分）
- ふせんを縦にして、選択した３画面を手書きで模写する（10分）
- 用紙にふせんを並べて貼り、気づきを足す（10分）
- （できたら）気づいたことについて、数人で話し合ってみる
何年も家計管理アプリとして使用しているアプリです。
★家計簿アプリ・資産管理アプリ 利用率No.1！(※1)
★利用者が月平均25,066円の収支改善を実感！(※2)
★銀行・クレジットカード・電子マネー・ポイント等、2,451のサービスを連携可能(※3)◆無料で使える人気の家計簿アプリ『マネーフォワード ME（Money Forward ME）』
・手入力不要！ 銀行やクレジットカードとの連携で、自動で家計簿を作成
・現金もレシート読み取りで、簡単に家計簿の入力が完了
・カレンダー表示で日々の支出管理
・グラフで簡単、収支管理・資産管理
・金融関連サービスの連携数No.1！(※4)2,451の銀行・クレジットカード・電子マネー・ポイント等が連携できます。(※3)
セキュリティ面で一時期ざわざわしていましたが、アプリのUI/UXの面ではシンプルで連携だけすれば、お金のサマリを見やすく集約してくれるので、便利と感じています。
いくつも模写してみたい画面はありましたが、今回は、「ホーム」「口座」「資産」のタブでの画面表示を観察してみました！
- ホーム画面
- 口座画面（一覧）
- 資産画面（一覧）
- よく使う機能は右上にまとめてある
- 青/赤は金額の収支、オレンジなどはブランドカラー。
- 金額などは大きめの文字。あとはアイコンを多めにしている印象。
- メッセージが柔らかい感じ。ユーザーと近い。
AIが発達してきたので、共に振り返っていこうと思います。バラバラに書き留めた気づきを整理してもらい、いくつかの「設計の型」が考えられました。
「収入が青・支出が赤」と「ボタンやアイコンはオレンジ」とメモしましたが、性質の違う2つの色システムです。
青/赤はデータの意味を伝える色（見た瞬間に読まずに分かる＝認知負荷を下げる）。
オレンジはブランド＆操作の色（押せる場所・MFらしさ）。
この2つを混ぜないのが規律で、もしオレンジで金額を出したら「これは操作できるの?」と迷いが生まれます。迷いを生ませない設計が大事です。
「よく目にする項目が上」「サービスは初期閉じてる」「縦スクロールでシンプル」とメモした箇所については、１つの原則が見えてきました。
プログレッシブ・ディスクロージャー（必要な時に必要な分だけ開く）というUI設計の手法があります。
総資産を一番上に置くのは「使用頻度で優先順位をつける」判断で、サービス欄を畳むのは「収益・宣伝エリアだからユーザーの本来の目的の邪魔をしない」判断と見えます。同じ「隠す」でも狙いが違うのが面白いと感じました。
「メンテナンス中はグレー」「表示・非表示トグル」とメモしましたが、メンテ中を色で伝える、残高を隠せる（人前で開くアプリだから）といった日々発生する状態の表現があることに気づきました。
「今週もお疲れ様でした！」。お金のアプリは本来”不安を煽る”道具です（残高、支出、赤字…）。そこにこの一言を置くだけで心理的なハードルが下がります。
今回のアプリ模写100本ノックでは、自分の紙に書いたメモをAIに分析させてみました。そこから出た気づき・振り返りは、UI・UXの原則が効いていたり、私の目ではまだまだ気づかないところを言語化してくれて助かりました。引き続き、地道にアプリ模写は続けていこうと思います！
