AIスタートアップ向け、プレミアムなブランディングと高品質モーションサイトのケーススタディ
「スピード」を売るAIスタートアップのサイトが、遅く見えてはいけません。そして、他社と同じように見えてもいけません。Utsubo は、重要インフラ（原子力発電、ガスタービン、データセンター、半導体施設）向けのAI精密人材プラットフォーム Vectr のパートナーとして、戦略的なブランドアイデンティティを、高速でシネマティックなマーケティングサイトへと翻訳しました。デザインと開発を一貫して担当し、リアルタイムの Three.js WebGPU 3Dヒーロー、アプリのようなページ遷移、3Dデータ量を80〜95%削減する制作パイプラインを構築。サイトは2026年5月21日に公開し、6月2日に FWA of the Day を受賞しました。
対象読者：プレミアムなブランディング、新しいマーケティングサイト、あるいは Three.js / WebGPU を使った高品質なモーション体験を検討しているAIスタートアップの経営者・ブランド責任者の方。
この記事のポイント
- Vectr は重要インフラ業界向けのB2B AI人材プラットフォーム。ブランドには 「エンタープライズらしい信頼感」と「最先端スタートアップらしさ」の両立が求められました。
- ブランドシステムは、ひとつのビジュアルの緊張関係 — 方向（矢印）と着火（スパーク）— を起点に、インタラクティブなプロダクトストーリーへと展開しています。
- トップページは ガイド付きのジャーニー。1本の連続したラインが、緊急の問い合わせから現場への派遣までのクライアント体験をたどり、目に見えない業務フローをビジュアルな物語に変えます。
- 中心となるのは、リアルタイムの Three.js WebGPU 3Dヒーロー（WebGLフォールバックつき）。OffscreenCanvas を使い Web Worker 上で メインスレッド外 にレンダリングすることで、スクロールや遷移を滑らかに保ちます。
- 独自のアセットパイプライン（Blender → GLB、テクスチャのリサイズ、WebP化、インスタンシング、Draco圧縮）により、3Dデータ量を約 80〜95% 削減しました。
- 結果として、Lighthouse で Performance 94 / Accessibility 98 / Best Practices 100 / SEO 100、そして FWA of the Day を獲得しました。
1. 課題
重要インフラの停止は、待ってくれません。プラントや施設、インフラ案件で人手が足りないとき、そのコストは即座に発生します。遊休化する作業員、遅延するスケジュール、予算超過、そして運用リスクです。
Vectr のプロダクトは、人材確保を ロジスティクスとインテリジェンスの問題 として捉え直します。手作業の人脈、メールのやり取り、古いデータベースに頼るのではなく、AIと機械学習を使って、適格な人材をより速く特定・検証・動員します。
サイトには、この発想の転換を明確に伝える役割が求められました。よくある人材サービスのサイトに見えてはいけません。重要度の高い産業バイヤーに向けて十分にシリアスでありながら、レガシーなワークフローに挑むAIスタートアップらしいエネルギーも必要でした。
核心は、スピード・精度・信頼を「体感できるもの」にする ことです。AI SaaS のリブランディングか、リローンチかを検討している経営者にとって、これは本質的な問いでもあります。プロダクトの説明文を読む前に、ブランドと実装そのものがプロダクトを証明しなければなりません。
2. ブランドシステム
ブランドアイデンティティは、シンプルなビジュアルの緊張関係から始まります。それが「方向」と「着火」です。
矢印は、システムに明快さ・軌道・前進する動きを与えます。スパークは、起動・エネルギー・意図を加えます。ふたつが組み合わさることで、装飾的というより 作動的（オペレーショナル） なマーク — 動くために設計されたシステム — が生まれます。
このロジックがデジタル体験全体を形づくりました。Vectr の世界観は、柔らかく曖昧で過度に洗練されたものではありません。構造的で、率直で、アクションを軸に組み立てられています。
ビジュアルシステムは、抑制と強度の瞬間のバランスをとっています。深く静かな背景がシリアスな産業的トーンをつくり、エレクトリックブルーのアクセントが、よりテクニカルでスタートアップらしいエッジを与えます。結果として、原子力グレードの信頼性を語りながらも、Vectr が新しい何かを生み出しているという感覚を失わないブランドになりました。
タイポグラフィも同じロジックに従います。機能的で、幾何学的で、可読性が高く、題材にふさわしい機械的な確かさを備えています。
3. 人材動員のジャーニーを物語る
トップページは、Vectr の動員プロセスをたどる ガイド付きのジャーニー として設計しました。
プラットフォームを機能の羅列として提示するのではなく、ランディングページでは、緊急のニーズから現場到着までのクライアント体験を可視化します。1本の連続したラインが一連のシーンを通り抜け、各業務ステップ — 起動、スクリーニング、選定、マッチング、派遣 — をつないでいきます。
このラインが、物語の装置になりました。クライアントからの一本の電話から、適切な人材が適切な施設に到着するまでの道のりを表現しています。コピーが詳しく説明する前に、ユーザーは Vectr のサービスのロジックをビジュアルでたどっていきます。
これが特に重要だったのは、Vectr が機微で重要度の高い業界で事業を行っているからです。人材確保は、単なる「空き状況」の問題ではありません。すべての候補者は、フィルタリングされ、検証され、コンプライアンス要件と照合され、スケジュールにマッチングされ、到着に向けて準備される必要があります。
サイトは、その目に見えない業務フローを、明快でビジュアルな物語に変えています。これは私たちが没入型ストーリーテリングサイトで取る手法と同じで、モーションは装飾ではなく意味を運ぶために使われます。
4. 途切れない、アプリのような体験
サイトには、速く・プレミアムで・連続している感覚が必要でした。
ナビゲーションは、ハードなページ遷移ではなく、滑らかでアプリのようなトランジションを軸に構築しました。ユーザーがセクション間を移動すると、次のページが重なり合うビジュアルサーフェスとして入ってきて、体験が再起動するのではなく前へ流れていく感覚を生みます。
このトランジションシステムは、ブランドの発想を直接支えています。サイトは常に意図を持って動いています。唐突なリセットも、崩れたリズムも、待たされる感覚もありません。
目的は、装飾のためのアニメーションではありませんでした。体感速度（perceived speed） です。すべてのインタラクションが、Vectr を「オペレーショナルな速さを軸に作られた会社」だと感じさせる必要がありました。
5. リアルタイム3Dヒーロー
サイトの中心となるのは、Three.js WebGPU で構築したリアルタイム3Dヒーローシーンです。互換性を広げるため、WebGLフォールバック も備えています。
ヒーローは、単なるビジュアルのフックではありません。ブランドと同じメッセージを担っています。Vectr は、古くからある業務上の課題を解決する、技術的に先進的な会社である — そのことを、ユーザーが機能ブロックを一つも読む前に証明する必要がありました。
パフォーマンスを守るため、シーンは OffscreenCanvas を使って Web Worker 内の メインスレッド外 でレンダリングしています。これにより、重いレンダリング処理をインターフェースから切り離し、3Dシーンが動いている間もスクロール・ページ遷移・操作を滑らかに保てます。
制作パイプラインも、仕事の大きな部分を占めました。シーンは Blender で制作し、GLB として書き出したうえで、テクスチャのリサイズ、WebP変換、インスタンシング、Draco 圧縮を使った独自のアセット処理で最適化しました。
これにより3Dのデータ量を約 80〜95% 削減し、読み込み速度を犠牲にすることなくリッチなビジュアル体験を実現しました。（このレンダリング手法の技術的背景は、WebGPU・Three.js 移行ガイドで解説しています。）
6. 技術的な方針
中心となる技術的な制約はシンプルでした。「重く感じさせずに、野心的に感じさせる」 こと。そのために、ビジュアル品質、読み込み時間、ブラウザ互換性、デバイス間の滑らかな操作性のバランスをとりました。
主な意思決定は次のとおりです。
- 高速でモダンなフロントエンド基盤として Astro と Vite。
- WebGLフォールバック つきの Three.js WebGPU。
- 高度なレンダリング経路を読み込む前の GPU能力の検出。
- OffscreenCanvas による メインスレッド外の3Dレンダリング。
- 圧縮テクスチャと Draco ジオメトリ圧縮による 最適化された GLB 配信。
- デスクトップ／モバイル向けの 複数の3Dアセットバリアント。
- より滑らかでプレミアムなブラウジングのための Taxi.js ページ遷移。
- デスクトップでは Lenis スムーススクロール、モバイルではネイティブのスクロール挙動を維持。
- スペーシング・タイポグラフィ・カラー・モーションを一貫させる トークンベースの SCSS デザインシステム。
- フォーム入力途中の状態を保持する LocalStorage。
- 発見性を高める SEO・構造化データ の実装。
- デフォルトで解析・Cookie・サードパーティトラッカーを使わない プライバシーファースト な実装。
7. プロダクト機能
マーケティング体験にとどまらず、このサイトは Vectr のマーケットプレイスの両サイドに対する 獲得プラットフォーム としても機能します。
候補者向けの 応募（Apply）フロー は、バリデーション、履歴書アップロード、LocalStorage による状態保持を備えた5ステップのモーダルです。候補者が完了前にタブを閉じても進捗が保持されるため、最初からやり直す必要がありません。
クライアント向けの 人材リクエスト（Request Crew）フォーム は、人材確保の依頼を始めるための直接的な導線をつくります。状況が緊急であるため — 重要な停止は待ってくれません — インタラクションは意図的にシンプルにしています。
コンテンツ設計は 多言語対応レディ でもあります。最初は英語で公開しましたが、サイトのコピーは一元管理されているため、今後のローカライズは構造の作り直しではなく、コンテンツ作業として扱えます。
8. パフォーマンス・SEO・プライバシー
パフォーマンスは、ブランド体験の一部として扱いました。スピードを売る会社が、遅いサイトを持つわけにはいきません。
トップページは Lighthouse で Performance 94、Accessibility 98、Best Practices 100、SEO 100 を達成しました。
サイトには、構造化データ、サイトマップ対応、ソーシャル用メタデータ、そして llm.txt・llm_full.txt によるAI可読の会社サマリーも含めています。
プライバシーは、初日からプロダクト要件として扱いました。デフォルトで解析・Cookie・広告トラッカーを使いません。ブラウザストレージは、フォーム送信前の入力内容をローカルに保存するなど、ユーザー体験を改善する場合にのみ使用しています。
9. 成果
Vectr は、重要度の高い産業環境で事業を展開するAI人材スタートアップのための、高速で個性的なB2Bプラットフォームとして公開されました。本プロジェクトは2026年6月2日に FWA of the Day を受賞しています。
ブランドシステムからトップページのジャーニーまで、3Dヒーローからページ遷移まで、この体験はひとつの中心的な考えを補強しています。Vectr は、重要な人材確保を、設計され加速されたプロセスへと変える — というメッセージです。
完成したサイトは、二つのレジスターを同時に保っています。原子力・半導体・ガス・データセンターのバイヤーに向けたエンタープライズらしいシリアスさと、インテリジェンス・自動化・スピードを強みとする会社らしい、目に見える先進性です。
クレジット — ブランディング：Michele Angeloro。デザイン・開発：Utsubo。クライアント：Vectr, Inc. 公開サイト：vectrfl.com。
10. Utsubo について
Utsubo は、2021年に設立された インタラクティブ・クリエイティブスタジオ です。ブラウザと物理空間のあいだに生きる体験について、スタートアップやブランドと協業しています。
- 技術系プロダクトのためのブランドシステム・ビジュアルアイデンティティ
- 高品質なモーションを備えたプレミアムなマーケティングサイト
- Web3D・WebGPU ベースのリアルタイム体験
- インタラクティブインスタレーション
私たちのプロジェクトは、Awwwards、FWA、The Webby Awards などの国際的なアワードで評価されています。制作会社を比較検討中の方は、海外向けサイト制作の発注ガイドもご参照ください。
11. ご相談ください
AIスタートアップのブランディングや、高品質なモーションを備えたマーケティングサイトを構築中ですか？私たちは、ブランドシステム、インタラクティブなマーケティングサイト、Web上の没入型3D体験でチームと協業しています。
パートナーシップをご検討中なら、プロジェクトについてお話ししましょう：
- 何を構築しているか、どのような制約があるか
- 目標に対してどの技術アプローチが適切か（そもそも3Dが正解かどうかも含めて）
- 私たちが実行をお手伝いするのに適したパートナーかどうか
メールをご希望ですか？ contact@utsubo.co
12. よくある質問（FAQ）
Q. Vectr のようなプロジェクトの費用と期間はどのくらいですか？
スコープによって変わります。ブランドシステム、マーケティングサイト、カスタム3D、ページ数などが金額を左右します。プレミアムでフルカスタムのサイトの予算感については、別途ご相談ください。最も早く正確な見積もりに近づく方法は、目標とスケジュールについての短い打ち合わせです。
Q. ブランディングとサイト制作のどちらを担当しますか？両方ですか？
両方可能です。Vectr では、ブランドシステムを Michele Angeloro 氏がリードし、Utsubo がサイトのデザインと開発を一貫して担当しました。既存のブランドからスタートすることも、アイデンティティとサイトを一緒に構築することもできます。
Q. 重い3Dヒーローは Core Web Vitals を悪化させませんか？
正しく設計すれば、悪化しません。Vectr の3Dシーンは OffscreenCanvas でメインスレッド外にレンダリングし、GPU検出と WebGLフォールバックを備え、Draco圧縮アセットを配信しています。それでもトップページは Lighthouse の Performance で94を記録しました。
Q. 3Dはモバイルや古いブラウザでも動作しますか？
はい。高度なレンダリング経路を読み込む前に GPU 能力を検出し、必要に応じて WebGPU から WebGL へフォールバックし、デスクトップとモバイルで別々の3Dアセットバリアントを配信します。
Q. 既存のブランドを活かせますか？それともゼロから作れますか？
どちらも可能です。コンテンツとデザインシステムはトークンベースでモジュール化されているため、既存のアイデンティティを拡張することも、新しく開発することもできます。目指すのは、プロダクトを証明するブランドと実装です。
Q. 多言語サイトは制作できますか？
はい。Vectr は英語で公開し、多言語対応レディな設計にしています。コピーは一元管理されているため、言語の追加は構造の作り直しではなくコンテンツ作業です。私たちは英語・日本語・フランス語で協業できます。
大阪・心斎橋発。記憶に残るWeb体験を。
