RecruitJapanPicked 2026.09.26

株式会社MT-D 採用サイト

採用のWebデザイン参考 — 総合広告代理店

出典: mtd-inc.co.jp

Editor's note — 編集部の視点

かすれた矢印のコラージュで、ポスターみたいに攻めてる。

株式会社MT-Dの採用サイトは、赤い太字の「楽しめるは、強みだ。」と、網点やかすれを重ねた矢印のグラフィックで、広告会社の勢いを一枚の紙面のように見せている。

LunaType & Whitespace

英字はUnboundedで横にぶわっと広げて、和文は素直なゴシック。コラージュはうるさいのに、本文の字間はちゃんと空けて読ませてる。そこを分かってるなら……いいね！！

1「楽しめるは、」の「は」だけを小さく落とす。助詞のジャンプ率で、コピーに話し言葉のリズムが出る
2矢印のコラージュはFVとフッターで再登場。ページの始まりと終わりを、同じポスターで挟んでいる
3赤・青・ピンク・ミントに網点とかすれを足す。デジタルの画面に、刷った紙の手触りが残る

Color

株式会社MT-D 採用サイトの配色

Typography

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

和文見出し・本文

Aa あア

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

英字見出し・ナビ

Aa あア

使用: Unbounded
代替: Unbounded

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

特大見出しKatapick 型16px · 1.4 · 700
見出しKatapick 型64.8px · 1.1 · 500
小見出しKatapick 型39.6px · 1.4 · 700
本文The quick brown fox — 参考を型にする28.1px · 1.4 · 700
ボタンKatapick 型16px · 1.1 · 500
注釈The quick brown fox — 参考を型にする14px · 1.1 · 500

Structure

ページ構成（上から順）

01
ヘッダー
左にMT-Dロゴと赤い「RECRUIT SITE」、英字ナビ5項目、右に新卒・中途の赤いピル型ENTRYボタン2つ。固定表示。
02
ヒーロー
生成りの地に赤い太字の「楽しめるは、強みだ。」。背後に矢印・円・網点・かすれを重ねたコラージュと「BEYOND YESTERDAY」の英字を配置し、左下に縦書きのSCROLL。
03
メッセージ
赤い矢印のグラフィックから、左寄せのステートメントへ。角丸の社員写真を余白に散らす。
04
what we do
罫線で区切ったグリッドの中に、赤い縦書きの一言（「日常の仕事の中でアイデアを探してしまう」など）と事業紹介の文章、VIEW MOREボタンを置く。
05
INTERVIEW
見切れた大きな英字の帯を挟み、赤地に「試行錯誤も、楽しみながら挑戦する人」の見出し。「FILE.02」などのタブが付いた白いカードのカルーセル。
06
CROSS TALK
若手社員の集合写真に赤い「CROSS TALK」を重ね、「『やってみたい』が、未来を切り開く第一歩。」から座談会へ誘導する。
07
写真ギャラリー・RECRUIT
社員写真を散らしたあと、WELFARE・RECRUITMENTを赤い罫線で区切ったリンクリストで並べる。
08
JOIN US・フッター
赤地に新卒・中途の応募カード。フッターはFVと同じ矢印のコラージュを背景に、ナビを縦に並べる。

Interaction

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

インタビューはカード型のカルーセルで、「03 / 04」のページ表示と前後の丸ボタンで操作する
FVの矢印コラージュは、パーツごとに分けたSVG/PNGを時間差で重ねて表示すると、登場演出として再現可能
ページ途中の見切れた大きな英字の帯は、横方向のマーキーで流している可能性がある。@keyframes の translateX で再現できる

スクロールのコマ撮り400–200000ms

検出された技術:WordPressGoogle Fonts

Reproduce

再現するときのポイント

01背景は純白ではなく #f9f6f0 の生成りにし、紙に刷ったような土台を作る
02メインコピーは大きな太字で、助詞だけサイズを落としてリズムを付ける
03グラフィックは矢印・円・三角の単純な形に、網点（radial-gradient の繰り返し）やかすれのテクスチャを重ねる
04色は赤を主役に、青・ピンク・ミントを少量ずつ。文字は黒ではなく #1e2a21 の深い緑黒で組む

再現MDに含まれるもの

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

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

mt-d-recruit.katapick.md

1---
2title: "株式会社MT-D 採用サイト 再現用デザイン仕様書"
3source: https://mtd-inc.co.jp/recruit/
4katapick: https://katapick.com/sites/mt-d-recruit
5category: 採用
6region: 国内 (JP)
7tags: [大胆なタイポ, レッド基調, ビビッド, レトロ, カルーセル, 固定ナビ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 30
13generator: Katapick
14---
15 
16# 株式会社MT-D 採用サイト — 再現用デザイン仕様書
17 
18> かすれた矢印のコラージュで、ポスターみたいに攻めてる。株式会社MT-Dの採用サイトは、赤い太字の「楽しめるは、強みだ。」と、網点やかすれを重ねた矢印のグラフィックで、広告会社の勢いを一枚の紙面のように見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22