RecruitJapanPicked 2026.09.26

トンガルマン株式会社採用サイト

採用のWebデザイン参考 — Web制作・デジタルマーケティング

出典: recruit.tongullman.co.jp

Editor's note — 編集部の視点

社名は尖ってるのに、中身は「マル」推し。

Web制作会社トンガルマンの採用サイトは、「意外とマルいぞ」を黄色の手描き楕円で囲み、社名の尖りと社風の丸さのギャップを一目で味わわせる。

BrunoStructure & IA

Companyの章の最後に「1ページで分かるトンガルマン」のまとめカードがあるんだよね。じっくり読みたい人にも、ざっと掴みたい人にも入口がある。採用ページでこれは親切だし、うまい。

1写真の人物の輪郭を黄色の手描き線がなぞる。整った集合写真より、その場の笑い声が伝わる
2「マル」や「Jobs」を手描きの楕円で囲む。ひとつの癖を全ページに通し、社名の遊び心を記憶に残す
3数字の章だけは焦げ茶の面にオレンジの数字。くだけたトーンの中で、ここだけ事実を締めて見せる

Color

トンガルマン株式会社採用サイトの配色

Typography

使用フォントと無料の代替

和文見出し・本文・ナビ

Aa あア

使用: Zen Kaku Gothic New
代替: Zen Kaku Gothic New

英字見出し・ラベル・カウンター

Aa あア

使用: Outfit
代替: Outfit

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型16px · — · 400
見出しKatapick 型16px · — · 400
小見出しKatapick 型16.2px · 1.5 · 700
本文The quick brown fox — 参考を型にする14.4px · 2 · 500
ボタンKatapick 型14.4px · — · 500
注釈The quick brown fox — 参考を型にする10.8px · 1 · 500

Structure

ページ構成（上から順）

01
ヘッダー
左に赤黄のロゴと「RECRUIT SITE」、右に5項目のナビ、白枠の「募集要項」と焦げ茶の「エントリー」のピル型ボタン。スクロール中も固定される。
02
ヒーロー
左に3行の大きな和文コピー（「マル」を黄色の手描き楕円で囲む）、中央に傾けて重ねた写真の束、右に英文の小さなコピーと「(002 / 003)」のカウンター。背景には白い三角形を円状に散らし、下部に「SCROLL」が流れる。
03
メッセージ
中央揃えの短い文章を数段に分けて置き、キーワードを黄色のマーカーで強調する。周囲に大きさの異なる写真が浮かぶように配置されている。
04
Jobs 仕事を知る
手描きの楕円で囲んだ英字見出しの下に、アカウント・クリエイティブ・エンジニア・ディレクターの4職種をサムネイル付きのリストで並べ、右に大きな写真を置く。
05
Company 会社を知る
代表メッセージ・文化と理念・会社情報の3枚の写真カードを並べ、下に「Summary（1ページで分かるトンガルマン）」の横長カードを置く。
06
People 人を知る
社員の写真を少しずつ傾けて横に並べたスライダー。下に社員の一言と名前、「インタビュー一覧を見る」のボタンと「(001 / 004)」のカウンター。
07
数字で見るトンガルマン
焦げ茶の角丸パネルの左に案件領域のドーナツグラフ、中央に未経験者の割合とMBTIのE・I比率のカード、右に見出しとボタン。
08
Environment 以降
Environment の冒頭の写真まではキャプチャで確認できる。フルページが9000pxで切れているため、以降の Environment・TONGULL FAQ・Recruit・ラジオ番組の紹介・フッターは抽出データの見出しのみで確認。

Interaction

アニメーション・インタラクション

ヒーローの写真は「002 / 003」のカウンターから3枚を切り替えるスライドショーで、各写真の人物をなぞる黄色の線は Lottie による描画アニメーションと思われる（Lottie は抽出データで検出）
Lenis による慣性スクロールが入っており、メッセージ周辺の写真はスクロール量に応じて位置がずれるパララックスと思われる
People の社員写真は Swiper によるスライダーと思われ、各スライドに rotate を少しずつ変えて付けている
下部の「SCROLL」は @keyframes の translateX による横に流れるテキストと思われる

スクロールのコマ撮りLenis · 400–20000ms

検出された技術:LenisSwiperLottie

Reproduce

再現するときのポイント

01写真は角丸にしたうえで rotate(-3deg〜4deg) 程度に傾け、2〜3枚を重ねて束のように見せる
02黄色（#ffea00）は手描きの楕円・マーカー・人物のなぞり線だけに使い、手描き要素を1色で統一する
03英字の見出しは Outfit の太字、和文は Zen Kaku Gothic New にし、英字見出しの下に黄色の点と和文の小見出しを添える
04文字色を純黒ではなく焦げ茶（#352d1f）にして、写真の暖色と馴染ませる

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

tongullman-recruit.katapick.md

1---
2title: "トンガルマン株式会社 採用サイト 再現用デザイン仕様書"
3source: https://recruit.tongullman.co.jp/
4katapick: https://katapick.com/sites/tongullman-recruit
5category: 採用
6region: 国内 (JP)
7tags: [写真主体, 手書き文字, ライト, 角丸, スクロール演出, カルーセル]
8launched: 2026-02
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# トンガルマン株式会社 採用サイト — 再現用デザイン仕様書
17 
18> 社名は尖ってるのに、中身は「マル」推し。Web制作会社トンガルマンの採用サイトは、「意外とマルいぞ」を黄色の手描き楕円で囲み、社名の尖りと社風の丸さのギャップを一目で味わわせる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22