# Wembi｜サービス / SaaSのWebデザイン参考

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

- URL: https://www.wembi.ai/
- 解説ページ: https://katapick.com/sites/wembi
- カテゴリ: サービス / SaaS / 地域: 海外（IT）/ 業種: IoT・デジタルツインSaaS
- テイスト: ミニマル、くすみカラー、大胆なタイポ、スクロール演出、角丸、固定ナビ
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 30 時間）

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

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

## 配色
- #c0dfe9 Pale Aqua（映像パネル背景）
- #ede8e8 Warm Gray（ページ背景 / 外枠）
- #beff8b Lime（ロゴ / ボタン / 見出しの帯）
- #000000 Black（テキスト / Loginボタン）
- #ffffff White（見出しの帯・カード背景）
- #d5bafb Lavender（補助アクセント）

## フォント
- 見出し・本文（Regular）: Haas Unica（代替: Inter Tight）
- ナビ・ボタン: Haas Unica Medium（代替: Inter）

## よくある質問
### Wembiのサイトで使われているフォントは？
見出し・本文に Haas Unica の Regular、ナビやボタンに Medium が使われています。無料で近づけるなら Inter Tight と Inter の組み合わせが使えます。

### Wembiのようなぼかしから文字が現れる演出はどう作る？
テキストを行や単語ごとに span で分割し、GSAP ScrollTrigger の scrub で filter: blur(8px) から 0 へ、opacity を 0.3 から 1 へ順に補間すると再現できます。

### Wembiのデザインはどんなサイトの参考になる？
IoT、産業DX、AIプラットフォームなど、目に見えにくい技術を抽象的な3D映像と少ない色数で上品に見せたいBtoB SaaSのサイトの参考になります。

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