CorporateOverseas / USPicked 2026.09.30

Paper Tiger

コーポレートのWebデザイン参考 — Webデザイン・Webflow制作会社（BtoB）

サイトを見るpapertiger.com

www.papertiger.com開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

極太の2行で、傾いたカードを挟み撃ち。

ニューヨークのBtoB向けWebデザイン会社Paper Tigerのサイトは、極太コンデンス体の大見出しと紫・赤・ミントの紙片を重ね、自信と遊び心を一度に押し出している。

PipTrends & VTuber

Latest Work、案件のビジュアルがトランプみたいに扇形に広げてあるの、うれしい！推しカードを1枚選ぶ気分になれて、表で並べられるよりずっと、全部めくって見たくなっちゃう〜

1サービス紹介はDESIGN・ENGINEERING・STRATEGYを黒・紫・ミントの面で積み、色で章を切り替える
2「0 scrubs」「days w/o incident」と実績の数字に冗談を混ぜる。硬い数字が、人柄の紹介になる
3見出しは極太コンデンス体、ボタンはイタリックのセリフ体。硬い大文字の間で、小さな斜体が軽さを足す

Color

Paper Tigerの配色

Typography

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

見出し・ロゴ・巨大な単語

Aa あア

使用: Rightgrotesk
代替: Anton

本文・ナビ・カード名

Aa あア

使用: Onsitestandard
代替: Inter

ボタン・強調語のイタリック

Aa あア

使用: Suisseworks
代替: Source Serif 4（Italic）

ワードウォールの小さな数字・ラベル

Aa あア

使用: Dmmono
代替: DM Mono

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

見出しKatapick 型11px · 1.25 · 500
小見出しKatapick 型28px · 1.15 · 400
本文The quick brown fox — 参考を型にする18px · 1.22 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左に極太のロゴ「PAPER TIGER」、中央に Work / Expertise / Agency / News、右に黒枠でイタリック体の「CONTACT」ボタン。SPでは「Menu」にまとめる。
02
ヒーロー
上に「CLARITY FIRST」、下に「IMPACT FOREVER」の極太コンデンス体。間に紫・黒・赤の紙を下敷きにした白いカードを傾けて重ね、中の映像が切り替わる。左下に 18+ years / 600+ projects / 2 days w/o incident / 0 scrubs、右下に紹介文（infuriate だけ斜体）。
03
カードの全画面化
スクロールでカードが画面いっぱいまで拡大し、紫のネットワーク図のイラストが全面に広がる。
04
クライアントロゴ
白地に Betterment、PBS、Pentagram、The New York Times など10社のロゴを5列2段で並べる。
05
Latest Work
黒地に「LATEST WORK」と短いリード。M13、Titan、Narvar など6案件のビジュアルを扇状に重ね、中央のカードの名前と「VIEW ALL WORK →」を下に置く。
06
サービス
白地の小見出し「SO WHAT DO WE DO, EXACTLY?」のあと、DESIGN（黒）・ENGINEERING（紫）・STRATEGY（ミント）の面が順に重なる。左に番号付きの説明と巨大な単語、右に 83% / 500+ / 150B の数字が入ったポスター風カード。
07
Latest News
左に「LATEST NEWS」と「VIEW ALL NEWS →」、右にサムネイル付きの記事3件をカテゴリラベル（WORK / INSIGHTS）付きで縦に並べる。
08
ワードウォール
18 YEARS、PROJECTS、NEW YORK CITY、NEW JERSEY、SCRUBS などの極太の単語が画面幅からはみ出しながら行を埋め、各語の左肩に小さな等幅の数字を添える。1語だけ紫で強調。
09
お客様の声・フッター
赤いパネルに顧客ロゴと引用文、左下にページャー。続く黒地のフッターに画面幅いっぱいの白いロゴ「PAPER TIGER©」、ナビ、新規相談へのリンク、「All wrongs reversed.」で締めるコピーライト。

Interaction

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

ヒーローのカードは video 要素で、下の色紙と一緒に rotate で傾けて重ねている。スクロールでカードが全画面へ拡大するのは GSAP の ScrollTrigger によるスクラブと思われる
サービスの3枚の面は position: sticky で順に上へ重なっていく構成と思われる（ENGINEERING の上辺に前の面の端が残って見える）
STRATEGY のカードは撮影のタイミングで 122B と 150B の2つの数字が写っており、スクロールで数字がカウントアップすると思われる
ワードウォールの紫の1語は、ホバーやスクロール位置に応じて強調が移る演出と思われる。行ごとに横へ流れるマーキーの可能性もある
Latest Work の扇状のカードはホバーで中央のカードと下の案件名が切り替わる作りと思われる。Lenis で慣性スクロールをかけている

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

検出された技術:GSAPLenisWebflow

Reproduce

再現するときのポイント

01見出しは極太のコンデンス体を大文字で、画面幅に届くほど大きく組む。ボタンだけイタリックのセリフ体にして緩急をつける
02色は赤・紫・ミントの3色を「紙」の面として使い、ヒーローの色紙とサービスの章の色をそろえる
03カードは少しずつ角度を変えて重ね、机に紙を置いたようなラフさを出す
04実績の数字やコピーライトに冗談を一言まぜ、硬い情報を人柄の紹介に変える

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

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

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

paper-tiger.katapick.md

1---
2title: "Paper Tiger デザイン分析書"
3source: https://www.papertiger.com/
4katapick: https://katapick.com/sites/paper-tiger
5category: コーポレート
6region: 海外 (US)
7tags: [大胆なタイポ, ビビッド, スクロール演出, ロングページ]
8launched: 2026-01
9verified: 2026-10-30
10measured: 2026-09-30 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# Paper Tiger — デザイン分析書
16 
17> 極太の2行で、傾いたカードを挟み撃ち。ニューヨークのBtoB向けWebデザイン会社Paper Tigerのサイトは、極太コンデンス体の大見出しと紫・赤・ミントの紙片を重ね、自信と遊び心を一度に押し出している。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-30 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22

Pro の追加ファイル

動くHTMLひな形トークンと構成を反映済みPRO tokens.jsonFigma / Tokens StudioPRO Tailwind @themev4 にそのまま貼れるPRO

Paper Tigerについてよくある質問

Paper Tigerのサイトで使われているフォントは？

見出しに Rightgrotesk、本文に Onsitestandard、ボタンや強調語のイタリックに Suisseworks、小さな数字やラベルに DM Mono が使われています。無料で近づけるなら Anton、Inter、Source Serif 4（Italic）、DM Mono の組み合わせが使えます。