総合人材サービスサイトTOPページ改修

総合人材サービスを提供する企業のコーポレートサイトTOPページ改修案件です。
求職者向けにサービスの特徴・職種一覧・仕事開始までの流れなどを分かりやすく伝える構成となっており、そのTOPページのデザイン反映とレスポンシブコーディングを担当しました。
既存サイトのトンマナをベースにしつつ、ファーストビューから下層導線までの情報を整理し、求職者が「自分に合う働き方を見つけやすい」構成を意識して実装しています。

• 既存のコーポレートサイトTOPページ改修にあたり、支給デザインをもとに、現行サイトのトンマナやコンポーネントと違和感なくなじむように実装する必要があった。

• スマホファーストで設計されたデザインだったため、PC表示時の横幅や余白・画像サイズのバランスを調整しつつ、各セクションの情報量を整理してコーディングすることが求められた。

• 既存のWordPress環境・テーマ構成を崩さずに、TOPページのみをリニューアルする形で反映していく必要があった。

• 支給いただいたTOPページのPCデザインをベースに、HTML/CSSでのマークアップとスタイリングを担当。

• スマホ用の明確なデザインがない状態だったため、PCレイアウトの意図を崩さない範囲で、SP表示時の行構成・余白・フォントサイズ・画像サイズをこちらで設計し、レスポンシブ対応を実装。

• ヒーローエリアから、「選ばれる理由」「幅広い職種紹介」「初めての方向け案内」「お仕事開始までの流れ」「ニュース」など、セクションごとの役割が分かりやすいようにマークアップを整理。

• CTAボタン（仕事検索・お問い合わせ）への導線が埋もれないよう、余白やボタンサイズ、配置のバランスを調整。

• 既存スタイルとの整合性を保ちながら、SPでは「1カラムで読み進めやすい構成」にすることで、求職者がストレスなく情報を追えるようにレイアウトを最適化。

• 画像や背景要素のトリミング・比率崩れが起きないように、object-fit やアスペクト比を調整し、PC/SPどちらでも破綻しないように実装。

• PCデザインのみを支給いただいた状態から、スマホファーストで閲覧しやすいTOPページに整えることで、求職者向け情報がより伝わりやすい構成になりました。

• レイアウト崩れや読みにくさが出やすい「画像＋テキスト＋CTAが詰まったセクション」も、デバイス幅に応じた余白・行分割で調整し、クライアントからも「スマホで見やすくなった」と評価をいただきました。

• 今後のニュース更新やコンテンツ追加にも対応しやすいように、共通パーツのスタイル設計を意識して実装しています。
  ※CVや具体的な数値は、クライアントの計測環境に依存するため、ポートフォリオ上では非公開としています。

本案件では特にNDAは締結していませんが、制作実績としての詳細な公開範囲については、今後クライアントと相談の上で調整する可能性があります。 現時点では、TOPページ改修のうち「コーディングを担当した事実」と「PCデザインからSPレイアウトを再構築したこと」のみを記載し、社内情報や非公開ページの内容などは掲載していません。 デザインはクライアント支給で、こちらはあくまでもフロントエンド実装（レスポンシブ対応・レイアウト調整）を担当しました。