Seasats

1. 01

   ヒーロー

   海上の3隻を中央に据えたフルスクリーン映像。見出し「Ocean Autonomy That Works」を中央上部に、CTA「EXPLORE PRODUCTS」を下部中央に小さく置く。

2. 02

   ミッション・ストーリー

   スクロールでカメラが甲板に寄り、探索対象（ゴーストフリート、ハリケーンの進路、有害藻類など）のリストが1行ずつハイライトされ、関連画像がカード状に浮かぶ。

3. 03

   ステートメント

   「No matter the unknown, we will find it.」を広い余白の中央に置き、映像から次のパートへの区切りにする。

4. 04

   ケイパビリティ

   「Deploy / Detect / React」の3語見出しをミント色の背景に積み、下に映像サムネイルのタブ。各タブで実機映像とHUD風の情報に切り替わる。

5. 05

   導入実績

   防衛・科学・商用のミッション実績をカード形式で横に並べる。

6. 06

   製品ラインナップ

   Lightfish / Quickfish / Heavyfish の3機種を比較表とスペック見出し（Persistent, Portable, Modular…）で紹介。

7. 07

   リーダーシップ・採用

   経営陣の写真と「Join the crew. Build the future.」の採用導線。

8. 08

   プレス・コンタクト・フッター

   掲載メディア一覧と「Take action」のコンタクトフォームで締める。

• ヒーローからストーリーパートは、スクロール量に応じてカメラ位置を補間する演出（Three.js + スクロール進捗、または連番画像/動画の currentTime 制御で再現可能）
• Lenis による慣性スクロールで、長いピン留めセクションでも動きが滑らか
• 任務リストは現在位置の1行だけ不透明度100%、それ以外を30%程度に落とすハイライト（IntersectionObserver か ScrollTrigger で実装）
• ケイパビリティのタブ切替は Swiper と思われる。映像上に等幅フォントのHUDテキストを重ねている

スクロールのコマ撮りLenis · 300–800ms

検出された技術:Three.jsLenisSwiperNext.jsWebGL

• 013Dを使わない場合も、スクロール連動で1本の映像を進める（video.currentTime をスクロール進捗に紐づける）と同じ体験に近づく
• 02見出しは細いウェイトの大きなセリフ体、本文とラベルはサンセリフと等幅に役割分担する
• 03背景色は純白ではなく #fffdfd や霧のようなグレー〜ミントのグラデーションで、海の空気感を出す
• 04テキスト量を1画面1メッセージに絞り、映像に語らせる

1---
2title: "Seasats デザイン分析書"
3source: https://www.seasats.com/
4katapick: https://katapick.com/sites/seasats
5category: コーポレート
6region: 海外 (US)
7tags: [スクロール演出, 3D/WebGL, 写真主体, ミニマル, くすみカラー]
8launched: 2026-09
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 5/5
12generator: Katapick
13---
14 
15# Seasats — デザイン分析書
16 
17> 説明は後回しで、まず3Dの海へ連れていかれる。無人水上艇メーカーSeasatsのコーポレートサイトは、霧の海を進む3D映像にスクロールを委ね、スペック表より先に“現場の空気”を手渡してくる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22