Katapick

CorporateOverseas / US

Seasats

コーポレートのWebデザイン参考 — 海洋ロボティクス・無人艇

出典: seasats.com
SeasatsのPC版ファーストビュー

Editor's note — 編集部の視点

説明は後回しで、まず3Dの海へ連れていかれる。

無人水上艇メーカーSeasatsのコーポレートサイトは、霧の海を進む3D映像にスクロールを委ね、スペック表より先に“現場の空気”を手渡してくる。

LeoMotion & Direction
任務リストが1行ずつパッと明るくなるの、鳥肌！映画の予告編でテロップが刻まれていく感じ！そのあと「No matter the unknown…」を広い余白にドンと置く間の取り方も最高！
  • 1FVは凪いだ海と3隻の艇、細いセリフ体の一行だけ。静けさが、そのまま信頼になる
  • 2スクロールでカメラが甲板へ寄っていく。読ませるのではなく、乗り込ませて任務を伝える
  • 3等幅のラベルとHUD風の表示が、防衛・観測という文脈を一瞬で共有させる小道具になっている

Color

Seasatsの配色

Typography

使用フォントと無料の代替

見出し

Aa あア

使用
Season Mix
代替
Newsreader

本文

Aa あア

使用
Season Sans
代替
Inter Tight

ラベル・ボタン

Aa あア

使用
Supply Mono
代替
JetBrains Mono

Structure

ページ構成（上から順）

  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」のコンタクトフォームで締める。

Interaction

アニメーション・インタラクション

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

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

Reproduce

再現するときのポイント

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

再現MDに含まれるもの

CSS変数化したカラートークン / Google Fonts 読み込みタグ / 全8セクションの仕様 / つまずきポイント / Claude Code・Cursor・v0 用の実装プロンプト / 仕上げチェックリスト

seasats.katapick.md
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-09-26
10difficulty: 5/5
11estimated_hours: 40
12generator: Katapick
13---
14 
15# Seasats — 再現用デザイン仕様書
16 
17> 説明は後回しで、まず3Dの海へ連れていかれる。無人水上艇メーカーSeasatsのコーポレートサイトは、霧の海を進む3D映像にスクロールを委ね、スペック表より先に“現場の空気”を手渡してくる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ

Seasatsについてよくある質問

Seasatsのサイトで使われているフォントは？

見出しに Season Mix、本文に Season Sans、ラベルに Supply Mono と思われる書体が使われています。無料で近い雰囲気を出すなら Newsreader、Inter Tight、JetBrains Mono の組み合わせがおすすめです。

Seasatsのようなスクロールで映像が進むサイトはどう作る？

Three.js でカメラをスクロール進捗に合わせて動かすか、書き出した映像の currentTime を GSAP ScrollTrigger の progress に紐づける方法が一般的です。慣性スクロールには Lenis を組み合わせます。

Seasatsのデザインはどんな業種の参考になる？

ハードウェア、ロボティクス、防衛・宇宙、研究機関など、実機や技術の“凄さ”を映像で伝えたいBtoB企業のコーポレートサイトの参考になります。

Seasatsに似た参考サイト

出典: Katapick編集部（2026年9月26日 確認）。掲載サイトのデザイン・文章・画像の権利は各権利者に帰属します。 AI・LLM 向けの要約は Markdown 版 を参照してください。