Wild AG

1. 01

   ローディング

   砂色のグラデーションを額縁にして、中央に大きな角丸の白いカードと細線のWILD AGロゴを置く。

2. 02

   ヒーロー

   会議室の写真の下にベージュのグラデーション帯を続け、「EXKLUSIVE BAUPROJEKTE, VON DER ERSTEN IDEE BIS ZUR FERTIGEN UMSETZUNG.」とCTA「AUSGEWÄHLTE PROJEKTE」。帯の下端を大きな角丸で切る。

3. 03

   Portrait・Werte

   会社紹介文と写真の2カラム。価値観（Präzision / Zuverlässigkeit / Individualität / Nachhaltigkeit）を罫線で区切って並べる。

4. 04

   Team

   4人の社員写真カードを横に並べ、名前と役職を写真下部のベージュの帯に重ねる。

5. 05

   ビジュアル・マーキー

   建築模型の写真に続けて、「PRÄZISE IM BAUEN.」の大きなコピーを横に流す。

6. 06

   Kompetenzen

   説明文と写真の2カラムに、1〜5の番号付きピル型リスト（Projektentwicklung / Finanzierung / Planung & Ausführung / Renovation & Umbau / Produktion & Logistik）。

7. 07

   Projekte

   「Rychenberg, Winterthur」「Cholhölzli im Limmattal」の2件を角丸の写真カードで並べる。

8. 08

   Partner・Prozesse

   協力会社のロゴを横一列に流し、Analyse / Projektierung / Realisierung の3段階プロセスをピル型リストで示す。

9. 09

   Kontakt・フッター

   オフィスの写真とお問い合わせフォームで締める。

• 技術スタックに Lottie があり、ローディングの細線ロゴの描画に使われていると思われる。lottie-web で再生して再現可能
• 「PRÄZISE IM BAUEN.」のコピーと協力会社ロゴは、CSS の @keyframes で translateX させる無限マーキーで再現できる
• ヘッダーはスクロール中も固定表示され、ロゴと「KONTAKT」ボタンが常に見えている
• 番号付きのピル型リストはアコーディオンで詳細を開く構成と思われる。GSAP で高さをアニメーションさせる

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

検出された技術:GSAPWebflowLottie

• 01見出しはサンセリフの大文字を基本にし、強調したい語だけセリフ体の斜体に切り替える
• 02色は白からベージュ、トープまでの同系色だけで組み、写真の色味もそれに合わせる
• 03FVの帯やカードは大きな角丸（40px以上）で切り、やわらかい輪郭をページ全体で揃える
• 04業務や工程は番号付きのピル型リストにして、一覧性を先に確保する

1---
2title: "Wild AG 再現用デザイン仕様書"
3source: https://wild-ag.ch/
4katapick: https://katapick.com/sites/wild-ag
5category: コーポレート
6region: 海外 (CH)
7tags: [セリフ体, 写真主体, 角丸, くすみカラー, 固定ナビ, マーキー]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 22
13generator: Katapick
14---
15 
16# Wild AG — 再現用デザイン仕様書
17 
18> 見出しの大事な語だけ、セリフ体の斜体に。スイスの不動産開発会社Wild AGのコーポレートサイトは、大文字のInterにInria Serifの斜体を混ぜ、ベージュのグラデーションで建設会社の硬さを上質さに置き換えている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22