Cocodaのお題で好みのラーメン屋を探せるアプリをデザインしてみた

CocodaにてWeekly Appチャレンジのお題「究極のラーメン探せて記録出来るをアプリが欲しい！」をやってみたので制作プロセスを振り返りたいと思います。

ペルソナ

さっ今日も野球が終わったことだしラーメンの旅に出かけようかな~
なんかいつも同じ常連のラーメン屋行くのはいいんだけど、たまには探索もして新しいお気に入りのラーメン屋見つけたいな。
でも、好みじゃないところに行って失敗しても嫌だな。
なんか今の行きつけのラーメン屋の特徴を教えてくれて、味が似ているお店をオススメしてくれるアプリとかあったらラーメン好きはめちゃ使うだろうな。あと、ラーメンの種類によってもあっさり~こってりとかいろいろ特徴あるだろうから旅行先とかでもチャレンジできたら最高だな!

ペルソナはお題で提供されているものを使用しました。

競合サービス

食べたラーメンを記録していけるアプリ「ラーメン手帳」は、アプリ名の通り記録することがメイン機能なので、新しいラーメン屋をさがすのには向いていないと思いました。

そして、「毎日がラーメン」というアプリでは、ユーザーの投稿がかなり盛んで、ラーメン通な人たちが行っているお店を知ることができます。投稿が多いお店をランキング形式で確認できたり、メッセージ機能もあり、ユーザー間の情報共有に重点が置かれているサービスだと感じました。

この二つのアプリでは、ユーザーの好みに即したおすすめのお店を表示する機能や、ラーメンを味などの特徴から探せる機能はなかったため、「新しいラーメン屋を探す」ことに重点を置いてアプリを設計することにしました。

ユーザーシナリオの作成

はじめてのUIデザインを参考に価値シナリオと行動シナリオを作成し、どんな画面が必要かある程度想像がついたところでFigmaを使ってデザインを始めました。

以下主要画面のデザインと意識したポイントです。

ユーザーのお気に入りやこれまで行ったお店、投稿されたレビューなどに基づいておすすめのラーメン屋を表示します。

エリア選択画面

ユーザーの特徴から、地名を入力して旅行先のラーメン屋も検索できるようにしました。また、主な移動手段が自転車なことを考え、何キロ圏内かを選択できる機能をつけました(右画像)。

他のアプリにはなかったため、味の特徴やラーメンの系統から絞り込んで検索できるようにしました。

絞り込みボタンを押すと半モーダルで選択画面が表示されます。

上記の競合サービスで紹介したアプリのレビューにて、「0.5きざみで評価できるようにしてほしい」という声がいくつかあり、確かにラーメン通にとって5段階では微妙な差をつけるのが難しいと思ったため、10段階で評価できるようにしました。

そして、レビューをPublicに公開するのではなく、自分が食べたラーメンの記録を残したいだけの人もいるだろうし、サービス設計的にも投稿さえしてくれればユーザーの好みを知ることができるため、公開・非公開を選べるようにしました。

アプリの配色は、食欲をそそるオレンジと、ラーメンへの情熱という意味で赤を組み合わせた色にしました。

Figmaのプロトタイプはこちら

使用画像: https://unsplash.com/