# Yoom｜LPのWebデザイン参考

> ふわふわのAI社員たちが、FVで出迎えてくれる。自動化プラットフォームYoomのLPは、毛並みのあるカラフルなキャラクターと入力欄型のFVで、AIエージェントやRPAという硬い機能を“一緒に働く同僚”として見せている。

- URL: https://lp.yoom.fun/
- 解説ページ: https://katapick.com/sites/yoom
- カテゴリ: LP / 地域: 国内（JP）/ 業種: 業務自動化SaaS
- テイスト: ビビッド、角丸、マーキー、グリッド、ロングページ
- 公開・リニューアル: 2026-02 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 34 時間）

## 編集部のひとこと（Bruno）
導入企業のロゴの帯をFV直下に置いて、信頼を先に積んでから機能に入る順番なんだよね。しかも数字の実績は後半まで取っておく。疑ってる人ほど最後まで読ませる、これはうまい。

## デザインの見どころ
- FVの主役は入力欄。「どんなAI社員がほしいですか？」と、機能より先に使う場面を考えさせる
- 機能ごとに紫・青・黄・緑・ピンクと背景色を替える。長いLPでも、いまどの話かが色でわかる
- キャラは毛並みのある3D、UIの図解はフラットな線。温かさと正確さを、描き方の違いで分ける

## 配色
- #f6f8fa Cloud Gray（背景（FV））
- #24292f Ink（テキスト / 主CTA）
- #0176f0 Yoom Blue（セクション背景 / アクセント）
- #7d3bff Electric Violet（セクション背景）
- #f5c749 Sunny Yellow（セクション背景 / キャラクター）
- #00c291 Mint Green（セクション背景 / キャラクター）

## フォント
- 見出し・本文: Noto Sans JP（代替: Noto Sans JP）
- 英字見出し: Poppins（代替: Poppins）
- 英数字: Geist（代替: Geist）

## よくある質問
### YoomのLPで使われているフォントは？
和文に Noto Sans JP、英字見出しに Poppins、英数字に Geist が使われています。いずれも Google Fonts で無料で利用できます。

### 機能の多いSaaSのLPを見やすくするには？
Yoomのように機能ごとに背景色を替えた角丸パネルで区切り、各パネルに見出し・短い説明・UIの図解を1セットで置くと、長いページでも区切りがわかりやすくなります。

### どんな業種の参考になる？
業務自動化ツールやAIエージェント、ノーコードツールなど、機能の多いB2B SaaSのLPで、親しみやすさを出したいときの参考になります。

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