【第1話】ウェブサイト制作の進め方｜マーキュリー新卒採用サイト制作秘話

初めまして！ マーキュリー採用担当の馬場です。

2021年、その第一歩となるマーキュリー新卒採用サイトがリニューアルされました。
皆さんはもうチェックしていただけましたか？
自分に似ているキャラクターは見つかりましたか？
（ちなみに私は「戦略タイプ」だと言われました！）
キャラクター紹介はまた後ほどリンクを貼るので、
そちらもぜひご覧くださいね。

さて、今回から全3回に分けてお伝えするのは、
「採用サイト制作秘話」。
第1話では、ウェブサイト制作の進め方を中心に
お話しします。

採用サイト制作を検討中の企業担当者さんや、
就活生の皆さんも、ウェブ制作の裏側や
進め方を知ると面接準備にも役立ちますので、
ぜひ最後まで読んでみてください！

ウェブサイト制作の基本手順

まずは、「採用サイト制作」という
大きなプロジェクトを進めるための
基本的な流れをざっくり確認しましょう。
一般的には、以下のような手順で進めます。

1.目的の明確化
2.ターゲット・ターゲットCV（コンバージョン）設定
3.サイト構成（設計図）策定
4.デザイン・UI/UX設計
5.コンテンツ作成（ライティング・撮影・動画など）
6.コーディング・開発
7.テスト・最終チェック
8.公開・運用開始
9.定期的な改善（A/Bテスト・アクセス解析）

今回は特に「1. 目的の明確化」「4. デザイン・UI/UX設計」「5. コンテンツ作成」の部分を中心に、
当社の事例を交えながら詳しく解説します。

目的を明確化することが最重要

なぜ「目的」が大事なのか？

ウェブ制作に限らず、新しい取り組みを始めるときは
「目的を明確化する」ことが最優先。

「何のためにサイトを作るのか？」が曖昧だと、
作業中にブレが生じ、最終的に訪問者のニーズに
応えられないサイトになってしまいます。

マーキュリーでは、今回の新卒採用サイトリニューアルの
“最初の目的定義”として、社内でこんな問いを立てました。

目的：マーキュリーにとっての「良い人材」を採用し、
定着率を高める

──でも「良い人材」とは何でしょうか？

「学生が見て魅力を感じる情報を掲載し、
エントリー数を増やす」
「面接前に会社理解を深めてもらい、ミスマッチを減らす」
「最終的に内定辞退率を下げる」など、
さまざまな達成したい指標（KPI）があります。

具体的には、

• 応募者数増加（例：年間200名→300名にアップ）
• サイト訪問後のエントリー率向上（現状3％→5％）
• ミスマッチによる早期離職率の低減
• SNSや口コミでのポジティブな情報拡散

など、数値化できる目標を経営層・採用チームで
擦り合わせて決定しました。

KPIを掲げた上で、「誰に（ターゲット）」「何を（メッセージ）」「どのように（UI/UX設計）」を伝えるかを
逆算して考え始めました。

サイトデザイン・コンテンツ設計のポイント

■UX・UIを重視したデザイン
「スマホファーストじゃないと、すぐ離脱される！」という
意識は当然のこと。
当社のリニューアルでは、まずモバイルでの見やすさと
使いやすさを最優先しました。

• ファーストビュー（TOPページ最上部）の高速読み込み
  画像を軽量化しつつ、メインビジュアル（キャラクター＋キャッチコピー）を表示。
• ハンバーガーメニュー＋パンくずリストの導入
  サイト内のどこにいるか一目でわかり、必要な情報にストレスなくアクセスできるように。
• CTAボタン（エントリー／イベント予約）の色や配置
  「今すぐエントリー」「説明会予約はこちら」など、ユーザー行動を促すボタンを常に固定表示。

■コンテンツ企画のフレームワーク
どんなコンテンツを掲載するかは、
“ターゲット視点”で考えました。
採用ターゲットは、主に大学3年生～院1年生の就活生で、
「WebやSNSで情報を集めることに慣れている層」です。

具体的に用意したいコンテンツ例：

1.キャラクター紹介ページ
→ 自分と同じキャラタイプを見つけ、“親近感”や“企業理解”を深める。

2.社員インタビュー（共感ストーリー）
→ 「高校時代はバスケ部でした」「地方出身で右も左もわからない入社当初の苦労談！」など、リアルな声。

3.社内制度＆福利厚生解説
→「産休育休が取得率100％の理由」「時短勤務を取得したママ社員インタビュー」など具体事例。

4.オフィスツアー動画
→ 北海道～沖縄まで26拠点のオフィスを紹介。

5.インターン体験談・先輩の就活ガクチカ紹介
→ 実際にインターンシップで経験したことや、内定者が書いたガクチカ（学生時代に力を入れたこと）の例文。

これらを「採用サイト＋I・M・PRESS」で連携させることで、
SEO的にも相乗効果を狙っています。

依頼する制作会社選びはコンペ形式で

■なぜ複数社に依頼するのか？

「制作会社を1社に絞るのは不安」という声は多いもの。
そこで当社では4社にコンペティションを依頼し、
最終的にベストなパートナーを選びました。

• A社：大手企業実績豊富。デザイン力が高く、業務フローがしっかりしている。
• B社：SNSマーケティング強み。SEO対策に強く、コンテンツ企画にも定評あり。
• C社：地元クリエイター集団。全国26拠点のローカルニーズに詳しい。
• D社：採用特化型のウェブ制作会社。先進的なUI/UX事例が多い。

各社プランのメリット・デメリットを比べ、
最終的に「B社＋C社のハイブリッド体制」で進めることに決定。
理由は「A社の経験とデザイン力」と「B社のSEO・SNS運用力」を
掛け合わせることで、全国の就活生が検索から
辿り着きやすいサイトにしたかったからです。

■コンペ実施の流れ

1.要件定義シートの作成
目的、ターゲット、KPI、希望イメージをまとめた
RFP（提案依頼書）を作成。

2.各社へのRFP共有・ヒアリング実施
Zoomや対面で詳細を説明し、質問を受け付け。

3.一次提案書・見積もりの受領
ページ構成案、デザインサンプル、スケジュール、
見積もりを整備。

4.プレゼンテーション＆質疑応答
各社にオンラインプレゼンを実施。
社内関係者からの質問にも回答してもらう。

5.社内検討＆最終調整
予算感、納期、既存システムとの連携などを
総合的に比較。

6.受注決定＆製作契約書締結
一見、手間がかかるように思えますが、
結果的にコストパフォーマンスと品質の両立ができる
最適なパートナーを見つけることができました。

サイト構成決定から撮影、納品まで

■サイト構成の詰め方

採用サイト全体の構成図（サイトマップ）を作成し、
ディレクトリやページ名を明確にします。

例）

• /top：TOPページ
• /about：企業理念・会社概要
• /culture：社内制度・カルチャー紹介
• /career：採用フロー・応募フォーム
• /voice：社員インタビュー集
• /office-tour：オフィスツアー動画
• /faq：よくある質問

その上で、各ページに必要なテキスト原稿や画像素材、
動画コンテンツを洗い出し、
タスクをチーム内で割り振ります。
採用担当チームと営業部門、管理部門が密に連携し、
納期目標を共有して進行しました。

■写真撮影・動画制作

新サイトでは社員の「顔」が見えるコンテンツを重視。
具体的には、以下を1日かけて撮影しました。

• 社員インタビュー撮影（5名）
• オフィス風景スナップ（各拠点1～2枚ずつ）
• キャラクターイラストの撮影素材（イラストレーターとの連携で商品写真風に）

撮影チームには、当社の撮影担当と外部カメラマンを
アサイン。

「自然体の表情」「社内の活気が感じられる瞬間」を
ってカットを指定し、笑顔の瞬間や真剣な表情を
逃さずスナップ。
結果的に計100枚以上の写真素材が集まり、
サイトデザインのアクセントとして活かされました。

■コーディング＆CMS導入

デザインデータを元に、WordPressをベースとしたCMSを構築。

• レスポンシブデザインを徹底してスマホ表示を最適化。
• カスタム投稿タイプを活用し、社員インタビューなどを更新しやすい構造に。
• プラグイン選定では、SEOスコアを上げるための「Yoast SEO」や「内部リンク最適化ツール」を導入。

開発環境では、Gitを使ったバージョン管理と
ステージング環境での動作確認を実施し、
本番公開前にバグの洗い出しを徹底しました。

■テスト・最終チェック

サイト公開前には、以下の項目を
全社チェックリストに基づいて確認。

• 動作検証：リンク切れ、画像表示不具合がないか
• 表示チェック：主要ブラウザ（Chrome、Safari、Edge）とスマホ（iOS、Android）でレイアウト崩れがないか
• SEOチェック：メタタグ、alt属性、見出し（H1〜H3）の最適化
• セキュリティチェック：SSL証明書、CMSログイン制限、バックアップ設定

これらを社内の5名＋外部パートナーの合計6名で
レビューし、公開直前に最終OKを得ました。

■公開・運用開始

ついに、2020年12月10日に新卒採用サイトを正式公開。
公開日に合わせて公式SNS（Twitter、Instagram、
YouTube）で告知投稿を実施し、
アクセス数は公開後3日間で15,000PVを突破しました。

次回予告：写真撮影の舞台裏を大公開！

第1話では、ウェブサイト制作全体の流れと
ポイントをお話ししました。
次回の第2話では、実際に行われた写真撮影風景を
レポート！

• 社員の笑顔を引き出すコツ
• カメラマンとの連携ポイント
• 実際に撮影した写真をどう編集したか

など、“ビジュアル制作”の裏側をお見せします。
お楽しみに♪

👉第2話はこちら

まとめ

今回は、マーキュリー新卒採用サイト制作秘話・第1話と
して、ウェブサイト制作の進め方を詳しくご紹介しました。

• 目的を明確化し、KPIを設定したこと
• UX・UIを重視したデザイン設計
• 複数社参加のコンペティションで最適な制作会社を選定
• 構成設計から写真撮影、CMS構築、公開までの具体的な流れ

などを通じて、単なる「採用サイト」ではなく、
会社の魅力を余すところなく伝え、
就活生が共感できるメディアを目指しました。

就活生のみなさんも、採用サイトを見る際は
「なぜこのコンテンツが載っているのか？」
「どんな動線で情報を届けたいのか？」
を意識してみると、次の面接準備に役立つはずです。

マーキュリーでは、今後も記事や動画で採用ノウハウや
社内カルチャーを発信していきますので、
ぜひブックマークしてお楽しみください！

最後までお読みいただき、ありがとうございました。
次回の「写真撮影編」でまたお会いしましょう！

マーキュリー採用担当　馬場

🔗 関連リンク

• キャラクター紹介記事
• 第2話：撮影編
• マーキュリー採用サイト

※この記事の情報は執筆時点のものです。