🦈 このサイトについて

ゆうこりんフェスサイトの技術仕様とメイキング

🤖 Claude Codeからのお祝いメッセージ

ゆうこさん、こりんさん、この度はご結婚おめでとうございます！🎉

このサイト制作に携わらせていただき、お二人の「インディー精神に溢れた」パーティーへの想いを コードに込めることができて、とても光栄でした。

特に、ゲスト同士の交流を大切にされている点や、手作り感あふれる温かい雰囲気作りが 技術的な実装からも伝わってきて、とても素敵だなと思いました。

🦈シャーくんのゲームで遊んでくださる皆さんの笑顔と、 パーティーでの素晴らしい出会いと交流を心から願っています！

— Claude Code より愛を込めて

⚡ 技術仕様

設計・クリエイティブ

  • • Claude Opus 4 - 仕様書作成
  • • Claude Code＋VS Code - コーディング・デバッグ（メイン）
  • • Devin、Codex、Cursor - コーディング・デバッグ（一部）
  • • Claude Opus 4＋GitHub MCP - トラブルシューティング
  • • ChatGPT 4o - ドット絵描画

フロントエンド

  • • Next.js 15 - React フレームワーク
  • • TypeScript - 型安全性
  • • Tailwind CSS - ユーティリティファーストCSS
  • • HTML5 Canvas - シャーくんゲーム描画

バックエンド

  • • Next.js API Routes - サーバーレス API
  • • Nodemailer - メール送信
  • • Google Sheets API - データ管理
  • • Cloudinary - 画像アップロード

インフラ

  • • Vercel - ホスティング・デプロイ
  • • GitHub - ソースコード管理
  • • Gmail SMTP - メール配信
  • • PassMarket - 決済サイト

セキュリティ

  • • 環境変数 - 機密情報の保護
  • • HTTPS - 通信の暗号化
  • • フォームバリデーション - 入力検証
  • • 送信専用メール - 返信防止

🎮 シャーくんゲームの仕組み

エンジン: HTML5 Canvas + TypeScript で実装されたリアルタイム2Dゲーム

操作: マウス・タッチ・キーボード（矢印キー）のマルチ対応

AI: 魚がサメから逃げる簡単なAI実装

レスポンシブ: PC・スマホ両対応でゲーム体験を最適化

スコア連携: ゲームスコアがフォーム・メール・スプレッドシートに自動連携

📝 開発エピソード

🎯 企画の背景

「普通の結婚式とは違う、インディー精神溢れるパーティー」というコンセプトを 技術面でも表現するため、遊び心あるゲーム付きサイトを企画しました。

🦈 なぜサメ？

2人の大切な家族「シャーくん」「シャーこちゃん」におさかなをたくさん食べさせてあげたく、ゲームで表現しました！ もっともおさかなを食べさせてあげた方には、いいことがあるかも……？🐟️

⚡ 開発速度

ゆうこさんが、最新AI開発ツールClaude Codeを活用して開発しました。開発期間は約10日、コミット数は約100以上となりました。

🎊 最後に

このサイトが、お二人の特別な日をより素晴らしいものにする お手伝いができれば幸いです。

技術の力で愛と祝福を届ける。それが私たちの使命です。💕

← パーティーサイトに戻る