2026/07/19UIUXデザイン

Pathport丨UI

概要

「Pathport」は、人材紹介エージェントが求人情報を検索・検討し、候補者へ提案するBtoB向けの求人マッチングプラットフォームです。

課題：機能開発が先行し、画面ごとのUIに一貫性が無くなっていました。ベースとなる画面はAI生成で、「なぜこのデザインか」を人が説明できない状態でした。

施策：求人検索・一覧、求人詳細、ハンバーガーメニューなど、PC/SPの主要画面を情報設計から再構築しました。あわせてトークンとコンポーネントを整備し、全ての設計判断をFigmaのコメントノートに言語化しています。

成果：多段階のレビューを挿みながら、約2週間でデザインFIXに到達しました。アニメーションやページネーションなど実装時の判断基準まで申し送ったことで、AI生成のUIを起点にしながら、画面ごとの設計理由を人が説明できる状態で引き渡しています。

※非公開案件のため、「Pathport」は架空のサービス名で、お客様の社名は伏せています。掲載画像はカラー等を変更したイメージです。

課題

ベースとなる画面はAI生成のUIで、細部の一貫性や「なぜこのデザインか」の説明責任を、人が引き受けられる状態にする必要があった
支給されたデザインガイドラインはWebサイト用途で、設計思想の異なるシステムUIにはそのまま転用できなかった
パートナー企業様、その先のお客様、プロジェクトオーナー様の多段階レビューを挿みながら、約2週間でデザインFIXに到達する必要があった

施策

求人検索・一覧、求人詳細、全画面オーバーレイのハンバーガーメニューなど、PC/SPの主要画面を再設計
ガイドラインからはトーンと雰囲気の移植に留め、情報設計からシステムUIとして再構築
トークン・コンポーネントをFigmaで整備し、全設計判断をコメントノートで言語化。アニメーションやページネーションなど実装時の判断基準まで申し送り

デザインの意図

画面ごとの設計判断は、すべて理由をつけてFigmaのコメントノートに言語化しながら進めました。代表的なものを抜粋します。

読む順番に合わせた求人カードの情報設計：カード内はステータス、職種の見出し、会社名、雇用形態などの条件バッジ、勤務地・給与の順に配置。募集中かで読む価値を判断し、職種で中身を把握し、条件で自分に合うかを絞り込むという、読み手の判断の順番に画面の構造を合わせています。募集終了のカードは不透明度を下げ、開く前に区別できるようにしました。
誤操作を防ぐ操作設計：「条件クリア」は入力条件を破棄する操作のため、ボタンではなくテキストリンクにし、「求人検索」ボタンから距離を取って配置。該当件数は検索ボタンのすぐ右に置き、件数を確認してから検索する自然な流れを作りました。条件が未選択の間はボタンを非活性にしています。
ラベルと挙動の一致：実際にはパスワードも必要な「メールでログイン」は「メール・パスワードでログイン」に改め、押すまで挙動が分からない「送付用テキスト」はコピーアイコン付きの「送付用テキストコピー」に変更。隣接する「求人票URLコピー」はリンクアイコンにして、押す前に違いが分かるようにしました。ブックマークもハートのアイコンをブックマークのシンボルに揃え、名称と表示の不一致による認知負荷を取り除いています。
情報強度に応じたスタイリング：「一覧へ戻る」ボタンは情報強度に合わせてセカンダリーの見た目に変更し、中央揃えだった本文は可読性のため左揃えに統一。プレミアム領域の配色は既存のトーンを踏まえたシックなゴールドを提案しました。アイコンのルールは特別な理由がない限り統一する方針で、部分最適ではなく画面全体の一貫性を優先しています。
実装後の運用コストへの配慮：ヘッダー・フッターは求職者向けのバリアントとして出し分け、類似画面は既存コンポーネントの流用で構成するなど、保守コストが下がる形を提案。現行で微妙に異なっていた類似画面のデザインも統一し、スコープ外で気づいた画面の不足は描き起こして補いました。