CSS UI・Webデザイン集 | Webサイト基本構成：採用サイト

Web APP CSS
スポンサーリンク
スポンサーリンク

採用サイトは「会社の魅力を、求職者が理解しやすい順番で伝える」ことが最重要です

採用サイトは、商品を売るサイトではなく “会社という組織の価値を伝えるサイト” です。 求職者は、会社の雰囲気・働く人・仕事内容・福利厚生・ミッションなど、多くの情報を短時間で判断します。 そのため、採用サイトは 読みやすさ・信頼性・ストーリー性 を同時に満たす構成が必要です。

ここでは、実務で使われる採用サイトの王道構成を、初心者向けにかみ砕いて解説しながら、CSSとSCSSのテンプレートを提示します。 多くの読者がそのまま使えるように、実務レベルの構成でまとめています。

採用サイトの基本構成

採用サイトは大きく ヘッダー（ロゴ・メニュー） ヒーロー（会社の世界観） ミッション・ビジョン 社員紹介（インタビュー） 募集要項 エントリー導線 フッター という流れで構成されます。 この構成は「求職者が知りたい順番」に沿っているため、どの採用サイトでもほぼ共通です。

ヘッダー（信頼性と世界観を示す）

ヘッダーの役割

採用サイトのヘッダーは、会社の世界観を最初に伝える場所です。 ロゴ・メニュー・エントリーボタンを配置し、求職者が迷わず情報を探せるようにします。

CSS例

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

header .logo {
  font-size: 1.6rem;
  font-weight: bold;
}

header nav a {
  margin-left: 1.5rem;
  text-decoration: none;
  color: #374151;
  font-size: 1rem;
}

header .entry-btn {
  padding: 0.6rem 1.2rem;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
}
CSS

SCSS例

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;

  .logo {
    font-size: 1.6rem;
    font-weight: bold;
  }

  nav {
    a {
      margin-left: 1.5rem;
      text-decoration: none;
      color: #374151;
      font-size: 1rem;
    }
  }

  .entry-btn {
    padding: 0.6rem 1.2rem;
    background: #2563eb;
    color: #fff;
    border-radius: 8px;
  }
}
SCSS

深掘り

採用サイトのヘッダーは「信頼性」を作る場所です。 余白を広めに取り、落ち着いた色でまとめることで、求職者が安心して読み進められます。

ヒーローセクション（会社の世界観を一瞬で伝える）

役割

採用サイトのヒーローは、会社の雰囲気やミッションを一瞬で伝える場所です。 キャッチコピー・背景画像・簡単な説明を配置し、求職者に「この会社はどんな組織か」を直感的に理解してもらいます。

CSS例

.hero {
  padding: 5rem 2rem;
  text-align: center;
  background: #f9fafb;
}

.hero h1 {
  font-size: 2.6rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.1rem;
  color: #4b5563;
  max-width: 600px;
  margin: 0 auto;
}
CSS

SCSS例

.hero {
  padding: 5rem 2rem;
  text-align: center;
  background: #f9fafb;

  h1 {
    font-size: 2.6rem;
    margin-bottom: 1rem;
  }

  p {
    font-size: 1.1rem;
    color: #4b5563;
    max-width: 600px;
    margin: 0 auto;
  }
}
SCSS

深掘り

採用サイトのヒーローは「感情に訴える」ことが重要です。 文章よりも写真の印象が強く残るため、社員の自然な表情やオフィスの雰囲気が伝わる写真を使うと効果的です。

ミッション・ビジョン（会社の価値観を伝える）

役割

求職者は「この会社は何を目指しているのか」を非常に重視します。 ミッション・ビジョンは、採用サイトの中でも特に重要なセクションです。

CSS例

.mission {
  padding: 3rem 2rem;
  text-align: center;
}

.mission h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.mission p {
  font-size: 1.1rem;
  color: #374151;
  max-width: 700px;
  margin: 0 auto;
}
CSS

SCSS例

.mission {
  padding: 3rem 2rem;
  text-align: center;

  h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  p {
    font-size: 1.1rem;
    color: #374151;
    max-width: 700px;
    margin: 0 auto;
  }
}
SCSS

深掘り

ミッション・ビジョンは「抽象的すぎると伝わらない」ため、 短い文章で、具体的な行動や価値観がイメージできるように書くことが大切です。

社員紹介（リアルな声で信頼性を高める）

役割

求職者は「どんな人が働いているのか」を最も気にします。 社員インタビューや写真を掲載することで、会社のリアルな雰囲気を伝えられます。

CSS例

.members {
  padding: 3rem 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.member-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.member-card img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.member-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.member-card p {
  color: #4b5563;
}
CSS

SCSS例

.members {
  padding: 3rem 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;

  .member-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);

    img {
      width: 100%;
      border-radius: 12px;
      margin-bottom: 1rem;
    }

    h3 {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
    }

    p {
      color: #4b5563;
    }
  }
}
SCSS

深掘り

社員紹介は「写真の印象」が最重要です。 自然な笑顔・働いている様子・オフィスの雰囲気など、リアルな写真を使うことで信頼性が大きく向上します。

募集要項（情報を整理して迷わせない）

役割

募集要項は、求職者が応募を決めるための最終情報です。 仕事内容・必須条件・歓迎条件・勤務地・給与などを整理して掲載します。

CSS例

.job-detail {
  max-width: 800px;
  margin: 3rem auto;
  padding: 2rem;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.job-detail h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.job-detail p {
  margin-bottom: 1rem;
  color: #374151;
}
CSS

SCSS例

.job-detail {
  max-width: 800px;
  margin: 3rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);

  h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  p {
    margin-bottom: 1rem;
    color: #374151;
  }
}
SCSS

深掘り

募集要項は「読みやすさ」が命です。 段落を短くし、余白を広めに取ることで、求職者がストレスなく情報を理解できます。

エントリー導線（迷わず応募できる導線を作る）

役割

採用サイトのゴールは「応募してもらうこと」です。 ページ下部に大きなCTAボタンを配置し、迷わず応募できる導線を作ります。

CSS例

.entry-section {
  text-align: center;
  padding: 3rem 2rem;
}

.entry-section .cta {
  padding: 0.8rem 1.6rem;
  background: #2563eb;
  color: #fff;
  border-radius: 10px;
  font-size: 1.1rem;
}
CSS

SCSS例

.entry-section {
  text-align: center;
  padding: 3rem 2rem;

  .cta {
    padding: 0.8rem 1.6rem;
    background: #2563eb;
    color: #fff;
    border-radius: 10px;
    font-size: 1.1rem;
  }
}
SCSS

深掘り

CTAは「色のコントラスト」が重要です。 背景とボタンの色を反転させると、自然に目が向きます。

フッター（会社の信頼性を補強する）

役割

会社情報・SNSリンク・コピーライトなどをまとめ、採用サイト全体の信頼性を補強します。

CSS例

footer {
  padding: 2rem;
  background: #1f2937;
  color: #e5e7eb;
  text-align: center;
  font-size: 0.9rem;
}
CSS

SCSS例

footer {
  padding: 2rem;
  background: #1f2937;
  color: #e5e7eb;
  text-align: center;
  font-size: 0.9rem;
}
SCSS

深掘り

採用サイトのフッターは「安心感」を作る場所です。 濃い背景色＋薄い文字色で、サイト全体を落ち着かせます。

まとめ

採用サイトは ヘッダーで信頼性を示す ヒーローで世界観を伝える ミッションで価値観を伝える 社員紹介でリアルな雰囲気を伝える 募集要項で迷わせず情報を整理する エントリー導線で応募を促す という流れが鉄板です。

CSSとSCSSで構造を整理することで、 初心者でも迷わずに実務レベルの採用サイトを作れるようになります。

スポンサーリンク
タイトルとURLをコピーしました