SlideShare a Scribd company logo
西山 泰史(株式会社ジャクスタポジション)
2014.7.6 Sun. CSS Nite in SAPPORO, Vol.14 「選ばれるECサイト」
© 2014 Cart by halfrain
Webサイト制作に関わる
デザイナーのみなさん。
こんなショッピングカート、
作ってみました。
自己紹介
西山 泰史
にしやま やすふみ
株式会社ジャクスタポジション
札幌市在住のWebディレクター
創業10年目(法人1年目)
Movable Type でのサイト構築
そこそこ規模の大きいECサイトとか
三度の飯より食べることが好き
Movable Type ユーザーグループ
MT蝦夷
Webデザイナーのためのショッピングカート
SKELETON CART
http://skeleton.juxtaposition.jp/
!
Movable Typeの画像アップロード機能補助プラグイン
ImageUploadUtility
http://skeleton.juxtaposition.jp/image-upload-utility/
今日のミッション
SKELETON CARTを
使ってみたいと
思ってもらうこと
1. SKELETON CART?
2. 開発に至った理由
3. できること/できないこと
4. プラグインによる拡張
5. まとめ
SKELETON CART?
© 2010 Hysteria by Devensters
• PHPで作られたショッピングカート
• データベース不要(商品情報はCSV)
• HTMLテンプレート

(PHPとHTMLが分離=デザイン自由)
• 買取型(27,000円)、クレジット記載不要
• その名の通り「骨格だけ」のカート
インストール直後のHTML
詳しくはWebサイトで
http://skeleton.juxtaposition.jp
または「スケルトンカート」で検索♡
© 2011 65:365 by hermitsmoores
開発に至った理由
デザインを自由に変更したい
ASPの管理画面とか嫌だ
ドメイン変えたくない
PHPやCGIも触りたくない
理由①
Webサイトを運営することと
ECサイトで商品登録するのが
別作業なのがめんどうだった
理由②
※Movable Type/WordPressと
連携するカートが欲しかった
クレジット消したい
ライセンスがよくわからん
日本語でおk
理由③
つまり、自分が欲しかった
© 2010 how we roll by meltsley
できること/できないこと
できる
 基本的なことはだいたいできる
 スマートフォンへの対応OK

 便利な機能をプラグインで追加できる
できない
 商品ページ作成機能がない

 リアルタイムな在庫数表示ができない

 会員登録/管理機能がない
© 2009 Moustache May Twelth! by Brandon Cripps
無償配布のプラグインで
こんなこともできちゃいます
無償配布プラグインでこんなこともできます①
商品オプションごとに
価格を加算
例えば、オリジナルTシャツの販売サイト
素材/サイズ/プリントの位置など
基本価格に加算していくことができる
!
!
!
!
!
プラグインにオプション毎の加算額を書くだけ
無償配布プラグインでこんなこともできます②
都道府県 重量の送料設定
お米や飲料など、特に重たいものは、
お届け先だけじゃなく「重さ」によっても
送料が変わるケースが多い
!
しかも、配送業者と交渉できるので、
ECサイトごとに細かく送料が違う
送料をマトリクス表で設定可能にした
CSVなのでエクセルで作ってOK
無償配布プラグインでこんなこともできます③
MT/WPで商品管理
できる
 基本的なことはだいたいできる

 スマートフォンへの対応OK

 便利な機能をプラグインで追加できる
できない
 商品ページ作成機能がない

 リアルタイムな在庫数表示ができない

 会員登録/管理機能がない
通常、CSVで商品データを管理
プラグインを利用することで
MT/WPのDBを利用できるようにした
①ブログ記事を商品ページとして利用
②カスタムフィールドで
 在庫管理と在庫数の表示を実現
 →MTでも再構築不要!
③CMSとECの管理画面を1つにできる
④Webサイト構築のスキルを活用できる
⑤サイト運営にチカラを入れられる
今日紹介した以外にも
さまざまなプラグインあります
プラグインのほぼすべてが
ユーザーのニーズに応えて作ったもの
だから今後も増える...と思う
© 2009 dino kart by Jes
まとめ
SKELETON CARTのポイント
Webサイト制作会社が開発
初期設置は簡単3ステップ
HTMLテンプレートだから自由自在
プラグインで機能拡張可能
MT/WPで商品管理(管理画面が1つ)
もちろん試用版あります
まずはお試しください
ありがとうございました
西山 泰史(株式会社ジャクスタポジション)
2014.7.6 Sun CSS Nite in SAPPORO, Vol.14 「選ばれるECサイト」
Webサイト制作に関わるデザイナーのみなさん。
こんなショッピングカート、作ってみました。

More Related Content

What's hot

ゼロから始める雲車庫生活 Re: Life in a CloudGarage from zero.
ゼロから始める雲車庫生活 Re: Life in a CloudGarage from zero.ゼロから始める雲車庫生活 Re: Life in a CloudGarage from zero.
ゼロから始める雲車庫生活 Re: Life in a CloudGarage from zero.
Yasufumi Nishiyama
 
売上前年比122%達成、地方のウェブサイト制作会社を支えるMovableType.netの活用法
売上前年比122%達成、地方のウェブサイト制作会社を支えるMovableType.netの活用法売上前年比122%達成、地方のウェブサイト制作会社を支えるMovableType.netの活用法
売上前年比122%達成、地方のウェブサイト制作会社を支えるMovableType.netの活用法
Yasufumi Nishiyama
 
南実業会Webサイト開設について
南実業会Webサイト開設について南実業会Webサイト開設について
南実業会Webサイト開設について
Cherry Pie Web
 
お客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズお客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズ
Cherry Pie Web
 
サービス業から学んだコミュニケーションのコツ
サービス業から学んだコミュニケーションのコツサービス業から学んだコミュニケーションのコツ
サービス業から学んだコミュニケーションのコツ
Yumi Masaki
 
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディングディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディング
eriko yamada
 
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
Mariko Imamura
 
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Keisuke Imura
 
後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと
Yu Morita
 
独自Ecサイト立ち上げワンストップセミナー 0907
独自Ecサイト立ち上げワンストップセミナー 0907独自Ecサイト立ち上げワンストップセミナー 0907
独自Ecサイト立ち上げワンストップセミナー 0907
Makoto Nishimura
 
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
Masahiko Kawai
 
機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話
Yu Morita
 
自分のこれからについて語るときに僕の語ること Webディレクターのための弁証法入門-
自分のこれからについて語るときに僕の語ること  Webディレクターのための弁証法入門-自分のこれからについて語るときに僕の語ること  Webディレクターのための弁証法入門-
自分のこれからについて語るときに僕の語ること Webディレクターのための弁証法入門-
Hiroshi Kato
 
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイントWeb制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
高本 徹
 
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
Cherry Pie Web
 
concrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところconcrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところ
Cherry Pie Web
 
ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計
本間 和城
 
私をWordCampに巻き込んだ「しいたけ占い」
私をWordCampに巻き込んだ「しいたけ占い」私をWordCampに巻き込んだ「しいたけ占い」
私をWordCampに巻き込んだ「しいたけ占い」
Masahiko Kawai
 
Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)
Yasuhito Yabe
 
Webディレクション講座 - 初級編 -
Webディレクション講座  - 初級編 -Webディレクション講座  - 初級編 -
Webディレクション講座 - 初級編 -
Colorkrew
 

What's hot (20)

ゼロから始める雲車庫生活 Re: Life in a CloudGarage from zero.
ゼロから始める雲車庫生活 Re: Life in a CloudGarage from zero.ゼロから始める雲車庫生活 Re: Life in a CloudGarage from zero.
ゼロから始める雲車庫生活 Re: Life in a CloudGarage from zero.
 
売上前年比122%達成、地方のウェブサイト制作会社を支えるMovableType.netの活用法
売上前年比122%達成、地方のウェブサイト制作会社を支えるMovableType.netの活用法売上前年比122%達成、地方のウェブサイト制作会社を支えるMovableType.netの活用法
売上前年比122%達成、地方のウェブサイト制作会社を支えるMovableType.netの活用法
 
南実業会Webサイト開設について
南実業会Webサイト開設について南実業会Webサイト開設について
南実業会Webサイト開設について
 
お客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズお客様のための管理画面カスタマイズ
お客様のための管理画面カスタマイズ
 
サービス業から学んだコミュニケーションのコツ
サービス業から学んだコミュニケーションのコツサービス業から学んだコミュニケーションのコツ
サービス業から学んだコミュニケーションのコツ
 
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディングディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディング
 
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
 
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
 
後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと
 
独自Ecサイト立ち上げワンストップセミナー 0907
独自Ecサイト立ち上げワンストップセミナー 0907独自Ecサイト立ち上げワンストップセミナー 0907
独自Ecサイト立ち上げワンストップセミナー 0907
 
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
 
機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話
 
自分のこれからについて語るときに僕の語ること Webディレクターのための弁証法入門-
自分のこれからについて語るときに僕の語ること  Webディレクターのための弁証法入門-自分のこれからについて語るときに僕の語ること  Webディレクターのための弁証法入門-
自分のこれからについて語るときに僕の語ること Webディレクターのための弁証法入門-
 
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイントWeb制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
 
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
 
concrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところconcrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところ
 
ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計
 
私をWordCampに巻き込んだ「しいたけ占い」
私をWordCampに巻き込んだ「しいたけ占い」私をWordCampに巻き込んだ「しいたけ占い」
私をWordCampに巻き込んだ「しいたけ占い」
 
Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)
 
Webディレクション講座 - 初級編 -
Webディレクション講座  - 初級編 -Webディレクション講座  - 初級編 -
Webディレクション講座 - 初級編 -
 

Similar to Cssnite in sapporovol14

ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守
ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守
ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守
Yasufumi Nishiyama
 
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭りBootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
 
フロントエンドな人にこそ知ってほしいMTMLの話
フロントエンドな人にこそ知ってほしいMTMLの話フロントエンドな人にこそ知ってほしいMTMLの話
フロントエンドな人にこそ知ってほしいMTMLの話
Yasufumi Nishiyama
 
MTサイト運用に効く!けっこう便利なプラグインたち
MTサイト運用に効く!けっこう便利なプラグインたちMTサイト運用に効く!けっこう便利なプラグインたち
MTサイト運用に効く!けっこう便利なプラグインたち
Yasufumi Nishiyama
 
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
 
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
Yoshinori Kobayashi
 
20111203 忘年会・交流会LT_糟谷さん資料
20111203 忘年会・交流会LT_糟谷さん資料20111203 忘年会・交流会LT_糟谷さん資料
20111203 忘年会・交流会LT_糟谷さん資料
WebSig24/7
 
サーバチューニングでスピードアップ資料 (11月10日jeccicaセミナー交流会向け資料公開用)
サーバチューニングでスピードアップ資料 (11月10日jeccicaセミナー交流会向け資料公開用)サーバチューニングでスピードアップ資料 (11月10日jeccicaセミナー交流会向け資料公開用)
サーバチューニングでスピードアップ資料 (11月10日jeccicaセミナー交流会向け資料公開用)
Tatsuru Maeda
 
AngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃおAngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃお
Toshio Ehara
 
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるMasakazu Muraoka
 
141219 まにフェス
141219 まにフェス141219 まにフェス
141219 まにフェス
rie05
 
1日でつくる WordPressEC(stripe決済)
1日でつくる WordPressEC(stripe決済)1日でつくる WordPressEC(stripe決済)
1日でつくる WordPressEC(stripe決済)
Takeharu Kato
 
かんたんキレイなウェブデザイン
かんたんキレイなウェブデザインかんたんキレイなウェブデザイン
かんたんキレイなウェブデザインShuhei Iitsuka
 
20150606 mtddc meetup_tohoku
20150606 mtddc meetup_tohoku20150606 mtddc meetup_tohoku
20150606 mtddc meetup_tohoku
Yasufumi Nishiyama
 
Cloud garage使って ECサイトの構築
Cloud garage使って ECサイトの構築Cloud garage使って ECサイトの構築
Cloud garage使って ECサイトの構築
毅 佐藤
 
【札幌】ライトインターンの受け入れを!札幌Web業界と人材育成
【札幌】ライトインターンの受け入れを!札幌Web業界と人材育成【札幌】ライトインターンの受け入れを!札幌Web業界と人材育成
【札幌】ライトインターンの受け入れを!札幌Web業界と人材育成
さぶみっと!ヨクスル
 
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
 
自分に合ったWeb出店とは? in まるたまサマースクール
自分に合ったWeb出店とは? in まるたまサマースクール自分に合ったWeb出店とは? in まるたまサマースクール
自分に合ったWeb出店とは? in まるたまサマースクール
Rikiya Suzuki
 
ウェブアクセシビリティチェックツール開発者の頭ん中
ウェブアクセシビリティチェックツール開発者の頭ん中ウェブアクセシビリティチェックツール開発者の頭ん中
ウェブアクセシビリティチェックツール開発者の頭ん中
純生 野田
 

Similar to Cssnite in sapporovol14 (20)

ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守
ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守
ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守
 
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭りBootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
 
フロントエンドな人にこそ知ってほしいMTMLの話
フロントエンドな人にこそ知ってほしいMTMLの話フロントエンドな人にこそ知ってほしいMTMLの話
フロントエンドな人にこそ知ってほしいMTMLの話
 
MTサイト運用に効く!けっこう便利なプラグインたち
MTサイト運用に効く!けっこう便利なプラグインたちMTサイト運用に効く!けっこう便利なプラグインたち
MTサイト運用に効く!けっこう便利なプラグインたち
 
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
 
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
 
20111203 忘年会・交流会LT_糟谷さん資料
20111203 忘年会・交流会LT_糟谷さん資料20111203 忘年会・交流会LT_糟谷さん資料
20111203 忘年会・交流会LT_糟谷さん資料
 
サーバチューニングでスピードアップ資料 (11月10日jeccicaセミナー交流会向け資料公開用)
サーバチューニングでスピードアップ資料 (11月10日jeccicaセミナー交流会向け資料公開用)サーバチューニングでスピードアップ資料 (11月10日jeccicaセミナー交流会向け資料公開用)
サーバチューニングでスピードアップ資料 (11月10日jeccicaセミナー交流会向け資料公開用)
 
AngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃおAngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃお
 
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
 
141219 まにフェス
141219 まにフェス141219 まにフェス
141219 まにフェス
 
1日でつくる WordPressEC(stripe決済)
1日でつくる WordPressEC(stripe決済)1日でつくる WordPressEC(stripe決済)
1日でつくる WordPressEC(stripe決済)
 
かんたんキレイなウェブデザイン
かんたんキレイなウェブデザインかんたんキレイなウェブデザイン
かんたんキレイなウェブデザイン
 
20150606 mtddc meetup_tohoku
20150606 mtddc meetup_tohoku20150606 mtddc meetup_tohoku
20150606 mtddc meetup_tohoku
 
Cloud garage使って ECサイトの構築
Cloud garage使って ECサイトの構築Cloud garage使って ECサイトの構築
Cloud garage使って ECサイトの構築
 
【札幌】ライトインターンの受け入れを!札幌Web業界と人材育成
【札幌】ライトインターンの受け入れを!札幌Web業界と人材育成【札幌】ライトインターンの受け入れを!札幌Web業界と人材育成
【札幌】ライトインターンの受け入れを!札幌Web業界と人材育成
 
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
 
自分に合ったWeb出店とは? in まるたまサマースクール
自分に合ったWeb出店とは? in まるたまサマースクール自分に合ったWeb出店とは? in まるたまサマースクール
自分に合ったWeb出店とは? in まるたまサマースクール
 
ウェブアクセシビリティチェックツール開発者の頭ん中
ウェブアクセシビリティチェックツール開発者の頭ん中ウェブアクセシビリティチェックツール開発者の頭ん中
ウェブアクセシビリティチェックツール開発者の頭ん中
 
Fukuda 20121013
Fukuda 20121013Fukuda 20121013
Fukuda 20121013
 

Cssnite in sapporovol14