RecruitJapanPicked 2026.09.26

株式会社TVer 採用サイト

採用のWebデザイン参考 — 動画配信サービス

サイトを見るrecruit.tver.co.jp

recruit.tver.co.jp開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

手書きの「Frame!」が、見出しからはみ出してる。

TVerの採用サイトは、紺の太い英字に手書きの「Frame!」を斜めに重ね、キャッチコピーの意味をレイアウトそのもので体現している。

BrunoStructure & IA

最初は手書きの「Frame!」、最後のエントリーは手書きの「Join!」。同じ手書きで始めて同じ手書きで終わるから、読み終わりに自然と背中を押されるんだよね。この締め方はうまい。

1手書きの「Frame!」が見出しの枠を物理的にはみ出す。コピーと造形がぴたりと噛み合う
2角丸の社員写真を大小ばらばらに散らし、整いすぎない社風をタイルの揺らぎで見せる
3職種紹介は放射状の図解1枚。組織の全体像を、読ませる前に掴ませる

Color

株式会社TVer 採用サイトの配色

Typography

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

英字見出し・ナビゲーション

Aa あア

使用: Poppins
代替: Poppins

和文見出し・本文

Aa あア

使用: 秀英角ゴシック銀
代替: Zen Kaku Gothic New

補助テキスト

Aa あア

使用: Lato
代替: Lato

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

本文The quick brown fox — 参考を型にする15px · 1.55 · 500

Structure

ページ構成（上から順）

01
ヒーロー
左に「BEYOND the」の紺の大見出し、その上に水色の手書き文字「Frame!」を斜めに重ね、右に和文のキャッチコピー。下半分は角丸写真のタイル。
02
記事カルーセル
CROSS TALK / INTERVIEW などのラベル付きの記事カードを横並びにし、右下の矢印ボタンで送るスライダー。
03
ABOUT（TVerを知る）
和文の見出しと紹介文を左に、角丸で切り抜いた大きな社員写真を右に配置し、VIEW MORE の丸矢印ボタンで下層へ誘導。
04
WORK（仕事を知る）
紺の円「TVer WORKS」を中心に、職種名の水色の円を放射状に配置した図解と、短いリード文。
05
Story of TVer WORKS
手書き風の「Story」見出しの下に、PICK UP STORY の大きな写真カードと、クロストーク記事のカルーセルを続ける。
06
PEOPLE（人を知る）
水色の角丸パネルに社員写真カードを重ね、スライダーで社員紹介を切り替える。
07
BENEFITS（働く環境を知る）
英字見出しと短いリードを左に、オフィス写真を右に大きく置く2カラム。
08
写真コラージュ・メッセージ
社員写真のタイルに囲まれた中央に TVer ロゴとメッセージを置き、BEYOND the Frame! のロゴで締めるブリッジ面。
09
エントリー・フッター
水色背景に手書き文字「Join!」と中途・新卒の2つのエントリーボタン。その下は紺背景のフッターナビとコーポレートサイトへのリンク。

Interaction

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

ヘッダーは固定表示で、右下にも「PAGE TOP」ボタンを常時表示している（position: fixed で実装可能）
記事・社員紹介は矢印ボタン付きのカルーセル。STUDIO 標準のスライダー機能と思われ、自前実装なら Swiper の navigation オプションで再現できる
手書き文字「Frame!」「Join!」は SVG 化されていると思われ、stroke-dashoffset を GSAP でアニメーションさせると描き順の演出を足せる
写真タイルやセクション要素にはスクロールに応じた表示アニメーションが付いていると思われる。IntersectionObserver でクラスを付与し、opacity と translateY を CSS transition で動かすと近い見え方になる

スクロールのコマ撮り300–7608000ms

検出された技術:STUDIONuxtGoogle Fonts

Reproduce

再現するときのポイント

01紺（#0c4f86）・水色（#02b1ff）・ネオンシアン（#02f3f9）の3色に絞り、背景は白ではなく #f5f8fa の薄い青白にする
02英字は Poppins の太字、和文は字間を広めにとったゴシックにして、英字の見出しと和文リードの役割を分ける
03写真は大きめの border-radius で角を丸め、サイズ違いのタイルを隙間少なく並べてコラージュにする
04各セクションに英字見出し＋和文サブタイトル（例: BENEFITS / 働く環境を知る）の型をそろえる

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

tver-recruit.katapick.md

1---
2title: "株式会社TVer 採用サイト デザイン分析書"
3source: https://recruit.tver.co.jp/
4katapick: https://katapick.com/sites/tver-recruit
5category: 採用
6region: 国内 (JP)
7tags: [写真主体, 大胆なタイポ, 手書き文字, ブルー基調, 角丸, カルーセル]
8launched: 2026-09
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# 株式会社TVer 採用サイト — デザイン分析書
16 
17> 手書きの「Frame!」が、見出しからはみ出してる。TVerの採用サイトは、紺の太い英字に手書きの「Frame!」を斜めに重ね、キャッチコピーの意味をレイアウトそのもので体現している。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22