EMIEL

WEB SITE

デザイン力とフロントエンド実装力を伸ばすことを目的に、個人で企画から実装まで一貫して取り組むレビュー日誌サイトを制作しました。
題材は、自分自身が大好きな某青と白の乳酸菌系飲料へのリスペクトを込めつつ、著作権・商標に触れないよう「エミエル」という完全に架空の飲料に置き換え、ファン視点の日記帳としてゼロから世界観を構築。
水色（#7aa9d9）と白〜紙色（#f0eee9）を基調に、手書きフォントとしろくまマスコット・吹き出し・雲・ハート・四点星などの装飾を組み合わせ、かわいさと懐かしさのある日誌トンマナに仕上げました。

OVERVIEW

架空の飲料「エミエル」を題材にした、創作世界観を持つレビュー日誌サイトです。Home / レビュー一覧 / レビュー詳細 / ランキング / アーカイブ / About / Contact など 7 つの主要ページで構成し、フィクションのフレーバーレビューを日記帳のトンマナで展開します。
Astro 5 のアイランドアーキテクチャによる部分ハイドレーション（フィルタ・ナビゲーション等の対話 UI のみ React 18 で実装、それ以外は静的 HTML）と、Astro Content Collections による型安全な Markdown / JSON 記事管理を採用。配信は Cloudflare Workers Static Assets + 独自 fetch handler のハイブリッド構成で、Contact フォームは Discord Webhook と連携しています。
wrangler.jsonc による Infrastructure as Code、GitHub Actions の 2 段階 CI/CD（PR build 検証 / main 自動デプロイ）、7 本の ADR（Architecture Decision Records）で設計判断を可視化しながら運用しています。

主な実装内容

Astro 5 アイランドアーキテクチャによる部分ハイドレーション（フィルタ・ナビゲーション等の対話 UI のみ React で実装、それ以外は静的 HTML）
Astro Content Collections による Markdown / JSON ベースのレビュー記事管理（型安全な content schema を Zod 風 API で定義）
Cloudflare Workers Static Assets + 独自 fetch handler のハイブリッド構成（静的アセット配信 + /api/contact を Worker として実装）
Discord Webhook 連携 Contact フォーム（honeypot + バリデーション + Cloudflare Worker secret 経由で webhook URL 管理）
Infrastructure as Code: wrangler.jsonc でデプロイ設定をリポ管理、サブドメイン・assets binding・observability を宣言的に
2 段階 CI/CD パイプライン（GitHub Actions）: PR で build 検証、main マージで Cloudflare Workers へ自動デプロイ
ADR（Architecture Decision Records）による設計判断の可視化（ブランド方針転換・スタック選定・実装ソース定義など 7 本）
完全オリジナルのフィクションコンテンツとレビュー記事、自作 SVG イラスト・キャラクター・装飾

SCREENS

実装画面のスクリーンショット。クリックで拡大表示。

Desktop 8 枚

Mobile 8 枚