Wembi

1. 01

   ヒーロー

   外周に余白を残した角丸フレームに、水色のガラス円盤の3D映像。上端に画面幅いっぱいのライムのロゴ、下部左に現在地ラベル「What」、右に Overview / Recap / Login / Contact のピル型ナビ。

2. 02

   イントロ

   同じ映像の上に、ライムの大きな英字でサービスの一文を載せる。

3. 03

   WHAT

   グレー地に「N.001 / WHAT」の見出し行と罫線。下に大きな英字の説明文を左寄せで数行にわたって置く。

4. 04

   HOW（Digital Twin / Functioning）

   角丸パネルが前のセクションに重なるように現れ、3D映像の中央にライムと白の帯で「Digital Twin」「Functioning」の2語を積む。

5. 05

   機能紹介

   左に正方形の3D映像、右に「01」「Digital Twin」とData / Device / Application の見出しを罫線区切りで並べ、下に短い説明文。項目がスクロールで切り替わる。

6. 06

   FAQ・コンタクト・フッター

   9000px以降のため、抽出データの見出し（FAQ、コンタクトへの誘導文）とフッターの存在のみ確認。

• WHAT の説明文はぼかしがかかった状態から1行ずつくっきり表示されるテキストリビール（フルページ撮影で下の行がぼけている）。ScrollTrigger で filter: blur と opacity を行ごとにスクラブすると再現できる
• 機能説明の本文は一部の語だけ濃く、残りが薄いグレーで撮影されており、スクロール進捗で文字色が埋まっていく演出と思われる
• 角丸パネルが前のセクションの上に重なって入ってくるカードスタック型の遷移。position: sticky と z-index の重ねで作れる
• 下部のピル型ナビは全区間で固定表示され、左のラベルが現在のセクション名（What / How）に切り替わる。Lenis で慣性スクロールをかけている

スクロールのコマ撮りLenis · 300–1000ms

検出された技術:LenisNuxt

• 01ロゴは角を面取りした線状の字形で、画面幅いっぱいに置くことで見出しの代わりにする
• 02配色は水色の映像・温かいグレーの地・ライムのアクセントの3つに絞り、黒は文字とLoginボタンだけにする
• 03本文は大きめのグロテスク体を1書体で使い、セクション見出しは「N.001 / WHAT」のような小さな番号ラベルで示す
• 04ナビを画面下部のピル型バーにまとめ、上部を映像とロゴに明け渡す

1---
2title: "Wembi デザイン分析書"
3source: https://www.wembi.ai/
4katapick: https://katapick.com/sites/wembi
5category: サービス / SaaS
6region: 海外 (IT)
7tags: [ミニマル, くすみカラー, 大胆なタイポ, スクロール演出, 角丸, 固定ナビ]
8launched: 2026-07
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# Wembi — デザイン分析書
16 
17> B2B SaaSなのに、ロゴを画面いっぱいに置く大胆さ。伊IoT SaaS「Wembi」のプロダクトサイトは、ライムの角張ったロゴを画面上端いっぱいに渡し、くすんだ水色の3D映像と組ませて、B2Bの硬さを感じさせない。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22