Landing PageJapanPicked 2026.09.26

Yoom

LPのWebデザイン参考 — 業務自動化SaaS

出典: lp.yoom.fun

Editor's note — 編集部の視点

ふわふわのAI社員たちが、FVで出迎えてくれる。

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

BrunoStructure & IA

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

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

Color

Yoomの配色

Typography

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

見出し・本文

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

英字見出し

Aa あア

使用: Poppins
代替: Poppins

英数字

Aa あア

使用: Geist
代替: Geist

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

見出しKatapick 型64px · 1.3 · 700
小見出しKatapick 型20px · 1.3 · 700
本文The quick brown fox — 参考を型にする14px · 1.6 · 400
ボタンKatapick 型20px · 1.3 · 700
注釈The quick brown fox — 参考を型にする18px · 1.6 · 500

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴ、中央にテンプレート・機能・ユーザー事例・連携アプリ・料金・ログイン、右に白の「資料請求」と黒の「無料で始める」のピルボタン。
02
ヒーロー
見出し「さあ、AI社員と働こう!」の下に、欲しいAI社員を入力する大きな入力欄。左に連携アプリのアイコン、右にワークフローのステップカード、下に毛並みのあるカラフルなキャラクター4体。
03
導入企業ロゴ
角丸の白い帯に導入企業のロゴを2段で流す。
04
All in One Automation
紫の地に、AI Agent・API・RPA・Workflow を花びら状に組んだ図で自動化の全体像を示す。
05
自分だけのAIチームを作ろう
職種別のAI社員をキャラクター付きのカードで横に並べ、「無料で始める」「資料請求・デモ申込」を置く。
06
機能紹介
青（AIワーカー作成）・黄（トリガー）・緑（フローボット）・ピンク（実行できるアクション）の角丸パネルを積み、キャラクターとUIの図解で説明する。
07
連携アプリ / テンプレート
「国内外のあらゆるSaaSとすぐに連携！」とアプリのアイコン群、連携数の大きな数字。続いてテンプレートのカード3枚。
08
実績 / ユーザーの声
青の地に、利用社数・非エンジニア比率・累計タスク数をグラフ付きのカードで示し、ユーザーの声を横に並べる。
09
セキュリティ / FAQ / CTA / フッター
セキュリティ基盤の説明、「Yoomと10倍多くのことを。」のCTA、よくある質問、フッター。

Interaction

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

導入企業ロゴは横に流れ続けるマーキー。CSS の @keyframes で translateX をループさせて再現できる
スタックに Swiper があり、AI社員のカードやユーザーの声の横スライドに使われていると思われる
FVの入力欄はプレースホルダーの例文が入れ替わる。入力例を配列で持ち、一定間隔で差し替えると再現可能
Webflow 製。機能セクションは角丸の大きなパネルを色違いで積み、背景に薄い曲線の模様を重ねている

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

検出された技術:SwiperWebflowGoogle Fonts

Reproduce

再現するときのポイント

01FVは見出し＋入力欄を主役にして、プロダクトの使い方を最初の1画面で体験させる
02機能ごとにセクションの背景色を替え、角丸の大きなパネルとして積む
03キャラクターは立体的な質感、UIの図解はフラットな白いカードと線で描き分ける
04導入企業ロゴはFV直後、数字の実績は後半に置き、信頼を段階的に積む

再現MDに含まれるもの

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

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

yoom.katapick.md

1---
2title: "Yoom 再現用デザイン仕様書"
3source: https://lp.yoom.fun/
4katapick: https://katapick.com/sites/yoom
5category: LP
6region: 国内 (JP)
7tags: [ビビッド, 角丸, マーキー, グリッド, ロングページ]
8launched: 2026-02
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 34
13generator: Katapick
14---
15 
16# Yoom — 再現用デザイン仕様書
17 
18> ふわふわのAI社員たちが、FVで出迎えてくれる。自動化プラットフォームYoomのLPは、毛並みのあるカラフルなキャラクターと入力欄型のFVで、AIエージェントやRPAという硬い機能を“一緒に働く同僚”として見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22