# Why Zero｜LPのWebデザイン参考

> 最初にやることは、指で「0」を描くだけ。就職支援サービスZeroのブランドLP「Why Zero」は、最初の操作を「0を描く」ことにして、サービス名の意味を説明より先に指先で覚えさせる。

- URL: https://why.zero.university/
- 解説ページ: https://katapick.com/sites/why-zero
- カテゴリ: LP / 地域: 海外（US）/ 業種: 教育・キャリア支援サービス
- テイスト: 3D/WebGL、ミニマル、等幅フォント、くすみカラー、スクロール演出
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 5/5（目安 80 時間）

## 編集部のひとこと（Leo）
配布JSにガラスが割れる演出と効果音の仕込みがあるっぽい！0を描いたら、ガシャーンと場面転換……想像しただけで鳥肌！ライブの暗転明けみたいなアガり方をしそう！

## デザインの見どころ
- 画面にあるのは3Dの手と「DRAW A ZERO」の一文のみ。説明を削り切り、操作する以外の選択肢を消す
- 白い光点が弧の軌跡を引いて見本になる。説明文の代わりに、動きの予告が指示として働く
- 背景はひび割れた氷のような緑の質感。冷たい素材感が、ゼロからの出発という題材と重なる

## 配色
- #1c4839 Deep Jade（背景（ページ基調色））
- #ffffff White（テキスト / 光点）
- #d4f6eb Ice Mint（背景グラデーションの明部（HTML内のCSSより））
- #91c7b7 Sea Glass（背景グラデーションの中間色（HTML内のCSSより））
- #4e9782 Verdigris（背景グラデーションの暗部（HTML内のCSSより））
- #8fd14f Lime Leaf（3Dの手の質感（スクショから採色））

## フォント
- 指示文・ラベル（DRAW A ZERO 等）: PP Supply Mono（代替: JetBrains Mono）
- ローディングのカウンター・UI: Supply Sans（代替: Space Grotesk）
- 見出しと思われる（配布JSのフォント指定より）: STK Bureau Serif（代替: Newsreader）

## よくある質問
### Why Zeroのサイトはどんな技術で作られている？
抽出データでは Three.js（WebGL）と Google Fonts が検出されています。配布されているJSには GSAP と Howler.js の記述もあり、アニメーションの制御と音の再生に使われていると思われます。

### Why Zeroの「0を描く」導入はどう再現する？
pointerdown から pointerup までの座標を記録し、始点と終点の距離や重心からの半径のばらつきで円らしさを判定します。軌跡は Three.js のラインか2D canvas に描き、古い点から透明にしていくと光の尾になります。

### Why Zeroの掲載内容で確認できていない部分は？
キャプチャで確認できたのはイントロ画面のみです。2画面目以降の構成は、公開されているJSのアセット名や文言からの推測を含みます。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/why-zero からダウンロードできます。
出典: Katapick（https://katapick.com）