本機能について
本機能は、社内での最適な人材配置やキャリア支援を目的とした、AIを活用した社員検索・スカウト機能です。
社員情報をAIで自動生成し、各部署は自然文やタグで検索し、マッチ度をもとに最適な人材を見つけてスカウトできます。
人材の活用やナレッジ共有をよりスムーズにするために、この検索機能をデザインしました。
私の役割
2025年5月から7月にかけて本機能のUIUXを担当しました。
プロジェクト初期は、従来の氏名・部署キーワード検索などをベースとしていましたが、後期にはAIによる検索機能が段階的に導入され、それに伴いデザイン案も継続的に進化していきました。
私はプロダクトマネージャーや開発者と積極的に連携し、ユーザーの導線やインタラクションの最適化に注力しました。
この機能は、利用者が適切な人材を探しやすくなり、全体的なユーザー体験を大幅に改善することができました。
デザイン目標
本機能では、検索の使いやすさと情報の視認性の向上を目的に、以下の2点を中心に設計を行いました。
多くの情報（社員情報一覧、タグ表示など）が表示される中でも、主要なボタンや情報が見つけやすく、直感的に操作できるようにする。
高い視認性と操作性
AI検索ボックスの配置と使いやすさ、検索結果一覧の視認性（マッチ度の表示方法、プロフィールの簡易プレビュー）、タグ選択との連携。
直感的で強力な人材検索体験
デザインプロセス
デザイン背景
PMより初期構想が提示されましたが、実際のUI設計においては、情報の見せ方や検索の使いやすさをしっかり整理する必要がありました。
利用者が社員の情報をスムーズに探せて、内容を分かりやすく見られることが、この機能の大きな目的です。
そのため、デザインでは以下の3点を中心に考えて設計を進めました。
社員カードをどのようにデザインするか。
AI検索機能とタグ検索機能をどのように統合するか。
タグ選択ダイアログをどのように表示するか。
本機能は社員情報の設定自由度が高い点が特徴であり、カードデザインにおいては情報の表示方法に工夫が必要だと考えました。
特に、限られたカードサイズの中で、設定される情報量（1項目から最大4項目）に応じて、いかに見やすく配置するかが課題でした。
例えば、自己PRのようにテキスト量が多くなるケースも想定し、熟慮を重ねた結果、以下の表示ルールを決定しました。（※表示するコンテンツ数は管理者環境で設定可能です。）
1行目には1項目のみを表示する。
2行目には最大3項目を表示可能とする。
これらの表示ルールに基づき、情報の並び順やレイアウトの可否を確認するため、各パターンのワイヤーフレームを作成しました。
01
3項目
4項目
また、カードのサイズには制限があるため、各項目のテキストが長くなる場合はツールチップで全文を表示する仕様としました。
チャレンジ
本機能は当初の社員情報の表示に加え、「マッチ度」や「スキルタグ」などの要素が追加されるなど、機能が継続的に拡張されていきました。
もともと情報量の多いカードにさらに項目を追加する必要があったため、限られたスペースの中で情報が埋もれないよう、「マッチ度」や「スキルタグ」の配置を工夫しながら、最適なレイアウトを模索しました。
文字が見やすく、情報をバランスよく整理できるように、デザインで工夫しました。
「スカウト」は左のパターンです
「スカウト」は右のパターンです
検索者にとって、第一に視認すべきは「マッチ度」だと考えました。これは、どの人材が最も適しているかを素早く判断するための、最も重要な情報だからです。
情報の優先順位としては、「マッチ度」→「社員情報」→「タグ」の順になると考えました。
特にタグを使って検索している場合、検索者はすでにタグ内容を意識しているため、カード上でタグを目立たせる必要性はそれほど高くありません。
以上の理由から、最終的に「マッチ度」と「スカウト」ボタンを人名の右側に配置するレイアウトを採用しました。
プロジェクト初期、本機能にはAI検索機能は導入されていませんでした。
しかし、デザインを進めていく中で、途中からAI検索機能を追加する方針が決まりました。
それに合わせて、既存のタグ検索との統合や、UIの調整を行いました。
初期検討と方向性の決定
AI検索機能の導入にあたり、当初は検索機能を画面上部と下部に配置する2つのデザイン案を検討しました。
上部配置
下部配置
既存システムの操作習慣との整合性を考慮し、PMからは検索ボックスを上部に維持する方が良いとのフィードバックを受けました。この意見統一により、デザイン案は最終的に本格的な軌道に乗りました。
チャレンジ
AI検索を導入するにあたり、従来の検索方法とは異なる操作になることを意識し、「AI検索で何が変わるのか」「ユーザーにどんな価値を提供できるのか」を考える必要がありました。
AI検索の魅力は、ユーザーの思考や行動を先に予測して、手間を減らせるところだと思いました。
そのため今回は、AI検索を単体で使うのではなく、タグ検索と組み合わせて活用することで、ユーザーの操作負担を減らす構成にしました。
こうした考えをもとに、プロンプトとタグを組み合わせた検索体験の設計に注力しました。
それでは、限られたレイアウト内で全ての機能をどのように合理的に配置すべきか？
私は以下の設計課題を洗い出しました。
これらの条件を踏まえ、2つの設計案を考案しました。
特徴
検索フォームを再構成し、AI検索とタグ検索を同一エリアに統合。
選択されたタグもリアルタイムで表示。
メリット
機能の併用が視覚的に明確で、検索条件の全体が把握しやすい。
デメリット
従来のUIを変更するため、ユーザーへの認知が必要。
特徴
メリット
UIの構造を大きく変えず、既存ユーザーにとって違和感がない。
デメリット
AI検索とタグ検索の併用が分かりづらい。
検索条件が多い場合、すべてを表示しきれない。
以下が、最終的な検索フォームデザインです。
上記の比較検討の結果、デザイン案2は、AI検索とタグ検索機能をうまく組み合わせていて、UIもシンプルかつ直感的であるため、本機能の使いやすさを大幅に向上させると判断しました。
このデザインは、初めて操作するユーザーでもスムーズに利用できることを目指しています。
03
最後は、タグダイアログの表示方法についての検討です。
私は2つの案を提案しました。
メリット
多くのユーザーの閲覧習慣に合っており、直感的な構成です。
デメリット
タグの数が多い場合、ダイアログのサイズ制限により、残りのコンテンツはスクロールでしか閲覧できません。
メリット
タグを直感的に表示でき、数が多い場合でも全てのタグを完全に表示できます。
デメリット
従来の閲覧方法とは異なりますが、ユーザーはすぐに慣れると考えています。
以下が、２つのデザイン案です。
デザインチーム内で議論を重ねた結果、タグ数が多いケースにおいても、より適切に情報を表示できるという理由から、一致で2つ目の案が支持されました。
最終的なデザイン
評価
最終的に、情報の整理と視認性を重視し、社員カード・検索機能・タグダイアログのそれぞれに対し工夫を凝らした本案は、実用性とUIの一貫性の面でチームから高い評価を得ることができました。
@SHU GYOSEN Portfolio2025
xqianzhou88@gmail.com