■ノンカフェイン・カフェインレス紅茶専門店 デモストア

■なぜこう作ったのか？（実務運用を見据えた設計意図）

<aside> 💡

課題意識

紅茶は「原材料・淹れ方・カフェイン量」など伝えるべき情報量が多い商材です。しかし、情報を並べすぎると世界観が崩れ、更新時に入力漏れや表記揺れが発生しやすくなります。

「美しいデザインの担保」と「クライアントの運用負荷軽減」を両立する仕組みを構築しました。

</aside>

① メタオブジェクト × メタフィールドによる「運用の自動化・ミス防止」

• 個別情報（原材料・原産国・保存方法など）： 商品ごとのメタフィールドで管理
• 共通情報（カフェイン量・形状など）： あらかじめメタオブジェクトでパーツ化
• 設計の狙い： 商品登録時にドロップダウンから選ぶだけで、フロントに「専用アイコン＋テキスト」が自動出力される構造に。クライアントが画像アップロードやテキスト入力を毎回行う手間と表記揺れを根本から防ぎます。

② テーマ「Horizon」の強みを活かしたテンプレートの出し分け

• 紅茶用テンプレート： 「香りと味わい」「淹れ方の目安」「原材料アコーディオン」を動的差し込み
• 雑貨（スプーン等）用テンプレート： 不要な項目を非表示にし、「サイズ・材質」のみをスッキリ表示
• 設計の狙い： ブロック単位で細かく制御できるHorizonの特性を活用。同一ストア内で異なるカテゴリを扱う際も、不要なダミー項目が出ず、購入者・運用者の双方が迷わない設計にしました。

③ ブランドの世界観を守る「引き算のUI設計」

• アイコンカード化： メイン選定基準である「カフェイン量」等はパッと見で直感的にわかるよう視覚化

  

• アコーディオン格納： 仕様や淹れ方は開閉式にし、初見の画面圧迫感を排除

  

• 商品詳細ページでの回遊性： 詳細ページ下部に「同じカフェイン量のコレクション」を連動させ、購入検討者の離脱を防止

  

■カスタマイズ：「タグ」を入れるだけで自由に色と文字が変わるラベル機能