PROJECT:
BiPSEE mindVR
カテゴリ:
アプリUIデザイン
URL:
https://apps.apple.com/jp/app/mind-vr/id6753204623
役割:
UI設計、画面デザイン(Figma)
時期:
2026/02 ~(約3ヶ月)

「VRデジタル療法」を開発するBiPSEEのVRとスマートフォンアプリを組み合わせたアプリ「mindVR」のUIデザインを担当しました。 ディレクター1名、エンジニア2名、デザイナー(私)1名の4名体制で2026年2月から途中参画し約3ヶ月でリリースされ、現在では治験で使用されています。

依頼内容
  • 既存のワイヤーフレームをもとにUIを整理して画面に落とし込みたい
提案内容
  • ホーム画面をプログラムの進捗と今日やるTodoだけに絞り、ユーザーが何をすればよいかすぐにわかる構成に見直し
  • 競合調査をもとに、毎日開きたくなり親しみやすく落ち着いたUIのテイストに定める
アプリ画面(抜粋)

ワイヤーフレームの課題と提案

参画した時点のワイヤーフレームでは、ホーム画面に進捗バー・キャラクター・チャット画面が並んで配置されていました。 対話形式でないものがチャットUIになっていたり、使う人が最初にどこを見て何をすればよいのかがわかりにくい状態でした。

そこで、2つの方向性を提案しました。
1つ目は今の構成をそのまま整理して見た目をすっきりさせる案です。
2つ目は構成から見直す案です。ホーム画面には「プログラムの進捗」と「今日やること」の2つに絞り明確にする案です。
修正するにあたり社内で追加のタスクが発生するため、ディレクターやエンジニアと相談しプロジェクトに負荷が少ないことも確認しました。
検討の結果、構成を見直す案が採用されました。

元のワイヤーフレームと、提案後のホーム画面

競合調査とUIのテイスト

UIのテイストを決めるにあたり、競合調査を行いました。
ベンチマークは、周辺事業を展開している企業のアプリです。 また、mindVRは毎日開いて使うアプリなので、日常的に開かれ続けているゲームアプリや、キャラクターが登場するゲームの画面を参考にしました。

周辺事業のアプリ画面調査

色とテイストは、うつ病の方が使うアプリであることを前提に決めました。
元気が出る色を選びつつ、エネルギッシュになりすぎない落ち着きのある雰囲気を目指しています。
アクセントに鮮やかなオレンジを使い、背景や文字にはクリームから茶系までの温かみのあるニュートラルを組み合わせました。
また直線的な角をなくし、子供向けのアプリを参考に全体に丸みを持たせました。

子供向けアプリやゲーム画面の調査(左)調査を加味したスケッチ(右)
カラー・タイポグラフィ・主要コンポーネント

成果

アプリはリリースされ治験で使用されています。各種ストアで公開されているため実際の画面は下記URLから確認できます。(一般ユーザーがアプリ内から新規登録することはできません)
App Store・Google Play

また治験の新著状況は下記URLから確認できます。
臨床研究等提出・公開システム