Slide 1
Slide 1 text
Shifter Online Meetup
Shifter Static で
Shopify “ BuyButton.js ” を
活用してみよう！
Customer Marketing Manager
Hiromi Ito
2020.08.05
#JP_GetShifter
Slide 2
Slide 2 text
WHO I AM ?
#JP_GetShifter
HIROMI ITO
DigitalCube Co.Ltd.
Customer Marketing Manager
● 入社歴より Shifter ユーザ歴が長い
● Community Passionate Contributor
● 半分中の人、半分ユーザ
● AWS Community Hero に選ばれました！
TW : @hiro_baila
FB : https://www.facebook.com/hirobailaora
#Shopify
Slide 3
Slide 3 text
はじめに‥
Shifter の活用を提案
https://www.getshifter.io/ja/blog #JP_GetShifter #Shopify
Slide 4
Slide 4 text
Shopify ももちろん！
https://www.getshifter.io/ja/blog/shifter-static-shopify
#JP_GetShifter #Shopify
Slide 5
Slide 5 text
手軽に誰でも簡単にできるモダンな Eコマースを実現したい！
Shifter Static
#JP_GetShifter #Shopify
Slide 6
Slide 6 text
なぜ Shifter Static と Shopify なの？
● エンドユーザーは使い慣れた WordPress ダッシュボードでコンテンツの
運用（投稿・編集）が可能
● Web 開発者は WordPress のナレッジやプラグインエコシステムを利用
可能
● サーバ管理者はフルマネージドの SaaS でメンテナンス、セキュリティ、ス
ケーリングなどの対応が不要
● Web 担当者は容易に Web パフォーマンスの向上や SEO への恩恵が
得られる
● サイト利用者（訪問者）は快適 / 快速な閲覧体験（ UX ）を得られる
Shifter Static の特徴
#JP_GetShifter #Shopify
Slide 7
Slide 7 text
なぜ Shifter Static と Shopify なの？
● JavaScript をいつもの WordPress コンテンツに埋め込むだけの簡単設
定
● Shopify 単体サイトはもちろん独自のサイトに好きな場所に自由自在に設
定可能
● ブランディングを損なわずにオリジナルオンラインショップを楽々開設
● 静的サイトでオンラインショップを実現
● Shopify は世界で導入数 No.1 の ECサイト構築 システム
Shopify の特徴
#JP_GetShifter #Shopify
Slide 8
Slide 8 text
顧客は最高の購入体験（体験価値）を得て、欲しい商材 GET!!
Shifter
Static
最高の
ユーザー体験
#JP_GetShifter #Shopify
Slide 9
Slide 9 text
やってみてわかったこと
今すぐにでもネットショップを立ち上げれる！！
でも肝心の商材とコンテンツが……ない！！
#JP_GetShifter #Shopify
Slide 10
Slide 10 text
実際の設定をみてみましょう
1. Shopify の初期設定
2. Shopify の管理画面で必要な情報を登録
Shopify テーマがデフォルトでも商品登録を行い、販売に必要な設定だけでもすぐに始めることができま
す。
3. 掲載したい登録商品の JavaScript を取得
4. Shifter Static にログイン
Shifter にログインして WordPress ダッシュボードを起動します。
新規作成の方は、Static を選択していることを確かめてください。「Create new site」で 新規作成をし、
WordPress を起動してログインします。
5. 起動した WordPress で新規投稿を作成
6. 新規投稿で HTML ブロックを開き、取得した登録商品の JavaScript を貼り付ける
7. 記事を完成させ、パブリッシュ
8. Shifter を Generate #JP_GetShifter #Shopify
Slide 11
Slide 11 text
困ったときのサポートドキュメントもあります
https://support.getshifter.io/en/articles/3933558
#JP_GetShifter #Shopify
Slide 12
Slide 12 text
Shopify を初期設定
#JP_GetShifter #Shopify
Slide 13
Slide 13 text
Shopify をテストモードにしておく
#JP_GetShifter #Shopify
Slide 14
Slide 14 text
Shopify で商品登録など設定
#JP_GetShifter #Shopify
Slide 15
Slide 15 text
Shopify で Web サイトに埋め込むボタンを作る
#JP_GetShifter #Shopify
Slide 16
Slide 16 text
Shopify で 取得した埋め込みコードを Shifter で設定
#JP_GetShifter #Shopify
Slide 17
Slide 17 text
Generate / Publish で完成！
#JP_GetShifter #Shopify
Slide 18
Slide 18 text
設定は簡単！重要なビジネスモデル、コンテンツに注力可能
● 今すぐ、誰もが始められるオリジナルのオンラインショップに！
● コミュニケーション設計をベースに SaaS を組み合わせて、顧客中心型のオンライ
ンショップに！
● 新時代のネットショップ体験を！
#JP_GetShifter #Shopify
Slide 19
Slide 19 text
さぁ！今すぐ始めてみましょう。
フィードバックお待ちしてます。
ご清聴ありがとうございました。