CorporateJapanPicked 2026.09.30

TBWA\HAKUHODO（コーポレートサイト）

コーポレートのWebデザイン参考 — 総合広告会社

サイトを見るtbwahakuhodo.co.jp

www.tbwahakuhodo.co.jp開く ↗

$TBWA\HAKUHODO（コーポレートサイト）のPC版ファーストビュー$ サイトを開く ↗

$TBWA\HAKUHODO（コーポレートサイト）のスマホ版ファーストビュー$

Editor's note — 編集部の視点

社名の「\」が、そのまま主役になってる。

広告会社TBWA\HAKUHODOのコーポレートサイトは、ロゴの斜線を画面を裂く白い帯や3Dの演出に使い回し、Disruptionという方法論を記号ひとつで見せている。

LeoMotion & Direction

実績の切り替わり、映像がブロック状にバキッと崩れて次の案件へ飛ぶの！ザッピングみたいな疾走感！フッターには「WHY JOIN THE NAVY, IF YOU CAN BE A PIRATE?」。最後まで攻めてる！

1ロゴの「\」を画面を横切る白い帯や黄緑の3Dの斜線に。社名の記号が、章の切り替えの合図になる
2About は黄色の和文コピーを壁一面に積む。「問題を疑え。」のような短い言葉の量で、思想の熱を先に浴びせる
3実績は1件ずつ全画面の映像と流れる題名で見せ、クレジットまで載せる。作り手の名前が並ぶ誠実さがある

Color

TBWA\HAKUHODO（コーポレートサイト）の配色

Typography

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

英字見出し・実績タイトル（独自書体と思われる）

Aa あア

使用: TBWAGrotesk
代替: Space Grotesk

本文・ラベル・クレジット（Adobe Fonts）

Aa あア

使用: helvetica-neue-lt-pro
代替: Inter

和文コピー・本文

Aa あア

使用: 和文ゴシック（Webフォント指定が見当たらずOS標準と思われる）
代替: Noto Sans JP

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

見出しKatapick 型15px · 1 · 500
小見出しKatapick 型14px · 1.9 · 500
本文The quick brown fox — 参考を型にする14px · 1.6 · 500
ボタンKatapick 型12px · 1 · 400

Structure

ページ構成（上から順）

01
ヘッダー・メニュー
左上に白い社名ロゴだけを置き、ナビは画面下中央に固定した台形のバー「MENU \\\」にまとめる。黒地では白、白地では黒に反転する。
02
オープニング
走査線のようなノイズの黒画面を白い斜線が横切り、黄緑の「TBWA\HAKUHODO 20th」と映像のコラージュ、「IT'S CREATION」「Dis-rupt」と座標入りの大見出しへ次々に切り替わる。
03
ヒーロー映像
全面の映像の上に「T\H WE ARE THE DISRUPTION® COMPANY」「CREATE INVENT HAVE IDEAS TOKYO」の英字をタイル状に重ね、続いて巨大な「DIS\RUPT」と会社紹介の英文を映像に載せる。
04
About
白地の中央に「Disruption® for Meaningful Social Change」と「この社会に、意味ある変化を。」。背景には黄色の大きな和文コピーと小さなグレーのコピーを何段も積み、「DISRUPT NOW」ボタンを添える。
05
Work
黒地に「A Selection of Our Works With」とNISSANのロゴ。黄緑の3Dの斜線を抜けると、5件の実績を1件ずつ全画面の映像で見せ、横に流れる題名・カテゴリ・日付・クレジット・説明と右上の01〜05の目次を重ねる。
06
Partners
白地に取引先のロゴ11点をグリッドで並べ、会社概要の短い和文を中央に添える。
07
Awards
右寄せの「Award Recognition & Accolades」と、Cannes Lions など17の賞ごとに Grand Prix・Gold などの獲得数を罫線の表で並べる。
08
News・Featured
「Latest Topics」と画像付きのニュース3件。続いて Sustainability と Global Marketing の2項目を矢印リンクで並べ、Coming Soon のカードを添える。
09
CTA・フッター
20周年の映像を背にした黒いパネルに「Ready to Disrupt?」と CONTACT US。黒地のフッターに大きな社名ロゴ、所在地と座標、「WHY JOIN THE NAVY, IF YOU CAN BE A PIRATE?」の一文、3列のサイトマップ、NEW WORK のサムネイルを置く。

Interaction

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

見出しは data-scramble 属性を持ち、文字がランダムに入れ替わりながら確定するスクランブル演出と思われる。PCのファーストビューでも文字が欠けた途中の状態が写っていた
Work の手前で黄緑とグレーの3Dの斜線がグリッチしながら通過する。抽出データの Three.js／WebGL はこのトランジションや映像の歪みに使われていると思われる
実績の切り替えでは映像がブロック状に崩れるグリッチが見られた。シェーダーでブロック単位にUVをずらす方法が近い
画面全体に細い黄色の線のグリッドが薄く重なり、スクロールに合わせて動いていると思われる
Work 区間は高さ9,000px超あり、Lenis の慣性スクロールとピン留めで実績を1件ずつ送っていると思われる

スクロールのコマ撮りLenis · 30–5495ms

TBWA\HAKUHODO（コーポレートサイト）をスクロールしたときのフレーム1 — 01

TBWA\HAKUHODO（コーポレートサイト）をスクロールしたときのフレーム2 — 02

TBWA\HAKUHODO（コーポレートサイト）をスクロールしたときのフレーム3 — 03

TBWA\HAKUHODO（コーポレートサイト）をスクロールしたときのフレーム4 — 04

TBWA\HAKUHODO（コーポレートサイト）をスクロールしたときのフレーム5 — 05

TBWA\HAKUHODO（コーポレートサイト）をスクロールしたときのフレーム6 — 06

検出された技術:Three.jsLenisAstroGoogle FontsAdobe FontsLottieWebGL

Reproduce

再現するときのポイント

01ロゴの「\」を唯一のモチーフにして、帯・3D・メニューの形まで斜線で統一する
02色は黒・白・黄色の3つに絞り、黄色は和文コピーと強調だけに使う
03About の背景コピーは大小2段のサイズで組み、大きい方は読ませ、小さい方は模様として敷く
04実績は全画面映像＋横に流れる題名＋クレジットの型を全件で揃え、目次で現在地を示す

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

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

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

tbwa-hakuhodo.katapick.md

1---
2title: "TBWA\HAKUHODO（コーポレートサイト） デザイン分析書"
3source: https://www.tbwahakuhodo.co.jp/
4katapick: https://katapick.com/sites/tbwa-hakuhodo
5category: コーポレート
6region: 国内 (JP)
7tags: [映像主体, 大胆なタイポ, スクロール演出, 3D/WebGL, マーキー, 固定ナビ]
8launched: 2026-08
9verified: 2026-10-30
10measured: 2026-09-30 (Chromium 1440x900)
11difficulty: 5/5
12generator: Katapick
13---
14 
15# TBWA\HAKUHODO（コーポレートサイト） — デザイン分析書
16 
17> 社名の「\」が、そのまま主役になってる。広告会社TBWA\HAKUHODOのコーポレートサイトは、ロゴの斜線を画面を裂く白い帯や3Dの演出に使い回し、Disruptionという方法論を記号ひとつで見せている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-30 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22