Heron AI

1. 01

   ローディング

   建物の立面図を線画で描き、左に進捗「99%」と赤い水平線。下部に「DESIGNED BY BEARPLUS…」、TYPE / FOUNDED / FOCUS / LOCATION の仕様表、001〜010の起動ログ風リスト。

2. 02

   ヒーロー

   罫線で区切ったヘッダー（PRODUCT / PRICING / RESOURCES / ABOUT / CONTACT US）。網点の建築パースに赤い四角のマーカーを置き、下部に「AN AI AGENT THAT WORKS INSIDE YOUR DESIGN TOOLS」と特徴のティッカー。

3. 03

   課題提起

   「THE REPETITIVE PARTS OF MODELLING…」で、モデリングの繰り返し作業に時間を奪われる課題を示す。

4. 04

   既存ツールとの対比

   「Your design tools do what you tell them, nothing more」で、指示待ちの設計ツールとの違いを語る。

5. 05

   機能紹介

   「RUN AN AGENT NATIVELY IN YOUR MODEL」。高さ約6300pxの長尺セクションで、モデル内で動くエージェントの機能を順に見せる。

6. 06

   ワークフロー

   「BUILT TO WORK THE WAY YOU DO」で、既存の作業の流れに入り込む使い方を紹介。

7. 07

   対象ユーザー

   「MADE FOR THE PEOPLE IN THE MODEL」で、モデルを扱う設計者に向けたプロダクトであることを示す。

8. 08

   CTA・フッター

   「SEE WHAT HERON CAN DO IN YOUR MODEL」でデモへ誘導し、フッターで締める。

• ローダーは進捗％に合わせて赤い走査線が立面図の上を動き、線画が網点のパースへ切り替わる演出と思われる。SVG の stroke-dashoffset と clip-path で再現可能
• 起動ログは1行ずつ現れるタイプライター風と思われる。GSAP のタイムラインで stagger をかけて再現できる
• ヒーロー下の特徴（FASTER ITERATIONS / FEWER MISTAKES / LESS BUSYWORK）は無限マーキーのティッカー
• Barba.js によるページ遷移、Lenis の慣性スクロール、Swiper のスライダーを組み合わせている

スクロールのコマ撮り150–5000ms

検出された技術:GSAPLenisSwiperBarba.jsWebflow

• 01背景は純白ではなく、紙のようなわずかに黄みのオフホワイトにする
• 02アクセントは赤橙1色だけ。走査線・マーカー・CTAなど「注目させたい点」にしか使わない
• 03ラベル類は等幅の大文字で統一し、図面の注記や表題欄のような情報の出し方にする
• 04ヘッダーやセクションを細い罫線とトンボ風の「+」で区切り、製図用紙の枠を感じさせる

1---
2title: "Heron AI 再現用デザイン仕様書"
3source: https://heronaiapp.com/
4katapick: https://katapick.com/sites/heron-ai
5category: サービス / SaaS
6region: 海外 (US)
7tags: [ライト, 等幅フォント, イラスト, ミニマル, 大胆なタイポ]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# Heron AI — 再現用デザイン仕様書
17 
18> 読み込み中から、もう図面の上にいる。建築向けAIエージェントHeron AIのプロダクトサイトは、立面図の線画と赤い走査線、等幅の起動ログで幕を開け、設計ツールの中で働くAIという役割を画面の質感から伝えている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22