Yoom

1. 01

   ヘッダー

   左にロゴ、中央にテンプレート・機能・ユーザー事例・連携アプリ・料金・ログイン、右に白の「資料請求」と黒の「無料で始める」のピルボタン。

2. 02

   ヒーロー

   見出し「さあ、AI社員と働こう!」の下に、欲しいAI社員を入力する大きな入力欄。左に連携アプリのアイコン、右にワークフローのステップカード、下に毛並みのあるカラフルなキャラクター4体。

3. 03

   導入企業ロゴ

   角丸の白い帯に導入企業のロゴを2段で流す。

4. 04

   All in One Automation

   紫の地に、AI Agent・API・RPA・Workflow を花びら状に組んだ図で自動化の全体像を示す。

5. 05

   自分だけのAIチームを作ろう

   職種別のAI社員をキャラクター付きのカードで横に並べ、「無料で始める」「資料請求・デモ申込」を置く。

6. 06

   機能紹介

   青（AIワーカー作成）・黄（トリガー）・緑（フローボット）・ピンク（実行できるアクション）の角丸パネルを積み、キャラクターとUIの図解で説明する。

7. 07

   連携アプリ / テンプレート

   「国内外のあらゆるSaaSとすぐに連携！」とアプリのアイコン群、連携数の大きな数字。続いてテンプレートのカード3枚。

8. 08

   実績 / ユーザーの声

   青の地に、利用社数・非エンジニア比率・累計タスク数をグラフ付きのカードで示し、ユーザーの声を横に並べる。

9. 09

   セキュリティ / FAQ / CTA / フッター

   セキュリティ基盤の説明、「Yoomと10倍多くのことを。」のCTA、よくある質問、フッター。

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

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

検出された技術:SwiperWebflowGoogle Fonts

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

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