会社公式Webサイトをリニューアルしました

株式会社クラウドネイティブの公式Webサイトを全面リニューアルいたしました。

従来のWebサイトから設計・デザイン・コンテンツすべてを刷新し、お客様が必要な情報により素早くたどり着けるサイトを目指しました。

リニューアルのポイント

製品・サービス情報の大幅拡充

取り扱い製品36製品の詳細ページを整備し、各製品の課題解決シナリオ・機能紹介・導入メリット・料金体系・導入フロー・よくあるご質問を網羅的にご案内しています。サービスページも8サービスを掲載し、お客様の課題に応じた最適なソリューションをお探しいただけます。

サイト全体のナビゲーション改善

製品カテゴリ別のメガメニューやお問い合わせへの導線を整理し、お客様が目的の情報に最短でたどり着ける設計にしました。

導入事例・イベント情報の充実

実際に製品を導入いただいたお客様の事例や、定期開催しているセミナー・イベントの情報もサイト上でご確認いただけるようになりました。

お問い合わせ体験の向上

お問い合わせフォームにはAIによる自動分類機能を搭載し、お問い合わせ内容に応じて最適な担当者に迅速にお繋ぎする仕組みを構築しました。

技術的な取り組み — 生成AIによるサイト構築

本サイトの最大の特徴は、設計・実装・コンテンツ制作・画像生成のほぼすべてを生成AI（Claude）で制作した点です。

AI駆動の開発プロセス

フロントエンド約52,000行・281ファイル、バックエンド約7,000行のソースコードと、138件のMDXコンテンツを含むサイト全体を、Claude Code（Anthropic社のAIコーディングツール）で実装しました。Astroコンポーネント、SCSSスタイリング、MDXコンテンツ、TypeScriptユーティリティ、AWS Lambdaバックエンドに至るまで、AIがコードを書き、人間がレビュー・ディレクションするワークフローで開発を進めています。

AI画像生成

サイト内の製品紹介画像、サービスイメージ、採用ページのビジュアルなど約2,100点の画像アセットの多くをAI画像生成で制作しています。WebP形式に統一し、パフォーマンスとビジュアル品質を両立しました。

AIを活用したお問い合わせ処理

お問い合わせフォームから送信された内容はClaude AIがリアルタイムで分析・分類し、見込み顧客・要確認・スパムの3段階に振り分けます。Slack通知・Notion・Asana・Salesforceと自動連携し、営業チームの対応速度を大幅に向上させています。

パフォーマンス最適化もAIで

Google PageSpeed Insights APIを活用した計測→分析→改善の自動サイクルをClaude Codeで実行し、Mobile/Desktop双方でスコア90以上を達成しています。フォントCSSの最適化、サードパーティスクリプトの遅延読み込み、content-visibilityによる描画遅延など、AIが提案・実装した施策でTBT（Total Blocking Time）を大幅に削減しました。

品質管理もAIで

Playwrightによるビジュアルリグレッションテスト（Desktop・Tablet・Mobile の3デバイス）に加え、Claude Visionによるスクリーンショット解析でページ品質を自動チェックする仕組みも導入しています。PSI回帰検知スクリプトによる継続的なパフォーマンス監視も行っています。

技術スタック

領域	技術
フレームワーク	Astro 5 + MDX
スタイリング	SCSS（BEM / FLOCSS）
ホスティング	AWS Amplify Hosting
バックエンド	AWS Lambda + API Gateway（SAM）
テスト	Playwright
AI コーディング	Claude Code（Anthropic）
AI 画像生成	GPT Image 1（OpenAI）
AI 分類	Claude API

今後について

今後もAI技術を積極的に活用しながらコンテンツの拡充・改善を続け、お客様にとってより価値のある情報発信を行ってまいります。

ご不明な点やご要望がございましたら、お気軽にお問い合わせください。