くまんちゅ！公式通販サイト

キャラクターECを、“作品の入口”にする。

Overview

キャラクターグッズの通販サイトは、商品一覧だけでは世界観が平面的になりがちです。
本制作では、買い物導線そのものを「くまんちゅ！の旅」に置き換え、背景・キャラ・商品・カートが反応する“生きてるUI”として設計しました。

Challenge

課題は「かわいい」だけで終わらせず、通販サイトとして商品選択と購入導線を成立させること。
世界観演出を強めすぎると買いづらくなり、EC導線を優先しすぎると作品らしさが薄くなるため、演出と操作性のバランスが重要でした。

Solution

• PCでは左右固定UIを使い、ナビ・放送風PV・カートを常時見える状態に配置
• セクションごとに背景とサイドキャラクターを切り替え、ページ移動に“旅の変化”を持たせる
• 発見物システムで、商品以外にも回遊したくなる小さな遊びを追加
• 商品詳細モーダルとカート導線を、キャラクターのセリフや動きと連動させる

スマホECを土台に、PCでは体験を拡張。

Mobile-first Extension

基本構造は、商品を見て、選んで、カートへ進むスマホ向けEC導線をベースに設計しています。
そのうえでPC表示では、左右の固定ナビ・常時表示カート・背景変化・キャラクター演出を追加し、 画面の広さを活かした“拡張版の探索体験”として再構成しました。

• スマホでは、商品閲覧から購入導線までをシンプルに整理
• PCでは、左右の余白をナビ・PV・カート・キャラクター表示として活用
• 同じコンテンツを、画面幅に応じて「買いやすいEC」と「没入型の世界観UI」に切り替える
• SP/PCそれぞれで無理に同じ見た目にせず、端末ごとの役割に合わせて体験を最適化

Highlights

• セクションごとに変化する背景とキャラクターで、サイト全体を“旅の画面”として演出。
• 発見物ごとに4匹の解釈コメントが変わり、世界観への没入と再訪性を高める。
• カートイン時の動きや購入数に応じたセリフで、買い物中もキャラクターが寄り添う。
• マウス反応やサイドキャラのアクションで、UIに“生きている感じ”を加える。

Design

やわらかいクリーム色と遺跡のブラウン、探索感のあるオレンジを軸に、絵本のような親しみとゲームUIの楽しさを両立。
丸いボタン・淡いガラス感・キャラクターの表情を活かし、子ども向けにも大人向けにも見える“公式通販らしい安心感”を整えています。

Result

商品購入のためのECサイトに、キャラクター作品の世界観と探索体験を重ねることで、“見る・触る・買う”がひとつながりになる構成になりました。
グッズ販売だけでなく、作品やキャラクターへの愛着を深める公式サイトとして機能します。

Role & Deliverables

• 世界観設計：未来の遺跡を旅するキャラクターECとして全体設計
• UI設計：固定ナビ / サイドカート / 商品モーダル / 発見物システム
• 演出実装：背景遷移 / Rare演出 / カートアクション / キャラクター反応
• 制作：HTML / CSS / JavaScript