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

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

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

リニューアルのポイント

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

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

お悩み別ページの新設

「ゼロトラストを始めたい」「生成AIのセキュリティが不安」「Appleデバイスの管理を効率化したい」など、お客様が抱える具体的な課題からソリューションにたどり着けるお悩み別ページを新設しました。

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

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

お問い合わせ体験の向上

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

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

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

AI駆動の開発プロセス

サイト全体で約49,000行・279ファイルのソースコード、109ページのHTMLを生成していますが、その大部分をClaude Code（Anthropic社のAIコーディングツール）によって実装しました。Astroコンポーネント、SCSSスタイリング、MDXコンテンツファイル、TypeScriptユーティリティに至るまで、AIがコードを書き、人間がレビュー・ディレクションするワークフローで開発を進めています。

AI画像生成

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

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

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

品質管理もAIで

Playwrightによるビジュアルリグレッションテスト（Desktop・Tablet・Mobile の3デバイス）に加え、Claude Visionによるスクリーンショット解析でページ品質を自動チェックする仕組みも導入しています。

技術スタック

領域	技術
フレームワーク	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技術を積極的に活用しながらコンテンツの拡充・改善を続け、お客様にとってより価値のある情報発信を行ってまいります。

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