マモルバアプリ
Product Design
概要
本プロジェクトのクライアントである株式会社OTERAは、地域住民の掃除や買い物などの「小さな困りごと」と「地域住民をサポートしたい人」とを有償ボランティア形式でマッチングする地域サポートサービス「マモルバ」を運営している。このサービスをよりスムーズに運営するにあたり、当初クライアントが手作業で行っていたマッチング業務を効率化するため、お仕事マッチングアプリの開発を検討していた。
私はUXUIデザイナーとして開発者2名と協力し、マッチング業務プロセスの分解からアプリ要件への落とし込み、ワイヤーフレーミングとUIデザインまでを担当した。
本プロダクトデザインのプロセスではAIツールを積極的に活用し、2ヶ月というスピーディーなリリースを実現した。
クライアント
株式会社OTERA
役割
プロダクトデザイナー
完了
2026.2
Team
In collaboration with two developers
現状の課題の確認
目的
クライアントは、サポーター登録者をスプレッドシートで更新管理し、登録内容を手動で確認した上で別のLINEにてお手伝い案件を案内し、案件アサイン後はLINE内にて手動メッセージで詳細情報の提供などを行っており、膨大な時間をマッチング作業に費やしている点が課題だった。
今回のアプリ開発の主な目的は、運営が手動で行っているマッチング作業やマッチング後のコミュニケーションといった作業をアプリで自動化し、手作業による稼働を減らして、よりスムーズな運用を実現することだった。
私はプロダクトデザイナーとして、アプリ通して、サポーターも運営もスムーズに案件に取り組める環境づくりを行い、サポーターの登録から案件への応募、アサインされてから活動完了までに必要な情報やものがアプリ上で一通り確認できる状態を実現することを目指した。
そのためにまず、現状のサービス提供までのフローを整理し、どこからどこまでをアプリの機能として落とし込むべきかを確認した。
コンセプトを設計する
コンセプト
アプリのコンセプトは「考えなくていい、お手軽地域貢献」
お仕事マッチングアプリの特性上、ユーザーは、案件への応募前・応募後アサイン前・アサイン済み・完了済み案件など、案件ごとに異なる進行状況を把握し、案件の進行状況ごとに必要な対応を同時に行う必要がある。
また、このアプリのユーザーのメインセグメントは40~60代の地域貢献しながらお小遣いを稼ぎたい層を想定している。ユーザーが、難しく考えずに直感的に案件応募から活動完了までのフローをスムーズに体験できる設計を行いたかった。
そこで、アプリのコンセプトは「考えなくていい、お手軽地域貢献」とした。
これにより、案件がどの進行状態なのか、次にやることが何なのか、ユーザーが自分で考えなくても必要なタイミングで必要な情報に辿り着けるアプリを実現したいと考えた。
ユーザーを理解する
ユーザー分析とペルソナ
主なユーザーは、すでにサービスを利用しているサポーターであるため、70名の既存サポーターのデータをもとに属性分析を行い、セグメントを理解した。
性別、年齢、活動可能時間帯、性格に関する質問などのデータから、サポーターの活動動機や属性を分析し、ペインポイントとキーポイントを洗い出したうえで、2つのペルソナを作成した。
アイデアをプロトタイプに落とし込む
ユーザーフロー＆ワイヤーフレーム
ユーザー分析の結果、ペルソナ、そしてアプリ開発の目的をもとに、ChatGPTを利用して必要な機能を要件定義書とユーザーフローに落とし込んだ。さらに、Figma makeを利用してワイヤーフレームレベルのプロトタイプをスピーディーに作成した。
作成した簡易的なプロトタイプを実際に操作しながら、ペルソナやユーザーフローと照らし合わせて、機能やレイアウトなどの改善点を洗い出す→ユーザーフローおよび要件定義書を改善→プロトタイプに反映する
というというサイクルを繰り返し、ユーザー体験の精度を高めた状態でワイヤーフレームを完成させた。
また、プロトタイプのフィードバックセッションはステークホルダーを含めて実施し、初期段階での機能確認と意思統合をスムーズに行った。
スケーラブルなデザインシステムを作成
デザインシステム
UIデザインの開始するにあたり、まずはバリアンツやコンポーネントを利用して、スケーラブルなデザインシステムを作成した。
デザインにおける判断
UIデザイン
01 案件のフィルタリング機能
アプリに一度に掲載される案件数は多くても10件程度であるため、日付や時間を指定するような精緻なフィルタリング機能は不要だと判断した。
ユーザー分析の結果、サポーターは平日に活動する中年〜初老層が69％、休日に活動する社会人層が21％に分類される。そこで、フィルタリング要素は平日・休日それぞれの午前/午後と地域選択のみに絞り、実用性に即した機能とした。
02 チャット画面UI
最初は、アサイン済み案件ごとに、案件詳細画面とチャット画面をタブで切り替えるUIを用意した。ところが、サポーターとのやりとりの実情をクライアントに確認したところ、案件ごとの会話のみでなく、案件アサイン前や特定の案件に関するやりとり以外にも雑多な相談ベースのやり取りが多く発生していることがわかった。
これを受けて、チャットを常時使用できる機能として独立させるUIへ変更した。
03 ビジュアルで進行状況を可視化するUI
進行状況に応じた配色を一貫して使用
応募済みアサイン前、アサイン中、完了済みなど案件ごとに進行状況が複数存在する状態が発生する。この進行状況をビジュアルでわかりやすくするため、進行状況に応じた配色を行なった。一貫して同じ配色をアプリ内で使用することで、案件がどの状況なのか一目でわかりやすくなった。
サポーター新規登録画面にステッパーを設置
サポーター新規登録の必要記入項目は設問がとても多く、すべて羅列してしまうととても長いプロセスに感じてしまう懸念があった。そこで、設問をカテゴリごとにグルーピングし、ステッパーを利用してカテゴリベースで登録作業の進行度が把握できる状態にした。
これにより、ユーザーは現在地が把握しやすく、残りの登録作業のボリュームがわかりやすく安心してオンボーディングプロセスを進めることができるようになった。
開発者へのハンドオフ
開発者ハンドオフ
開発者へのスムーズなハンドオフのため、ハンドオフ用デザインファイルを用意した。
開発時に、UIUXデザイン周りで開発者が考えて判断しないといけない状況をできるだけ減らすために、エラーステートを含めて各ステートのコピーやデザインを準備し、アノテーションを利用して指示を残した。
同時に、アプリリリース時に必要な、アプリアイコン、アプリストア用画像などのアセットを、iOS用、Android用に準備した。
アノテーションやコメントを利用して、イレギュラーな部分の注意と意図の説明、開発時の留意点、遷移先（明らかでない場合）、トースト、各エラーステート時の文章などを指示。
必要に応じて、lottieを利用してアニメーションのイメージを伝える。
デザインシステムに則ってデザインすることで、一貫性があり開発しやすいデザインファイルに。
インパクト
結果
サービス運営の効率化
アプリ開発の大きな目的であった、サポーター登録管理や案件アサインなどクライアントの手作業による業務時間の大幅な削減によるサービス運営の効率化を実現した。
実証事業においてマッチング率100%を達成
神奈川県が主導するオープンイノベーションプログラム「YAK」において、2026年1月から3月まで実施していた横須賀市をフィールドとした「地域共助型生活支援サービス」の実証事業において、サービス利用者とサポーターのマッチング率100%を達成。実証実験の成功と、今後のサービス継続・さらに対象エリア拡大へつながった。
