WEBVTT

00:00:00.000 --> 00:00:07.400
今回はネットショップシステムとの連携ということで、こちらのパートの目的と進め方についてお伝えしていきます。

00:00:07.400 --> 00:00:17.920
では見ていきます。まず、本パートのゴールをお伝えします。本パートのゴールはこちらです。 ネットショップをサイトと連携するということですね。

00:00:17.920 --> 00:00:25.440
こちらのゴールに向かって今回は進めていきます。 なんでこのパートの作業を行うのかと言いますと、

00:00:25.440 --> 00:00:34.600
ホームページとかブログ、ワードプレスで作るウェブサイトありますよね。 そこに手軽に商品を購入できる仕組み、これはネットショップの仕組み、

00:00:34.600 --> 00:00:45.280
ECサイト、ECショップの仕組みなんて言ったりするんですが、その仕組みを用意するため。 これがホームページブログに用意されていると、スムーズに商品を買えたり決済できたり

00:00:45.280 --> 00:00:54.200
仕組みが整うので、こちらを用意する。 さらにデジタルコンテンツっていうですね、PDFだったり音声だったり動画だったり、こういったものを

00:00:54.200 --> 00:01:03.440
購入できる仕組みってものを手軽にホームページブログに入れられるんですよね。 そういった仕組みを導入していくと、導線としてもスムーズな一つの流れができますので、それを

00:01:03.440 --> 00:01:10.520
導入するためということになります。 で、本パートの進め方を概要と詳細で見ていきます。

00:01:10.520 --> 00:01:17.080
まず大枠ですね、2つあります。 ストアーズというアプリ、ウェブサービスの設定を行います。

00:01:17.080 --> 00:01:23.800
主にストアーズというサービスの中で、 商品の登録とかデジタルコンテンツを登録をしていきます。

00:01:23.800 --> 00:01:30.720
そしてウェブサイトにそれを反映していくという大まかな流れ、こちらが概要ですね。 詳細一つ一つ見ていきますね。

00:01:30.720 --> 00:01:40.480
まずストアーズの設定なんですけども、こちらはストアーズの初期設定、 ちょっとやらなければいけない設定っていうのが初めの方にあるので、それを行います。

00:01:40.480 --> 00:01:49.360
そしてストアーズで実際に商品の作り方と、 商品の登録とか販売とかね、その一連の流れってものをやっていきます。

00:01:49.360 --> 00:01:58.440
そしてそれも同様、デジタルコンテンツも同様にこの流れにのっとって作り方と一連の流れ ってものをお伝えしていきます。

00:01:58.440 --> 00:02:05.280
その他このストアーズ周りとかネットショップシステム周りの関連する作業というのを行っていきます。

00:02:05.280 --> 00:02:13.480
そして次ですね、ウェブサイトへの反映、これは何をやるかというと Wordpress とストアーズを連携していきます。

00:02:13.480 --> 00:02:21.400
ここ連携しないと機能しないのでこの連携を行う。 そしてストアーズボタンを設置するということで、ストアーズボタンが作れるんですよね。

00:02:21.400 --> 00:02:31.360
そのボタンをワードプレスに持ってきたりできますので、その設置をするという作業です。 デジタルコンテンツ閲覧ページテンプレートの編集方法。

00:02:31.360 --> 00:02:44.840
デジタルコンテンツの購入者に動画だったりそのコンテンツの閲覧ページの テンプレートをご用意していますので、それの編集方法をお伝えしてやっていただきます。

00:02:44.840 --> 00:02:53.600
その他これもウェブサイトに反映にあたってコマコマとした追加作業が発生します。 その他関連する作業というのを行っていきます。

00:02:53.600 --> 00:03:02.600
主にこういったことをやっていきます。 ワードプレスとストアーズってものを今回は結びつける連携するっていうのが主な作業なんですけども、

00:03:02.600 --> 00:03:14.400
こういったワードプレスの自社のサイトがありますよね。ストアーズというアプリウェブサービスがあると。 ストアーズの方にデジタルコンテンツとか商品というのを登録作業するわけですよね。

00:03:14.400 --> 00:03:24.000
それをワードプレスの商品というメニューなんかを作ってそこに連携するという作業ですね。 非常にシンプルな作業になってくると思います。

00:03:24.000 --> 00:03:33.040
今回のパートではこういった作業をやっていきますよということです。 それでは今回はストアーズの初期設定を解説していきます。

00:03:33.040 --> 00:03:41.700
初期設定ですね。このストア設定をまずは確認してください。

00:03:41.780 --> 00:03:52.940
まずストア名ですね。これ自分の会社の名前にしてください。 同時ドメインに設定できるんですが、これはこのままで大丈夫です。

00:03:52.940 --> 00:04:01.660
あと公開。これは非公開にするっていう場合ですね。まだ準備が整ってないという場合。 公開する場合はこの公開を

00:04:01.660 --> 00:04:06.540
これ切り替えられますのでクリックして切り替えてください。 あと

00:04:06.580 --> 00:04:17.330
ここらへんですね。ストア説明、上に関する情報ですね。 ストアの決済方法、送料、設定、編集すれば

00:04:17.330 --> 00:04:24.010
編集するをクリックすればいろいろ出てきますので、この辺ですね 説明文

00:04:24.010 --> 00:04:32.770
これ空欄だとちょっと寂しいですし、相手に伝わらないので入力してください。 あとリンクですね。SNSの情報を

00:04:32.770 --> 00:04:39.170
設定しておいてください。 こういった感じですね。この編集するをクリックしていくとどんどん

00:04:39.170 --> 00:04:48.810
そういうとこ埋める項目が出てきますので、それに従って入力していってください。 個人事業主個人に

00:04:48.810 --> 00:04:55.130
当てはまるものにチェック。連絡先、 住所ですね。

00:04:55.170 --> 00:05:03.770
結構この辺、この特定商取引法に関する表記に含まれますので、必ず入力するようにしてください。

00:05:03.770 --> 00:05:12.490
これ空欄なのはデモアカウントだからです。開設用のアカウントだからです。 こういった感じでどんどんこちら編集するをクリックしていってですね

00:05:12.490 --> 00:05:22.120
埋められるところは埋めるようにしていってください。 次、アカウント設定ですね。

00:05:22.880 --> 00:05:32.640
ここからいろいろアカウント情報の変更ができますよというところですね。 あとこの事業者情報とかプロフィール設定、電話番号ですね。

00:05:32.640 --> 00:05:43.280
この辺の情報はですね、あとこの振込先、コーダーとかですね。 この辺は必ず確認して埋めるようにしておいてください。

00:05:43.280 --> 00:05:51.160
というのが初期設定になります。 それでは今回は商品の登録方法について解説をします。

00:05:51.160 --> 00:06:00.240
商品の登録はですね、この管理画面上からアイテムですね。 こちらアイテムの作成

00:06:00.240 --> 00:06:07.680
物販を選択してください。今回は物販で解説します。 まずはアイテムの画像ですね。

00:06:07.680 --> 00:06:12.960
その商品の画像、それを配置してください。

00:06:12.960 --> 00:06:20.920
アイテム名、今回サンプルとします。 商品の価格です。

00:06:20.920 --> 00:06:27.840
アイテムの説明、商品の説明ですね。 この薄くグレーで書いている通りですね。

00:06:27.840 --> 00:06:35.440
商品の特徴とかサイズですね。 洋服でしたらそういうもの、サイズの表記が必要なものはそれですね。

00:06:35.440 --> 00:06:41.680
素材とかですね。説明文だと思ってください。 簡単ですね。

00:06:41.680 --> 00:06:46.520
そうしましたらここら辺ですね。

00:06:46.520 --> 00:06:55.520
在庫数、必ず設定しておいてください。 例えば在庫が10であれば10ですね。無制限になれば無制限ですね。

00:06:55.520 --> 00:07:03.400
無限になりますよっていう場合は無限、無制限ですね。 保存するを最後にクリックしてください。

00:07:03.400 --> 00:07:14.320
このですね、この画像は今回設定してないんですが、皆さんは設定してください。 保存する。

00:07:14.320 --> 00:07:20.760
あとですね、公開する場合は必ず公開にしてください。 ただこのように

00:07:20.760 --> 00:07:27.000
入力がないとエラーになってしまいますので、 基本的な項目は埋めるようにしてください。

00:07:27.000 --> 00:07:33.960
というより皆さんも埋めてないと気持ち悪いと思いますので。 これで登録が完了しました。

00:07:33.960 --> 00:07:36.840
これは

00:07:36.840 --> 00:07:42.040
複製もできますし削除もできますので

00:07:42.080 --> 00:07:51.470
こちらから確認しておいてください。 というのがアイテム登録の一連の操作になります。

00:07:51.470 --> 00:08:00.860
それでは今回はストアーズの方でデジタルコンテンツを登録していきたいと思います。 その設定方法を解説します。

00:08:00.860 --> 00:08:07.580
デジタルコンテンツはこのように、今ここ登録してある通り PDF を登録する形になります。

00:08:07.580 --> 00:08:12.420
動画視聴ページとか動画視聴サイト、 あと

00:08:12.420 --> 00:08:23.060
テキストコンテストということでPDF、電子書籍みたいな感じで、そういう感じで販売するので、 音声は登録できるんですが、あまり音声を単体で登録する、

00:08:23.060 --> 00:08:35.310
販売するってことも少ないと思いますので、主にPDFを登録します。 その前に設定の前に機能を追加から

00:08:35.310 --> 00:08:45.650
ダウンロード販売でオンにしておいてください。 するとこのようにデジタルと出てきます。 アイテムの作成からデジタルをクリックしてください。

00:08:45.650 --> 00:08:50.850
で、Booperの方と同じで、まずイメージ画像、適切な画像を

00:08:50.850 --> 00:08:56.380
設定してください。

00:08:56.380 --> 00:09:00.060
コンテンツのタイトルですね。

00:09:00.060 --> 00:09:05.840
名前。 それをアイテム名に入力してください。で、価格は

00:09:05.880 --> 00:09:13.720
そのままですね、価格。このファイルのところに 例えばこんな感じです。これ一例なんですけど

00:09:13.720 --> 00:09:21.000
動画視聴ページのURLとパスワードを記載。 簡単な文章を配置。

00:09:21.000 --> 00:09:25.120
ここは特にこだわる必要はなく

00:09:25.120 --> 00:09:35.340
URLをクリックしてパスワードを入力してアクセスしてくださいねという、そういう内容になります。 これが視聴ページとか視聴サイトでパスワードですね。

00:09:35.340 --> 00:09:44.980
これに関しては別の動画で解説していますので、 主に視聴ページですね。この場合は視聴ページを案内するようにしてください。

00:09:44.980 --> 00:09:55.810
今回は登録に絞って解説したいと思います。で、ファイルからダウンロード、PDFとして書き出してください。 書き出したら

00:09:55.810 --> 00:10:02.210
こんなようにブラック&ブラックで配置します。

00:10:02.210 --> 00:10:12.550
これ半額にしてください。 今回テストとしますけど、名前に

00:10:12.550 --> 00:10:21.190
関連するようなもの、アルファベットでいいので入力してください。 今回テストで半額にしてからアップします。

00:10:21.190 --> 00:10:28.590
ワードプレスの商題だったとしたらワードプレスなんとか、 そんな感じで入力してください。半額ですね。

00:10:28.590 --> 00:10:35.330
説明文を入力。

00:10:35.330 --> 00:10:41.770
あとは保存するだけですね。 これで簡単に登録ができますので、やることは非常にシンプルで、

00:10:41.770 --> 00:10:49.450
画像を設定するとか、基本的なものですね。 つまずくことも少ないかなと思います。

00:10:49.450 --> 00:10:55.690
ファイルだけ半額にするぐらいで、特にこういう

00:10:55.690 --> 00:11:00.450
OS系の外からPDFにしてダウンロードして、それを

00:11:00.490 --> 00:11:06.530
こっちにアップロードするという、すごく簡単な作業なので、特につまずくことはないと思います。

00:11:06.530 --> 00:11:13.850
あとは保存するをクリックするだけです。 あと公開するとか公開しないとかはお任せしますけど、

00:11:13.850 --> 00:11:22.010
通常は公開すると思うので、ネットショップで公開をクリックして保存するをクリックしてください。 以上がデジタルコンテンツの

00:11:22.010 --> 00:11:33.060
アイテムの登録方法になります。 それでは今回はストアーズボタンの解説をしていきたいと思います。

00:11:33.380 --> 00:11:43.340
このストアーズボタンを利用することによってですね、自分のワードプレイスのページと連携ができるといった形になります。

00:11:43.340 --> 00:11:47.620
必ずアイテムを登録してください。

00:11:49.060 --> 00:11:55.540
その上で、あとはストアーズのアカウントにログインをした上で、このストアーズボタンと検索をかけていただいて、

00:11:55.540 --> 00:12:02.340
一番上にきますのでこちらをクリックしてください。 ボタンのデザインですね、小さいとわかりづらいので大にしてください。

00:12:02.340 --> 00:12:08.260
あとカラーの変更ができます。 この4色ですね。

00:12:08.260 --> 00:12:14.580
原画もちろん日本語ですね。 あとオリジナル画像を使用っていうのがあるんですけど、

00:12:14.580 --> 00:12:23.820
ボタンの画像ですね、これはちょっと画像編集のスキルがないとできないので、 こういうこともできますよっていうことだけ覚えておいてください。

00:12:23.820 --> 00:12:33.160
次、販売アイテムの登録ですね。 ちょっと下書きに非公開にはなっているんですけど、

00:12:33.160 --> 00:12:42.720
例えばこのサンプルの商品ですね、これ解説します。 ここに登録した商品名が出てきますので、

00:12:42.720 --> 00:12:48.760
ここはもちろんわかりやすい名前をつけていると思いますので、 その該当の商品を選択してください。

00:12:48.760 --> 00:12:53.400
これで貼り付けコードを生成する。 このコードをコピーしてください。

00:12:53.400 --> 00:12:59.940
コピーしたら、 WordPress の方に移動ですね。

00:12:59.940 --> 00:13:08.020
この要素なんですが、カスタム HTML っていうものを使っています。

00:13:08.020 --> 00:13:19.460
ここにコードを貼り付けます。 貼り付けたら、下書きで確認してからの公開ですね。

00:13:19.460 --> 00:13:26.460
やってみてください。どういうのが出てくるかと言いますと、 こういった感じで出てきて、そこから購入ができる。

00:13:26.500 --> 00:13:32.980
現在、非公開なのでこうなっていますけど、 実際ここから購入ができます。

00:13:32.980 --> 00:13:42.220
こういった感じで、このブロックですね。 あとはコードの取得方法。

00:13:42.220 --> 00:13:48.020
知っていれば簡単に連携できますので、 実際にやってみてください。

00:13:48.020 --> 00:13:55.100
これですね、カスタム HTML を使って、あとは埋め込みコードをコピーしてきて、 貼り付けるという簡単な操作になります。

00:13:55.100 --> 00:14:02.220
あと、下にもあるので、 このガイドの箇所にも固定しておいてください。

00:14:02.220 --> 00:14:09.340
あと、動作に問題がないようであれば公開ですね。 一回プレビューで見てもらってですね、先ほどのように。

00:14:09.340 --> 00:14:14.460
ちゃんと変えるようであれば、公開してしまってください。

00:14:14.460 --> 00:14:23.490
1点注意点としまして、非公開になっているとこのようになってしまいます。 公開にしてからやってください。

00:14:23.490 --> 00:14:31.010
というのが、この商品紹介ページへの設置方法になります。

00:14:31.010 --> 00:14:35.210
これ以外のページでも使えますので、覚えておいてください。

00:14:35.210 --> 00:14:43.290
それでは今回は、こちらのデジタルコンテンツ閲覧ページ、 動画主張ページの作成方法を解説します。

00:14:43.290 --> 00:14:52.050
内容はですね、これ。パスワードがかかっているんですが、 このようにパスワードをかけて確定を押すと、

00:14:52.090 --> 00:14:58.970
こういうページですね。非常にシンプルなものでして、 この下に動画が配置されるというものですね。

00:14:58.970 --> 00:15:05.970
あとは仕様があれば、ダウンロードボタンを配置する。 見出し動画、見出し動画という仕組みになっています。

00:15:05.970 --> 00:15:09.690
仕組みというか構造になっています。

00:15:09.690 --> 00:15:20.410
なので、特にやり方が難しいとかそういうわけではないので、 この動画主張ページの作成方法というものを解説していきたいと思います。

00:15:20.410 --> 00:15:27.160
使うものはダウンロードボタンと見出し、 あとカスタムHTMLですね。

00:15:27.160 --> 00:15:35.940
まず固定ページから新規追加をクリックします。 こういったページは固定ページを使います。

00:15:35.940 --> 00:15:43.420
タイトルですね。 例えば動画プログラムですね。

00:15:43.420 --> 00:15:52.790
動画プログラムのタイトルをつけてください。 動画のタイトルとか、内容がわかるようなもの。

00:15:52.790 --> 00:16:03.460
何時にわかるようなものを記載しておいてください。 商品名、サービス名でも何でもいいんですけど。

00:16:03.460 --> 00:16:10.340
以下から閲覧できますよ。またこれですね。 仕様があればダウンロードできるようにしてください。

00:16:10.340 --> 00:16:19.620
その他にもこれだけだとちょっと寂しいので、 他にも情報があったら記載するようにしてください。

00:16:19.620 --> 00:16:32.510
あとはボタンですね。ブロックの追加ボタン。 ダウンロード。資料のダウンロードボタンですね。

00:16:32.510 --> 00:16:39.430
中央にするときはここをクリックしていただいて、 全体ですね。中央。

00:16:39.430 --> 00:16:52.620
といった感じです。これだとちょっと狭いので、 このブロックになっている状態ですね。幅の設定50%にしておいてください。

00:16:52.620 --> 00:17:00.310
これ資料があったらそのようにしてください。 資料はメディアにアップしていただいて、

00:17:00.310 --> 00:17:07.070
こちらにアップロードしていただいてからの画像なんですけど、 このURLですね。これをコピーして指定してください。

00:17:07.070 --> 00:17:20.100
これ画像ですけど実際はPDFでやってくださいっていうことですね。 メディアイコールサーバーにアップしているようなものなので、そこからダウンロードができますねっていうそういう話です。

00:17:20.100 --> 00:17:29.380
資料はなかったら別になくても、このボタンとか文言ですね。 この文言自体もこれはいらないですね。

00:17:29.380 --> 00:17:38.780
ガイダンスなので。 資料は以下からダウンロードとかそういうのはあった方がいいと思うんですが、そこはお任せします。

00:17:38.780 --> 00:17:52.890
あとは見出し。見出しに動画のタイトル。 次にブロックの追加でカスタムHTMLですね。HTMLと検索し、

00:17:52.890 --> 00:17:58.650
はい。 用意されました。ここでVimeoの埋め込みコードを取得します。

00:17:58.650 --> 00:18:06.410
Vimeoはですね、このアカウント登録してもらったと思うんですけど、動画をアップロードしていただいてですね、動画は何でもいいです。

00:18:06.410 --> 00:18:13.450
スマートフォンで撮影でもいいですし、こういうQuickTimePlayerとかですね、あとZoomとか使って撮影してください。

00:18:13.450 --> 00:18:19.770
手段は取りませんけど、とにかくですね、動画をアップロードしてください。

00:18:19.770 --> 00:18:25.290
そうしましたら該当の動画をクリックしていただいて、これトップページですね。

00:18:25.290 --> 00:18:33.180
この状態でですね、この詳細設定をクリックしてください。

00:18:33.180 --> 00:18:41.860
次にタイトルとか色々変更できますので、アップライバシー設定とかこの辺をですね、確認してもらってですね、

00:18:41.860 --> 00:18:50.660
必ずVimeoで非表示にするっていう感じになります。 一応これアップグレードですね、課金してください。

00:18:50.660 --> 00:18:58.500
本格的に使う場合はですね、特にこれから動画プログラムをやっていく場合はですね、プログラムにしておいてください。

00:18:58.500 --> 00:19:02.580
あとショーケースとかあります。YouTubeで言う再生リストみたいなものですね。

00:19:02.580 --> 00:19:12.340
他色々ありますけど、埋め込んだ時のこのコントロールバーの設定とかですね、タイトルここら辺の非表示にするとか、

00:19:12.340 --> 00:19:20.100
これを課金する必要があります。月々2000円程度なので、こんなにですね、はい。

00:19:20.100 --> 00:19:25.700
本格的に使うのであればこういうカスタマイズができるので、ぜひ課金してください。

00:19:25.700 --> 00:19:34.820
ここですね、本題に入りますと、埋め込みコードをコピーですね。これをコピーしてください。共有から埋め込みコードをコピー。

00:19:34.820 --> 00:19:46.040
その後に、ここにですね、貼り付けてください。 貼り付けたら、あとこのURLスラッグですね、これはなんかその

00:19:46.040 --> 00:19:55.200
動画コンテンツのタイトルに合わせて入力してください。

00:19:55.200 --> 00:20:01.000
はい、こんな感じで、必ず半額ですね。

00:20:01.000 --> 00:20:09.960
パスワード保護をすることができますので、このページ単体ですね、はい。 ここにパスワードを入力していただいて公開ですね。

00:20:09.960 --> 00:20:17.420
といった感じでやってください。 試しにやってみますと、

00:20:17.420 --> 00:20:22.460
はい、この状態で公開ですね。

00:20:22.460 --> 00:20:27.380
あ、これボタンあれですね。 背景の色を

00:20:27.380 --> 00:20:37.140
変えておいてください。 っていう感じですね。すごくシンプルで簡単に作れますので、使うブロックも非常に少なく

00:20:37.140 --> 00:20:44.100
やりください思えてしまえば簡単にできますので、はい。 埋め込みコードのコピーもすごく簡単だと思います。

00:20:44.100 --> 00:20:52.420
それではこれで動画視聴ページの、デジタルコンテンツの動画閲覧ページですね、の作成方法は以上になります。