00:00
今回はネットショップシステムとの連携ということで、こちらのパートの目的と進め方についてお伝えしていきます。
では見ていきます。まず、本パートのゴールをお伝えします。本パートのゴールはこちらです。 ネットショップをサイトと連携するということですね。
こちらのゴールに向かって今回は進めていきます。 なんでこのパートの作業を行うのかと言いますと、
ホームページとかブログ、ワードプレスで作るウェブサイトありますよね。 そこに手軽に商品を購入できる仕組み、これはネットショップの仕組み、
ECサイト、ECショップの仕組みなんて言ったりするんですが、その仕組みを用意するため。 これがホームページブログに用意されていると、スムーズに商品を買えたり決済できたり
仕組みが整うので、こちらを用意する。 さらにデジタルコンテンツっていうですね、PDFだったり音声だったり動画だったり、こういったものを
購入できる仕組みってものを手軽にホームページブログに入れられるんですよね。 そういった仕組みを導入していくと、導線としてもスムーズな一つの流れができますので、それを
導入するためということになります。 で、本パートの進め方を概要と詳細で見ていきます。
まず大枠ですね、2つあります。 ストアーズというアプリ、ウェブサービスの設定を行います。
主にストアーズというサービスの中で、 商品の登録とかデジタルコンテンツを登録をしていきます。
そしてウェブサイトにそれを反映していくという大まかな流れ、こちらが概要ですね。 詳細一つ一つ見ていきますね。
まずストアーズの設定なんですけども、こちらはストアーズの初期設定、 ちょっとやらなければいけない設定っていうのが初めの方にあるので、それを行います。
そしてストアーズで実際に商品の作り方と、 商品の登録とか販売とかね、その一連の流れってものをやっていきます。
そしてそれも同様、デジタルコンテンツも同様にこの流れにのっとって作り方と一連の流れ ってものをお伝えしていきます。
その他このストアーズ周りとかネットショップシステム周りの関連する作業というのを行っていきます。
そして次ですね、ウェブサイトへの反映、これは何をやるかというと Wordpress とストアーズを連携していきます。
ここ連携しないと機能しないのでこの連携を行う。 そしてストアーズボタンを設置するということで、ストアーズボタンが作れるんですよね。
そのボタンをワードプレスに持ってきたりできますので、その設置をするという作業です。 デジタルコンテンツ閲覧ページテンプレートの編集方法。
デジタルコンテンツの購入者に動画だったりそのコンテンツの閲覧ページの テンプレートをご用意していますので、それの編集方法をお伝えしてやっていただきます。
その他これもウェブサイトに反映にあたってコマコマとした追加作業が発生します。 その他関連する作業というのを行っていきます。
主にこういったことをやっていきます。 ワードプレスとストアーズってものを今回は結びつける連携するっていうのが主な作業なんですけども、
03:02
こういったワードプレスの自社のサイトがありますよね。ストアーズというアプリウェブサービスがあると。 ストアーズの方にデジタルコンテンツとか商品というのを登録作業するわけですよね。
それをワードプレスの商品というメニューなんかを作ってそこに連携するという作業ですね。 非常にシンプルな作業になってくると思います。
今回のパートではこういった作業をやっていきますよということです。 それでは今回はストアーズの初期設定を解説していきます。
初期設定ですね。このストア設定をまずは確認してください。
まずストア名ですね。これ自分の会社の名前にしてください。 同時ドメインに設定できるんですが、これはこのままで大丈夫です。
あと公開。これは非公開にするっていう場合ですね。まだ準備が整ってないという場合。 公開する場合はこの公開を
これ切り替えられますのでクリックして切り替えてください。 あと
ここらへんですね。ストア説明、上に関する情報ですね。 ストアの決済方法、送料、設定、編集すれば
編集するをクリックすればいろいろ出てきますので、この辺ですね 説明文
これ空欄だとちょっと寂しいですし、相手に伝わらないので入力してください。 あとリンクですね。SNSの情報を
設定しておいてください。 こういった感じですね。この編集するをクリックしていくとどんどん
そういうとこ埋める項目が出てきますので、それに従って入力していってください。 個人事業主個人に
当てはまるものにチェック。連絡先、 住所ですね。
結構この辺、この特定商取引法に関する表記に含まれますので、必ず入力するようにしてください。
これ空欄なのはデモアカウントだからです。開設用のアカウントだからです。 こういった感じでどんどんこちら編集するをクリックしていってですね
埋められるところは埋めるようにしていってください。 次、アカウント設定ですね。
ここからいろいろアカウント情報の変更ができますよというところですね。 あとこの事業者情報とかプロフィール設定、電話番号ですね。
この辺の情報はですね、あとこの振込先、コーダーとかですね。 この辺は必ず確認して埋めるようにしておいてください。
というのが初期設定になります。 それでは今回は商品の登録方法について解説をします。
商品の登録はですね、この管理画面上からアイテムですね。 こちらアイテムの作成
06:00
物販を選択してください。今回は物販で解説します。 まずはアイテムの画像ですね。
その商品の画像、それを配置してください。
アイテム名、今回サンプルとします。 商品の価格です。
アイテムの説明、商品の説明ですね。 この薄くグレーで書いている通りですね。
商品の特徴とかサイズですね。 洋服でしたらそういうもの、サイズの表記が必要なものはそれですね。
素材とかですね。説明文だと思ってください。 簡単ですね。
そうしましたらここら辺ですね。
在庫数、必ず設定しておいてください。 例えば在庫が10であれば10ですね。無制限になれば無制限ですね。
無限になりますよっていう場合は無限、無制限ですね。 保存するを最後にクリックしてください。
このですね、この画像は今回設定してないんですが、皆さんは設定してください。 保存する。
あとですね、公開する場合は必ず公開にしてください。 ただこのように
入力がないとエラーになってしまいますので、 基本的な項目は埋めるようにしてください。
というより皆さんも埋めてないと気持ち悪いと思いますので。 これで登録が完了しました。
これは
複製もできますし削除もできますので
こちらから確認しておいてください。 というのがアイテム登録の一連の操作になります。
それでは今回はストアーズの方でデジタルコンテンツを登録していきたいと思います。 その設定方法を解説します。
デジタルコンテンツはこのように、今ここ登録してある通り PDF を登録する形になります。
動画視聴ページとか動画視聴サイト、 あと
テキストコンテストということでPDF、電子書籍みたいな感じで、そういう感じで販売するので、 音声は登録できるんですが、あまり音声を単体で登録する、
販売するってことも少ないと思いますので、主にPDFを登録します。 その前に設定の前に機能を追加から
ダウンロード販売でオンにしておいてください。 するとこのようにデジタルと出てきます。 アイテムの作成からデジタルをクリックしてください。
で、Booperの方と同じで、まずイメージ画像、適切な画像を
設定してください。
コンテンツのタイトルですね。
09:00
名前。 それをアイテム名に入力してください。で、価格は
そのままですね、価格。このファイルのところに 例えばこんな感じです。これ一例なんですけど
動画視聴ページのURLとパスワードを記載。 簡単な文章を配置。
ここは特にこだわる必要はなく
URLをクリックしてパスワードを入力してアクセスしてくださいねという、そういう内容になります。 これが視聴ページとか視聴サイトでパスワードですね。
これに関しては別の動画で解説していますので、 主に視聴ページですね。この場合は視聴ページを案内するようにしてください。
今回は登録に絞って解説したいと思います。で、ファイルからダウンロード、PDFとして書き出してください。 書き出したら
こんなようにブラック&ブラックで配置します。
これ半額にしてください。 今回テストとしますけど、名前に
関連するようなもの、アルファベットでいいので入力してください。 今回テストで半額にしてからアップします。
ワードプレスの商題だったとしたらワードプレスなんとか、 そんな感じで入力してください。半額ですね。
説明文を入力。
あとは保存するだけですね。 これで簡単に登録ができますので、やることは非常にシンプルで、
画像を設定するとか、基本的なものですね。 つまずくことも少ないかなと思います。
ファイルだけ半額にするぐらいで、特にこういう
OS系の外からPDFにしてダウンロードして、それを
こっちにアップロードするという、すごく簡単な作業なので、特につまずくことはないと思います。
あとは保存するをクリックするだけです。 あと公開するとか公開しないとかはお任せしますけど、
通常は公開すると思うので、ネットショップで公開をクリックして保存するをクリックしてください。 以上がデジタルコンテンツの
アイテムの登録方法になります。 それでは今回はストアーズボタンの解説をしていきたいと思います。
このストアーズボタンを利用することによってですね、自分のワードプレイスのページと連携ができるといった形になります。
必ずアイテムを登録してください。
その上で、あとはストアーズのアカウントにログインをした上で、このストアーズボタンと検索をかけていただいて、
一番上にきますのでこちらをクリックしてください。 ボタンのデザインですね、小さいとわかりづらいので大にしてください。
12:02
あとカラーの変更ができます。 この4色ですね。
原画もちろん日本語ですね。 あとオリジナル画像を使用っていうのがあるんですけど、
ボタンの画像ですね、これはちょっと画像編集のスキルがないとできないので、 こういうこともできますよっていうことだけ覚えておいてください。
次、販売アイテムの登録ですね。 ちょっと下書きに非公開にはなっているんですけど、
例えばこのサンプルの商品ですね、これ解説します。 ここに登録した商品名が出てきますので、
ここはもちろんわかりやすい名前をつけていると思いますので、 その該当の商品を選択してください。
これで貼り付けコードを生成する。 このコードをコピーしてください。
コピーしたら、 WordPress の方に移動ですね。
この要素なんですが、カスタム HTML っていうものを使っています。
ここにコードを貼り付けます。 貼り付けたら、下書きで確認してからの公開ですね。
やってみてください。どういうのが出てくるかと言いますと、 こういった感じで出てきて、そこから購入ができる。
現在、非公開なのでこうなっていますけど、 実際ここから購入ができます。
こういった感じで、このブロックですね。 あとはコードの取得方法。
知っていれば簡単に連携できますので、 実際にやってみてください。
これですね、カスタム HTML を使って、あとは埋め込みコードをコピーしてきて、 貼り付けるという簡単な操作になります。
あと、下にもあるので、 このガイドの箇所にも固定しておいてください。
あと、動作に問題がないようであれば公開ですね。 一回プレビューで見てもらってですね、先ほどのように。
ちゃんと変えるようであれば、公開してしまってください。
1点注意点としまして、非公開になっているとこのようになってしまいます。 公開にしてからやってください。
というのが、この商品紹介ページへの設置方法になります。
これ以外のページでも使えますので、覚えておいてください。
それでは今回は、こちらのデジタルコンテンツ閲覧ページ、 動画主張ページの作成方法を解説します。
内容はですね、これ。パスワードがかかっているんですが、 このようにパスワードをかけて確定を押すと、
こういうページですね。非常にシンプルなものでして、 この下に動画が配置されるというものですね。
あとは仕様があれば、ダウンロードボタンを配置する。 見出し動画、見出し動画という仕組みになっています。
15:05
仕組みというか構造になっています。
なので、特にやり方が難しいとかそういうわけではないので、 この動画主張ページの作成方法というものを解説していきたいと思います。
使うものはダウンロードボタンと見出し、 あとカスタムHTMLですね。
まず固定ページから新規追加をクリックします。 こういったページは固定ページを使います。
タイトルですね。 例えば動画プログラムですね。
動画プログラムのタイトルをつけてください。 動画のタイトルとか、内容がわかるようなもの。
何時にわかるようなものを記載しておいてください。 商品名、サービス名でも何でもいいんですけど。
以下から閲覧できますよ。またこれですね。 仕様があればダウンロードできるようにしてください。
その他にもこれだけだとちょっと寂しいので、 他にも情報があったら記載するようにしてください。
あとはボタンですね。ブロックの追加ボタン。 ダウンロード。資料のダウンロードボタンですね。
中央にするときはここをクリックしていただいて、 全体ですね。中央。
といった感じです。これだとちょっと狭いので、 このブロックになっている状態ですね。幅の設定50%にしておいてください。
これ資料があったらそのようにしてください。 資料はメディアにアップしていただいて、
こちらにアップロードしていただいてからの画像なんですけど、 このURLですね。これをコピーして指定してください。
これ画像ですけど実際はPDFでやってくださいっていうことですね。 メディアイコールサーバーにアップしているようなものなので、そこからダウンロードができますねっていうそういう話です。
資料はなかったら別になくても、このボタンとか文言ですね。 この文言自体もこれはいらないですね。
ガイダンスなので。 資料は以下からダウンロードとかそういうのはあった方がいいと思うんですが、そこはお任せします。
あとは見出し。見出しに動画のタイトル。 次にブロックの追加でカスタムHTMLですね。HTMLと検索し、
はい。 用意されました。ここでVimeoの埋め込みコードを取得します。
Vimeoはですね、このアカウント登録してもらったと思うんですけど、動画をアップロードしていただいてですね、動画は何でもいいです。
18:06
スマートフォンで撮影でもいいですし、こういうQuickTimePlayerとかですね、あとZoomとか使って撮影してください。
手段は取りませんけど、とにかくですね、動画をアップロードしてください。
そうしましたら該当の動画をクリックしていただいて、これトップページですね。
この状態でですね、この詳細設定をクリックしてください。
次にタイトルとか色々変更できますので、アップライバシー設定とかこの辺をですね、確認してもらってですね、
必ずVimeoで非表示にするっていう感じになります。 一応これアップグレードですね、課金してください。
本格的に使う場合はですね、特にこれから動画プログラムをやっていく場合はですね、プログラムにしておいてください。
あとショーケースとかあります。YouTubeで言う再生リストみたいなものですね。
他色々ありますけど、埋め込んだ時のこのコントロールバーの設定とかですね、タイトルここら辺の非表示にするとか、
これを課金する必要があります。月々2000円程度なので、こんなにですね、はい。
本格的に使うのであればこういうカスタマイズができるので、ぜひ課金してください。
ここですね、本題に入りますと、埋め込みコードをコピーですね。これをコピーしてください。共有から埋め込みコードをコピー。
その後に、ここにですね、貼り付けてください。 貼り付けたら、あとこのURLスラッグですね、これはなんかその
動画コンテンツのタイトルに合わせて入力してください。
はい、こんな感じで、必ず半額ですね。
パスワード保護をすることができますので、このページ単体ですね、はい。 ここにパスワードを入力していただいて公開ですね。
といった感じでやってください。 試しにやってみますと、
はい、この状態で公開ですね。
あ、これボタンあれですね。 背景の色を
変えておいてください。 っていう感じですね。すごくシンプルで簡単に作れますので、使うブロックも非常に少なく
やりください思えてしまえば簡単にできますので、はい。 埋め込みコードのコピーもすごく簡単だと思います。
それではこれで動画視聴ページの、デジタルコンテンツの動画閲覧ページですね、の作成方法は以上になります。