#MFxCocodaworkshop で得た学びと成果

本記事は、2018年11月4日に公開したnoteを以前のアカウントから移行したものです

2018年11月4日、「#MFxCocodaworkshop」に参加してきた。このイベントはUIデザイナーになりたい人をサポートするウェブサービス「Cocoda!」とお金の管理ができるアプリ「マネーフォワード」のコラボで実現したイベント。

当日は「家計簿アプリのホーム画面をつくろう！」というお題で、2チームに分かれてディスカッションしながら一人ごとに作品を仕上げていくという内容でした。

当日の様子はこんな感じ：

宿題

このワークショップは宿題もあり、ユーザーリサーチから問題点をみつけ、そこに対する解決方法のデザインをするという流れでした。宿題があるワークショップははじめてだったので、不思議な感覚でした。

この宿題の内容をグループごとに付箋に書き出し、ホワイトボードでシェア。僕は、同じグループの方が行ったリサーチを最終的に参考にし、個人作業を開始しました！

作業の流れ

当日の作業の流れはこんな感じ。ユーザーの整理から最終的にはペーパープロトなどがゴールに設定されていました。

■ ユーザー像の整理、課題や価値の設計、機能決定

最初はこんな感じのユーザーを想定してアプリの構想を考えはじめました。一人でお金を管理するアプリはマネーフォワードをはじめ多く知ってるのですが、複数の人で管理、目標に向かうアプリはないなと（知らないだけかも）。面白そうなので、考えました。

・結婚して二人で生活をはじめた、はじめる
・来年あたりに家を買いたい年あたりに家を買いたい
・二人のお金の動きが把握できてないけど、目標に向けてどうにかしたい
・20,30代、男女

ホーム画面の要素のアイディアとしてはこんなものを考えました。パートナーとゲーム感覚で貯金（目標達成）ができたらいいかなと。

・パートナーと一箇所で管理
・目標をふたりでシェアできる
・パートナーとデータが同期する
・目標への貢献具合を可視化

■ ペーパープロトの作成

Sketchなどのデザインツールで、要素を置いただけの軽いプロトタイプをつくることはあるんですが、実はペーパープロトを作るのはほぼはじめての経験でした。

情報をどう見せるか、どこに置くかを考えながらA4の紙5枚ほど、ひたすらアイディアを形にしてみました。

途中、マネーフォワードのいなげさんやCocoda!のYuichiさんにフィードバックをもらいながらすすめます。また参加者同士でも話し合いました。

Yuichiさんに頂いたフィードバックのひとつに「目標のスパンが長すぎるのでは？」というものがあり、ホーム画面のわりに粒度が細かいなと僕も納得。

また、そもそも家を買うときは貯金ではなく、ローンが一般的だよ！と、同じグループの既婚者の方に教えてもらいました。（まぁたしかにw）

で、いろいろヒアリングをさせていただき「旅行にいくための貯金」くらいの額であれば、貯金してやっている人たちが多いんじゃないかな。ということだったので、軌道修正をして再び走り出しました。

・結婚して二人で生活をはじめた、はじめる
・再来月旅行に行こうと計画し、貯金してる
・二人のお金の動きが把握できてないけど、目標に向けてどうにかしたい
・20,30代、男女

少し整理し、再びペーパープロトを作成。当初は進捗具合を表す「折れ線グラフ」使っていたのですが、積み上がってる感を出すために「棒グラフ」に変えてみたり…。とにかく汚いですけど、アイディアを形にしていきます（笑）

最終的にできたペーパープロトはこちら。数字の情報を減らし難しいイメージがないようにし、視覚的にどのくらい貢献できたか、目標はどのくらい達成できてるかを確認できます。右上の＋ボタンからは他の目標も追加できるイメージ。

そして、SketchでUIを起こしたワークショップでの成果物はこちら。（仕様や細かいUIなどは未完成ですし、矛盾点もありますが…）マネーフォワードのカラーに似せ、温かみとシンプルさを両立させました。

それっぽいものができました！

まとめ

数時間という短いワークショップの中で、とりあえず一つの形にするためにかなり必死に取り組みました。また、普段はエンジニアさんとデザイナーの僕が一人という座組が多い中、デザインに大きな熱量と真摯な姿勢をもたれた参加者の皆さんと話しながら制作できたことは、刺激的な時間でした。

このワークショップを通して、画面つくり屋さんではなく、UIUXデザイナーとしてロジカルなUI、UXを追求する一端を改めて経験でき、個人的に「UI/UXデザイン」学ぶ意欲がさらに湧き出たワークショップでした。

また機会があれば参加したいです。