ケーススタディ

事例:AIインフラ企業のウェブサイト設計——専用GPUコンピュートと統合AI推論プラットフォーム

北米のあるAIインフラ・スタートアップは、買い手が想像しにくい2つのものを販売しています。専用GPUコンピュートと、統合AI推論プラットフォームです。開発者、財務、コンプライアンス担当がそれぞれ信頼できる根拠を見つけられるようサイトをどう構成したか、そしてなぜすべてのデモパネルに「デモ」と明記したのかを紹介します。

最新のクライアントは、北米のAIインフラ・スタートアップです。1つのブランドで2つの事業を運営しています。1つ目は専用GPUコンピュートで、コンテナ型モジュラーデータセンター内の専用GPUポッド、ラックのコロケーション、標準化されたハードウェア納品を提供します。2つ目は統合AI推論プラットフォームで、OpenAI互換の1つのAPIからDeepSeek、Qwen、GPT-4o、Claudeなどの主要なオープンモデルとフロンティアモデルをサーバーレスで利用でき、モデル間のインテリジェントなルーティングと、使用量に応じた柔軟な料金体系を備えています。

クライアントからまだ社名を公表しないよう依頼されているため、本記事では特定につながる情報を伏せ、設計の考え方だけを紹介します。記載するのはサイトで実際に公開されている内容のみです。報告できるトラフィックや売上の数字はなく、作ることもしません。

課題:目に見えないものを売る

飲食店のサイトなら料理を見せられます。AIインフラのサイトが売るのはレイテンシ、ルーティングのロジック、空きGPU容量、セキュリティ保証で、どれも写真には写りません。買い手もさまざまです。

  • 開発者は、組み込みがどれほど難しいか、どのモデルを呼び出せるかを知りたい。
  • 財務・運用の責任者は、GPU1時間あたりの費用、100万トークンあたりのコスト、部門ごとの使いすぎを防ぐ方法を気にする。
  • セキュリティ・コンプライアンス担当、特に金融機関の担当者は、プロンプトがどこに送られ、誰が読めるのかを知りたい。

私たちの仕事は、1つのページの中でそれぞれのグループに専用の導線を用意しつつ、専門用語の壁にしないことでした。

エントランス・ポータル:ゲートをくぐる

光るゲートを配したAIインフラサイトのエントランス・ポータル(ブランド情報は削除)
光るゲートを配したAIインフラサイトのエントランス・ポータル(ブランド情報は削除)

訪問者が最初に目にするのは製品の説明文ではなく、1つの全画面シーンです。光るゲート、1行のポジショニング、そして「Enter Gateway」ボタンが1つ。クリックすると光が画面いっぱいに広がり、ゲートの向こうに製品のホームページがゆっくりと現れます。このポータルはブランドのメタファーそのものです。この会社が売っているのはAIコンピュートへの「ゲートウェイ」なので、訪問者が最初にすることもゲートをくぐることなのです。

トランジションの瞬間:ゲートに入ると画面が光に包まれる
トランジションの瞬間:ゲートに入ると画面が光に包まれる

この「敷居」をまたぐ設計ロジックは、Apexzone7がテック系ブランドをデザインする際の特徴です。会社をひと言で表すアイデアを見つけ、それを最初のインタラクションにすることで、機能を1つも並べないうちにストーリーを伝えます。入口はワンクリックだけで、ホームページ自体は軽快ですっきりしたまま。そして訪問者には、記憶に残り人に話したくなる瞬間が生まれます。

設計判断1:2つの製品を1行の見出しで

ヒーローセクションでは2つの事業(統合推論プラットフォームと専用GPUインフラ)を1行で示し、3つの短い根拠で裏付けています。訪問者自身のブラウザから計測したリアルタイムのレイテンシ、「base_urlを1行変えるだけの組み込み」、そしてハードウェアによるセキュリティの方針です。2つのCTAが訪問者を振り分けます。1つはコンピュートと推論の製品へ、もう1つはAPIキーの申し込みへ。後者は課金ポータルがまだ開いていないため「近日公開」と表示しています。

設計判断2:抽象的なサービスをインタラクティブに

ルーティングを文章で説明する代わりに、ヒーローにインタラクティブなルーティング判定パネルを置きました。訪問者がリスクシミュレーション、10-K報告書のレビュー、サポートチケット、コードのリファクタリングといった業務ワークロードを選び、レイテンシ優先とコスト優先の2本のスライダーを動かすと、ゲートウェイがどのモデルとどのコンピュート拠点を選ぶかがパネルに表示されます。ページの下のほうでも同じ考え方を続けています。

  • H100、H200、B200、L40S、A100を地域別に比較し、GPUの系列で絞り込めるGPUスポット市場の表
  • デプロイ可能なカードとして並べたホスト型オープンウェイトモデルのカタログ(DeepSeek、Llama、Qwen)
  • プリセット(最低レイテンシ、コスト重視、厳格なオンプレミス)、プロバイダーをまたぐフォールバックチェーン、セマンティックキャッシュのしきい値を示すスマートルーター設定画面
  • 1つのプロンプトを4つのモデルクラスタに並べて送るマルチモデル・プレイグラウンド

設計判断3:すべてのデモに正直なラベルを

これがプロジェクトで最も重要な判断でした。インタラクティブパネルの多くはサンプルデータで動いており、サイトはそのことを各パネルに明記しています。「シミュレーションのデモデータ」「シミュレーションのルーターエンジン」「シミュレーションのFinOpsガバナンス」などです。開発中の機能には「近日公開」を付け、コンプライアンス項目には計画中、進行中、デモ準備完了といった実際の状況を示し、一律に「認証済み」とは書きません。

インフラの買い手は技術的なデューデリジェンスを行います。ベンチマークが実はサンプルデータだった、あるいは認証がまだ存在しなかったと後で分かれば、ページ上の他の内容も信用しなくなります。明確なラベルがあれば、デモは会社がまだ裏付けられない主張をせずに製品を説明できます。AIアシスタントについても同じです。ChatGPTやPerplexityはベンダーを要約するとき、ページに書かれた内容をそのまま繰り返すので、ページには事実だけを書くべきです。

設計判断4:約束ではなく開発者向けの証拠

推論プラットフォームで一番の売りは、開発者が変更するコードの少なさです。ドキュメントのセクションには、Python、TypeScript、cURLのそのまま使えるサンプルを載せました。いずれも標準のOpenAI SDKを使い、base_urlとAPIキーだけを変え、部門別の枠管理用に任意のヘッダーを加えるだけです。開発者は宣伝文を読まなくても、10秒で組み込みの手間を判断できます。

設計判断5:規制業種の買い手のためのガバナンスとセキュリティ

ターゲット市場に北米の金融機関が含まれるため、2つのセクションで直接語りかけています。

  • コストガバナンス:部門ごとの予算上限、トークン枠とレート制限、さらにプライベートGPUクラスタとパブリッククラウドのリソースプールの容量ビュー。トークンの支出とレンタルしたコンピュートの支出の両方をカバーします。
  • セキュリティアーキテクチャ:プロンプト送信前に機密性の高い金融データ項目を伏せるインラインの個人情報マスキングのデモ、ハードウェアTEEのリモート証明のデモ、改ざんできない監査ログの画面、そして項目ごとに実際の状況を示したコンプライアンスのロードマップ。

設計判断6:創業者の信頼性をタイムラインで

AIスタートアップの多くは設立から1〜2年です。この創業者は、企業ネットワーク、ITインフラ、セキュリティの分野で数十年の実務経験を持っています。私たちはこの経歴を、今の製品へとつながる短いタイムラインとして見せました。「なぜ新しいAIベンダーを信頼すべきか」という問いに答えつつ、創業者自身の経歴以外の主張は一切加えていません。

ビジュアルと技術の選択

  • ダークなデータコンソール風デザイン:黒に近い背景、等幅の数字、ステータスバッジで、ターゲットが普段使っている運用ツールのような見た目にしました。
  • 対象者別の分かりやすいナビゲーション:概要、コンピュート市場、スマートルーター、セキュリティとTEE、会社概要。
  • 検索とAIに見つけてもらうための基本:両方のサービスを明記したmeta description、SoftwareApplication構造化データ、sitemapとrobotsファイルにより、検索エンジンやAIクローラーが初日から会社を正しく分類できるようにしました。

AI・テック企業への教訓

  1. 説明より見せる。ルーティング、GPU価格、ガバナンスは、文章よりインタラクティブなパネルのほうが伝わります。
  2. デモとロードマップにラベルを。正直なステータス表示はデューデリジェンスで信頼を守り、AIによる自社の要約も正確に保ちます。
  3. コードをページに載せる。API製品では、3行の組み込み例が最高のコンバージョン文言です。
  4. 買い手ごとに導線を。開発者、財務、コンプライアンスは同じページを別の理由で読みます。それぞれのためのセクションを設計しましょう。

プロジェクト概要:制作実績でこのプロジェクトを見る。

AI、SaaS、インフラの企業を経営していて、サイトがまだ何を売っているのかを説明できていないなら、ぜひご相談ください。ニューヨークのテック企業向けに、検索とAIに対応した多言語サイトを設計・構築しています。