アプリ開発会社の採用（ポップ・元気）

だれに向けたページか

アプリ開発に興味がある新卒・第二新卒、未経験からエンジニアやデザイナーを目指す人。 「楽しそう」「この人たちと働いてみたい」が最初に来て、読み進めると仕事の中身・制度・選考の流れが分かる。

色

文字

• 日本語の見出し：Zen Maru Gothic（900）
• 英字の見出し：Rubik（800）
• 筆記体の一語：Pacifico（線で描いてから塗る）
• 本文：Zen Maru Gothic 500・16px

ページの構成と演出

1. 開幕（A10）：画面の外周に、写真のカード・色のカード・アプリのアイコン風の丸いシールが散らばって囲み、中央に「つくるって、たのしい。」と「エントリー」。読み込み時に外から集まって少し傾いた位置に止まり、スクロールすると外へ散っていく
2. 本編（B08）：PCでは画面を3列にし、左右を固定、中央だけスマホ幅（420px）で流れる
   • 左の舞台：ロゴ・大きな言葉・目次。いま読んでいる区切りの目次に印が付く
   • 右の舞台：区切りごとに切り抜き写真（スマホ・ノートPC・マグカップ）が入れ替わり、下にエントリーのボタン
   • 中央：仕事・人・制度・1日の流れ・選考の流れ・よくある質問
   • スマホ・タブレットでは中央の列だけになり、普通の縦長のページになる
3. 見出し（E05）：各区切りの太い日本語見出しの上に、筆記体の英語の一語（Hello! / Our team / Perks / One day / Join us!）が一筆書きのように描かれ、描き終わると丸いシールが弾んで出る
4. エントリー：黄色の面に大きなボタン
5. フッター

動きの決まり

• JSや GSAP が無いとき：カードは外周に止まったまま／筆記体は最初から塗られた状態／シールも最初から出ている。PCの3列は CSS の grid と sticky だけで成立する。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」
• 散らばるカードは少し傾くだけで、回り続けない
• 給与・休日数・社員数・社員の声は見本の値（〇〇）。会員が本物に替える

写真（codex）

オフィス／付箋のブレスト／スマホを持つ手（切り抜き）／ステッカーのノートPC（切り抜き）／黄色のマグ（切り抜き）／立ち机の後ろ姿／みんなのお昼、の7枚。顔は写さない。

下層ページを作るときの決まり

• PCの3列（B08）は下層でも使ってよい。中央の幅は 420px
• オレンジの面に白い文字を乗せない（濃い茶にする）
• 筆記体の一語は、1ページに見出し3つまで