← Worksへ戻る

No.001 / Websites / —

求人検索とコンテンツ運用を支えるWordPressサイト

求人・記事・運営情報を構造化し、条件検索、相談・問い合わせ導線、継続更新、保守・配布までを一つにまとめたカスタムWordPressサイト。

Project facts

Role
Web Development
Deliverable
WordPressコンテンツ基盤 / カスタムWordPressテーマ / 求人検索インターフェース / 採用・ストーリーサイト / WordPress管理画面設定 / WordPressメンテナンステーマ / WordPressテーマ配布パイプライン
Industry
求人・採用コンテンツ / 人材・採用 / キャリア支援
Capability
CMS構築 / フロントエンド開発 / 情報設計 / アクセシビリティ対応 / 開発環境整備 / UX設計 / データモデリング / レスポンシブデザイン / リリースエンジニアリング / 運用設計 / 保守・改善 / テスト設計
Technology
WordPress / PHP / TypeScript / Vite / Docker / SCSS / JavaScript / MariaDB / Node.js / WP-CLI / Google Maps JavaScript API
Audience
地域や働き方などの条件から求人を比較したい求職者 / 相談を起点に仕事選びや応募を進めたい利用者 / 採用支援や人材との接点を検討する企業担当者 / インタビューやキャリア情報を閲覧する利用者 / 求人、記事、会社情報を継続的に更新する運営担当者

課題

求人情報、キャリア相談、採用支援、記事コンテンツを分断せず、求職者と企業担当者が必要な情報へ進めること、運営側が継続的に更新できること、小さな操作上の負担を抑えることが必要だった。

解決策

WordPressのカスタム投稿、分類、メタデータ、管理設定で求人・記事・運営情報を構造化し、メインクエリを用いた条件検索へ接続。TypeScriptによる条件保持、お気に入り、動画、フォーム操作と、開発・保守・配布工程を一つのテーマ構成へ統合した。

主要機能・工夫

  • 構造化された求人管理

    求人を独立した投稿種別、分類、特徴、メタデータとして管理する。

  • 複数条件による求人検索

    地域、働き方、カテゴリ、特徴などを組み合わせて一覧を絞り込む。

  • 募集状況を考慮した並び順

    締切の状態を考慮して、比較しやすい順序で求人を表示する。

  • 検索条件の下書き保持

    検索モーダルを閉じても未送信の選択内容をブラウザ内へ保持する。

  • 求人のお気に入り

    比較したい求人をブラウザ内へ保存し、後から確認できるようにする。

  • 記事・インタビュー管理

    記事の分類と動画情報を管理し、URL表記を正規化して表示する。

  • プライバシーへ配慮した動画埋め込み

    動画はプライバシー強化型の埋め込み先を用いて表示する。

  • 運営情報の管理画面編集

    トップページ、会社情報、FAQなどをコード変更なしで更新できるようにする。

  • 設定差を吸収する地図表示

    地図設定の状態に応じて利用可能なマーカー方式へ切り替える。

  • フォーム遷移時の視点維持

    確認・修正の往復でもフォーム周辺の表示位置を保つ。

  • キーボード対応の操作UI

    独自セレクトやモーダルへキーボード、フォーカス、ARIAの処理を組み込む。

  • レスポンシブWeb UI

    デスクトップ、タブレット、スマートフォンで主要導線を維持する。

  • 再現可能なローカル環境

    CMS、データベース、メール確認、フロントエンドビルドをまとめて起動する。

  • 適切な応答を返すメンテナンス表示

    保守中の案内にサービス利用不可と再試行情報を伴うHTTP応答を設定する。

  • テーマ配布物の検査

    ビルド済みテーマのmanifestと内容物を確認して配布用ZIPを構築する。

成果・変化

  • 求人情報と検索導線を一体化

    求人の登録、分類、条件検索、締切を考慮した表示を一つのWordPress構成へ整理した。

  • 検索条件の再入力負担を軽減

    未送信の検索条件をブラウザ内へ保持し、検索モーダルを開き直した際に復元できるようにした。

  • 画面幅ごとの表示を継続改善

    デスクトップとモバイルの間にある画面幅も含め、主要要素の整列と背景表示を調整した。

  • 地図マーカーの表示経路を安定化

    地図設定が異なる環境でも利用可能な方式へ切り替えられる構成にした。

  • フォーム確認・修正時の視点を維持

    入力、確認、修正の画面遷移で利用者の表示位置が大きく変わらないようにした。

  • 検査可能なテーマ配布工程を整備

    フロントエンド資産のビルド、manifest確認、除外対象の検査を経てテーマをZIP化できるようにした。

求人検索とコンテンツ運用を支えるWordPressサイト

分野
人材・採用／キャリア支援
形態
Custom WordPress Website
対応
Desktop / Tablet / Mobile Web
公開範囲
NDAに基づく匿名ケーススタディ

探す、知る、相談する、採用するを一つのWeb体験へ

求人一覧・詳細、記事・インタビュー、運営者情報、サービス説明、よくある質問、会社情報、相談・問い合わせの各導線を一つのテーマで扱います。

公開内容はコード、設定、検証履歴から確認できる実装事実に限定し、固有名称、関係者情報、実績数値、公開URLは伏せています。

異なる目的を持つ利用者の導線を整理

Job Seeker
地域や働き方などの条件から求人を比較し、詳細を確認する。
Consultation
相談を起点に仕事選びや応募を進める。
Employer
採用支援の内容を理解し、問い合わせへ進む。
Editorial
求人、記事、運営情報、会社情報を継続更新する。

求人、記事、運営情報を用途別に構造化

求人は独立した投稿種別として扱い、検索や表示に必要な分類、特徴、募集条件、締切などを個別のデータとして管理します。保存時には権限、入力値、日付形式を確認する境界を設けています。

記事・インタビューと運営者情報も別の編集単位へ分け、公開テンプレートの表示責務と管理画面の入力責務が混ざりにくい構成にしています。

複数条件と募集状況を検索結果へ反映

地域、市区町村、働き方、カテゴリ、特徴などの条件を組み合わせ、WordPressのメインクエリへ反映します。テーマ側で別の検索データを持たず、公開状態と一覧結果の整合を保つ設計です。

並び順には締切の状態を含め、受付中、締切未設定、受付終了の違いを考慮します。検索結果から求人詳細へ進み、比較したい求人はブラウザ内のお気に入りへ保持できます。

送信前の検索条件も失わない状態設計

検索モーダル内の選択内容は、確定済み条件とは別の下書き状態として扱います。モーダルを閉じても途中の選択が失われないよう、ブラウザ保存を主経路、Cookieを補助経路として復元します。

開く、選ぶ、閉じる、再び開く、検索を確定するという操作単位で状態を切り分け、再入力の負担と意図しない条件消失を抑えています。

記事・インタビューと動画を継続運用

記事やインタビューは分類とともに管理し、テキストだけでなく動画を含むコンテンツへ対応します。入力された動画URLや識別子は表示前に正規化します。

動画はプライバシー強化型の埋め込み先を利用し、一覧、詳細、モーダルの各表示から同じ情報を扱えるようにしています。

主要な表示内容を管理画面から更新

トップページの主要セクション、サービス説明、よくある質問、運営情報、会社情報などを管理画面から更新できるようにしています。

更新頻度やデータ構造に応じて、投稿、分類、メタデータ、サイト設定を使い分け、表示変更のたびにテーマコードを修正しなくてよい運用を目指しています。

キーボード、フォーカス、画面幅を操作設計へ含める

独自セレクトとモーダルでは、矢印キー、決定、Escape、フォーカス移動、ARIA属性を扱い、ポインティングデバイスだけに依存しない操作を組み込みました。

デスクトップ、タブレット、スマートフォンの幅で、検索、カード、主要導線、背景表現を調整しています。正式な適合監査は未確認のため、特定規格への完全準拠とは表現していません。

環境差と画面遷移を吸収する地図・フォーム

地図は設定状況に応じて利用可能なマーカー方式へ切り替え、環境差によって位置情報が表示されなくなる状態を避けます。認証値や内部識別子は公開データに含めません。

問い合わせでは入力、確認、修正の往復時にフォーム周辺の表示位置を維持し、画面先頭へ戻ることで入力箇所を見失う負担を抑えています。

CMS、データベース、メール確認を再現するローカル環境

コンテナ構成でWordPress、リレーショナルデータベース、メール確認環境をまとめ、フロントエンド資産はVite、TypeScript、SCSSでビルドします。

テーマ機能は複数のPHPモジュールへ分け、コンテンツ定義、検索、管理画面、外部連携、フォーム補助の変更範囲を追いやすくしています。

メンテナンス応答と配布物検査を公開工程へ

保守中は専用テーマからサービス利用不可、再試行情報、キャッシュ抑制を伴う応答を返し、閲覧者と検索クローラーへ状態を伝えます。

公開用テーマはフロントエンド資産をビルドし、manifest、必要ファイル、除外対象を確認してZIP化します。公開環境では運用上不要な管理導線も制限します。

実際の失敗条件を記録し、操作単位で改善

検索条件の消失、地図マーカーの非表示、中間画面幅の崩れ、フォーム遷移時の視点移動など、確認で見つかった問題を再現条件とともに切り分けています。

見た目だけを調整するのではなく、状態の保存先、外部APIの前提、ブレークポイント、フォームイベントの発火順を確認し、再発しにくい実装へ更新しました。

確認できた実装事実と、公開しない情報を分離

正式な制作年、関与形態、個人の担当範囲、本番公開状態、事業上の定量成果は確認できていないため登録していません。品質確認についても、包括的な自動テストや正式監査が完了したとは断定しません。

固有名称、旧名称、顧客名、実在人物、連絡先、所在地、認証情報、内部識別子、リポジトリ、公開URL、根拠のない実績表現、権利未確認の画像はSanityの公開案件データから除外しています。