# トンガルマン株式会社 採用サイト｜採用のWebデザイン参考

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

- URL: https://recruit.tongullman.co.jp/
- 解説ページ: https://katapick.com/sites/tongullman-recruit
- カテゴリ: 採用 / 地域: 国内（JP）/ 業種: Web制作・デジタルマーケティング
- テイスト: 写真主体、手書き文字、ライト、角丸、スクロール演出、カルーセル
- 公開・リニューアル: 2026-02 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 32 時間）

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

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

## 配色
- #fafaf8 Off White（背景）
- #ffffff White（カード / 背景）
- #352d1f Espresso（テキスト / エントリーボタン / 数字パネル）
- #ffea00 Marker Yellow（アクセント / 手描きの丸囲み・マーカー）
- #a59d8f Warm Gray（補助テキスト（英文コピー等））
- #e87800 Tangerine（数字の強調）

## フォント
- 和文見出し・本文・ナビ: Zen Kaku Gothic New（代替: Zen Kaku Gothic New）
- 英字見出し・ラベル・カウンター: Outfit（代替: Outfit）

## よくある質問
### トンガルマン採用サイトで使われているフォントは？
抽出データでは和文に Zen Kaku Gothic New、英字に Outfit が使われています。どちらも Google Fonts で無料で利用できます。

### トンガルマン採用サイトのような手描き風の丸囲みはどう作る？
手描きの楕円をSVGで用意し、見出しの文字に position: absolute で重ねます。stroke-dasharray と stroke-dashoffset をアニメーションさせると、描かれていくように見せられます。複雑な線は Lottie で書き出す方法もあります。

### トンガルマン採用サイトはどんな企業の参考になる？
制作会社やスタートアップなど、社員の雰囲気や社風をかしこまらずに伝えたい中小規模の企業の採用サイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/tongullman-recruit からダウンロードできます。
出典: Katapick（https://katapick.com）