かえる薬局コーポレートサイト
薬剤師がClaudeと作った、いま見ているこのサイト
- Year
- 2026
- Role
- 企画・設計・実装・運用
- Duration
- 実作業 約2週間
- Status
- 本番運用中
Background
背景・課題
千葉県柏市・かえる薬局のオーナー薬剤師として、自店舗の公式ウェブサイトを構築する必要がありました。一般的にWeb制作会社に依頼すると30〜100万円・期間2-3ヶ月かかるため、「AIと一緒に作れば0円・2週間でできるのではないか」を実証すべく着手。
目標は2つ。①薬局HPとして地域住民に十分な情報を届けること。②同時にこのサイト自体がAIクリエイター営業のショーケースになること。
Process
制作プロセス
- 01
Day 1：プロジェクト初期化
create-next-app で Next.js 16 プロジェクト立ち上げ。Tailwind CSS v4 統合。Noto Sans JP（後にHiragino優先のシステムフォントスタックに変更）でレイアウト整備。
- 02
Day 2-3：全ページ骨組み
トップ・店舗紹介・サービス・スタッフ・アクセス・FAQ・お知らせ・お問い合わせ・プライバシー・特商法の10ページを骨組み実装。`src/lib/site-config.ts` にNAP情報を集約。
- 03
Day 4-5：お問い合わせフォーム
React Hook Form + Zod で型安全フォーム。Resend API で送信。Cloudflare Turnstile でbot対策。`.dev.vars` で環境変数を分離。
- 04
Day 6：お知らせシステム
Markdown ファイルから自前パーサで HTML 変換。`src/content/news/*.md` に置けば自動で一覧・詳細ページ生成。
- 05
Day 7-8：Cloudflare Workers 統合
OpenNext で Next.js を Cloudflare Workers にデプロイ。`wrangler.jsonc` 設定。本番Secrets管理。
- 06
Day 9-10：editorial風デザイン化
Anthropic.com にインスパイアされた warm cream + Hiragino + asymmetric hero へリライト。アバター（リベシティ「なかがみ」イラスト）を大写しで配置。
- 07
Day 11：AIクリエイター部門ページ追加
`/ai-creator` 新設。「薬局HPのオーナー＝AIクリエイター」の二軸を1サイトで両立。営業先送付時のメタ証明に。
- 08
Day 12：HoverAvatar 実装
なかがみアバターをマウスホバーで♡版/お酒版にランダム切替するクライアントコンポーネント。useEffectで代替画像をプリロードしチラつき回避。
- 09
Day 13：公式LINE 導線追加
オンライン薬局窓口セクションを新設。LINE公式アカウントへの直接誘導ボタン。
- 10
Day 14：カスタムドメイン割り当て
`kaeru-yakkyoku.com` を Cloudflare Workers に紐付け。`wrangler.jsonc` の `routes: custom_domain` で自動DNS・SSL証明書発行。
Tech Highlights
技術的なポイント
システムフォント優先
Webフォント読み込みを廃止。-apple-system/Hiragino Sans を最優先するスタックに統一。OSネイティブの「いい感じ」のレンダリングをそのまま活用、初回読み込み速度も改善。
全ページStatic Generation
問い合わせAPI以外の全11ページがStatic Generation。Cloudflare Workers のEdge配信で世界中どこでも数十msで応答。
ホバー時の代替画像プリロード
useEffect で代替画像3点をブラウザキャッシュへ事前読み込み。初回ホバー時の白フラッシュをゼロに。
Editorial調デザイン
stone-50 ベースのwarm cream、Hiragino sans、罫線で仕切るgridカード、3°回転のステッカー、英語kicker。Anthropic.com・&Premium誌・Linear等のeditorial言語を取り入れ、テンプレ感を排除。
Stack
- Next.js 16
- React 19
- TypeScript (strict)
- Tailwind CSS v4
- Cloudflare Workers
- OpenNext
- Resend
- Cloudflare Turnstile
- React Hook Form
- Zod
Metrics
成果・指標
- 制作期間
- 実作業 14日（仕様確定〜本番デプロイ）
- 制作コスト
- ¥0（自己制作・Cloudflare無料枠・Resend無料枠内）
- ランニングコスト
- ほぼ¥0/月（CFのfree tier）
- ページ数
- 全11ページ（薬局HP10 + AIクリエイターポートフォリオ1）
Lessons
学んだこと
- AIに「コードを書かせる」より「プランを共有して段階的に詰める」のほうが結果的に早い。仕様の不確定さがバグを増やす。
- 「テンプレ感を消す」のは最終5%の作業に効く。フォント・色・余白・微妙な傾き、これらの積み重ねが「AIで作った」と「自分の手作り」の境界線。
- カスタムドメインは事前にCloudflareへNS委任しておけば、wrangler.jsoncの`routes`に書くだけで自動でAレコード+SSL証明書が発行される。手作業ゼロ。
- Resend API はサインアップから5分で送信可能。月3000通まで無料。中小ビジネスのお問い合わせフォームには十分。