MOGU

MOGU（モグ）

※ポートフォリオに記載のURLより実際にご覧ください。

https://coconala.com/mypage/user/portfolios

■概要

MOGU（モグ） は、忙しい平日の夜でも「ちゃんと食べた」と感じられることをテーマにした、サブスクリプション型ミールキットECのデモサイトです。

1商品・定期購入モデルを前提に、TOPページと商品ページ（PDP）それぞれに明確な役割を持たせ、LPを別途作らず、商品ページ自体で購入判断まで完結する構成としています。

テーマは Horizon をベースに、ミニマルで誠実な印象を軸としながら、画像マーキーや追従CTAなどの動きのあるセクションを取り入れ、「健康的・でも少し楽しい」体験設計を意識しました。

※本サイトは架空ブランドのデモサイトです。

■担当範囲

・Shopifyストア構築（Horizonテーマカスタム）

・ブランド設計（コンセプト／トーン&マナー）

・デザインディレクション（ムードボード、カラー、タイポグラフィ）

・オリジナルセクション開発（Liquid + CSS）

・商品・ビジュアル画像生成（Canva AI）

・商品データ／定期購入設計

・サブスク／レビューアプリ導入およびCSS調整

・SEOを考慮したテキスト設計（アコーディオン構成）

■ブランド・デザイン設計

ブランドコンセプトは「ちゃんと食べたい。でも、がんばりすぎたくない。」

在宅ワーク後や少し疲れた日の夜に、無理なく“ちゃんとした食事”をとれる選択肢として設計しています。白・黒・グレーを基調としたミニマルな配色に、ビタミンカラーをアクセントとして加え、30〜40代女性にとって心地よい距離感を意識しました。

■技術的ポイント

・TOP / PDP の役割分離による情報設計

・画像マーキー・フローティングボタンなどのオリジナルセクション実装

・1商品サブスクに最適化したLPライクな商品ページ設計

・定期購入アプリ／レビューアプリを導入し、CSSで世界観を統一

・SEOを考慮し、詳細情報はアコーディオン内に整理

■制作期間

約4〜5日間

■ご相談について

・サブスクECを立ち上げたい

・Shopifyで「売るだけでなく、伝わる」サイトを作りたい

・デザインから実装までまとめて任せたい

といったご要望がありましたら、お気軽にご相談ください。