2015年7月27日
Zen Cart ECサイト構築事例:「E-3 (イースリー)ショップ)」様Webサイト
こんにちは,ディレクターの八木です。
今回は,アークウェブでECショップ構築のお手伝いをさせていただいた「E-3 ショップ (イースリーショップ)」様のWebサイトをご紹介します。
- E-3 ショップ http://www.e-3shop.com
オープンソースで実績豊富なZen Cartで構築
E-3ショップはイースリーさまが運営される,フットボールに特化したセレクトショップです。 オープンソースのECソフト「Zen Cart」で構築されています。
弊社は過去に,Movable Type による ジュニアサッカー(少年サッカー)の保護者向け情報サイト「サカイク」,フットボール指導者のためのWebメディア「COACHUNITED 」 サイトの構築をお手伝いさせていただいた縁で,今回のショップ構築を担当させていただくことになりました。
要件:個々の商品ページを独立サイト風に丁寧につくりこみたい
キックオフ時のご要望として,商品ページをひとつひとつ個別サイトのように丁寧に作りこみたい、有名サイト「ほぼ日」と「ほぼ日ストア」の関係のようなイメージでサカイク(本サイト)と商品ページが密に連携し,ランディングページとしても成り立つような使い方をしたいというものがありました。 これに応えるには,ECソフトが生成する定型の商品詳細ページではやや力不足です。
一方で,全ての商品にパワーをかけられるわけではないため,主力商品以外は簡単に商品ページが生成できるようなっていて欲しいという要件もありました。
1番目については,特集ページやブログ記事で商品を紹介し,そこからショップ内の商品詳細ページに誘導する方法もありますが,1クッション余分な遷移を挟むことになります。また,ショップの商品情報と前段のページはデータ的に連携していないので,商品価格や商品属性に変更があった場合は,紹介ページをいちいち探して修整する必要があり厄介です。
商品情報を連携するためのAPIを開発
そこで,Zen Cartに商品情報API機能を追加して,簡単なJavaScriptのコードを埋め込めば,任意のページに商品情報や「カートに追加」ボタンを追加できるような仕組みを提供することにしました。下図はキックオフ当初に手書きで書いた全体構想図です。ヘタな絵でスミマセン(><)。
これを使うと,サイト内・サイト外を問わず、好きなページに任意の商品の情報や購入ボタン,ショップのログインボタンなどを表示することができます。ページのURLは自由に決められますからランディングページとして使う上でも都合が良いはず。商品情報や価格はショップのデータベースを参照しているので,ショップ側で商品情報を変更したら埋め込んだ先のページにも即時反映されます。
任意ページを,商品詳細ページとして指定可能に
さらに,こうして作成したページを,ショップの詳細詳細ページとして指定できるようにしました。 商品によっては通常の定型レイアウトの商品詳細ページで十分なものもありますから,デフォルトはZen Cartが生成する定型の商品詳細ページです。しかし特に力を入れたい商品については,前述のAPIを活用して作り込んだ紹介ページを用意し,これを商品詳細ページとして使えるわけです。
一例:
「モチベーションを上げたい」カテゴリ に並ぶ商品を例にとると,1番上の 「親子で学ぶ サッカー世界図鑑【Jリーグプレーヤーズガイド付き】 は定型レイアウトの商品詳細ページ,2番目の モダンフットボール(特典DVD付き:先着300名) は,API利用の自由レイアウトページ が使われています。
外部ページを利用した商品詳細(カートへボタンは外部ページ側のCSSで自由な表現)
このような機能を搭載してスタートし,約半年が過ぎました。 運営の中でいただくご要望に応えていき,さらによいショップにしていくお手伝いを続けていきたいと思います。
おまけ
イースリーショップの商品で,八木が実際に購入して使っているイチオシ商品が「考えてうまくなる しつもんサッカーカレンダー」です。 子ども向けのかわいいデザインなのに,"なりたい自分"をイメージし,そうなるための具体的な行動を決めて毎日実践する(記録する)スキームが身につく,数ある自己啓発本も真っ青な すご腕カレンダーなんですね。たまたま見つけて半分冗談で購入したのですが,5月以来3ヶ月近く,Myダイエットカレンダーとして毎日お世話になっており,月末になると大まじめで「ご褒美!シール」をペタっと貼っては一人ニヤニヤしています (^^)。
八木のおすすめ 「考えてうまくなる しつもんサッカーカレンダー」
↑宣伝費貰ってません^^;; マジおすすめです。お子さんに。。。でも良いけど, ご自身に是非どうぞっww
E-3ショップ(イースリーショップ) 構築データ
E-3 ショップ http://www.e-3shop.com
- ベースパッケージ: Zen Cartハイエンド版
- 制作期間: 2ヶ月
- 言語: 日本語
- 決済方法: クレジットカード決済/代引き/銀行振込
- 対応デバイス: PC/タブレット/スマートフォン (レスポンシブWebデザイン)
- ショップ機能: 会員登録,ポイント付与
- 他システム連携: 独自APIにより,任意のランディングページに商品情報・カートボタンを追加可能
カテゴリー: Zen Cart(オンラインショップ構築)
タグ: オンラインショップ , ECサイト構築 , Zen Cart
« 前の記事:Zen Cartカスタマイズ:商品情報や購入ボタンをランディングページに埋め込むAPIモジュール開発
» 次の記事:Movable Type用会員制サイト構築プラグイン「A-Member」デモサイトが新しくなりました
アークウェブの本
Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む
新着はてブ
カテゴリー
- Shopify(ショピファイ)オンラインショップ構築
- NGO・NPO向け情報
- スマートフォン
- だれもが使えるウェブコンクール
- mixiアプリ
- OpenSocial (システム開発)
- アークウェブのCSR
- A-Form, A-Member, A-Reserve(MTプラグイン)
- Ruby on Rails(システム開発)
- necoったー
- Miqqle
- WebSig24/7
- ecoったー
- ビッグイシュー(The Big Issue)
- CSR(企業の社会的責任)
- マッシュアップ
- RIA (システム開発)
- セキュリティ(システム開発)
- 唐松(アクセス解析)
- Ajax (システム開発)
- テスト(システム開発)
- データベース
- PukiWiki
- Web 2.0
- SEO・サーチエンジン最適化
- XP・アジャイル(システム開発)
- Web・ITニュースクリップ
- Webアクセシビリティ
- Webデザイン
- SEM・サーチエンジン広告
- Webユーザビリティ
- CMS・MovableType
- Zen Cart(オンラインショップ構築)
- Snippy(SNS・ソーシャルブックマーク)
- アークウェブ
- オープンソース
- CMS(コンテンツマネジメント・システム)
- Webマーケティング
- AMP
- SNS