Figma | Job Portal

Home（トップページ）

求人サイトのトップページとして、求人検索から求人一覧、企業情報まで、求人サービスに必要な情報をまとめたページを実装しました。

• 求人検索
• 求人数・候補者数・企業数の統計表示
• 求人一覧
• 求人カテゴリ一覧
• 企業ロゴ表示
• Aboutセクション
• Testimonials
• Blogセクション

求人カードやカテゴリなど、求人サイトで使用されるUIを複数のセクションにわたって構築しています。

Jobs（求人一覧）

複数の求人情報を一覧表示し、求人を探しやすくするための求人一覧ページを実装しました。

• 求人一覧表示
• 求人検索
• カテゴリ・雇用形態・経験レベルなどの絞り込み
• 給与レンジ
• タグ表示
• 並び替え
• ページネーション
• Top Company一覧

求人カードを共通UIとして設計し、複数の求人情報を同じレイアウトで表示できる構成にしています。

Job Details（求人詳細）

個別の求人情報を確認するための詳細ページを実装しました。

• 求人詳細情報
• Job Overview
• 求人タグ
• 求人シェア
• 関連求人
• Google Maps埋め込み
• お問い合わせフォーム

求人情報だけでなく、関連求人や企業への問い合わせにつながるUIも含めて、求人詳細ページとして必要な要素を構築しています。

About Us（サービス紹介）

求人サービスの特徴や利用方法を紹介するAboutページを実装しました。

• Aboutページ紹介
• サービス利用の流れ
• Videoセクション
• FAQ
• サービスの特徴紹介
• Blogセクション

複数のコンテンツをセクションごとに整理し、サービスの内容を視覚的に伝えられるレイアウトを構築しています。

Contact Us（お問い合わせ）

求人サービスへの問い合わせを想定したお問い合わせページを実装しました。

• 会社情報表示
• お問い合わせフォーム
• Google Maps埋め込み
• 企業ロゴ表示

フォームや会社情報など、実際の企業サイトで使用されるUI要素を組み合わせてページを構築しています。

求人カード・企業カード

求人一覧やトップページなどで使用する求人カード・企業カードを実装しました。

• 求人タイトル
• 企業情報
• 給与情報
• 求人タグ
• 企業ロゴ
• ホバーアニメーション

複数のページで使用するUIは共通クラスとして設計し、同じコンポーネントを再利用できる構成にしています。

フォームUIのカスタマイズ

求人検索やお問い合わせフォームなどのフォームUIを、Figmaのデザインに合わせてCSSでカスタマイズしました。

• チェックボックス
• セレクトボックス
• 給与レンジ
• お問い合わせフォーム

標準のフォームUIをそのまま使用するのではなく、サイト全体のデザインに合わせてスタイリングしています。

ハンバーガーメニュー（JavaScript）

スマートフォン表示時のナビゲーションをJavaScriptで制御しています。

クリック時に、

• ナビゲーションの開閉
• 背景オーバーレイの表示・非表示
• メニュー表示中の背景スクロール防止
• メニュー内リンククリック時の自動クローズ
• aria-expanded による開閉状態の管理

を連動させています。

JavaScriptによるUIの状態管理だけでなく、aria-expanded を使用して開閉状態が伝わる構造を意識しています。

レスポンシブ対応

768pxをブレークポイントとして、PC・スマートフォンそれぞれのレイアウトを調整しています。

主な対応内容：

• PCナビゲーション → ハンバーガーメニュー化
• 求人カードの縦型レイアウトへの変更
• グリッドレイアウトの1カラム化
• お問い合わせフォームの1カラム化
• フッターのモバイルレイアウトへの切り替え
• 文字サイズ・余白の調整

PCとスマートフォンで単純に要素を縮小するのではなく、画面幅に応じてカラム数やナビゲーションなど、レイアウトそのものを変更することを意識しています。