草壁医院（デモサイト）

概要

医療クリニックのコーポレートサイトを、AIコーディング（ノーコーディング）のみでフルスクラッチ制作しました。設計から実装、外部サービス連携、レスポンシブ対応まで、コードを直接書かずAIへの指示のみで完成させた検証プロジェクトです。

工夫したポイント

• 参考サイトのホバー時の挙動を、画像からの推測ではなく実際のCSS/DOMを解析して再現するなど、細部の動きまで忠実に作り込んだ
• お問い合わせフォームは、バックエンドを持たない構成でありながら「送信内容の受付→院内へのメール通知→送信者への自動返信」までを実現
• スマホとPCでナビゲーションの操作性が異なる点を考慮し、それぞれに最適なUI（PC：ホバーで開くサイドタブ／スマホ：画面下固定の3ボタン）を個別に設計
• 外部CMS（お知らせ機能）は、未設定の状態でも表示が崩れないようダミーデータへの自動フォールバックを実装し、開発途中でも常に確認できる状態を維持

担当範囲

要件整理・デザイン方向性の指示、AIへの実装指示、外部サービス（GitHub・Netlify・Resend）の連携設定、動作確認・品質チェックを担当しました。

制作方法

AIコーディング（ノーコーディング）によるフルスクラッチ制作

使用技術

制作環境・開発支援

• Claude Code（Sonnet 5）

フレームワーク

• Astro（静的サイトジェネレーター）
• Sass（SCSS）

主要ライブラリ

• Swiper.js — メインビジュアルスライダー

外部サービス連携

• microCMS — お知らせ機能
• Netlify — ホスティング・自動デプロイ・フォーム受付
• Netlify Functions — フォーム送信時の自動返信処理
• Resend — 自動返信メール送信
• GitHub — ソースコード管理