View Case Study
Case Study01
病院予約アプリProject Overview
制作範囲
-
01. UI/UX Design
企画(課題・ペルソナ・コンセプト・要件)
ユーザーフロー・情報設計
ワイヤーフレーム -
02. Accessibility
文字サイズ、コントラスト、
タッチ領域、フォーカス、
専門用語を避ける 等 -
03. Prototype
実際の操作までプロトタイプ化
スマートフォンでの操作確認
01. UI/UX Design
背景
病院概要
地域に寄り添い、安心して通えるかかりつけクリニック
- 診療科
- 内科 / 整形外科 / 皮膚科 / 耳鼻咽喉科 / 眼科
- 診療時間
- 平日 8:30〜18:00 / 土曜 8:30〜12:00
日曜・祝日休診
既存の予約導線で感じる課題
課題
高齢者を含む幅広い利用者にとって、
電話予約は受付時間の制約があり、
Web予約は文字が小さい・操作が複雑
などの理由で使いにくい場合がある。
解決策
- 文字サイズとコントラストを見直す
- 操作を最小限にする
- 色だけに頼らない状態表示
- 予約の流れを段階的に見せる
- 迷ったときに戻りやすい導線を設計する
Concept「誰にとっても使いやすいアプリ」を目指す
高齢者を含む幅広い利用者が、体調が悪い状況でも迷わず予約できる予約体験を設計する。
想定ユーザー
メインペルソナ
60〜70代のスマートフォン利用者
ユーザーシナリオ
（68歳女性／定期的に整形外科通院）
膝の痛みが強くなり、来週中に受診したい。
通院時は息子に送迎をお願いしてるため、帰宅を待ち、相談。20時頃息子のスケジュールを確認し、すぐにアプリから予約。
24時間予約のおかげで、落ち着いて受診予約を進めることができた。
ユーザーフロー
- STEP01
アプリを開く
- STEP02
再診を選ぶ
- STEP03
ログインする
- STEP04
診療科を選ぶ
- STEP05
日時を選ぶ
- STEP06
内容確認
- STEP07
予約完了
- STEP08
予約内容を見る
情報設計・UI設計
具合悪くても操作できるよう、簡素化。- 診療科選択〜予約確認までフローの可視化。
- 利用者が迷わない言葉を使用。
- 入力ミスがあっても修正しやすい導線。
例1トップ画面
1
「再診」「初診」
「診察券を お持ちの方」
「初めて 受診される方」に変更
保険証の再診・初診との区別をつけるため。
予約アプリでは診察券の有無で導線をわける。
2
電話での予約・問い合わせを入れる
アプリ以外の予約手段である電話予約も追記。
(特に初診だとアプリでは不安に感じる人もいる)
受付時間も明記する。
例2日時選択画面
- 1週間見れるタイプのカレンダーにし、
○×△形式にすることで、混雑状況も把握できる - 基本休日の日曜日は省くが、祝日の場合は
×で対応する - ○△部分を選択すると、背景がベタ塗りにして
タップしたことをわかりやすくする
02. Accessibility
Accessibilityの具体例
Contrast
WCAG 2.2 AAを基準として検証
単色はFigmaカラーピッカー、グラデーションはStarkを使用し、コントラスト比のチェックし、必要に応じて色を調整。
アプリ全体の雰囲気を維持しながら、Lサイズ白文字でも十分なコントラストを確保できるよう設計した。
(Figma カラーピッカー)
(Stark)
Focus
明確なフォーカス表示
inputやselectのFocus表示も設定。
Form
placeholderに頼らない
inputやselectの前に表記例を記載。
Touch Target
44 × 44px以上を基本
カレンダー上で最も小さくなりやすい予約枠にも44×44pxのタッチ領域を確保。
Color
色だけで状態を伝えない
アイコンを入れ、
用途を一目でよりわかりやすく。
Text
本文18px以上を基本
利用者が比較的年齢層が高いことから、
本文は18px基準に設定。
Design Guide
UIの一貫性を保つため、制作時にDesign Guideを作成。
03. Prototype
Case Study02
MAISON ÉQUIL
Project Overview
女性向け美容医療サイトの構造とデザインを活かしながら、ボディコンディショニングサロンとして再設計した架空プロジェクトです。
ロゴコンセプトの立案から、コーポレートサイト・LPのデザインおよびコーディングまで一貫して制作しました。
ブランドの世界観が伝わることを重視し、配色・写真・コピーを統一して設計しています。
Role
Planning / Brand Concept / UI Design / Coding
Brand Design
- 01 / Concept
-
整うことで、美しくなる。
身体を鍛えるだけではなく、姿勢や習慣を整えることで本来の美しさを引き出す。
MAISON ÉQUILは、都会で生きる女性のためのボディコンディショニングサロンとして設計しました。
- 02 / Logo
-
ブランド名の由来である「ÉQUIL（均衡）」をテーマに、静けさと余白を感じるロゴを設計しました。
- 03 / Color Palette
-
ブラックを基調に、ゴールドとベージュをアクセントとして使用。上質さと落ち着きを感じる配色を目指しました。
- 04 / Photography Direction
-
低彩度 / 自然光 / 柔らかな陰影 / 女性らしい所作
写真はトレーニングの力強さではなく、静けさや美しさを感じられるトーンで統一しています。
Corporate Website
女性向けパーソナルジムのブランドサイト
Overview
ブランドサイトとして、MAISON ÉQUILの世界観やサービス内容を伝えることを目的に制作しました。
ロゴ・配色・写真トーンを統一し、上質で落ち着いたブランドイメージをWebサイト全体で表現しています。
Design Approach
ブラックとゴールドを基調に、余白を活かしたレイアウトを採用しました。
情報を詰め込みすぎず、写真とタイポグラフィによってブランドの空気感が伝わるデザインを目指しています。
Key Points
- ブランドの世界観を重視したUI設計
- 写真トーンとコピーの統一
- レスポンシブ対応を考慮した実装
Role
Planning
Brand Concept
UI Design
Coding
Landing Page
女性向けパーソナルジムの
体験予約獲得を目的としたランディングページ
Overview
体験予約獲得を目的に、サービスの魅力と導線設計を重視して制作しました。
ロゴ・配色・写真トーンを統一し、上質で落ち着いたブランドイメージをWebサイト全体で表現しています。
Design Approach
ブラックとゴールドを基調に、余白を活かしたレイアウトを採用しました。
情報を詰め込みすぎず、写真とタイポグラフィによってブランドの空気感が伝わるデザインを目指しています。
Key Points
- ブランドの世界観を重視したUI設計
- 写真トーンとコピーの統一
- レスポンシブ対応を考慮した実装
Role
Planning
UI Design
Coding
Reflection
ブランドコンセプト設計からコーポレートサイト、ランディングページまで一貫して制作しました。
同じブランドでも目的によって伝える内容が異なるため、それぞれに適した情報設計を意識しています。
ロゴ・配色・写真・Webデザインまで一貫して設計することで、ブランドの世界観が伝わる体験づくりを目指しました。