技術記事

前回はデザインシステムの話でしたが、今回は各画面の体験設計と、運営側の管理画面のUXについて説明します。
メディカルサークルでは、毎日使われるアプリを目指し、日常導線の中に自然にアップロードや学習体験を組み込む設計を意識しました。
本記事では、その具体的な工夫を紹介します。

アップロード画面は上から下に進めば終わる導線にする

要素が多くなりがちなアップロード画面は、ファイル選択 → タイトル・説明 → 科目・教授名 → 公開設定 → アップロードの順に並べ、自然に上から下へ進めば完了する構成にしました。
さらに、時間割登録済みユーザーが「今日の授業」カードからアップロードに入った場合は、科目名・教授名・曜日・時限がクエリパラメータで自動入力されます。
実質的に、ファイルを選んでタイトルを付けるだけで投稿が完了する導線になりました。

3D アイコンでファイル種別を直感的に区別する

ファイルカードには、ファイル種別ごとに色分けしたアイコンを配置しました。
PDF は赤、画像はプライマリの青、ZIP はアンバーと色を変え、直感的に判別できるようにしています。
さらに、アイコン自体を 3D 表現にすることで、周囲のテキストコンテンツより視覚的に浮かび上がり、一覧画面でも見つけやすくなりました。
小さなディテールですが、視認性の差が日常利用の快適さを生むと考えています。

有料導線は「気づくが押し付けない」場所に置く

検索機能は有料機能なので、ボトムナビの検索アイコンに小さな有料バッジを添える程度の控えめな表示にとどめています。
通常利用の動線上では有料表示が目に入りすぎず、ユーザーが自発的に検索に触れたタイミングでのみアップグレードダイアログが表示される仕組みです。
ダイアログには「今は必要ない」を選べるようにし、押し付けがましさを徹底的に避けました。
コンバージョンと体験の心地よさのバランスを意識した設計です。

ゲスト利用で価値を体感してから登録に誘導する

ゲスト（未登録）でも「自分の非公開ノート管理と時間割登録」は制限なく使えるようにしました。
会員登録を強制する前に、まずアプリの価値を体感してもらう設計です。
フレンド・コメント・チャットなどのソーシャル機能に触れたタイミングでのみ「この機能にはアカウント登録が必要です」というダイアログを表示し、文言は「何が使えないか」ではなく「登録すると何ができるようになるか」を伝えるように設計しました。

アカウント削除フローを多段階にして安心と確実を両立する

アカウント削除フローは「確認ダイアログ → パスワード再入力 → ローディング → 完了」の多段階構成です。
確認ダイアログでは「何が消えるのか」「何が残るのか」を具体的に記載し、チャット履歴は相手側に残ること、この操作は取り消せないことを明示しました。
誤操作を防ぐために手間は増やしつつも、不安を与えないよう情報を十分に開示するバランスを取っています。

ボトムナビと FAB を片手で扱える位置に置く

ボトムナビは「ホーム・マイノート・検索・マイページ」の 4 タブで、利用頻度の高い順に左から並べました。
主要なアクション（ノート追加の FAB、通知ベル、チャットアイコン）は、片手操作で指が届く位置に配置しています。
時間割の保存ボタンのように、最初は右上の AppBar に置いていたものは、実機テストで「押しにくい」と分かった段階で画面下部の大きなボタンに移動しました。
設計より、実機で触ったときの違和感を信じる姿勢を大切にしています。

管理画面は俯瞰性を最優先にする

運営側の管理画面は React + shadcn/ui で構築しました。
ユーザー・ノート・通報・コメント・チャットの各管理機能をサイドバーで切り替えるダッシュボード構成にし、一覧画面ではテーブル形式で一度に多くの情報を俯瞰できるようにしています。
アプリ本体とは違い、デスクトップで業務的に大量データを捌くシーンに最適化することで、運営工数を最小化しました。

アプリと管理画面でブランド一貫性と操作体系を使い分ける

配色はアプリ側と揃え、プライマリの紺やアクセントのアンバーを共通化することで、視覚的な一貫性を保ちました。
一方で使い勝手は意図的に差をつけており、アプリはカード型のモバイルファースト UI、管理画面はテーブル中心のデスクトップ向け UI と、それぞれの利用シーンに最適な操作体系を採用しています。
「同じブランドだが、別の道具」として設計したことで、両者が干渉せず、それぞれの役割を最大化できました。

まとめ

毎日使われるアプリを作るうえで自信があるのは、時間割登録と日常のノート管理を連動させた「今日の授業」セクションです。
時間割を登録するとホームに今日の授業が時限順に並び、各授業カードから直接ノートを追加できます。
科目名・教授名・曜日・時限がすべて自動入力されるため、ユーザーは写真を撮ってタイトルを付けるだけで整理済みのノートが完成します。
生活リズムにアプリの動作を乗せることで「わざわざ整理する」行為そのものを無くす

――この発想こそが、メディカルサークルの UI/UX 設計の核です。