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

> 読み込み中から、もう図面の上にいる。建築向けAIエージェントHeron AIのプロダクトサイトは、立面図の線画と赤い走査線、等幅の起動ログで幕を開け、設計ツールの中で働くAIという役割を画面の質感から伝えている。

- URL: https://heronaiapp.com/
- 解説ページ: https://katapick.com/sites/heron-ai
- カテゴリ: サービス / SaaS / 地域: 海外（US）/ 業種: 建築向けAIエージェント（BIM / Revit 連携SaaS）
- テイスト: ライト、等幅フォント、イラスト、ミニマル、大胆なタイポ
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 28 時間）

## 編集部のひとこと（Leo）
ロードが明けると、線画だった建物が網点のパースに化けてるっぽい！設計図が完成予想図に変わる瞬間を見せられてる感じ、映画のタイトルバックみたいで鳥肌！

## デザインの見どころ
- ローディングにTYPE・FOUNDED・FOCUSの仕様表。会社概要を、図面の表題欄のように最初に手渡す
- FVは網点で描いた建築パースに赤い四角のマーカー。何を指摘するAIかを、絵1枚で先に見せる
- 見出しはBT Grotesk、ラベルはGeist Monoの大文字。図面の注記のような二書体で現場の言葉に寄せる

## 配色
- #f5f3ef Drafting Paper（背景）
- #282828 Graphite Line（テキスト・線画・ダークセクション）
- #fa3600 Survey Orange（アクセント（走査線・マーカー・CONTACT US））
- #b3b3af Pencil Gray（サブテキスト・罫線）
- #ffffff Sheet White（サーフェス・反転テキスト）

## フォント
- 見出し: BT Grotesk（代替: Inter Tight）
- ナビ・ラベル・本文・起動ログ: Geist Mono（代替: Geist Mono）

## よくある質問
### Heron AIのサイトで使われているフォントは？
見出しに BT Grotesk、ナビやラベル、本文に Geist Mono が使われています。見出しを無料で代替するなら Inter Tight、等幅はそのまま Geist Mono（Google Fonts）が使えます。

### Heron AIのようなローディング画面はどう作る？
線画をSVGで用意し、進捗に合わせて水平線を動かしながら clip-path で表示範囲を切り替えると近い表現になります。横に等幅のログを GSAP で1行ずつ表示すると、システムが起動していくような演出になります。

### Heron AIのデザインはどんなサイトの参考になる？
建築・製造・エンジニアリングなど専門職向けのSaaSや、AIツールのプロダクトサイトの参考になります。業界の図面や帳票の意匠をUIに持ち込む手法は、ほかの業種にも応用できます。

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