児相のしごと

PwCコンサルティング合同会社

児童相談所採用・人材育成サイト「児相のしごと」制作・運用

Figmaのデザインを細部まで忠実に再現しつつ、全国の自治体やイベントといった膨大な情報を、非エンジニアでも迷わず更新できる運用体制を構築することが求められていました。

BEMを用いた保守性の高いコーディングで度重なるデザイン変更に柔軟に対応し、ACFによる直感的な管理画面を設計することで、半年間にわたる円滑な保守運用と高い品質を両立させました。

採用情報のレスポンシブ最適化

PC VIEW

SP VIEW

PC 一覧性を重視した多段レイアウト。Flexboxで整然と配置しています。

SP 誤操作を防ぐタップ領域を確保。デバイスに合わせた可変設計を徹底しました。

複雑な表組みのレスポンシブ制御

PC VIEW

SP VIEW

PC 情報を整理して比較しやすいよう、横並びのテーブルレイアウトを採用。

SP 項目ごとにブロック化して縦に並べることで、スクロールのみで内容を完結に把握できるよう最適化しました。

情報構造に合わせたマークアップと堅牢な設計

PC VIEW

SP VIEW

PCFlexboxによる水平整列で一覧性を確保。余白を贅沢に使い、視線の動きをスムーズに誘導します。

SP日付とタイトルを2段に組み替え。狭い画面でも情報が重ならず、全文を読み切れる可読性を追求しました。

概要: 児童相談所の採用・人材育成を支援する特設サイト「児相のしごと」の新規制作および運用保守プロジェクトです。デザインデータを忠実に再現するピクセルパーフェクトなコーディングと、運用の利便性を考慮したWordPress（CMS）への組み込みを担当しました。
担当範囲: フロントエンド実装（HTML5, CSS3, JavaScript, WordPress構築）

カスタムフィールド（ACF）の設計・実装

2名体制による共同コーディングおよび品質管理
制作期間: ５か月フェーズ：要件定義・仕様策定 4週間 / 設計 4週間 / 高精度実装（BEM・WCAG準拠） 10週間 / 最終調整 2週間
使用言語・ソフト: HTML5, CSS3（BEM / Flexbox）, WordPress, Visual Studio Code, Figma