マネーフォワードでデザイナーをしているまめです。普段はC向けサービスのUIデザインを担当しています。

今回は、昨年6月から取り組んでいる品川女学院中等部の学生たちとのアプリづくりについてまとめたいと思います。

「中学生と一緒にアプリをつくる」という経験はなかなかレアだと思います。一方で、例えばPMの方と機能を詰めていくシーンなど、デザイナーではない職種の方とデザインを進める機会は多くのインハウスデザイナーにあると思います。

今回そんなシーンで、あえて相手を誘導(説得)せずにスムーズにデザインを進められる一例として、みなさんの参考になれば幸いです。

昨年6月、品川女子学院中等部の生徒からアプリの共同開発のお問い合わせがありました。

品川女子学院は、クラス単位で株式会社を設立する起業体験プログラムなどライフデザイン教育に力を入れている中高一貫の女子校で、問い合わせは「文化祭で発表する予定の家計簿アプリのUIを一緒に作ってほしい」という内容でした。

窓口であるマネーフォワードXの担当者から、全社Slackで「誰か一緒にやりませんか?」という募集があって、個人的に興味を持ったのと、お題が家計簿アプリで、マネーフォワードMEに近しい場所でデザインをしていることもあり、参加を決めました。

まず最初に品川女子のメンバーと弊社オフィスで顔合わせをすることに。

自己紹介を済ませ、今後の進め方をすり合わせました。1ヶ月でアプリのUIを作り切るという比較的タイトなスケジュールだったので、その場で一緒に理想の利用者体験の流れを作るワークショップを実施しました。

顔合わせ後すぐ行われたユーザー体験を考えるワークショップ

「アプリでこのようなことを実現したい」など学生のみなさんの頭の中にあるものに対して、ユーザーにどのような体験をしてもらいたいかという観点で、ジャーニーマップを作っていきました。

世代が離れていて、私たちが想像していなかったお金の使い方が出てきてかなり新鮮でした(今の中学生は「推し活」にお金をかけるそう!)

利用者は彼女らと同じ学生を想定していたので、一番ユーザーに詳しいのは彼女ら自身。私たちマネフォサイドは変に口を出したりせず、学生メンバーの考えを整理することでサポートしていました。

ジャーニーマップは彼女たちで持ち帰り、参加できなかったメンバーも交えて話し合ってもらい、1週間後に彼女たちのなかで納得感のある体験設計ができました。

学校に持ち帰って彼女たち自身でジャーニーマップを完成させ
「学生が1週間から自分のお金の使い方を振り返れるお小遣い帳」というコンセプトの決定

また、このジャーニーマップから体験の流れを整理し、この時点で、「学生が1週間から自分のお金の使い方を振り返れるお小遣い帳」をつくることが決まりました。

理想のユーザー体験が決まったので、次は機能を考えることに。

ユーザー体験から機能に落とす際、彼女らでたたき台を用意してきてくれました。

「いいと思った機能アイデアを出してきてほしい」というお願いをしていたので「お金の使い方をアドバイスしてくれるAI機能を入れたい!」など、かなり盛り盛りな機能案があがってきました。

学生たちが紙にまとめてきた機能アイデア

プロトタイプを作るために、まずは機能案を絞ることに。

こちら側で機能に優先度をつけて画面に落として説得するというやり方だと、おそらく向こうにもモヤモヤが残るだろうし、彼女たちの「デザインをした」という経験がなくなると思いました。

そこで、彼女らと対話の時間を設けて、1つひとつの機能をどういう背景で入れたいかを聞きながら、その場で画面に落とす形でビジュアル化していく進め方をとりました。すると、彼女らから「あ、これだと使いづらいね」という言葉がどんどん出てきます。

当初は1つの画面に複数の機能を盛り込むも、実際にUIに落としてみると「使いづらい」ことがわかり、画面を分割することも

「他にはどういう選択肢があるだろう」と類似サービスを見ながら一緒に考えつつ、出たアイデアをビジュアル化。多くの機能案をいろんなパターンで試していきました。

ここで意識したのは2つ。

1つは「誘導を一切しないこと」です。デザインを生業にしている私たちのほうが、アプリの「あるべき姿」はなんとなくわかります。しかし、アプリをつくるのも、いずれ使うのも彼女たちなので、私たちは「腑に落ちるアウトプットが生まれるまでのプロセスをスムーズに」する意識で、ビジュアル化とファシリテーションに徹しました。

学生たちならではのアウトプットの1つ、親や友達とお金に関するコミュニケーションを取れるチャット機能

もう1つは「傾聴をベースにコミュニケーションを行う」こと。なぜそのような発言をしたのかというところまで深掘りすることで、彼女たちはどんどん言語化を進めてくれます。彼女らが「これが使いやすいし、このパターンでいこう!」と腹落ちするところまでワークを続けて、ようやくUIが決まりました。

アプリのUIは最終的にこのような形になりました。

最終的に完成したアプリのUI

このUIも彼女たちで作り、私たちはアセットを用意し、AdobeXDの使い方をレクチャーしたのみです。

アセットを用意し、
ツールの使い方をレクチャー

そして実際の文化祭の発表ではポジティブな声が集まったそうです。「アプリの思想はいいけど、実際に使えるとよりいい」という声が多くあり、実際に実装・リリースを目指してプロジェクトを継続することが決まりました。

文化祭の発表の様子
発表スライドより一部抜粋

UIを作るという私が入ったプロジェクトはこの文化祭まででしたが、その後もいただいた意見を元に、ブラッシュアップを行なっています。

今回の取り組みを通して、デザインはデザイナーだけのものではないということを再実感しました。

最初にお話したように、デザイナーじゃない人と一緒に画面を作っていくケースは、私含めて多いと思います。そんな時に企画者から全部デザインを巻き取るのではなく、向こうの要望を聞きながら一緒にデザインをつくっていく、そんなコミュニケーションを今後も行っていけたらと思います。

また、デザインの経験がない人がデザインの仕事を新しく始める際には、その人が何を大事にしたくて、どんなことを目指しているのかを聞きながら伴走し続けるようにしたいと、今回の取り組みで感じました。

このデザイン組織をもっと知る