Awwwards ·アメリカ（デンバー） ·Picked 2026.10.18
Heron AI
AI SaaS（建築・BIM向け）のサイトデザイン参考 — オレンジ・全文大文字・プリローダー・会社情報の先出し
出典：heronaiapp.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
読み込み画面に会社の種別・設立年・所在地を仕様書のように並べ、建築の線画で製品の世界を見せるAI SaaSのサイト。
建築の設計ツールの中で動くAIエージェント Heron AI のサイト。読み込み中は、建物の線画が描かれていく横で「種別・設立・領域・所在地」を仕様書のように並べ、「001 コアシステムを初期化」と工程が進む。表示後は、紙のような生成りの背景に建築の線画と「設計ツールの中で働くAIエージェント」という大文字の見出し。製品はチャットウィジェットとダッシュボードの2つで、カードを重ねるように切り替えて見せる。
- 01 読み込み画面を「会社の仕様書」として使い、待ち時間に種別・設立年・所在地を読ませる
- 02 建築の線画と紙のような背景で、利用者（建築家）が見慣れた図面の世界観に寄せている
- 03 色は生成り・墨色・オレンジの3色だけ。オレンジは問い合わせなど行動の場所に絞る
Conversion
集客の工夫
- ヘッダーに問い合わせ （あり） 「CONTACT US」をオレンジで常設
- 料金への導線 （あり） ヘッダーに PRICING
- 会社情報の先出し （あり） 読み込み画面に種別・設立・領域・所在地
- 製品ごとの入口 （あり） チャットウィジェット・ダッシュボード
- メール登録 （あり） ページ下部に入力欄
- Cookie の選択肢 （あり） ACCEPT と REJECT を同じ大きさで
- 電話番号の掲載 （なし） なし
- 言語の切り替え （なし） なし（英語のみ）
待ち時間を、会社の仕様書にする
読み込み中の画面には、建物の線画が描かれていく横で TYPE / FOUNDED / FOCUS / LOCATION の4項目が並びます。「技術・AIソフトウェア企業」「2026年設立」「建築向けの法規チェック（BIM・Revit連携）」「デンバー」。新しい会社の製品サイトでは「この会社は何者か」が分からないことが離脱の理由になりますが、ここでは待ち時間そのものを、その答えに使っています。設立年が新しいことも隠さず、項目として出しています。
利用者の見慣れた世界に寄せる
表示後の画面は、紙のような生成りの背景に建築の線画。製品の利用者である建築家が毎日見ている図面の世界観です。「自分たちのための道具だ」と一目で分かるのは、見た目そのものが利用者の仕事道具に似ているからです。
オレンジは、行動の場所にだけ
色は生成り（#F5F5ED）、墨色（#282828）、オレンジ（#FA3600）の3色だけ。オレンジはヘッダーの「CONTACT US」やラベルなど、押してほしい場所にだけ使われています。Cookie のバナーも「ACCEPT」と「REJECT」が同じ大きさで並び、選ばせ方に偏りがありません。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #F5F5ED 背景（紙のような生成り）
- #282828 見出し・本文・線画
- #FA3600 アクセント（問い合わせ・ラベル）
- #FFFFFF 反転面の文字
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文（大文字の見出し） | BT Grotesk | Inter Tight |
| 工程表示・ラベル | Geist Mono | Geist Mono |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 47px / 700 | 1.00 | 31px / 600 |
| h2 | 40px / 600 | 1.00 | 31px / 600 |
| 本文（p） | 13px / 500 | 1.30 | 15px / 500 |
| ボタン | 13px / 500 | 1.30 | 15px / 500 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 読み込み画面 建物の線画が描かれる横に、種別・設立・領域・所在地を仕様書のように並べる。 会社情報／スペック表型
- 02 ヘッダー 製品・料金・資料・会社と、オレンジの「CONTACT US」。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 03 ファーストビュー 建築の線画と、大文字の見出し・短い説明・「DISCOVER MORE」。下にキーワードの帯。 ファーストビュー／全面写真＋コピー型
- 04 課題 「モデリングの繰り返し作業に一日を取られるべきではない」という一文。 メッセージ／大きな一文型
- 05 考え方 「設計ツールは言われたことしかしない」と、図版。 コンセプト／写真＋メッセージ型
- 06 製品の働き 「モデルの中でエージェントを動かす」を、スクロールに合わせて段階的に見せる。 機能・強み／左右交互型
- 07 2つの製品 チャットウィジェットとダッシュボードを、重なるカードで切り替える。 一覧／カード並び型
- 08 利用者 「モデルの中で働く人のために」と、建築家向けであることを示す。 コンセプト／写真＋メッセージ型
- 09 メール登録 最新情報を受け取るメール登録。 行動喚起／メール登録型
- 10 フッター 大きな図版とリンク、SNS。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 読み込み画面や最初の画面で、会社の基本情報を「仕様書」の形で短く見せる
- 02 利用者が普段見慣れている道具（図面・帳票など）の見た目を、デザインの下敷きにする
- 03 アクセントカラーは1色に決め、問い合わせなど行動の場所だけに使う
- 04 Cookie の同意と拒否は、同じ大きさのボタンで並べる
FAQ
よくある質問
Heron AI のサイトで使われているフォントは？
見出しと本文に BT Grotesk（見出しは大文字）、工程表示やラベルに Geist Mono を使っています。BT Grotesk は有料書体なので、無料で近づけるなら Inter Tight が候補です。Geist Mono は無料で使えます。
読み込み画面（プリローダー）は入れたほうがいいですか？
待たせる時間が長くなるので、基本的には短いほど良いものです。Heron AI は待ち時間に会社の仕様書を読ませることで、その時間を情報提供に変えています。入れるなら、待っている間に何かが伝わる作りにしてください。
どんな業種の参考になりますか？
設立間もない SaaS やスタートアップ、専門職向けのツールに向きます。利用者の仕事道具の見た目を借りる発想は、士業・医療・製造業向けのサービスにも応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はHeron AIおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Site of the Day
