パッケージの箱をイメージした回転UIで商品の魅力を表現：ケンエレファント「手塚治虫キャラクターズ」特設サイト

ケンエレファント様の「手塚治虫キャラクターズ」特設サイトのWordPressでの構築・制作を担当しました。

手塚治虫キャラクターズ sofvi collection | ケンエレファント | 株式会社ケンエレファントから新ブランド、フィギュアシリーズ『手塚治虫キャラクターズ』が登場。ソフビ、ミニチュアトイなど。手塚治虫の生み出した様々なキャラクターを、ケンエレファント独自の切り口で立体化するプロジェクト。

株式会社ケンエレファントから新ブランド、フィギュアシリーズ『手塚治虫キャラクターズ』が登場。ソフビ、ミニチュアトイなど。手塚治虫の生み出した様々なキャラクター…

kenelephant.co.jp

株式会社ケンエレファントさまは、ミニチュアコレクション（カプセルトイ）の製造・販売を始め、ソフビ（ソフトビニール）製のフィギュアの製造・販売やサブカルチャー関連の書籍の出版など、多角的に、そして積極的に楽しいと思うものを追求している企業です。

「手塚治虫キャラクターズ」は、手塚治虫先生の作品をケンエレファントが新たな目線で再発信するプロジェクトです。

制作のポイント

• パッケージの箱をイメージした回転UIの実装
• スマホファーストデザイン且つ、PCでも魅力的な表示の実現
• お客さま自身でカスタマイズできるCMS機能の実装

主たるデザインはケンエレファントさまのデザイナーが担当し、mgnはケンエレファントさまと一緒に相談しながら、商品の魅力を最大限に伝えるUI・UXを設計し、パッケージの箱をイメージした回転するUIを実装しました。

パッケージの箱をイメージした回転UI

ケンエレファントさまからご提案いただいた「パッケージの箱が回転するイメージ」を基に、演出とユーザビリティのバランスを意識したUI設計を行いました。
まずプロトタイプを作成した後、ケンエレファント様とアニメーションの細部まで調整を重ね、商品の魅力を伝える独自性のあるページを完成させることができました。

スマホファーストかつ、PCでも魅力的なデザインの実現

SNSからの流入を基本とした想定ユーザーを考慮し、スマートフォンでの使用を最優先に考えたデザインを採用しました。
同時に、PCでも魅力的に見えるよう大画面での表示を活かした工夫を施し、商品の詳細をより分かりやすく表現しました。

お客さま自身でコンテンツをカスタマイズできるようCMS（WordPress）で実装

WordPressを採用したことで、当然お客様自身がページを追加し、画像やテキストを編集できるよう設計しています。
また、ページごとのキーカラーを商品に合わせて設定できる機能も追加し、商品ごとの個性を表現できるようにしました。