担当範囲
①マネージャーログイン画面
②AIアシスタントログイン画面
③パスワードリセット画面
・UIデザイン（画面構想0→1／情報設計／導線設計）
・認証フロー内の一貫性設計（共通UIルール整備）
・フロントエンド実装（HTML / CSS / JavaScript）
使用ツール
・Figma（UI設計・ワイヤーフレーム）
・vscode（HTML / CSS / JavaScript）
サイト概要
※上記URLの閲覧には認証が必要なため、必要に応じて個別に共有いたします。
介護施設向けDXプロダクトの管理画面における認証フロー（マネージャーログイン／AIアシスタントログイン／パスワードリセット）のUI設計・実装を担当。
高齢スタッフでも迷わず利用できる業務システムを目的とした画面群。
ターゲット層
・介護施設で日常的に業務システムを利用する職員（ITに不慣れなスタッフを含む）
・管理業務を行うマネージャー
・AI支援機能を初めて利用するユーザー
目的
・業務の入口となるログイン体験を整備し、操作の迷いと失敗を最小化する
・機能や画面が変わっても迷わないよう、UI構造を統一して学習コストを抑える
・パスワード忘れ等のトラブル時も、現場で自己解決できる復旧導線を用意する
注目ポイント
設計で重視したこと
ITが苦手な高齢スタッフを主軸に情報設計
現場スタッフの業務環境・ITリテラシーをヒアリングし、説明を読まなくても上から順に操作すれば完了できる構成を徹底した。
3画面にわたる認証フローの一貫性設計
マネージャーログイン・AIログイン・パスワードリセットの3画面で共通UIルールを策定し、画面が変わっても同じ感覚で操作できる状態を設計した。
ゼロから設計〜実装まで一貫担当
ヒアリング・情報設計・UIデザイン・フロントエンド実装まで一人で担当。要件に対して一貫した品質で納品した。
プロジェクトタイムライン
設計・制作プロセス
ヒアリング・課題調査
クライアントへのヒアリングを実施し、既存ログイン画面の課題を整理。現場スタッフのITリテラシーや業務フローを把握。
情報設計・要件定義
3画面（マネージャーログイン・AIログイン・パスワードリセット）の画面構成と導線を設計。共通UIルールを策定。
UIデザイン・プロトタイプ
Figmaで3画面のUIデザインを作成。クライアントレビューを経て修正対応を繰り返し、プロトタイプを完成させる。
フロントエンド実装
HTML・CSS・JavaScriptで3画面を実装。レスポンシブ対応・バリデーション処理・エラー表示も含めて完成させる。
ペルソナ設計
対象ユーザーの設計視点
田中 恵子（仮） 57歳・介護士／現場スタッフ
■ 業務環境
介護施設のフロアで日常的に業務システムを使用。シフト制で勤務しており、業務開始時にログインする機会が多い。
⚠︎ ペインポイント
ログイン画面が複数あってどこから入ればいいか毎回迷う。パスワードを忘れると誰かに聞かないと解決できない。
◇ ゴール
迷わず素早くログインして、業務をスムーズに開始したい。
山田 浩二（仮） 42歳・施設長／管理職
■ 業務環境
複数のスタッフのアカウント管理も担当。マネージャー用ログインを使用して管理画面にアクセスする。
⚠︎ ペインポイント
スタッフからパスワードリセットの問い合わせが多く、その都度対応に時間がかかる。
◇ ゴール
スタッフが自己解決できる仕組みにして、管理コストを減らしたい。
カスタマージャーニー
体験設計の流れ
| 項目 | 認識 | アクセス | 入力 | エラー | 復旧 | 完了 |
|---|---|---|---|---|---|---|
| 行動 | 業務開始のためPCを起動する | ログイン画面のURLを開く | IDとパスワードを入力する | ログインに失敗してエラーメッセージを見る | パスワードリセットを試みる | ログインに成功して業務を開始する |
| 感情 | 普通・特に意識なし | やや不安（正しい画面か確認できない） | 集中・慎重 | 焦り・困惑 | 不安・離脱したい気持ち | 安心・解決感 |
| 課題 | どのログイン画面を使えばいいか把握していない | URLをブックマークしていないと毎回探す必要がある | 入力欄が小さく誤入力しやすい | エラーメッセージが技術的で何をすればいいかわからない | リセット導線が見つけにくく途中で諦める | 次回また同じ問題が起きる可能性がある |
| 改善策 | ログイン種別を画面上で明確に区別して表示 | 画面タイトルとログイン種別を冒頭に明示 | 入力欄・ボタンのサイズと余白を最適化 | エラー文言をユーザー視点で書き直し次の行動を明示 | リセット導線をログイン画面の目立つ位置に配置し1ステップで完結 | パスワード保存を促すメッセージを表示 |
改善前の課題
利用状況から見えたUX課題
2種のログイン画面判断が困難
マネージャーログインとAIアシスタントログインの2画面が存在するが、見た目の差異がなく利用者が混乱していた。
タッチ操作に不向きなUIサイズ
入力欄やボタンのサイズが小さく、高齢スタッフがタッチ操作する際に誤タップや誤入力が発生しやすかった。
エラー時の次の行動が不明確
ログイン失敗時のエラーメッセージが技術的な表現で、ユーザーが次にどうすればいいかわからない状態だった。
対応方針
UX設計で重視した点
ログイン種別を画面上で明確に区別
ロゴ下に画面タイトルを配置し、余白とメインカラーで視認性を強化。認知負荷を抑え、ログイン種別を判別しやすいUIへ改善。
UIサイズ・余白の最適化
入力欄の高さを50px以上に統一し、ボタンサイズと余白を拡大。高齢スタッフでも迷わず操作できるUIを設計した。
エラー文言をユーザー視点で再設計
技術的なエラーメッセージをユーザーが次に取るべき行動を明示する文言に書き直した。
パスワードリセット導線の改善
リセットリンクをログイン画面の目立つ位置に配置し、リセット完了までを1画面・3ステップで完結できる構成にした。
情報設計・デザインのポイント
UI設計の工夫
PC画面
SP画面
以下のUIルールを統一し、画面が変わっても迷わず操作できる状態を設計しました。
【入力欄】
高さ50px以上に統一。余白を広めにとり、誤タップを防止。
【ボタン】
2カラム構成のレイアウトに合わせたサイズで統一。高さ52.5px。
視認性を確保するため背景色・文字色のコントラストを強調。
【エラー表示】
「IDとパスワードを入力してください」のアナウンス文の直下に「ログインIDまたはパスワードが違います」を赤文字で表示。
ユーザーが次に取るべき行動を明示する文言に設計。
【画面共通の構成順序】
上から「画面タイトル→アナウンス文→入力欄→ボタン」の順に統一。
説明を読まなくても上から順に操作すれば完了できるフローを徹底。
【エラーメッセージ】
アナウンス文の直下に「ログインIDまたはパスワードが違います」を赤文字で表示。
ユーザーが何を修正すればいいかをその場で把握できる位置に配置。
【パスワードリセット導線】
ログイン画面最下部に「ログイン情報をお忘れの方はこちら」リンクを設置。
エラーが続いた際も次の手段にスムーズに進める導線を確保。
【パスワードリセット画面】
1カラム構成でやることを1つに絞り、上から順に操作すれば完了できるフローを設計。
成果・振り返り
制作を通して得た設計の考え方
操作の迷いを最小化するUI設計を実現
画面種別にかかわらず統一したUIルールを適用したことで、初めて使うユーザーでも上から順に操作すれば完了できる設計を実現した。
情報設計は「読まなくても使える」を基準にする
説明文を読まなくても上から順に操作すれば完了できる構成にすることが、ITリテラシーの低いユーザーへの最大の配慮だと学んだ。
共通UIルールを先に定義すると実装が速い
複数画面を設計する際は最初に共通ルールを決めておくことで、デザインの一貫性が保たれ実装コストも下がることを実感した。