01 制作概要 架空のBean to Barクラフトチョコレート専門店「菓刻(KAKOKU)」のECサイト構築。デザインコンセプトは「菓子能面」——能舞台の“間”と所作を借りた、静謐な和モダンECです。 Dawn 15.4.1をベースに61本のカスタムセクションを実装し、産地・所作・焙煎連載といったコンテンツをメタオブジェクトでデータ駆動化しました。 ※あくまでデモサイトのため作成していないページや画像の設置箇所に違和感あります。 02 こだわりポイント 1. メタオブジェクト駆動の「編集型EC」 産地・所作・焙煎連載・ギフトガイドの4種メタオブジェクト+48のメタフィールド定義で、「今月の演目」など雑誌のような連載コンテンツをすべて管理画面から更新できる構造にしました。 2. 5軸フレーバーレーダー 甘さ・酸味・苦味・焙煎・余韻の5軸チャートをライブラリ不使用のSVGで描画。商品ごとのメタフィールドから自動生成されます。 3. AIエージェント協業ワークフロー Claude(設計・データ構築)× Codex(実装)× ChatGPT(画像生成)の3エージェント分業を設計し、人間はディレクションと品質管理に集中。約1ヶ月で全工程を完走しました。 03 技術メモ Dawn 15.4.1ベースですが、主要ページは61本のカスタムセクションでほぼフルスクラッチ。WCAG 2.2 AA準拠のスタイルガイドを先に固め、CSS変数で全ページの色・タイポを統一しています。 04 プロセス 課題・背景 「世界観で売る」高単価ECへの挑戦 板チョコ1枚¥1,800〜という価格帯を成立させるため、「速い・派手・煽る」ECの真逆をいく静謐なUIで価格の説得力を作る必要がありました。同時に、設計から実装まで一人で回すため、AIエージェントの分業体制そのものを設計対象としました。 設計・判断 ECを「編集媒体」として設計 ISSUE/VOL/Batch IDといった編集記号、毎月更新される「今月の演目」連載により、訪問理由が更新され続ける構造に。コンテンツはすべてメタオブジェクトへ正規化し、デザインとデータ更新を完全分離しました。 実装・構築 縦組み・朱印・橋掛かりの斜線をLiquid+CSSのみで実装 能舞台的なレイアウトをライブラリなしで構築。実装はCodexへハンドオフし、Claudeのレビュー→修正指示のループで品質を担保。商品・モック画像はChatGPT(gpt-image-2)で生成しています。 成果・反響 設計〜データ投入〜実装〜検証まで約1ヶ月で完走。4種のメタオブジェクトと48のメタフィールド定義により「世界観の表現」と「データ駆動の運用性」を両立。AI協業開発の実証ケースとなりました。 05 UIギャラリー