【CV達成27％⤴ 】月間80万人に読まれるオウンドメディア「データのじかん」サイト改善の裏側
ShopifyでのECサイト構築では、UI上で必要な機能をどう実装するかが鍵になります。
本記事では実際に制作した事例を元に、メタフィールドでのバリエーション制御、画像・価格の自動切替、検索/絞り込み、在庫・配送までの工夫した実装ポイントや手順を具体的に解説していきます。
みきFLOWという有料のテンプレートをカスタマイズしています。Shopifyは完全オリジナルで制作するケースは稀で、多くのサイトが元のテンプレートをカスタマイズする形で作られています。Shopifyでは商品ページが要になります。なぜなら検索や広告から最も着地しやすいページだからです。買いたい商品を迷わず選べるように、メタフィールドやバリエーションで選択肢を整理し、画像・価格の自動切替、タグ表示などデフォルトでは網羅できない、実装で工夫したを解説します。
小日向鉢と植物をセットとして購入できる点が一番の売りとしていて、選んだ植物に合わせて鉢は種類・カラーを選べるようにしています。
小日向鉢の種類を選択すると、同じ植物＋選んだ鉢の商品ページに遷移するようになっています。
小日向上記の鉢の種類選べるようになっている仕組みを、鉢の色にも応用しています。
小日向先ほどの商品メタフィールドで「カラーバリエーション」というものを作っていて、そこに鉢の種類ごとに存在するカラーを登録する仕組みを作っています。クライアントがこれまでのルールに基づいて登録してくれることで、この仕組みが成り立ちます。
小日向こちらは、商品登録ページのタグを利用しています。「MERIT_おしゃれな鉢とセット」というタグを商品に付けたら、表側の商品ページでそのタグに合わせた緑ボーダーのタグが出るように、システム側での制御を入れています。
小日向予め、日当たり/水やり用の画像アイコンを予め用意していて、分かりやすい名前でアプロードします。検索エリアは「探す→見つける」を最短化する心臓部。カテゴリ/価格スライダー/在庫絞り/スマホ最適化でノイズとゼロ件を減らし、回遊を意思決定へつなげてCVRと満足度を高めます。
小日向こちらはデフォルトではセレクトボックスですが、アプリ「Boost AI Search & Filter」を利用してチェックボックスにしています。
小日向こちらも、アプリ「Boost AI Search & Filter」を使って、デザインは独自にcss調整を行っています。
小日向今回はシステム側で無理やり出しました。こちらもアプリによっては、スマホではできない事等があるため、デザイン前に相談して決めていけると良いものができます。管理画面・システム側の設計は運用コストとミスを減らす土台になります。配送料設定・在庫連携・入力ルールの仕組み化などで管理しやすいECを実現します。
小日向「シンプルセット商品在庫連携｜お手軽セット商品管理の自動化」というアプリを利用しておこなっています。
小日向こちらは意外とデフォルトの配送設定で可能。
配送パターンを作って、そこに該当する商品を割り当てる、みたいなイメージ。
小日向こちらはFlowのテーマについていました。
テーマの選び方も重要。機能をつくるのは依頼したら予算もかかるため、やりたい機能が最初から入っているテーマをできるだけ選んだほうが良いと思います。弊社は、Shopify構築実績とノウハウとAIを活用し、テーマ選定〜要件定義、メタフィールド設計、アプリ連携、UI改善、速度最適化までで支援します。
データに基づく検証と自動最適化で、売上と運用効率の両立を実現。貴社の社内Shopify担当として伴走します。
「どのテーマを選ぶべき？」「在庫連携や配送設計に不安」「社内リソースが足りない」などのお悩みがあれば、KOHIMOTOまでお気軽にご相談ください✨
編集者：Miki Kohinata
学生時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。
INDEX
PICK UP