本文へスキップ
  1. TOP
  2. Webサイト制作実績
  3. ケーススタディ
  4. 撮影日から逆算し、構成・取材・デザインを一体で進めた採用ページ制作

撮影日から逆算し、構成・取材・デザインを一体で進めた採用ページ制作

CASE STUDY 撮影起点の採用ページ制作 社名非公開

撮影日から逆算し、構成・取材・デザインを一体で進めた採用ページ制作

住宅・不動産事業を展開する企業の採用ページを新たに制作しました。採用トップ、新卒採用、中途採用を対象に、要件整理、構成・コンテンツ提案、ワイヤーフレーム、撮影、インタビュー、デザイン、コーディングまでを約2か月で担当しています。 受注時点で撮影日と公開時期が決まっていたため、通常のように構成とデザインをすべて確定してから撮影するのではなく、トップページのラフと撮影カット案を先に用意し、現場で関係者と方向性を確認しながら素材を揃えました。公開後の中途採用ページ改修や募集職種追加にも継続して対応しています。

クライアント名 某住宅・不動産関連企業
業種
サイトのカテゴリ
サイトの特徴
  • JSギミック
  • 新規サイト構築
制作範囲
  • 企画構成
  • 制作進行
  • ディレクション
  • デザイン
  • コーディング
制作期間 2か月
課題と制約

新卒・中途それぞれの応募者に、仕事の内容だけでなく、会社の雰囲気や働く人の姿を具体的に伝える採用ページが求められました。既存の企業サイト内に追加するため、企業ブランドや既存ナビゲーションとの整合性を保ちつつ、採用情報として独立した読みやすさを持たせる必要がありました。

撮影日が先に確定していた一方、ページ構成や必要な写真の詳細は制作開始後に整理する状況でした。限られた撮影時間で、メインビジュアル、仕事風景、人物、インタビューなどに利用できる素材を漏れなく揃え、デザインと実装で無理のないカットにすることが重要です。公開期限から逆算し、顧客の休日や確認期間、デザイン修正、コーディングを同時に管理する必要もありました。

判断と対応

撮影前に採用ページの全体構成を整理し、トップページのラフと、掲載箇所ごとの撮影カット案を作成しました。完成形に近いイメージを用意したことで、撮影当日はカメラマン、顧客、デザイナーが同じ目的を共有し、短時間でも必要な人物・構図・余白を判断できるようにしています。インタビュー内容と写真の役割も合わせて整理し、同じ素材を無理に使い回さず、各ページの伝えたい内容に適した配置を行いました。

デザイン中には、実装難易度の高い表現や動きについてデザイナーとコーダーが事前に確認し、実現方法と制作時間を踏まえて提案内容を調整しました。撮影、原稿、デザイン、実装の進捗を個別に管理しながら、次工程へ渡す情報を明確化。公開後の募集職種追加や中途ページ改修にも対応できるよう、採用トップ、新卒、中途の共通部品を整理しています。

デザイン面の工夫

採用候補者が働く姿を想像できるよう、実際の社員と職場を撮影した写真を中心にデザインしました。撮影前には、メインビジュアル、インタビュー、仕事紹介で必要となる構図と余白をラフ上で確認し、文字を載せる場所やレスポンシブ時のトリミングまで考慮したカット案を準備しています。

撮影当日はデザイナーも同席し、カメラマンと直接コミュニケーションを取りながら、ページの目的に合う表情やアングルを確認しました。既存の企業サイトとの統一感を守りながら、採用ページでは人物の温度感と前向きな動きを加えています。限られた制作期間でも、写真、コピー、レイアウト、アニメーションが同じ方向を向くよう、途中段階から実装担当と相談して仕上げました。

実装と公開後の改善

採用トップ、新卒、中途の各ページに共通するナビゲーション、見出し、人物紹介、ボタンを部品化し、短期間でも品質を揃えて実装しました。デザイン着手中から動きやレスポンシブ表示を確認し、写真のトリミング、文字量、画面幅の変化を踏まえて、実現可能な表現を提案しています。

静止画だけでは伝わりにくい箇所には、内容を読み取ったうえで過度にならないアニメーションを加え、ページ全体の動きに統一感を持たせました。既存サイト内への追加であるため、現在のヘッダー・フッターやCSSへの影響を抑え、採用ページ固有の構造を切り分けています。公開後に中途採用ページや募集職種が追加された際も、既存部品を再利用して改修できる構成としました。

PRACTICAL KNOWLEDGE このケースに関連する実務知識

この案件で確認した判断を、複数の制作記録と照合し、ほかのWeb制作でも使える確認事項として整理しています。

撮影機材とCMS画面を並べて制作工程を確認するデスク

撮影・取材・CMS更新を一つの制作工程として設計する

撮影、取材、原稿、デザイン、CMS実装を別々に進めず、素材の用途と公開後の更新まで含めて一つの制作工程として整理する方法をご紹介します。

外部タグの発火経路を透明な分岐模型で確認する制作チーム

計測タグ・外部タグを、設置から削除までどう管理するか

アクセス解析や広告、外部フォームなどのタグについて、読み込み元、管理者、発火条件、同意状態、テスト・本番の区別、削除後の確認までを整理します。

その他のケーススタディ
CASE STUDY 事業の世界観が伝わる企業サイト 社名非公開

情報だけの「オンライン上の名刺」から、事業の世界観が伝わるコーポレートサイトへ

新しい会社・事業の立ち上げに伴うコーポレートサイト制作です。企業情報や事業内容などの大枠は見えていた一方、各ページの役割、事業を表す言葉、ブランドの見...

業種
レジャー・エンタメ / サービス
カテゴリ
コーポレートサイト
対応範囲
企画構成 / 制作進行 / ディレクション / デザイン / コーディング / CMS
詳細を見る
CASE STUDY 既存Web基盤への新サイト追加 社名非公開

既存Web基盤へ新サイトを追加。CMS権限・公開・継続運用をどう設計したか

既存の企業サイトとMovable Typeが稼働する環境に、施設サイトと新しい更新担当部門を追加したリニューアルです。ページ制作だけでなく、既存ドメイン・サーバー...

業種
レジャー・エンタメ / サービス
カテゴリ
サービスサイト
対応範囲
企画構成 / 制作進行 / ディレクション / デザイン / コーディング / システム / CMS / 管理画面
詳細を見る
CASE STUDY 運用できる会員サイト設計 社名非公開

会員サイトを「公開できる」から「運用できる」へ。認証・検索・権限・外部データ連携をどう設計したか

業界団体の会員向けポータルをリニューアルした案件です。蓄積されたお知らせ、資料、マニュアル、各種フォームを整理し、会員認証、検索、公開期間、管理画面、...

業種
金融 / 特殊法人
カテゴリ
サービスサイト / システム開発
対応範囲
企画構成 / 制作進行 / ディレクション / デザイン / コーディング / システム / CMS / 管理画面 / 会員管理
詳細を見る
CASE STUDY 日英同時進行の多言語サイト 社名非公開

日本語と英語を同時に進める多言語サイト制作

日本語と英語の二言語サイトを限られた期間で並行制作した案件です。日本語版を基準に共通テンプレートを整えながら、後から届く翻訳原稿、言語ごとの文字量と改...

業種
住宅・不動産 / 金融
カテゴリ
コーポレートサイト
対応範囲
企画構成 / 制作進行 / ディレクション / デザイン / コーディング / CMS
詳細を見る
ケーススタディ 一覧