Landing PageOverseas / USPicked 2026.09.26

Why Zero

LPのWebデザイン参考 — 教育・キャリア支援サービス

出典: why.zero.university

Editor's note — 編集部の視点

最初にやることは、指で「0」を描くだけ。

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

LeoMotion & Direction

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

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

Color

Why Zeroの配色

Typography

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

指示文・ラベル（DRAW A ZERO 等）

Aa あア

使用: PP Supply Mono
代替: JetBrains Mono

ローディングのカウンター・UI

Aa あア

使用: Supply Sans
代替: Space Grotesk

見出しと思われる（配布JSのフォント指定より）

Aa あア

使用: STK Bureau Serif
代替: Newsreader

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

ボタンKatapick 型10px · — · 400

Structure

ページ構成（上から順）

01
ローダー
緑の放射グラデーションの上に大きな数字のカウンターを左下に置く読み込み画面。HTML内のCSSコメントから、WebGLの初期化中にこの表示を先に出す設計と読み取れる。
02
イントロ「DRAW A ZERO」
キャプチャで確認できるのはこの画面のみ。氷のような質感の全面背景、中央下に3Dの手、手の上に等幅の小さな指示文、白い光点が円弧を描いて操作を示す。
03
ステージ1〜2（手のシーン）
配布JSに手の3Dモデルを使うシーン名があり、手の演出が続く構成と思われる（キャプチャ外のため推測）。
04
ガラスの破砕演出
配布JSにガラスが割れるアニメーション用のアセット名があり、場面転換に使われていると思われる（推測）。
05
企業課題のケース
配布JSに Nike・Google・Spotify・ChatGPT の課題カード動画と職種名があり、実在企業の課題を題材にした学習例を切り替えて見せる章と思われる（推測）。
06
ステージ5・ウェイトリスト
リング状のタワーのシーンのあと、「JOIN THE WAITLIST」の登録フォームと招待リンクのコピー機能で締める構成と思われる（推測）。

Interaction

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

描画はすべて Three.js（WebGL）で、DOMにはほぼテキストがない。ポストプロセスのノイズやレンズブラーを端末性能に応じて段階的に落とす品質切替の設定が配布JSに含まれている
「0を描く」操作は pointermove の軌跡を記録し、円に近い形かを判定して次へ進める実装と思われる。光点の尾は軌跡の頂点列をフェードさせて表現できる
配布JSに GSAP・ScrollTrigger と Howler.js の記述があり、ステージ遷移のタイムライン制御と効果音・環境音の再生に使われていると思われる
画面端のルーラー型ナビと、長押しで円形の進捗が満ちる「次のステージへ」ボタンがあると思われる（SVGの stroke-dashoffset で再現可能）

スクロールのコマ撮り200–700ms

検出された技術:Three.jsGoogle FontsWebGL

Reproduce

再現するときのポイント

01画面上のテキストを等幅の短い指示文だけに絞り、3Dと操作に語らせる
02背景は #1c4839 を基調に、下から明るいミントへ抜ける放射グラデーションとノイズを重ねる
03WebGLの起動前に同じグラデーションをCSSで先に描き、白いちらつきを防ぐ
04描く・長押しするなど、スクロール以外の入力で章を進める仕掛けを1つ決めて体験の核にする

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全6セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

why-zero.katapick.md

1---
2title: "Why Zero 再現用デザイン仕様書"
3source: https://why.zero.university/
4katapick: https://katapick.com/sites/why-zero
5category: LP
6region: 海外 (US)
7tags: [3D/WebGL, ミニマル, 等幅フォント, くすみカラー, スクロール演出]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 5/5
12estimated_hours: 80
13generator: Katapick
14---
15 
16# Why Zero — 再現用デザイン仕様書
17 
18> 最初にやることは、指で「0」を描くだけ。就職支援サービスZeroのブランドLP「Why Zero」は、最初の操作を「0を描く」ことにして、サービス名の意味を説明より先に指先で覚えさせる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22