制作背景
日本では多くの人が心の不調に苦しんでいます。Cotreeやうららか相談室など、自宅周りにカウンセラーがいない方でも顔を見られず匿名で相談できる環境は整いつつあります。しかしながら、依然として高額な相談料と２段階認証の未導入が多いと言った問題点も依然として多くあります。
Your Chatでは自社テストを合格したカウンセラーを低価格で利用できるようにし、ログイン時に指紋認証と確認コードを用いた２段階認証でユーザーが安全にログインできるようにしています。
Your Chatでは自社テストを合格したカウンセラーを低価格で利用できるようにし、ログイン時に指紋認証と確認コードを用いた２段階認証でユーザーが安全にログインできるようにしています。
ターゲット層
10代〜20代の男女、周りに知られたくない人、発達障害や知的障害など認知に困難を抱えている人、
経済的な困難を抱えている人達
経済的な困難を抱えている人達
使用ツール
企画書：Notion
ワイヤーフレーム制作：Claude.ai
技術調査：Claude.ai
プロトタイプ制作：Figma
本ページサムネイル制作：Photoshop
写真素材：Photo AC
参考資料検索：Grok
制作過程
1.企画
学校の課題でシャーロットタウン市内のカウンセリングサービスの予約アプリを作成する課題があり、これをただの課題として終わらせるのでは無くユーザー中心のアプリ設計能力を向上させるために個人プロジェクトとして日本語版の作成をする事に決めました。
2.企画書
Notionを使用して、制作する目的、ターゲット層、代表的なペルソナ、Claude.aiで制作したワイヤーフレーム、使用したフリー素材やテンプレート素材の名前とリンク、参考サイトなどの情報の他に前述した低価格をどう実現するかをまとめています。このアプリ自体は架空のものですが、実際にリリースすると仮定して運営方針と未成年ユーザーへの配慮をまとめています。特に未成年の虚偽報告を防ぐため、未成年自身と彼らの保護者の身分証明書の提出を求める設計にしています。
3.ワイヤーフレーム制作
作業時間を短縮するため、動線と各画面の内容は自分で考え、ワイヤフレームの描写と各画面の内容の補填をClaude.aiが担当するという形で作成しました。
上：全体の遷移図 右上：画面の遷移図 左下：ユーザー登録画面 右下：使用時の動線
全体の動線
アカウント登録の初期案
予約フロー
各画面の構成
セッションのフロー
4.デザイン制作
利用者の中にはDVされている人や学校で虐められている人もいます。そのため加害者から携帯を取り上げられるリスクが高く、不正ログインの可能性があります。それを阻止する為にログイン画面は指紋認証と確認コードの入力でログインする仕様にしています。また、パスワード入力でのログインも可能です。
身分証明書の不一致を防ぐために名前と確認コードの送信のためメールアドレス、そして基本的に匿名でセッションを進めるためセッション中に表示するニックネームの入力をする形式にしました。画面の圧迫感を防ぐために、パスワード入力画面は他の画面にし、年齢認証画面と身分証明書撮影と認証画面を追加しました(プロトタイプでは成人ユーザーのケースを使用)。
身分証明書の不一致を防ぐために名前と確認コードの送信のためメールアドレス、そして基本的に匿名でセッションを進めるためセッション中に表示するニックネームの入力をする形式にしました。画面の圧迫感を防ぐために、パスワード入力画面は他の画面にし、年齢認証画面と身分証明書撮影と認証画面を追加しました(プロトタイプでは成人ユーザーのケースを使用)。
ホーム画面とモーダル
ホーム画面ではカウンセラーの検索、相談内容の種類と性別での絞り込み、料金と評価順での並び替え(同時絞り込みはできません)が可能です。デフォルトでは現在利用可能のカウンセラーが表示されます。また、「詳しく絞り込む」をクリックし、相談内容の詳細な絞り込み条件の表示(複数選択可能です)されます。そして、各カードの「詳しく見てみる→」からカウンセラーの詳細画面に遷移できる。
カウンセラー詳細画面
詳細画面ではホーム画面に書いている情報に加えて、カウンセラアーの経歴、保有資格、対応形式(※)、直近の予約可能時間(カレンダーでの予約時間確認も可能です)、相談した人の声を確認できます。ユーザーの方には納得できる決断をしてほしいと考えているため、予約するボタンは一番下に設置しています。
※全カウンセラーがビデオ通話とチャットの両方を対応していますが、ユーザーの方の不安をなくすために詳細画面にはデフォルトで表示しています。
※全カウンセラーがビデオ通話とチャットの両方を対応していますが、ユーザーの方の不安をなくすために詳細画面にはデフォルトで表示しています。
予約画面
ユーザーの中には認知に困難を持っており質問が多いと負担になるため、予約前の質問は予約日、対応形式、相談内容のみにしています。ユーザーの中にはクレジットカードを所有していない方も多い事を想定しており、Google Play Cardを一番上に設置しています。また、第３者からの不当な支払いを防ぐために、指紋認証もしくはパスコード入力で支払いの確定ができます。また、予約確定前に予約内容の確認ができ、そこから確定ができます。
予約後の画面(予約管理)
予約後は予約管理画面に予約情報が表示され、カウンセラー情報の再確認、セッションへの参加、予約内容の変更ができます。予約が無い時は「現在予約中のセッションはありません。」と表示されます。
セッション中の画面
実装時の負担の軽減と通信障害のリスク軽減のためAgora SDKを使用することを想定し、Figmaではそれに合わせたデザインにしています。また、セッションの感想をすぐに書けるようにセッション後に振り返りノートを書けるようにしています(途中退室した場合も使用できます)。また、ユーザー負担を減らすため、後からでも書けるようにしています。
セッション後の振り返り画面
直感的に理解できるように顔文字で表示し、ユーザーとカウンセラーの双方の負担が少なくなるように質問数は５つまでにしています。また、カウンセラー詳細画面の感想はQ5の回答からきており、設定された年齢と性別は表示されますが他の情報は表示されません(年齢と性別は登録時ではなく登録後の設定画面で入力するため)。未設定の場合は未回答と表示されます。感想の回答自体は任意であり、Q5でいいえを選択するとテキストエリアは表示されません。
振り返りQ1~Q2
振り返りQ3~個人情報保護
感想投稿時の画面
ログイン画面
最初の画面ではログインと登録の選択が可能です。ユーザーの中には同居人からのDVや学校でのいじめなど、本人の意思とは関係なしに携帯の中身を見られる可能性があります。その為、ログイン時には加害者からの不正ログインを防ぐために、指紋認証システムを導入しています。またパスワードを用いたログインも選択できます。指紋認証後は登録したメールアドレスに確認コードが送信されます。
登録画面
登録情報は名前、ニックネーム、ログイン時のメール認証用のメールアドレス登録の入力が表示されます。パスワードは入力時に設定条件に該当している時に、チェックマークがつく仕様にしています。当アプリでは未成年ユーザーの使用も想定しているため、年齢認証を設定し身分証明書の認証も成人では本人のもののみで、未成年の場合は保護者の身分証明書の提出を求める仕様にしています。また認証にはe-KYCシステムを用いて行っています。
Figma Link
リンクから実際にYour Chatのプロトタイプを体験してみてください！
