株式会社PonTech Lab｜AIスタートアップのコーポレートサイトを、AIで構築

AIスタートアップの「顔」を、AIと作り切る

東京・多摩市のAIスタートアップ、株式会社PonTech Lab様のコーポレートサイトを制作しました。AIソリューション開発・SES・PM/PMO支援を手がけ、自衛隊経験者の採用にも力を入れる同社。「AIの会社の顔になるサイトを、AIで作る」——当社のAIサイト制作(Claude Code)をフルに使った案件です。

構成はトップ・会社案内・サービス・採用情報・お問い合わせなどの6ページに、お知らせとブログの更新機能を追加。技術はNext.js(React)を選び、Cloudflareのエッジ配信に載せています。2026年3月に着手し、翌4月に公開・アクセス計測の整備まで完了しました。

こだわった表現

ダーク×パープルの配色で「技術力と規律」というブランドを表現し、動きの設計に時間をかけました。ページを移動すると、タイル状のブロックが左下から右上へ順に広がって画面が切り替わるアニメーション。初回アクセスでは、水引がほどけて画面が3D的に開く演出。背景には巨大なタイポグラフィがスクロールに合わせてゆっくり流れます。パララックスの移動量は「動きすぎて汚い」と「動いているのが分からない」の間を実機で何度も往復して、最終的に当初の1/3まで抑えました。

採用ページは、自衛隊経験者に向けたメッセージを企画から担当。使える写真素材がほとんど無い状態からのスタートだったため、駐屯地の航空写真から隊員のカットまで、採用ページのビジュアルをすべてAIで生成して用意しました。「素材が無いから作れない」を、AI画像生成でひっくり返しています。

制作の裏側 ─ つまずきと判断の記録

当社の実績ページでは、うまくいった話だけでなく、実際につまずいた場所も公開しています。AIとの制作履歴から、そのまま抜き出します。

作り直しから始まった。最初はSPA(1枚のアプリとして動くサイト)として構築しましたが、この方式では検索エンジンからページの中身がほぼ見えず、SEOに不利。途中でNext.jsのApp Router(静的生成)へ全面移行しました。こだわったタイル遷移アニメーションは移行で壊れやすい部分でしたが、切り替えの仕組みを1枚の層に分離してあったため、そのまま持ち越せています。

引き算をやりすぎて、戻した。「テキストが多い」と感じて大幅に削ったところ、情報が足りなくなりクライアント様の意向とも合わず、全面的に戻しました。以後、大きな変更は必ず戻せる形で段階的に試す運用に。流行のライブラリ(GSAP)によるスクロール演出も一度導入しましたが、既存の動きと干渉したため、軽量な自前実装に戻す判断をしています。

本番だけで起きる問題を潰した。ローカルでは動くのに、本番のサーバー(Cloudflare Workers)ではお知らせ記事が消える——原因は、本番環境では実行時にファイルが読めないという構造的な制約でした。記事をビルド時にまとめて焼き込む方式へ設計変更して根治。iPhone実機で見つけたフォームのはみ出しや、縦書きラベルが逆さまになる表示崩れも、ひとつずつ記録を残しながら修正しています。

公開前に、全体を採点した。公開前には保守性・SEO・アクセシビリティを客観採点し、指摘に沿ってコンテンツ管理の分離・デザイン変数の一元化・構造化データ・アクセシビリティ対応まで8段階の改修を実施。「AIで速く作る」と「品質を人が担保する」を両立させた工程です。

公開後の運用

公開後は、メールで更新のご依頼を受けて当社が反映する形で運用が続いています。お知らせとブログはテキストファイルを1枚追加するだけで記事が公開される仕組みにし、月次のアクセスレポートまで整備。確認・修正のフェーズは用意していましたが、この案件ではほとんど使われていません。完成度を上げ切ってからお見せする進め方のためです。

AIサイト制作の工程や納品物の詳細は、解説記事とサービスページをご覧ください。