ホームページのカスタマイズ【Uscreen使い方シリーズ】第9回:前半

【ブログ版】ホームページのカスタマイズ【Uscreen使い方シリーズ】第9回:前半Uscreen使い方シリーズ

Uscreenでは、アマゾンプライムビデオやネットフリックス、Dラボのような独自の動画配信サービスを、月額たった5,000円程度から簡単に作ることができます。

今回はそのようなUscreenにおいて、動画配信サイトのホームぺージの編集方法について解説します。

第9回は、前半と後半の2つに分けて解説させていただきます。

今回は第9回の「前半」となります。

今回も説明がやや長くなりますが、これは多くの画像を使用し一つ一つ説明をしているためです。

作業内容に難しいことは一切ないので、ご安心ください。

※Uscreenについてご存じない場合は、Uscreenとはをご一読ください。
※まだUscreenのお申し込みをされていない方はUscreenの申し込み方法をご参考ください。

【Uscreen使い方シリーズ】とは

Uscreen使い方シリーズとは、世界No.1サービスであるUscreenを、日本の方にも不自由なく使っていただけるよう、Uscreenの申し込みから機能紹介、設定方法や使用方法などを解説している、全21回から成るシリーズになります。

本ブログ「ホームページのカスタマイズ」は、この【Uscreen使い方シリーズ】の第9回:前半となります。

»【Uscreen使い方シリーズ】とは

本サイトでのブログでの解説のほかに、YouTubeにおいても解説動画を公開しております。

動画での解説が良い場合は是非、動画をご視聴ください。

» 【Uscreenの使い方シリーズ】再生リスト@YouTube 【動画解説】

「ホームページのカスタマイズ」とは

ホームぺージとは、Uscreenで作る動画配信サイトのホームぺージです。

要は、Uscreenで作る動画配信サービスサイトにおけるトップページをカスタマイズ(編集)していくということです。

Uscreenにおけるカスタマイズは、コーディングなどの専門知識を一切必要とせず、誰でも簡単にホームぺージを編集できるものとなっております。

ホームぺージのカスタマイズ方法

Uscreenで作る動画配信サービスサイトのホームぺージのカスタマイズ編集の方法を解説します。

ホームぺージのカスタマイズは「Customization」ページ

Uscreen管理者ダッシュボードの左メニュー「Customization」をクリックします。

Uscreenにおけるホームぺージのカスタマイズは「Customization」メニューから


「Customization」ページに切り替わり「Customize」をクリックします。

Uscreenにおけるホームぺージのカスタマイズは「Customization」ページの「Customize」をクリックする


「What kind of customization would you like to do?」というポップアップが出てくるので「Home Page Customization」を「Select」します。

「What kind of customization would you like to do?」というポップアップにおいて「Home Page Customization」を「Select」する


あなたの動画配信サービスサイトが表示されるページに切り替わります。

ここでホームぺージの編集をしていきますが、あなたが編集する内容は、サイトが表示されている左側部分に即反映されます。よってリアルタイムで確認しながら編集をしてくことができます。

UscreenにおけるHome Page Customization(ホームぺージのカスタマイズ)ページ

PC・タブレット・モバイルでの見え方を確認

Uscreenのホームぺージのカスタマイズ画面においては、PCやタブレット、スマホでのサイトの見え方を確認することができます。

これら各デバイス使用時におけるサイトの見え方を確認する方法は、画面上の各アイコンをクリックすると、そのデバイス使用時のビューに切り替えられます。

UscreenにおけるHome Page Customization画面でのPC、タブレット、スマホビューの切り替え方法
PC使用時の見え方(ビュー)


UscreenにおけるHome Page Customization画面でのタブレット使用時の見え方(ビュー)
タブレット使用時の見え方(ビュー)


UscreenにおけるHome Page Customization画面でのモバイル使用時の見え方(ビュー)
モバイル使用時の見え方(ビュー)

【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」をクリックします。

UscreenにおけるHome Page Customization画面でのHeaderの編集

【Logo】ヘッダーロゴを追加

Headerの編集エリアに切り替わり「Logo」の下に「Add Image」があります。

ロゴ画像を追加する場合、この「Add Image」をクリックします。

Home Page CustomizationでのHeaderの編集においてロゴ画像を追加する

私の例では、以下の画像をロゴとします。

Uscreenのヘッダーロゴに追加するJEPISTA TVのロゴ画像


「Add Image」をクリックします。

Home Page CustomizationでのHeaderの編集においてロゴ画像を追加する


ロゴ画像を選択し「開く」をクリックします。

JEPISTA TVロゴ画像を選択し「開く」をクリックする


すると選択したロゴ画像が、ヘッダーロゴとして表示されます。

Uscreenのヘッダーロゴの設定が完了

【Header Background Color】ヘッダー背景色

ヘッダーの背景色を変更する設定です。

UscreenにおけるHeader Background Colorの変更設定


モバイルビューに切り替えます。そしてサイト右上に表示されているメニューをクリックします。

UscreenにおけるHeader Background Colorの変更をモバイルビューで確認する

すると以下のとおり、メニューが表示されます。

Uscreenにおけるモバイルビューでのヘッダーメニュー


「Header Background Color」にてお好きな色を選択すると、このメニューの背景色が変わります。

「Header Background Color」にて任意の色を選ぶと、このメニューの背景色が変わる

【Header Links Color】ヘッダーリンクの色

「Header Links Color」の色を選択すると、ヘッダー内の文字リンクの色が変わります。

「Header Links Color」の色を選択すると、文字リンクの色が変わる

【Save】変更を保存する

この「Header」セクションの編集が終わったら、左下にある「Save」をクリックし変更を保存します。

UscreenにおけるHEADER編集が終わったら「Save」をクリックし変更を保存する


「Save」をクリックしたら「This action will change your live store settings. Are you sure?」(和訳:Saveをしたら変更内容が、今運営されているサイトに即反映されます。よろしいですか?)というポップアップが表示されます。

これを「OK」します。

※この「This action will change・・・・」というポップアップ通知は、これから「Save」する度に毎回表示されます。毎回「OK」をクリックして大丈夫です。

尚、本ブログ解説においては今後、この通知が表示されることを解説内容から省くこととします。

「Save」をクリックしたら「This action will change your live store settings. Are you sure?」というポップアップが表示される


Headerの編集が終わり、Saveをしたのでこの「Header」から出ます。

< をクリックして戻ります。

UscreenにおけるHEADER編集ページにて編集終了したら、<をクリックし戻る

【Main Banner】メインバーナーの編集

Main Bannerのセクションを編集します。

左メニューの「Main Banner」をクリックします。

Main Bannerのセクションを編集する


Main Banner編集エリアに切り替わります。

【Main Banner】文章を変更

上から「Tittle」、「Subtittle」、「Description」、「CTA Tittle」、「CTA Text」という入力欄があります。

UscreenにおけるMain Bannerの編集

これら欄には、デフォルトにて英文が入力されており、その英文がサイト(右側)に反映されています。

よってこれら文章を、あなたのサービスに合った文章に変更します。

UscreenにおけるMain Banner編集において、サービスに合った文章を入力する

【CTA Link】の設定

「CTA Link」とは、CTAボタンのリンク先ページを設定するものです。

UscreenにおけるCTA Linkの設定

例えば私の例では、この「CTA Link」の上にある「CTA Text」において「今すぐ会員登録」と入力しております。そしてこの「CTA Link」は「Join Page」を選択しています。

この場合、このサイトを訪れるユーザーは、この「今すぐ会員登録」をクリックすると、「Join Page」に飛ばされることとなります。なお、この「Join Page」とは、会員登録ページになります。



「CTA Link」をクリックすると、リンク先とするページを選択することができます。

UscreenにおけるCTA Linkの設定

【Background Color】背景色の設定

ここでの「Background Color」とは、Main Banner部分の背景色を変更できるものです。

下記画像では、この設定においてグレー色を選択したため、サイト(右側)ではMain Banner部分の背景色がグレー基調となりました。

UscreenのMain Bannerにおける「Background Color」背景色の変更

【Background Fade】背景の透明度

Background Fadeでは、Background Colorにて設定した背景色の透明度(濃さ)を調整することができます。

私の例では最初、Background Colorにて濃い黒を設定であったため、後ろの画像は見えませんでしたが、このBackground Fadeのパラメーターを一番左に動かし、濃い黒であったBackground Colorを薄くしました。結果、背景画像が少し見える状態となりました。

UscreenにおけるCTA Linkの設定
最初の状態。背景色が濃い黒のため背景画像が見えない
Background Fadeでは、Background Colorにて設定した背景色の透明度(濃さ)を調整できる
Backgound Faceを下げたら、背景色が薄くなり背景画像が見える

【Background Image】背景画像の設定

Background Imageでは、背景画像を設定することができます。

私の例では、このデフォルトの状態において、女性が背を向けている姿の画像が背景画像として設定されています。

「Remove Image」をクリックし、この画像を削除します。

Background Imageでは、背景画像を設定できる

画像が消えます。

そして「Add Image」をクリックします。

「Add Image」をクリックしてBackground Image(背景画像)を設定する

お好みの画像を選択し「開く」をクリックします。

お好みの画像を選択し「開く」をクリックする

すると以下のとおり、背景画像が設定されました。

UscreenにおけるMain Bannerの背景画像の設定が完了

【Save】変更を保存する

この「Main Banner」の編集が終わったら、左下にある「Save」をクリックし変更を保存します。

この「Main Banner」の編集が終わったら、左下にある「Save」をクリックし変更を保存する

Saveしたのでこの「Main Banner」から出ます。

< をクリックして戻ります。

UscreenにおけるMain Bannerの編集が終了したら、

【Promoted Category】おすすめカテゴリーの設定

Promoted Categoryとは、いわゆる「おすすめカテゴリー」や「人気カテゴリー」というようなものです。

そしてまだ動画を一本も上げていない今の状態では、カテゴリーはまだ作っていません…





本解説の残りのコンテンツは【会員限定】となります。


全コンテンツを読むには「会員登録」する必要があります。


会員登録はこちらからどうぞ




【YouTube動画版】ホームページのカスタマイズ【第9回:前半】

今回の説明と同じ内容を、YouTubeにて動画公開しています。

以下の【YouTube動画版】では、第9回を”通し”で解説しております(前半、後半がありません)。

もし本【ブログ版】にて理解ができない点があった場合は、以下の【YouTube動画版】をご視聴ください。

ホームページのカスタマイズ【Uscreen使い方シリーズ】第9回

Uscreen使い方シリーズ【YouTube動画版】と【ブログ版】

【Uscreen使い方シリーズ】にはYouTubeにて公開している【動画版】と、本サイトにて公開している【ブログ版】があります。

» 【Uscreenの使い方シリーズ】再生リスト【YouTube動画版】

» 【Uscreenの使い方シリーズ】ブログ一覧【ブログ版】

次回「ホームページのカスタマイズ【シリーズ】第9回:後半」

次回は、ホームページのカスタマイズについての解説をします。次回は【Uscreenの使い方シリーズ】の第9回後半となります。



今回の説明は以上です。

長い作業、お疲れ様でした。

ECサイトや動画配信サービスのウェブ開発、モバイルアプリの開発・運営をする。学生時代の海外留学2年間と、フィリピンにて2年間仕事をしたので、英語が得意。長崎ちゃんぽん好き。千葉出身。YouTubeチャンネルは「ジェピスタ」。

YouTubeにて発信をしております。是非、ご覧ください。
JEPISTA Service 動画配信システムとUscreenサポート
Uscreen使い方シリーズ
もしお役立ちいただけたということであれば、シェアしてください。情報発信するうえでの糧になります。
YouTubeにて発信をしております。是非、ご覧ください。
JEPISTA(ジェピスタ)

コメント

テキストのコピーはできません。
タイトルとURLをコピーしました