Uscreen(ユースクリーン)では、アマゾンプライムビデオやネットフリックス、Dラボのような独自の動画配信サービスを、月額たった8,000円程度から簡単に作ることができます。
今回はそのようなUscreen(ユースクリーン)において、動画配信サイトのホームぺージの編集方法について解説します。
第９回は、前半と後半の２つに分けて解説させていただきます。
今回は第９回の「前半」となります。
今回も説明がやや長くなりますが、これは多くの画像を使用し一つ一つ説明をしているためです。
作業内容に難しいことは一切ないので、ご安心ください。
※Uscreenについてご存じない場合は、Uscreen(ユースクリーン)とはをご一読ください。
※まだUscreenのお申し込みをされていない方はUscreen(ユースクリーン)の申し込み方法をご参考ください。
目次
- 【Uscreen(ユースクリーン)使い方シリーズ】とは
- 「ホームページのカスタマイズ」とは
- ホームぺージのカスタマイズ方法
- ホームぺージのカスタマイズは「Customization」ページ
- PC・タブレット・モバイルでの見え方を確認
- 【Header】ヘッダーの編集
- 【Logo】ヘッダーロゴを追加
- 【Header Background Color】ヘッダー背景色
- 【Header Links Color】ヘッダーリンクの色
- 【Save】変更を保存する
- 【Main Banner】メインバーナーの編集
- 【Main Banner】文章を変更
- 【CTA Link】の設定
- 【Background Color】背景色の設定
- 【Background Fade】背景の透明度
- 【Background Image】背景画像の設定
- 【Save】変更を保存する
- 【Promoted Category】おすすめカテゴリーの設定
- 【Category】カテゴリー
- 【Testimonials】お客様の声の設定
- 【YouTube動画版】ホームページのカスタマイズ【第９回：前半】
- Uscreen(ユースクリーン)使い方シリーズ【YouTube動画版】と【ブログ版】
- 次回「ホームページのカスタマイズ【シリーズ】第９回：後半」
- 誰でも、NetflixやU-Next、Ｄラボやガーシーサロンのようなサブスク動画配信サービスは作れるが、注意すべきことも
【Uscreen(ユースクリーン)使い方シリーズ】とは
Uscreen(ユースクリーン)使い方シリーズとは、世界No.1サービスであるUscreenを、日本の方にも不自由なく使っていただけるよう、Uscreenの申し込みから機能紹介、設定方法や使用方法などを解説している、全２１回から成るシリーズになります。
本ブログ「ホームページのカスタマイズ」は、この【Uscreen使い方シリーズ】の第９回：前半となります。
「ホームページのカスタマイズ」とは
ホームぺージとは、Uscreen(ユースクリーン)で作る動画配信サイトのホームぺージです。
要は、Uscreen(ユースクリーン)で作る動画配信サービスサイトにおけるトップページをカスタマイズ（編集）していくということです。
Uscreen(ユースクリーン)におけるカスタマイズは、コーディングなどの専門知識を一切必要とせず、誰でも簡単にホームぺージを編集できるものとなっております。
ホームぺージのカスタマイズ方法
Uscreen(ユースクリーン)で作る動画配信サービスサイトのホームぺージのカスタマイズ編集の方法を解説します。
ホームぺージのカスタマイズは「Customization」ページ
Uscreen(ユースクリーン)管理者ダッシュボードの左メニュー「Customization」をクリックします。
「Customization」ページに切り替わり「Customize」をクリックします。
「What kind of customization would you like to do?」というポップアップが出てくるので「Home Page Customization」を「Select」します。
あなたの動画配信サービスサイトが表示されるページに切り替わります。
ここでホームぺージの編集をしていきますが、あなたが編集する内容は、サイトが表示されている左側部分に即反映されます。よってリアルタイムで確認しながら編集をしてくことができます。
PC・タブレット・モバイルでの見え方を確認
Uscreen(ユースクリーン)のホームぺージのカスタマイズ画面においては、PCやタブレット、スマホでのサイトの見え方を確認することができます。
これら各デバイス使用時におけるサイトの見え方を確認する方法は、画面上の各アイコンをクリックすると、そのデバイス使用時のビューに切り替えられます。
【Header】ヘッダーの編集
Header（ヘッダー）とは、ウェブサイトの一番上の部分をことを指します。
私の例では以下画像のとおり、サイトの一番上部分には左から、JEPISTA TVロゴ、Home、Catalog、Sign Inと表示されています。この部分がヘッダーに該当します。
なお、このUscreen(ユースクリーン)のホームぺージのカスタマイズ画面においては、左メニュー上から「Header」、「Main Banner」、「Promoted Category」、「Category」・・・、と続きますが、この順番はホームぺージの構成セクションの上からの順番となっております。
例えば、左メニューの「Header」の次は「Main Banner」となっております。この「Main Banner」は「Header」の次となっていることから、ホームぺージ（右側）においてもHeaderの次（下）の部分を成すところに当たります。「MARGARET ATWOOD」と題されている部分がありますが、このセクションが「Main Banner」に当たるということです。
左メニュー「Header」をクリックします。
【Logo】ヘッダーロゴを追加
Headerの編集エリアに切り替わり「Logo」の下に「Add Image」があります。
ロゴ画像を追加する場合、この「Add Image」をクリックします。
私の例では、以下の画像をロゴとします。
「Add Image」をクリックします。
ロゴ画像を選択し「開く」をクリックします。
すると選択したロゴ画像が、ヘッダーロゴとして表示されます。
【Header Background Color】ヘッダー背景色
ヘッダーの背景色を変更する設定です。
モバイルビューに切り替えます。そしてサイト右上に表示されているメニューをクリックします。
すると以下のとおり、メニューが表示されます。
「Header Background Color」にてお好きな色を選択すると、このメニューの背景色が変わります。
【Header Links Color】ヘッダーリンクの色
「Header Links Color」の色を選択すると、ヘッダー内の文字リンクの色が変わります。
【Save】変更を保存する
この「Header」セクションの編集が終わったら、左下にある「Save」をクリックし変更を保存します。
「Save」をクリックしたら「This action will change your live store settings. Are you sure?」（和訳：Saveをしたら変更内容が、今運営されているサイトに即反映されます。よろしいですか？）というポップアップが表示されます。
これを「OK」します。
※この「This action will change・・・・」というポップアップ通知は、これから「Save」する度に毎回表示されます。毎回「OK」をクリックして大丈夫です。
尚、本ブログ解説においては今後、この通知が表示されることを解説内容から省くこととします。
Headerの編集が終わり、Saveをしたのでこの「Header」から出ます。
< をクリックして戻ります。
【Main Banner】メインバーナーの編集
Main Bannerのセクションを編集します。
左メニューの「Main Banner」をクリックします。
Main Banner編集エリアに切り替わります。
【Main Banner】文章を変更
上から「Tittle」、「Subtittle」、「Description」、「CTA Tittle」、「CTA Text」という入力欄があります。
これら欄には、デフォルトにて英文が入力されており、その英文がサイト（右側）に反映されています。
よってこれら文章を、あなたのサービスに合った文章に変更します。
【CTA Link】の設定
「CTA Link」とは、CTAボタンのリンク先ページを設定するものです。
例えば私の例では、この「CTA Link」の上にある「CTA Text」において「今すぐ会員登録」と入力しております。そしてこの「CTA Link」は「Join Page」を選択しています。
この場合、このサイトを訪れるユーザーは、この「今すぐ会員登録」をクリックすると、「Join Page」に飛ばされることとなります。なお、この「Join Page」とは、会員登録ページになります。
「CTA Link」をクリックすると、リンク先とするページを選択することができます。
【Background Color】背景色の設定
ここでの「Background Color」とは、Main Banner部分の背景色を変更できるものです。
下記画像では、この設定においてグレー色を選択したため、サイト（右側）ではMain Banner部分の背景色がグレー基調となりました。
【Background Fade】背景の透明度
Background Fadeでは、Background Colorにて設定した背景色の透明度（濃さ）を調整することができます。
私の例では最初、Background Colorにて濃い黒を設定であったため、後ろの画像は見えませんでしたが、このBackground Fadeのパラメーターを一番左に動かし、濃い黒であったBackground Colorを薄くしました。結果、背景画像が少し見える状態となりました。
【Background Image】背景画像の設定
Background Imageでは、背景画像を設定することができます。
私の例では、このデフォルトの状態において、女性が背を向けている姿の画像が背景画像として設定されています。
「Remove Image」をクリックし、この画像を削除します。
画像が消えます。
そして「Add Image」をクリックします。
お好みの画像を選択し「開く」をクリックします。
すると以下のとおり、背景画像が設定されました。
【Save】変更を保存する
この「Main Banner」の編集が終わったら、左下にある「Save」をクリックし変更を保存します。
Saveしたのでこの「Main Banner」から出ます。
< をクリックして戻ります。
【Promoted Category】おすすめカテゴリーの設定
Promoted Categoryとは、いわゆる「おすすめカテゴリー」や「人気カテゴリー」というようなものです。
そしてまだ動画を一本も上げていない今の状態では、カテゴリーはまだ作っていません。
なぜならカテゴリーは通常、動画が複数あるうえで同じ類の動画を束ねて初めてカテゴリーを作成するものであり、「動画がある」ということを前提としています。
カテゴリー自体がない現状ではありますが、デフォルト状態では望ましくないので編集していきます。
※このカテゴリーの作成・設定については、このUscreen使い方シリーズの第14回にて詳しく解説します。その時に、ここでする解説を再度します。
Promoted Categoryセクションの編集をします。
「Promoted Category」をクリックします。
クリックすると「Promoted Category」編集エリアに切り替わります。
現状、Categoryが無いので「No results found」（和訳：何もない）と表示されます。
もし今の時点で、このセクション自体を必要としない場合、「Show/Hide Section」左のグリーンボックスをクリックすると、このPromoted Category自体をサイトから隠すこともできます。
「Title」欄に「Browse Programs」と入力されており、それがサイトに反映されています。
これを私の例では「動画を探そう」と変更します。
この「Promoted Category」の編集が終わったら、左下にある「Save」をクリックし変更を保存します。
Saveしたのでこの「Promoted Category」から出ます。
< をクリックして戻ります。
【Category】カテゴリー
先述のPromoted Categoryにてご説明したとおり、現状カテゴリーは１つもありません。
しかしデフォルトの状態では望ましくないことと、編集方法を知っていただく必要があることから、今できることをやっていきます。
「Category」をクリックします。
カテゴリーの編集エリアに切り替わります。
まず左の編集エリアの「Title」に入力されている「Category」を、「カテゴリー」に変更します。
そして「Block 1 Image」の横の「Remove Image」をクリックし、デフォルトの画像を削除します。
以下の画像のとおり、Block１の「Flow」と表示されている画像が無くなりました。
「Remove Image」したあとは「Add Image」が表示され、画像を追加することができるので、画像を追加します。
ファイルから、お好みの画像を選択し「開く」をクリックします。
Block 1におけるカテゴリー画像が設定されました。
サイト（右側）では、この「カテゴリー」のタイトルに「Flow」と表示されており、これをお好みのカテゴリー名に変更します。
「Block 1: Link」をクリックすると、ドロップダウンにてページを選択することができます。
これは、この「サーバー対決」と表示されているエリアをクリックしたときのリンク先ページを選ぶものとなります。
本来なら、この選択のなかから「Choose Category」を選択したうえで、カテゴリーを選択することとなります。
カテゴリーではないページをリンク先に設定することもできます。
必ずしもカテゴリーにリンクを飛ばさなくてはいけないものではないので、ご自由に設定ください。
Block 1 と同様に、Block 2 ～ Block 5 についても、編集していきます。
私の例では、以下の画像のとおり、各Blockのカテゴリー設定をしました。
現状カテゴリーが無いため、全Blockの「Block :Link」におけるリンク先ページを「Home Page」に指定することとしました。
全Blockの「Block :Link」におけるリンク先ページを「Home Page」にしたため、各カテゴリー部分をクリックすると、ホームぺージにリダイレクトされます。
Block 1である「サーバー対決」をクリックします。
すると、ホームぺージにリダイレクトされます。
Block ２である「サーバー移転」をクリックします。
Block ２もしっかりと、ホームぺージにリダイレクトされます。
ちなみに私の例における、Block 4～5の設定は以下の画像のとおりです。
この「Category」セクションの編集が終わったら、左下にある「Save」をクリックし変更を保存します。
そして、< をクリックしてこの「Category」編集エリアから出ます。
【Testimonials】お客様の声の設定
Testimonialsとは、いわゆる「お客様の声」や「口コミ」というようなものです。
動画配信サービスを利用されているあなたのお客さんの声を、ホームぺージに掲載できるセクションです。
「Testimonials」をクリックします。
Testimonials編集セクションに切り替わります。
先でもご説明しましたが、もしまだこの「お客様の声」セクション自体を必要としない場合、「Show/Hide Section」左の緑ボックスをクリックすることで、このセクションを隠すことができます。
「Show/Hide Section」左の緑が消え、本セクション自体が隠れます。
左の編集エリアにて、各項目を編集します。
私の例では、以下のとおりとしました。
編集が終わったら、左下にある「Save」をクリックし変更を保存します。
【YouTube動画版】ホームページのカスタマイズ【第９回：前半】
今回の説明と同じ内容を、YouTubeにて動画公開しています。
以下の【YouTube動画版】では、第９回を”通し”で解説しております（前半、後半がありません）。
今回のブログ解説は、以下の動画のおいての「始め ～ 11:25」です。
もし本【ブログ版】にて理解ができない点があった場合は、以下の【YouTube動画版】をご視聴ください。
Uscreen(ユースクリーン)使い方シリーズ【YouTube動画版】と【ブログ版】
【Uscreen(ユースクリーン)使い方シリーズ】にはYouTubeにて公開している【動画版】と、本サイトにて公開している【ブログ版】があります。
次回「ホームページのカスタマイズ【シリーズ】第９回：後半」
次回は、ホームページのカスタマイズについての解説をします。次回は【Uscreen(ユースクリーン)使い方シリーズ】の第９回後半となります。
ホームページのカスタマイズ【Uscreen(ユースクリーン)使い方シリーズ】第９回：後半
今回の説明は以上です。
長い作業、お疲れ様でした。
誰でも、NetflixやU-Next、Ｄラボやガーシーサロンのようなサブスク動画配信サービスは作れるが、注意すべきことも
ジェピスタ では、これからウェブサービスやアプリの構築を始めれる方、とりわけ「動画配信サービス・動画配信アプリ」を作られる方にとって、事前に知っておくべき情報を専門家の立場から発信しております。
例えば「動画配信サービスを作ることができる開発サービス」についてや、「有名インフルエンサーが立ち上げた独自動画配信サービス」などについても記事で取り上げております。
つまり、「動画配信サービス・動画配信アプリ」界隈を熟知しており、かつ「動画配信サービス・動画配信アプリ開発を専門としているジェピスタだからこそできる発信をしている」ということです。
昨今、動画配信サービスを作ることができる開発サービスが多く誕生しており、「適切な開発サービス選び」が難しくなってきています。
「動画配信サービス開発」という分野においては、情報を十分に理解できない方々が、「なんとなく良さそう」といった理由から「その方にとって適切でない開発サービスを選んでしまい、結果、サービスをリリースしたあとに困ってしまう」といったケースが後を絶ちません。
貴方が選んだ開発サービスが、そもそも貴方が想像するサービスの在り方を実現できなければ、当然、当初想像していたサービスを実現するのは困難となり、そして「ユーザーを増やす」という成長フェーズになったときに不可避となる「サービスの改善」や「ユーザー体験度の向上」についても、困難なこととなります。
つまり、まず ①「サービスをどのような形としたいのか」という、サービスの形を具現化し、②「将来的には、有料会員10,000人にする」といったようなサービスが目指すゴールを設定してください。
そのうえで、いくつもある開発サービスのなかで、どの開発サービスだったら想像するサービスの形を実現することができるかをご確認ください。
そして、「有料会員10,000人」という目標である場合、いくつもある開発サービスのなかで、どの開発サービスだったら、「サービスの改善」や「ユーザー体験度の向上」を施していけるのか、要するに「どの程度のカスタマイズができるのか」をご確認ください。
貴方のサービスが「ユーザーを増やす」という成長フェーズになったとき、必須要件となってくるのが「サービスの改善」や「ユーザー体験度の向上」、つまり「サービスを良くしていく」ということであり、それを成していくためには、カスタマイズできることが大前提です。
言い換えると、サービスにカスタマイズを加えられない、もしくは限定的なカスタマイズしか施せない場合、サービスの向上は難しく、したがってユーザー数を増やすこと自体が困難なものとなってしまいます。
失敗しないため、間違った選択をしないためにも、「動画配信サービスをこれから作りたい」とお考えの方は、以下の記事を全てご一読いただくことをお勧めします。
記事の閲覧はもちろん無料です。
- 独自の動画配信サービス・動画配信アプリが作れるサービスを厳選紹介【６社を徹底比較】必読
NetflixやPrime Video、U-Nextような動画配信サービス・動画配信アプリが作れるサービスをご紹介
- 動画配信サービス(アプリ)の開発
例えばNetflix、U-Next、Dラボ、 ガーシーサロン、河野塾ISMのようなサービスを開発｜Uscreenなどの格安サービスとは比較にならないカスタマイズ性が特徴
- Uscreen(ユースクリーン)とは
Uscreen(ユースクリーン)について、日本唯一のUscreen社公認代理店が徹底解説
- メンタリストDaiGo氏は、なぜ独自の動画配信サービス「Dラボ」を作ったのか
YouTubeチャンネル登録者210万人のDaiGo氏が作ったDラボについて、経緯や開発費、売上について徹底解説
- GASYLE(ガシる)とは – ガーシー氏が作ったサロンについて
ガーシーこと東谷義和氏が立ち上げた独自の動画配信サービスについて、サービスを作った経緯や利益、売上、サーバー費について解説
- YouTubeメンバーシップのデメリットとは
「YouTubeメンバーシップでサブスクをするのがマズい」という理由や、「そもそもマネタイズ最大化できない」という理由について解説
- mediable(メディアブル)とは
mediableの特徴やメリット・デメリット、評判などについて解説
- アフィリエイトにご注意を！
「動画配信サービスを作ることができる開発サービス」についてを紹介したサイトやブログ、YouTube動画が多く存在していますが、それらは「お金を貰っているアフィリエイト」である場合があるので注意が必要
