# Seasats｜コーポレートのWebデザイン参考

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

- URL: https://www.seasats.com/
- 解説ページ: https://katapick.com/sites/seasats
- カテゴリ: コーポレート / 地域: 海外（US）/ 業種: 海洋ロボティクス・無人艇
- テイスト: スクロール演出、3D/WebGL、写真主体、ミニマル、くすみカラー
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 5/5（目安 40 時間）

## 編集部のひとこと（Leo）
任務リストが1行ずつパッと明るくなるの、鳥肌！映画の予告編でテロップが刻まれていく感じ！そのあと「No matter the unknown…」を広い余白にドンと置く間の取り方も最高！

## デザインの見どころ
- FVは凪いだ海と3隻の艇、細いセリフ体の一行だけ。静けさが、そのまま信頼になる
- スクロールでカメラが甲板へ寄っていく。読ませるのではなく、乗り込ませて任務を伝える
- 等幅のラベルとHUD風の表示が、防衛・観測という文脈を一瞬で共有させる小道具になっている

## 配色
- #232323 Deep Ink（テキスト / ボタン）
- #fffdfd Sea Foam White（背景）
- #d9d9d9 Fog Gray（サーフェス）
- #e3ede4 Mist Mint（セクション背景）
- #b7c8be Sage（グラデーション）
- #2b3922 Kelp Green（アクセント）

## フォント
- 見出し: Season Mix（代替: Newsreader）
- 本文: Season Sans（代替: Inter Tight）
- ラベル・ボタン: Supply Mono（代替: JetBrains Mono）

## よくある質問
### Seasatsのサイトで使われているフォントは？
見出しに Season Mix、本文に Season Sans、ラベルに Supply Mono と思われる書体が使われています。無料で近い雰囲気を出すなら Newsreader、Inter Tight、JetBrains Mono の組み合わせがおすすめです。

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

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

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