社会福祉法人春岡会 採用サイト

1. 01

   ヘッダー

   左にロゴと茶色の「採用サイト」ラベル、右上に法人サイトへのリンクと緑・ピンクの2つのボタン、その下に5項目のグローバルナビ。スクロール後も固定表示される。

2. 02

   ヒーロー

   左右に角丸の縦長写真、中央に2行のコピー、点線の区切り、サイト名と英字表記、緑とピンクを横に連結したCTA。下部に白抜き輪郭の大きな英文コピーと小さなイラストを配置する。

3. 03

   法人紹介

   左に角丸写真とイラスト、右に見出しと本文2段落、緑の角丸ボタン「春岡会について」。

4. 04

   職種紹介

   左端に縦書きの輪郭英字「DEPARTMENT」。生活支援員と看護師を写真＋イラスト付きの白カードで並べ、下の大きなカードで相談員を説明しつつ、右側に他の職種をボタン状に一覧する。

5. 05

   先輩インタビュー導線

   職員が手書きボードを持つ写真を暗く敷いた角丸バナーに「INTERVIEW」と和文見出し、丸い矢印ボタンを中央に置く。

6. 06

   研修制度・働く環境

   左に見出しと、写真サムネイル付きの2項目を点線で区切ったリスト、右に縦長の角丸写真を置く。

7. 07

   TOPICS

   大きな英字見出しの右に、日付・カテゴリラベル・タイトルを載せた白いバーを縦に並べ、右端を緑の矢印ボタンにする。

8. 08

   フッターCTA・フッター

   上端を丘のような弧にした緑の面にイラストを添え、募集要項とエントリーの白カードを並べる。下にロゴ・住所・電話・Instagramリンクとサイトマップ。

• ヘッダーは position: fixed でスクロール中も表示され、右下には緑の円形「TOP」ボタンが常駐する
• ヒーロー下部の輪郭文字の英文は左右が画面外に切れており、横に流れるマーキーと思われる（-webkit-text-stroke と transform の無限アニメーションで再現可能）
• 職種紹介のボタン一覧は、選んだ職種の説明を左の枠に切り替えるタブと思われる（選択中のボタンだけ緑で塗られている）
• 画像を雲形や角丸でトリミングしており、clip-path や border-radius とSVGの装飾を組み合わせて再現できる

スクロールのコマ撮り150–60000ms

検出された技術:WordPressGoogle Fonts

• 01背景は純白ではなく生成り色（#f3f2ef）にし、雲形のシルエットは背景よりわずかに濃いベージュで重ねる
• 02緑とピンクの2色を「募集要項」「エントリー」の役割に固定し、ヘッダー・FV・フッターで一貫させる
• 03テキストは黒ではなく焦げ茶（#483917）にして、写真とイラストの温かさに合わせる
• 04写真はすべて大きめの角丸でトリミングし、手描きのイラストを写真の端に重ねる

1---
2title: "社会福祉法人春岡会 採用サイト 再現用デザイン仕様書"
3source: https://recruit.haruokakai.or.jp/
4katapick: https://katapick.com/sites/haruokakai-recruit
5category: 採用
6region: 国内 (JP)
7tags: [写真主体, イラスト, 角丸, ライト, 固定ナビ]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# 社会福祉法人春岡会 採用サイト — 再現用デザイン仕様書
17 
18> コピーに塗った色が、そのままボタンの色になってる。社会福祉法人春岡会の採用サイトは、コピーの「気持ち」を緑、「毎日」をピンクに塗り、同じ2色をそのまま募集要項とエントリーのボタンへ引き継ぐ。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22