RecruitJapanPicked 2026.09.26

株式会社TVer 採用サイト

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

出典: 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

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 で動かすと近い見え方になる

検出された技術:STUDIONuxtGoogle Fonts

Reproduce

再現するときのポイント

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

再現MDに含まれるもの

CSS変数化したカラートークン / Google Fonts 読み込みタグ / 全9セクションの仕様 / つまずきポイント / Claude Code・Cursor・v0 用の実装プロンプト / 仕上げチェックリスト

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-09-26
10difficulty: 3/5
11estimated_hours: 24
12generator: Katapick
13---
14 
15# 株式会社TVer 採用サイト — 再現用デザイン仕様書
16 
17> 手書きの「Frame!」が、見出しからはみ出してる。TVerの採用サイトは、紺の太い英字に手書きの「Frame!」を斜めに重ね、キャッチコピーの意味をレイアウトそのもので体現している。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ