Webアプリ「MoguTomo」

アプリ機能の概要

「食を通じて、友達との親睦を深める」ことのできるアプリです。

自分の行ったグルメを登録し、それをフレンドと共有することができます。そして、他のフレンドが登録したグルメを見て、自分も行きたいと思う場所があれば、アプリを通じて食事に誘うことができます。

また、サブ機能として、このアプリを通じてフレンドと食事に行き、記録することで、ホーム画面のキャラクターが成長していくというちょっとした楽しい機能もあります。

制作過程

企画固め

FigmaのFigJamを使用して、どんなものを作るか話し合いを進めていきました。思いついたアイデアを出していき、その中から、
「グルメを記録」
「記録した分キャラクターが成長する」
というアイデアを軸に制作していくと決めました。

教師の方々に、どんなアプリなら使ってみたいと思うか、オリジナリティを感じるかを聴きながら、アイデアを形にしていきました。
このアプリのターゲットは、
「グルメ巡りが好きな、他人と過ごすことに楽しさを感じる大学生」
ゴールは、
「食べることを通じて、外部との気持ちのつながりを得る」
「他の人との交流を深める」
「他人に自分の好きなものをおすすめすることに利用する」
こととして、制作を進めていきました。

デザイン

デザインもFigmaを用いて作成しました。

私は、トップ画面と記録したものを表示するページのレイアウトを作成しました。

配色は食欲が湧くオレンジを中心としています。また、フォントはキャラクターに合わせて柔らかい雰囲気にするために「Zen丸ゴシック」を使用しています。

ユーザーがよく使うであろう機能にアクセスしやすいように、記録のボタンをトップに大きく配置しました。

コーディング

二人でコーディングを進めていったので、書き方は擦り合わせながら、担当するページを分けて進めていきました。
私の担当は、トップページとフレンドとの記録、自分の記録が見られるページでした。

デザインしてもらったものをできるだけ再現できるように気をつけました。また画面の大きさが変わっても挙動がおかしくならないように細かい最終調整もしました。

工夫・苦労したところ

チーム内での制作の癖の違い

同じfigmaというツールを使っていても、その使い方が違って苦労したとともに面白かったです。
コードを書くときも、GitHubでブランチを作って、というのを手探りでやっていったので、そこにも時間がかかってしまいました。

円滑なコミュニケーション

地域も違うところから集まった初めましてのチームで、コミュニケーションが上手く取れないと何もうまくいかないと考えていました。
それを防ぐために、昼食で名古屋飯を食べにいったり、自分から進捗を細かく口に出すようにしました。

結果、意見がどんどん出て、誰が何をしているかお互いに把握しながら制作を進めることができました。

製作者コメント

当たり前のことではありますが、学校で学んでいることがそれぞれで違って、自分の強み・弱みがさらに見えて面白かったです。リーダーとして、制作の進行は短期制作に慣れているほかのメンバーに任せてしまいましたが、仲良く円滑に進める手伝い、そして名古屋を知ってもらうことは出来たのではないかなと思います。