# TBWA\HAKUHODO（コーポレートサイト）｜コーポレートのWebデザイン参考

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

- URL: https://www.tbwahakuhodo.co.jp/
- 解説ページ: https://katapick.com/sites/tbwa-hakuhodo
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: 総合広告会社
- テイスト: 映像主体、大胆なタイポ、スクロール演出、3D/WebGL、マーキー、固定ナビ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-30 / 最終確認: 2026-10-30
- 再現難易度: 5/5

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

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

## 配色
- #000000 Black（Work・フッター背景 / 白地でのメニューバー）
- #ffffff White（About・Partners・Awards 背景 / 反転テキスト）
- #ecfd00 Disruption Yellow（アクセント / 20th の文字 / ハイライト）
- #f4ff5d Soft Yellow（About の和文コピー（スクショから採色））
- #70706e Gray（背景の小さなコピー / 補足テキスト（スクショから採色））

## フォント
- 英字見出し・実績タイトル（独自書体と思われる）: TBWAGrotesk（代替: Space Grotesk）
- 本文・ラベル・クレジット（Adobe Fonts）: helvetica-neue-lt-pro（代替: Inter）
- 和文コピー・本文: 和文ゴシック（Webフォント指定が見当たらずOS標準と思われる）（代替: Noto Sans JP）

## よくある質問
### TBWA\HAKUHODOのサイトで使われているフォントは？
英字見出しに TBWAGrotesk、本文やラベルに Adobe Fonts の Helvetica Neue LT Pro が使われています。無料で近づけるなら Space Grotesk と Inter、和文は Noto Sans JP の組み合わせが扱いやすいです。

### TBWA\HAKUHODOのようなグリッチ演出はどう作る？
映像や画像を WebGL のテクスチャにして、フラグメントシェーダーでブロック単位にUVをずらしたり色をずらしたりします。切り替えの瞬間だけ強さを上げると、崩れて次に飛ぶような見え方になります。

### TBWA\HAKUHODOのデザインはどんなサイトの参考になる？
広告会社や制作会社、スタジオなど、実績映像と思想を強く打ち出したいクリエイティブ系のコーポレートサイトの参考になります。

### TBWA\HAKUHODOのサイトの映像やロゴは使える？
実績の映像や写真、出演している人物、各社のロゴ、社名ロゴは TBWA\HAKUHODO、クライアント企業および各権利者に帰属します。参考にするのは構成や演出の考え方にとどめてください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「デザイン分析MD」は https://katapick.com/sites/tbwa-hakuhodo からダウンロードできます。
出典: Katapick（https://katapick.com）