Designing and building the Vercel Ship conference platform - Vercel

View on Vercel Blog

Vercel Ship カンファレンスプラットフォームのデザインと構築

この記事は、Vercelのカンファレンスプラットフォーム「Vercel Ship 2025」のデザインと構築プロセスについて詳細に解説しています。

ビジュアルデザイン:

• コンセプト: 2024年の磁性粒子から進化し、NASAが開発した黒い磁性流体（フェロ流体）をインスピレーション源に、動き、磁性、複雑さを表現するビジュアルを目指した。
• AI活用: 生成AI（Flux、Google Veo 2、Runway、Ideogramなど）を用いて15,000以上の画像と動画を生成し、迅速なアイデア出しと方向性の検証を行った。
• デザインの調整: 当初、フェロ流体モチーフは試みましたが、集合体恐怖症を誘発する可能性があったため、より洗練されたメタリックな液体システムに修正。
• インタラクション: レイマーチング技術を用いて、滑らかな表面を持つ流体シミュレーションを実現。ガラスプリズム、フェロ流体シミュレーション、水の動きなどを実装。

プラットフォーム構築:

• v0によるプロトタイピング: デザインチーム内でv0を活用し、シンプルなテキストプロンプトからサイトや登録フローのプロトタイプを迅速に作成。
• 技術スタック: Next.jsアプリを基盤とし、PostgresデータベースとPayload CMSを採用。
  • CMSでランディングページのコンテンツを編集可能に。
  • 登録者データをリアルタイムで検索可能に。
  • エンジニアリングチームがAPIとデータベースを直接利用できるように。
• レンダリング戦略とキャッシング: ISR (Incremental Static Regeneration) 、PPR (Partial Prerendering) 、use cache ディレクティブによるキャッシュ制御により、パフォーマンスを最適化。
• Vercelプラットフォームの活用: VercelとShipサイトを同じドメイン上で運用することで、デバッグとログ記録を効率化。
• モジュール化されたコンポーネント: shadcn, Geist, cvaを用いて、複数のイベントに対応できる再利用可能なコンポーネントライブラリを構築。
• React Emailによるメール送信: React EmailとCMSを連携させ、マーケティングチームがエンジニアリングの介入なしでメールコンテンツを編集可能に。

課題と今後の展望:

• ローカル環境でのPostgres設定、マイグレーション、データ投入などの課題。
• ローカル環境でのデータプレビュー、スキーマ更新、Open Graph生成、キャンペーンプレビューなどのワークフロー改善を目指す。
• フロントエンドでのビジュアル表現の向上とパフォーマンスの両立。

その他:

• useTransform from Motion for Reactを活用したスクロールアニメーションや、mix-blend-modeを用いたスティッキーヘッダーの実装。
• Vercel Ship 2025への登録を呼びかけ、基調講演やオフラインイベントなど、今後のコンテンツ展開に期待。
• basement.studioとの協業。