「推活堂様」ECサイト制作

薬局発の推し活サポートブランドとして新たにスタートされた推活堂様のECサイトを制作させていただきました。

推活堂様は、地域に根ざした薬局（株式会社Fiocco様）が運営されるブランドで、お薬手帳をはじめとした”元気で推し続けるための道具”を企画・販売されています。

今回のサイトは、もともとEC-CUBEで構築されていた既存のECサイトを、セキュリティ面の強化を目的にリニューアルするというプロジェクトでした。

構成：WordPress＋Shopifyのハイブリッド構成

今回のリニューアルでの最大のポイントは、WordPressとShopify（スタータープラン）を組み合わせたハイブリッド構成を採用したことです。

• Shopify側：商品管理・在庫管理・顧客管理・決済処理を担当
• WordPress側：サイトのデザイン・ブランド表現・ユーザーが閲覧するすべてのページを担当

ユーザーが見る「表側」はすべてWordPressで構築し、ブランドイメージに沿った自由度の高いデザインを実現。

一方、「裏側」となる商品情報・受注・顧客情報の管理はShopifyに集約することで、セキュリティ面の信頼性と運用面の効率性を両立させました。

EC-CUBEでの自社運用は、プラグインのアップデートやセキュリティパッチの適用、サーバー管理などの負担が大きく、クレジットカード情報を含む個人情報を扱うECサイトとしてはリスクと運用コストの両面で課題がありました。

今回の構成に切り替えることで、決済・顧客データの保持はShopifyの堅牢な環境に任せ、サイト表現の自由度はWordPressで確保するという、運営側にとって最も安心で柔軟な形を実現しています。

Shopifyのスタータープランを採用することで、フル機能のECストアを立ち上げるよりもコストを抑えつつ、必要十分な販売・決済機能を確保。WordPress側で作り込んだ商品ページから、Shopifyのチェックアウト機能にシームレスに繋ぐ運用設計です。

トップページ

URL:https://oshikatsudo.fiocco.co.jp/

トップページは、推活堂様のブランドイメージをひと目で伝えつつ、訪問者が目的の商品へすぐに辿り着けるよう、以下のセクション構成で整理しています。

• メインビジュアル（ブランドロゴ＋コンセプトコピー）
• New Items 新着商品
• Note お薬手帳
• Goods 実用的推し活グッズ
• Like a Dragon 龍が如く
• Concept 推活堂の想い

「推し活を元気に楽しむための健康サポートを提供します。」というコピーを軸に、推し活グッズと健康管理の意外で温かみのある組み合わせが伝わるトーンに仕上げました。

商品カテゴリーごとにセクションを分け、「お薬手帳」「龍が如く」などコラボ商品・オリジナル商品がそれぞれ埋もれずに見つけられる構成にしています。

理念ページ

URL:https://oshikatsudo.fiocco.co.jp/concept/

「薬局から生まれた、推し活サポートブランド。」というメッセージを掲げた理念ページでは、推活堂様の世界観と提供価値を丁寧にお伝えしています。

ページ構成は以下の通りです。

• 「かわいい」だけで終わらせない、ブランドの立ち上げストーリー
• 推し活と健康管理が自然に共存する社会へ、という未来像
• 推活堂が大切にしている4つの価値

また、「推活堂が大切にしていること」のセクションでは、以下の4つの価値を専用アイコン付きで視覚的にわかりやすく整理して掲載しました。

• 薬局発の信頼性
• 実用性を最優先
• もしもの時に役立つ設計
• 無理なく続けられる健康習慣

ページの最後には「元気で、推し続けるために。」というブランドメッセージで締めくくり、読み終えた時に推活堂様の想いが強く印象に残る構成です。

商品一覧ページ

URL:https://oshikatsudo.fiocco.co.jp/list/

商品一覧ページでは、現在販売中のすべての商品をひと目で比較・選択できるレイアウトで整理しました。

商品画像・商品名・カテゴリータグをカード形式で表示し、ユーザーが直感的に商品を探せる構成です。

ページ上部には、以下のような購入前に知っておきたい情報を共通表示しています。

• 表示価格はすべて税込
• 送料は全国一律500円（税込）
• 税込5,000円以上のお買い上げで送料無料

購入検討時に気になる情報を最初に提示することで、ユーザーの迷いを減らし、スムーズな購買体験へと繋げています。

ヘッダーメニューの「商品一覧」からは、カテゴリー別の絞り込み（お薬手帳／龍が如く など）にもアクセスでき、推活堂様の今後の商品ラインナップ拡大にも柔軟に対応できる設計です。

商品ページ

URL（例）：声優おくすりてちょう 中島由貴Ver

個別の商品ページは、WordPress側でブランドトーンに沿った見やすいレイアウトで構築。商品画像・商品名・カテゴリー・価格情報を明確に配置し、そこからShopifyのチェックアウト機能へシームレスに繋ぐ導線を設置しています。

ユーザー視点では、一見すると通常のECサイトの商品ページと同じ操作感。裏側ではShopifyが受注・決済・在庫連携を担っているため、推活堂様側は商品を増やす・在庫を更新するといった管理作業をShopify管理画面で一元的に行える運用です。

また、商品ページ下部にも「商品一覧」への導線と送料・価格に関する共通情報を表示し、他の商品も合わせて購入していただけるような誘導を意識しました。

レスポンシブ対応はもちろん、既存サイトからの切り替えによるSEO評価への影響を最小限に抑える配慮、商品追加・更新のしやすさ、運用負荷の軽減など、長く安心してご運営いただけるよう細部まで配慮して設計しました。

今後も、推活堂様が「推し活と健康管理が自然に共存する社会」を実現されていくための基盤として、公開後の運用・保守・機能追加も含めて引き続きサポートしてまいります。