面接候補日程取得機能の

新規設計

面接候補日程

取得機能の

新規設計

タレントパレット

タレントパレット

ホームページ:https://www.pa-consul.co.jp/talentpalette/

ホームページ:https://www.pa-consul.co.jp/talentpalette/

本機能について

2025年2月に本機能のuiuxデザインを担当しました。

本機能では、そのやり取りをよりスムーズかつ負担の少ないものにするため、候補者から面接可能な日程を効率的に収集し、企業側が最終的な面接日時を簡単に決定・登録できる仕組みを目指しました。

このデザインを通じて、人と人との繋がりを円滑にする一助となれたことを、心から嬉しく思います。

デザイン目標

本機能では、複数フィルタリング設定により動的変化する画面構成に対し、ユーザーが迷わず操作できる直感的なUIを目指したため、必須の目標をリストアップしました。

表示モード(候補者・日別・全て)ごとのUI課題を整理し、それぞれに最適化された情報構成を設計。

設定に応じた最適な情報表示

候補者数や候補日程が多い場合でも、

必要な情報と操作ボタンが常に視認・操作できるよう配慮。

情報の可視化と整理

補者側がURLから直接アクセスし、

日程を簡単に回答できるシンプルなUIを設計。

ログイン不要の簡易操作画面

デザイン評価

社内で「要件の複雑さを的確に整理し、わかりやすいUIに落とし込めている」と好評を得るなど、情報設計の面で高く評価されました。

デザインプロセス

デザイン要件

デザイン着手前に、機能の基本構造や必要な機能要件が記載された資料を受け取りました。しかし、設計を円滑に進めるためには更なる情報整理が必要だと判断し、詳細な情報を洗い出し、全体像を把握することから着手しました。

01

01

フィルタリング機能

フォーム、表示方法、登録済み候補者の表示/非表示の切り替えによって、表示内容が動的に変化します。

候補日程の表示

提示された候補日程を一覧で確認できるようにし、「本日以降」のみが表示される仕様とします。

候補者の並び順

「回答日時が新しい順」および「候補日程順」に並ぶように設計します。

他候補日程の表示機能

「他候補日程を表示」ボタンを配置し、より多くの候補日程を確認できるようにします。

ログイン不要の回答機能

候補者はログイン不要で、専用URLにアクセスするだけで候補日を回答できるようにします。

フィルタリング機能

フォーム、表示方法、登録済み候補者の表示/非表示の切り替えによって、表示内容が動的に変化します。

候補日程の表示

提示された候補日程を一覧で確認できるようにし、「本日以降」のみが表示される仕様とします。

候補者の並び順

「回答日時が新しい順」および「候補日程順」に並ぶように設計します。

他候補日程の表示機能

「他候補日程を表示」ボタンを配置し、より多くの候補日程を確認できるようにします。

ログイン不要の回答機能

候補者はログイン不要で、専用URLにアクセスするだけで候補日を回答できるようにします。

マインドマップ

受け取った要件情報を検討する中で、私はある懸念を抱きました。特に、フィルタリングの切り替えによって画面の表示内容が動的に変化するため、それぞれの設定で異なる課題が発生するのではないかと感じたのです。


そこで、機能の複雑さをきちんと把握するために、私はマインドマップを用いて各ケースのロジックと潜在的な課題を徹底的に整理しました。

02

02

面接候補日程

取得

候補日程

一覧

フォーム

設定

ダイアログボックスで

表示される

右端に配置

いいね

「フォーム」

「表示方法」

候補者

日別

「登録済」ラベルに

変更

表示される仕様は

要検討

候補者側の画面を作成

「登録済候補者を表示」

「追加」機能

設定

通知メール

設定

依頼済候補者一覧

「全て」

以外の選択肢をした場合

「全て」を

選択した場合

Pulldown

候補者の並びは回答した日時が新しい順

懸念点

1人で大量の候補日程がある場合は、氏名と登録ボタンが見えなくなる可能性があるのでUIは要検討

候補者は時間帯を登録済するの場合

懸念点

フォーム名が全て表示される際

候補日程で並ぶ

「他候補日程を表示」機能

懸念点

同日時に多数名候補者がいる場合、時間と登録ボタンが見えなくなる可能性があるのでUIは要検討

候補者は時間帯を登録済するの場合

候補者の並びは回答した日時が新しい順

「登録済」ラベルに変更

懸念点

時間帯を変更したい時

フォーム名が表示しない

懸念点

全候補者が表示される際

登録済候補者を表示

フォーム名を追加する可能

フォームを設定できる

候補者に面接時間帯を送る

テーブル形で依頼済候補者を確認できる

1人が1つのフォーム

でいずれかの時間帯を登録済みの場合、残りの時間帯の「登録」ボタンの表示方法:

非表示

非活性

いいね

候補者がいずれかの時間帯に登録済みの場合、その他の時間帯での候補者表示に関する考え:

氏名は表示のままで、ラベルも表示されない。

氏名は表示のままで、ラベルも表示さる。

氏名/ラベルは表示されない。

いいね

ボタンを配置

ボタンを配置

ボタンを配置

チェックを外す

Tab3

Tab1

Button

SearchBox

SearchBox

チェックを入れる

Tab1

Tab2

マインドマップ上では、赤で示した部分を「絶対に解決すべき重要課題」、黄色で示した部分を「より良い解決策を追求すべき点」が、デザインでじっくり向き合うべきポイントとして鮮明に見えてきました。

こうした過程を通して、単なるUIの配置ではなく、ユーザーの迷いや混乱を最小限に抑えるための「体験全体の設計」が必要であることを実感しました。


その上で、本機能においてデザインで解決すべき重要な論点を、次に詳しく整理しています。

03

03

デザインポイントの整理

上記のマインドマップを通して機能全体の構造を整理していくうちに、私には、特にハイライトで示した部分が、デザインでじっくり向き合うべきポイントとして見えてきました。

そこで、改めて本機能においてデザインで解決すべき重要な課題は以下のように整理されます。

表示方法に関するUI課題(プルダウンの選択に応じて変化)

表示方法に関するUI課題(プルダウンの選択に応じて変化)

「候補者」表示モード

「候補者」表示モード

1人の候補者が多数の日程を登録した場合のUI設計(情報過多への対応)

1人の候補者が多数の日程を登録した場合のUI設計(情報過多への対応)

候補者の「時間帯登録済」状態の可視化方法

候補者の「時間帯登録済」状態の可視化方法

「日別」表示モード

「日別」表示モード

同一時間帯に複数の候補者がいる場合のUI設計(情報過多への対応)

同一時間帯に複数の候補者がいる場合のUI設計(情報過多への対応)

候補者が時間帯を登録済であることを、氏名や登録ボタンの表示/非表示によって視覚的に伝えるUIの検討

候補者が時間帯を登録済であることを、氏名や登録ボタンの表示/非表示によって視覚的に伝えるUIの検討

「他候補日程を表示」ボタン押下時の表示仕様に関するUI設計

「他候補日程を表示」ボタン押下時の表示仕様に関するUI設計

登録済の時間帯を変更する場合の操作フロー

登録済の時間帯を変更する場合の操作フロー

フォームプルダウンで「全て」を選択した場合

フォームプルダウンで「全て」を選択した場合

「候補者モード」「日別モード」の課題が同時発生する懸念があるため、 表示UIの最適化が必要

「候補者モード」「日別モード」の課題が同時発生する懸念があるため、 表示UIの最適化が必要

1

候補者画面の設計

候補者画面の設計

ログイン不要で時間帯を選択できるUIの設計

ログイン不要で時間帯を選択できるUIの設計

2

04

04

デザインの詳細

今回のデザインでは、以上の設計調査を踏まえ、ユーザー視点での使いやすさの向上を目指して設計を行いました。
特に「全て」モードにおいては、主要機能である「候補者別」と「日別」2つの表示オプションに焦点を当て、それぞれのデザイン意図と工夫について詳しくご説明します(一部の設定項目や手順は割愛しています)

候補者別

候補者別

※大量データが表示される場合の折りたたみ動作は、「日別」モードと同様です。

※大量データが表示される場合の折りたたみ動作は、「日別」モードと同様です。

「登録」ボタン

「登録」ボタン

1人の候補者が1つのフォームで時間帯を登録済みの場合、残りの時間帯の「登録」ボタンが非表示になります。

1人の候補者が1つのフォームで時間帯を登録済みの場合、残りの時間帯の「登録」ボタンが非表示になります。

これは、候補者が登録した時間帯を一目で把握できるようにし、登録状況の管理をしやすくするとともに、重複登録を防ぐための対応です。

これは、候補者が登録した時間帯を一目で把握できるようにし、登録状況の管理をしやすくするとともに、重複登録を防ぐための対応です。

「他○件」ボタン

「他○件」ボタン

1人で大量の候補日程がある場合、デフォルトで最大5件までを表示し、それ以外は「他○件」ボタンに収納します。

1人で大量の候補日程がある場合、デフォルトで最大5件までを表示し、それ以外は「他○件」ボタンに収納します。

テーブル内の情報過多を防ぎつつ、他の候補者の登録状況も確認しやすくするためです。

テーブル内の情報過多を防ぎつつ、他の候補者の登録状況も確認しやすくするためです。

「閉じる」ボタン/スクロール表示

「閉じる」ボタン/スクロール表示

展開された情報は折りたたむことができますが、候補日程は10件を超えた場合はスクロールで表示します。

展開された情報は折りたたむことができますが、候補日程は10件を超えた場合はスクロールで表示します。

これは、表示領域内での情報過多を避け、候補者の氏名や時間帯が見落とされないように配慮した設計です。

これは、表示領域内での情報過多を避け、候補者の氏名や時間帯が見落とされないように配慮した設計です。

1

2

3

日別

日別

カレンダー

カレンダー

本日以降の候補日を表示するため、以前の月を表示しないように非表示となってます。

本日以降の候補日を表示するため、以前の月を表示しないように非表示となってます。

「登録」ボタン

「登録」ボタン

1人が1つのフォームで1つの時間帯を登録済みの場合、残りの時間帯には氏名とボタンを非表示にします。

1人が1つのフォームで1つの時間帯を登録済みの場合、残りの時間帯には氏名とボタンを非表示にします。

これは、「全候補日程を表示」ボタンを使えば他の時間帯も確認・変更できるため、日別モードでは各時間帯の状況を整理しやすくする目的で、他の時間帯の情報を一旦非表示にする設計としています。

これは、「全候補日程を表示」ボタンを使えば他の時間帯も確認・変更できるため、日別モードでは各時間帯の状況を整理しやすくする目的で、他の時間帯の情報を一旦非表示にする設計としています。

「全候補日程を表示」ボタン

企業側は「全候補日程を表示」から登録時間帯を調整可能です。

企業側は「全候補日程を表示」から登録時間帯を調整可能です。

他の候補者の時間帯を確認しながら調整する必要があるため、「候補者別」モードでの表示調整では視認性が低下し、混乱を招く恐れがあることから、「日別」モードであれば、時間帯ごとの状況が一目で把握でき、誤操作も防げます。

他の候補者の時間帯を確認しながら調整する必要があるため、「候補者別」モードでの表示調整では視認性が低下し、混乱を招く恐れがあることから、「日別」モードであれば、時間帯ごとの状況が一目で把握でき、誤操作も防げます。

重複アラート

重複アラート

同じ時間帯を重複して選択した場合はアラートが表示されます。

同じ時間帯を重複して選択した場合はアラートが表示されます。

これは、時間帯や候補者数が多い場合でも、面接スケジュールを効率的に管理しやすくするための設計です。

これは、時間帯や候補者数が多い場合でも、面接スケジュールを効率的に管理しやすくするための設計です。

1

2

3

4

候補者画面

候補者画面

1

2

3

直感的な面接時間選択と自動登録

直感的な面接時間選択と自動登録

面接者は、企業から提供されたリンクを通じて、直感的に最適な面接日時を選択できます。

選択された時間帯は、「選択中日程」エリアに自動的に追加されます。

面接者は、企業から提供されたリンクを通じて、直感的に最適な面接日時を選択できます。

選択された時間帯は、「選択中日程」エリアに自動的に追加されます。

全体のUIはシンプルで情報が整理されており、候補者が主要な情報をすぐに把握できるよう配慮。また、選択済の日程を明示することで、誤選択を防ぎやすくしています。

全体のUIはシンプルで情報が整理されており、候補者が主要な情報をすぐに把握できるよう配慮。また、選択済の日程を明示することで、誤選択を防ぎやすくしています。

「送信」ボタン

「送信」ボタン

「送信」ボタンを押すと、選択内容を再確認するためのダイアログボックスが表示されます。

「送信」ボタンを押すと、選択内容を再確認するためのダイアログボックスが表示されます。

面接者による誤操作や誤った時間帯の選択を防ぐため、最終確認のステップを設けました。

面接者による誤操作や誤った時間帯の選択を防ぐため、最終確認のステップを設けました。

選択可能数上限超過時のアラート

選択可能数上限超過時のアラート

企業側で設定された選択可能な時間帯の上限を超えた場合、警告メッセージが表示されます。

企業側で設定された選択可能な時間帯の上限を超えた場合、警告メッセージが表示されます。

システム側で事前に制御し、ユーザーが上限を意識しながら選択できるようにすることで、スムーズな操作体験を提供します。

システム側で事前に制御し、ユーザーが上限を意識しながら選択できるようにすることで、スムーズな操作体験を提供します。

@SHU GYOSEN Portfolio2025

xqianzhou88@gmail.com