Vimeo OTTでサイト構築する方法を伝授いたします。
見出し画像

Vimeo OTTでサイト構築する方法を伝授いたします。

0wan

皆様本日も1日お疲れ様です!!

1週間に1つアプリをノーコードで作っているあらたいがーです。

今回はアプリではなく、Vimeo OTTを使用して、自分専用の動画配信プラットフォームを制作いたしました。

今回はVimeo OTTのサイト制作の方法をアウトプットしていきます!!!
Vimeo OTTについての記事は、日本ではまだあまりないと思うので、皆様の何かお力になれたら、嬉しいです!!

では早速本題に行きましょう!Let's get started!!!!!

1,そもそもVimeo OTTとは

Vimeo OTTについて知らない方も多いと思うので、簡単に説明させていただきます。

Vimeo OTTとは、簡単に言えば動画プラットフォームです!

ユーザーが動画を閲覧できるサイトもセットで提供してくれるので、
すでに動画コンテンツを持っている方に撮ってとても便利なサービスです。

例えると自分で簡単にNetflixのようなサービスが作れるということです!
また、動画の販売方法も豊富で、サブスクリプションやペイパービューなど
色々な方法で動画を運用できるので使い勝手が良いと思います。

Vimeo OTTでは、動画をあげるサイトを自分自身でカスタマイズできます。今回僕がこれから紹介するのは、主にWebサイトのカスタマイズについてです!では順に作成方法について解説していきます。

2, Vimeo OTTのサイトテンプレートの注意する点

スクリーンショット 2021-08-23 1.12.36

画面1

皆様はまずアカウントを作ると画面1のような画面が開くと思います。
そこからサイトを作成するには、ManageのSite部分を選択します。

Siteを選択すると次にテーマボタンがあるため、
そこからテンプレートを選択いたします。

スクリーンショット 2021-08-22 23.49.02

画面2

テンプレートは全部で5つ。(画面2参照)

テンプレートによってデザイン方法が全然違うため、
まずは全てのテンプレートを一度見ることをお勧めいたします。

またデザインだけでく、機能もそれぞれ違います!!

例えば、1のテンプレートではスケジュールを表示できたけど、3のテンプレートではできない。ってことが起こります。

なのでもし、誰かのサイトを参考にする場合は、同じテンプレートをお選びください!!!

ちなみに今回僕は、黒曜石のテンプレートを使用しました!!

3, サイトの表紙の作成方法

スクリーンショット 2021-08-23 1.29.45

画面3


Vimeo OTTの表紙の作り方1

今回僕が作ったサイトのLP部分から説明していきます。
画面3が実際に僕が作ったサイトのLPです!!

Vimeo OTTのサイトの作り方は基本ノーコードツールと同様で、
左側の列に機能を設定できる覧があるため、ここから編集&作成を行います。

ノーコードツールで開発された経験のある方は簡単に
作ることができると思います。

まず、画面3のSite Settingsから、

Siteのタイトルや説明を入力することができます。

登録ボタン部分のStart Watchingから、
ユーザーはサブスクリプション登録することができます。

※ボタンの位置や文字の配置場所はテンプレート
によって異なり調節できません。

表紙の写真は、Hero Promotionタブから、ダウンロードすることができます。

他サイトへの遷移方法

スクリーンショット 2021-08-23 1.41.24

画面4

Global OptionのAdd nav linkから、遷移先サイトを追加することができます。
(画面4参照)

リンク先を追加すると画面3の左上のタブに表示されます。

4, 説明画面とスケジュールの表紙方法

スクリーンショット 2021-08-23 1.52.06

画面5

メールアドレス登録部分の大かれゴリーは、Mailing Listの追加ボタンからカスタマイズ可能で、動画のカテゴリーの数に合わせることができます。(画面5参照)

またスケジュールも同様で、Schduleタブから
予定の表示を追加することができます。

※スケジュール機能は黒曜石限定の機能ですので、
もし使用したい場合は、黒曜石のテンプレートを使用してください。

もちろん表示させないこともできます。その場合は、
画面3の左側のMailing ListタブのチェックポイントをOffにしてください。

そうすることで、Mailing Listの項目全てを非表示にできます。

5, 動画コンテンツの表示方法(サブスクリプション動画)

スクリーンショット 2021-08-23 2.12.18

画面6

次に動画コンテンツの表示方法です。操作するタブは、Content Previewです。

この動画コンテンツの表示方法が、テンプレートによって大きく違います。画面6の左のADD Translationsから、動画をタップした際の遷移先を選択することができます。

今回、僕は遷移先をビデオのテーマにしたため、
動画をタップすると動画を再生してくれます。

他にも遷移先をCustom images and linksにすれば、
他サイトへ誘導することができます。

注意点

ここに表示できる動画は、
サブスクリプションとして犯罪されている動画のみです。
ペイパービュー課金の設定をした動画は別の欄に記載されます。
(画面6参照)

6, ペイパービュー動画表示方法

スクリーンショット 2021-08-23 2.27.01

画面7

黒曜石のテンプレートの場合、
ペイパービューとして登録された動画は、一番下に表示されます。

黒曜石では、こちらの画面(画面7)は非表示にすることはできません。

※オニキスのテンプレートでは、この欄を非表示にすることは可能です。

またのAdd new pagesタブから、題名とURLを入れることで、
画面7の赤く記したフッターに追加で表示することができます!

7, 動画のアップロード方法

スクリーンショット 2021-08-23 3.08.03

画面8

まず初めに管理画面のContentからVideosを選択いたします。
画面8の画面を開けたら上のUploadボタンから、
動画を取り込むことができます。

また動画をひとまとめにしたい場合は、CollectionsとCategoriesを使用します。

大きさのイメージとしては、

Categories  → Collections  → 一つ一つの動画

この3点をうまく利用してユーザーが見やすい編成にしましょう!!

8, 動画の編集方法

画面8のように動画がアップロードされたら、1つ1つの動画の右についている編集マークから、詳細を詰めていきます。

スクリーンショット 2021-08-23 3.24.25

画面9

動画の編集項目は大きく分けて4つです。※画面9参照

1,General
2, Distribution
3,Discovery
4,State

順に説明していきます。

1, General

ここでは動画のタイトルや、詳細の入力、サムネイルのアップロードができます。

Vimeo  OTTは色々なデバイスから接続することができるため、
サムネイルも色々な形の写真を用意する必要があります。

2, Distribution

ここでは、#の設定、公開エリア(世界か特定の国か)、
誰でも見れるor登録者のみか。など動画の公開範囲の設定が
可能です。ここで公開に設定してもまだサイトには表示されません。

3, Discovery

ここでは、登場人物、販売日、ジャンルといったより詳細を設定することができます。

4, State

ここでは、動画の再生回数、公開日、などの分析をすることができます。

Categories & Collectionsの設定方法も
一つの動画を編集するのと大差はないので、ぜひやってみてください!!

次に実際に動画を視聴者に届ける設定を行います。

9, 動画の運用設定の仕方

スクリーンショット 2021-08-23 3.43.14

画面10

次に実際に動画コンテンツを商品として出していきます。

Products → All Product → Create Product

を順に行うことで、画面10になります。
こちらの画面でペイパービューor サブスクリプションを選択します。

順に説明していきます。

Buy and Rent(ペイパービュー型)
↪︎有料動画に対して、購入or レンタルするビジネスモデル。

スクリーンショット 2021-08-23 3.59.39

画面11

こちら(画面11)がペイパービューの動画販売画面です。
上記のRental Pireodは、お試し無料期間で日数を選択できます。

また、購入もレンタルも自分で細かい設定ができるのもメリットの一つで、
Accept International Currenciesにチェックをすることで日本円も対応してくれます。

Subscription(サブスクリプション型)
↪︎ユーザーは月間 or 年間単位でお金を支払う登録型のビジネスモデル。

スクリーンショット 2021-08-23 4.06.54

画面12

こちら(画面12)が、サブスクリプションの画面です。
1ヶ月の契約と一年の契約を行うことができます!!

どちらの設定も後から編集が可能なため、
とりあえず製品を作ってみるのも良いと思います。

9,実際に作ったサイト公開

スクリーンショット 2021-08-23 4.10.36

画面13

こちらが実際に作った動画です。
画面13の写真は全てサブスクリプション型です。

ノーコード開発とサッカーをカテゴリーで作り、
そこに入れたい動画を入れました。

あとはサブスクリプションを設定し、コレクション追加ページから、
ノーコード開発とサッカーのカテゴリーを追加しました!!

スクリーンショット 2021-08-23 4.10.43

画面14

こちらがペイパービューの設定動画になります。

ペイパービューで設定した商品は一番サイトの下に表示されます!!!

まとめ

今回、Vimeo OTTは日本ではローンチされたばかりで、ネットでほとんど情報が載っていませんでした。しかし、英語で検索すると、5倍ほどの情報量が出てきて、改めて英語で情報収集できたら強いと感じました。

最後までお読みいただきありがとうございます!!

ポンコツ君からスマート君になれるまで発信し続けます!!

ありがとうございました!!



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
0wan
クリエイティブチーム「0wan」 ビジネス×デザイン×コミュニケーション。ビジネスアイデアの壁打ち、具現化活動「BIZ DEV」をやっています。アイデア相談から課題と解決法の発見、プロタイプ作成。ITプロダクト開発の相談も。https://twitter.com/TKHYKO