CorporateOverseas / AUPicked 2026.09.26

United Carriers

コーポレートのWebデザイン参考 — 物流・フォワーディング

出典: unitedcarriers.com

Editor's note — 編集部の視点

光る地球ドーンで、物流の広さが一発でわかる。

APAC圏の物流企業United Carriersのサイトは、光る地球と航路の弧に「EVERY LEG OF THE JOURNEY」の極太英字を重ね、全行程を担う約束を示す。

LeoMotion & Direction

「WE MOVE FREIGHT.」の見出し、スクロールで文字色がじわじわ埋まっていくっぽいの、ライブのカウントダウンみたいで鳥肌！しかもサービスは12,000px超のピン区間！どこまで溜めるんだ！

1黒い宇宙に光る地球、国名ラベル、航路の弧。サービス一覧より先に、ネットワークの広さを見せる
2背景は黒から青のグロー、そして白へ。ページを下るほど、宇宙から地上へ降りていく流れになる
3角張った極太見出しに、等幅のナビとボタン。管制画面のような硬さが、運行精度への信頼に変わる

Color

United Carriersの配色

Typography

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

見出し・数値

Aa あア

使用: BT Steinhart
代替: Oxanium

ナビ・ボタン・ラベル

Aa あア

使用: BT Steinhart Mono
代替: Space Mono

本文

Aa あア

使用: Helvetica Neue
代替: Inter

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型80px · 1.05 · 700
見出しKatapick 型60px · 1.05 · 700
小見出しKatapick 型20px · 1.1 · 700
本文The quick brown fox — 参考を型にする23.3px · 1.2 · 500
ボタンKatapick 型13.3px · 1.3 · 400

Structure

ページ構成（上から順）

01
ヘッダー
最上部に等幅の細いニュースバーとカーボン計算機・追跡ポータルへのリンク。ロゴ左、縦並びの等幅ナビを中央寄り、白い角丸ピルの「WORK WITH US」を右に置く。
02
ヒーロー
黒背景の右側に光る地球の3D。左下に「ONE OPERATOR」の小見出しと3行の極太英字見出し、短い説明文、白塗りと枠線の2つのピル型CTAを並べる。
03
トランジション・導入文
地球の下で背景が黒から青のグロー、白へと切り替わり、右寄せの短い導入文と「LEARN MORE ABOUT US」ボタンを配置。
04
ステートメントと実績数値
左に小さな道路写真と「WE MOVE FREIGHT. WE OWN THE OUTCOME.」の見出し（前半グレー・後半黒）、右に 2,500+ / 98.2% / 8+ の大きな数値を罫線区切りで縦に積む。
05
サービス
航空・海上・通関・倉庫・プロジェクトカーゴ・国内輸送の6サービス。高さ12,000px超のピン留め区間で、フルページ撮影では描画されなかったため見出しのみで確認。
06
強み・選ばれる理由
追跡・ネットワーク・24時間サポートの3項目と、窓口一本化や透明な価格など5項目の理由。9000px以降のため抽出データの見出しのみで確認。
07
導入実績・インサイト・FAQ
APAC企業の導入実績、業界記事の一覧、F.A.Qが続く（見出しのみで確認）。
08
CTA・フッター
「Ready to move smarter?」のCTAで締め、フッターへ続く（見出しのみで確認）。

Interaction

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

ヒーローの地球は Three.js の点群（ドットで描いた大陸）＋外周のグローシェーダーで描画されていると思われる。国名ラベルは3D座標をスクリーン座標に投影したHTML要素で重ねる方法が近い
スクロールで地球が画面外へ沈み、背景が黒→青→白へ移り変わる演出（ScrollTrigger でグラデーションの位置や canvas の transform をスクラブする想定）
ステートメント見出しは前半グレー・後半黒の状態で撮影されており、スクロール進捗に応じて文字色が埋まっていくテキストフィル演出と思われる
Lenis による慣性スクロールで、長いピン留め区間を滑らかに見せている。Swiper はインサイトや実績のスライダーに使われていると思われる

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

検出された技術:Three.jsLenisSwiperWebflowWebGL

Reproduce

再現するときのポイント

01地球はテクスチャではなく大陸マスクから点を配置した点群で描くと、軽くて抽象度の高い見た目になる
02見出しは角張った極太のワイド系英字、ナビやボタンは等幅に統一して“管制画面”の雰囲気を出す
03黒→青のグロー→白の背景遷移を1本のグラデーションで繋ぎ、ダークからライトへの切り替えを唐突にしない
04実績数値は見出しより大きく扱い、罫線で区切って縦に積む

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

united-carriers.katapick.md

1---
2title: "United Carriers 再現用デザイン仕様書"
3source: https://unitedcarriers.com/
4katapick: https://katapick.com/sites/united-carriers
5category: コーポレート
6region: 海外 (AU)
7tags: [3D/WebGL, スクロール演出, 大胆なタイポ, 等幅フォント, ダーク, ロングページ]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 5/5
12estimated_hours: 40
13generator: Katapick
14---
15 
16# United Carriers — 再現用デザイン仕様書
17 
18> 光る地球ドーンで、物流の広さが一発でわかる。APAC圏の物流企業United Carriersのサイトは、光る地球と航路の弧に「EVERY LEG OF THE JOURNEY」の極太英字を重ね、全行程を担う約束を示す。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22