Webサイト改善の施策事例
- ECサイト改善
Shopify標準機能を超えた商品データ構造の再設計とメタフィールド活用
概要と担当範囲
D2Cブランドにおいて商品スペック（素材・寸法・注意事項など）をすべてHTML直書きで管理しており、表記揺れ・表示崩れが多発し、サイト内検索のフィルタリングにもデータを活用できていない状況に対する改善を行った事例です。
当社はShopifyの標準機能を拡張し、メタフィールドを活用した独自のデータ構造設計とLiquidによるフロントエンド実装を担当しました。
- EC運用改善
- UI／UX設計
課題背景
商品情報の管理と表示において、以下の課題が発生していました。
- 商品スペック（素材・寸法・洗濯表示等）をすべて「商品説明文」のHTMLに手入力していた
- 担当者ごとの表記揺れやフォーマットの不統一が常態化
これはデザインの問題ではなく、Shopify管理画面側でのデータが未定義であることに起因する問題でした。
改善の考え方
商品情報を「自由記述のHTMLテキスト」から「構造化されたデータ」に移行することで、入力側（運用効率）と出力側（ユーザー体験）の両方を同時に改善するアプローチを取りました。
当社の関与領域
- 商品データ構造化設計
- Liquid開発（フロントエンド実装）
- UI設計
商品データの構造化と、それに基づくフロントエンド実装のため、以下の領域に関与しました。
- 商品に必要な情報の洗い出しと分類
- 数十項目のカスタムメタフィールド定義（サイズ・素材・説明文等）
- HTMLの知識不要でフォーム入力だけで登録できる環境の構築
- メタフィールドデータを自動的にデザインされた状態で出力するLiquidテンプレートの開発
- Shopifyフィルタリング機能と連携した動的な絞り込み検索の実装
Shopifyの標準機能内で妥協するのではなく、標準機能を拡張利用したメタフィールドによる独自設計で課題を解決しました。
主な取り組み
- 約20項目のカスタムメタフィールドの定義と入力規格の策定
- フォーム入力だけで統一フォーマットの商品ページが自動生成される仕組みの構築
- 「素材別」「サイズ別」「用途別」などの動的絞り込み検索の実装
- 表記揺れ・フォーマット不統一を構造的に防止する入力設計
データ構造の整備は、今後の機能追加やマーケティング施策の基盤としても活用できる設計です。
変化・成果
- 1商品あたりの登録時間が大幅に短縮された
- HTMLが書ける担当者しか更新できなかった状態から、誰でも更新できる体制へ移行
- 表記揺れ・表示崩れが構造的に解消された
- 商品説明項目の多様化により、商品ごとの細かな違いや特徴を表示することが可能となり、UX改善を実現
Tips
お役立ち情報も発信しています 一覧はこちら
-
BtoB製造業がホームページから問い合わせを増やすために必要な5つのコンテンツを伴走支援会社がご紹介します
View more -
テクニカルSEOとコンテンツSEOの違いとは？現場目線での施策や優先度について所感を交え解説します
View more -
【担当者必見】自社ECサイトに最適なコンサルティング会社とは？運用代行や支援導入で得られる3つの成果と失敗しない選び方
View more -
ECサイトの売上改善法とは？商品数が多い総合通販型で有効な分析方法と施策を解説します
View more -
SEO対策とは？主な種類のご紹介と、同時に行うと効果的な施策をご紹介します
View more -
通販サイト（ECサイト）の種類と特徴について、ビジネスモデル／販売形態／システム構築にわけて解説します
View more