Service / SaaSOverseas / ITPicked 2026.09.26

Wembi

サービス / SaaSのWebデザイン参考 — IoT・デジタルツインSaaS

出典: wembi.ai

Editor's note — 編集部の視点

B2B SaaSなのに、ロゴを画面いっぱいに置く大胆さ。

伊IoT SaaS「Wembi」のプロダクトサイトは、ライムの角張ったロゴを画面上端いっぱいに渡し、くすんだ水色の3D映像と組ませて、B2Bの硬さを感じさせない。

BrunoStructure & IA

角丸パネルが前の章の上にスッと重なってくるんだよね。紙を1枚ずつ重ねるみたいに、章の切れ目がはっきりわかる。ただ水色の地にライムの小さい文字は、正直ちょっと読みにくい。

1ライムの出番はロゴ・ボタン・見出しの帯に限る。水色とグレーの静かな画面で、押す場所を色が教える
2外周に余白を残した角丸フレームに映像を収める。ページ全体が、1台のデバイスの画面のように見える
3下部のピル型ナビは固定で、左に「What」など現在地のラベル。長い説明の途中でも、いまの章が一語でわかる

Color

Wembiの配色

Typography

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

見出し・本文（Regular）

Aa あア

使用: Haas Unica
代替: Inter Tight

ナビ・ボタン

Aa あア

使用: Haas Unica Medium
代替: Inter

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

見出しKatapick 型97.5px · 1 · 400
小見出しKatapick 型97.5px · 1.1 · 400
本文The quick brown fox — 参考を型にする37.5px · 1.1 · 400
ボタンKatapick 型12px · 1.1 · 400

Structure

ページ構成（上から順）

01
ヒーロー
外周に余白を残した角丸フレームに、水色のガラス円盤の3D映像。上端に画面幅いっぱいのライムのロゴ、下部左に現在地ラベル「What」、右に Overview / Recap / Login / Contact のピル型ナビ。
02
イントロ
同じ映像の上に、ライムの大きな英字でサービスの一文を載せる。
03
WHAT
グレー地に「N.001 / WHAT」の見出し行と罫線。下に大きな英字の説明文を左寄せで数行にわたって置く。
04
HOW（Digital Twin / Functioning）
角丸パネルが前のセクションに重なるように現れ、3D映像の中央にライムと白の帯で「Digital Twin」「Functioning」の2語を積む。
05
機能紹介
左に正方形の3D映像、右に「01」「Digital Twin」とData / Device / Application の見出しを罫線区切りで並べ、下に短い説明文。項目がスクロールで切り替わる。
06
FAQ・コンタクト・フッター
9000px以降のため、抽出データの見出し（FAQ、コンタクトへの誘導文）とフッターの存在のみ確認。

Interaction

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

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

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

検出された技術:LenisNuxt

Reproduce

再現するときのポイント

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

再現MDに含まれるもの

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

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

wembi.katapick.md

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