ホームページのカスタマイズ【Uscreen(ユースクリーン)使い方シリーズ】第9回:後半

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

Uscreen(ユースクリーン)では、Amazon Prime VideoやNetflix、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(ユースクリーン)で作る動画配信サービスサイトのホームぺージのカスタマイズ編集の方法を解説します。

前半における最後の説明からの続きとなります。

【All Platforms】モバイルアプリ等の紹介セクション

Uscreen(ユースクリーン)におけるこの「All Platforms」とは、あなたの動画配信サービスのiOSアプリやAndroidアプリ、Amazon Fire TVやApple TVなどを紹介するホームぺージのセクションです。

訪問ユーザーは、このセクションに表示されているそれぞれのアプリをクリックすることで、そのアプリをダウンロードすることができるページにアクセスできる、というものになります。

このセクションの編集は「All Platforms」をクリックします。

Uscreenにおけるこの「All Platforms」とは、モバイルアプリなどを紹介するホームぺージのセクションです


「Experience Citrix・・・」とタイトルがあり、複数のデバイスがある画像のエリアが、当該セクションです。

Uscreenにおける「All Platforms」の編集画面


左の編集エリアの「Title」と「Subtitle」に文章を入力します。

入力すると、右に表示されているサイトに反映されます。

Uscreenにおける「All Platforms」にて編集する


編集エリアに「Show/Hide Amazon」や「Show/Hide Apple TV」、「Show/Hide Roku TV」、「Show/Hide Fire TV」などという箇所があります。

「Show/Hide Amazon」や「Show/Hide Apple TV」などがある


「Show/Hide Roku TV」、「Show/Hide Fire TV」などがある

これら全てには、緑のマークが入っていることから、有効化されている状態となっております。

そしてこの緑マークをクリックすれば、緑は消え無効化されます。無効化すると、右側のサイトからその部分が消えます。

以下「Show/Hide Amazon」の例をご覧ください。

緑マークをクリックすれば、緑は消え無効化される


緑マークを消すと、右側サイトに表示されていたデバイスが消える。

緑マークを消すと、右側サイトに表示されていたデバイスが消える。


私の例では、AndroidアプリとiOSアプリ以外の作成は考えていないので、「Android」と「Iphone」以外全てを無効化することとします。

「Android」と「Iphone」以外を全て無効化する


「Android」と「Iphone」以外全てを無効化したことから、「Iphone」と「Android」のリンクエリアのみが表示されています。

「Iphone」と「Android」のリンクエリアのみが表示されている。


「Show/Hide Iphone」や「Show/Hide Android」という編集エリアのなかにそれぞれ「IPhone Link」や「Android Link」という箇所があります。

これをクリックすると、ドロップダウンが開き、リンク先ページを選択することができます。

「IPhone Link」や「Android Link」という箇所をクリックすると、リンク先ページを選択できる。


私の例では、AndroidアプリやiOSアプリを作る予定ですが、まだ作成していないので、ひとまず「ホームぺージ」をリンク先とします。

※アプリが完成したら、Goolge PlayとApple Storeのそれぞれのアプリページをリンク先とします。

私の例では、ひとまずホームぺージをリンク先としますが、「アプリ完成までしばらくお待ちください。」というようなページを別途作成して、そのページをリンク先にしてもいいかもしれません。

設定が完了したら下の「Save」をクリックし、変更を保存します。

設定が完了したら下の「Save」をクリックし、変更を保存する


Storefrontへいき、動作確認をします。

「iPhone」をクリックします。

「iPhone」をクリックし、All Platformにおける設定の動作確認


すると、ホームぺージにリダイレクトされました。

Uscreenのホームぺージにリダイレクト


アプリ作成をお考えなく、そもそもこのセクション自体が不要であれば、編集エリア一番上の「Show/Hide Section」をクリックすることで、このセクション全体をホームぺージから隠すことができます。

「Show/Hide Section」をクリックすることで、このセクション全体をホームぺージから隠すことができる。


「Show/Hide Section」をクリックし、緑マークを消したら、この「All Platforms」全体がサイトから消えました。

「Show/Hide Section」をクリックし、緑マークを消したら、この「All Platform」全体がサイトから消える。


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

そして、< をクリックしてこの「All Platforms」編集エリアから出ます。

<をクリックしてこの「All Platforms」編集エリアから出る

【From Our Instagram】インスタや他のページの紹介

Uscreenにおけるこの「From Our Instagram」とは、あなたのインスタグラムのページやホームぺージ等を紹介できるホームぺージのセクションです。

ユーザーは、このセクションに表示される画像をクリックすることで、それぞれのリンク先に飛べるというものになります。

私の例ではこのインスタセクションを、Instagramに特化したセクションとせず、JEPISTAのホームぺージやYouTubeチャンネル、Twitterを紹介するセクションとしたいと思います。

このセクションの編集は「From Our Instagram」をクリックします。

Uscreenにおける「From Our Instagram」を編集する


編集エリアに切り替わり、右側のサイトでは当該の「From Our Instagram」が表示されます。

Uscreenにおける「From Our Instagram」の編集エリア画面


「私の例ではこのインスタセクションを、Instagramに特化したセクションとせず、JEPISTAのホームぺージやYouTubeチャンネル、Twitterを紹介するセクションとしたいと思います。」と言いました。

よって、左の編集エリアにて、画像やそのリンク先の設定をします。

設定は内容は以下の画像のとおりです。

Uscreenにおける「From Our Instagram」の編集画面にて、画像やリンク先を設定する


Uscreenにおける「From Our Instagram」の編集画面にて、画像やリンク先を設定する


設定が終えたら、「Save」をクリックし、設定を保存します。

Uscreenにおける「From Our Instagram」の編集後、「Save」をクリックし設定を保存する


Storefrontへいき、動作確認をします。

ツイッターの画像をクリックします。

「From Our Instagram」設定では、ツイッター画像のリンク先に、JEPISTA公式ツイッターに飛ぶよう設定しております。

Uscreenにおける「From Our Instagram」のツイッターの画像


TwitterのJEPISTA公式ページにしっかりとリダイレクトされました。

TwitterのJEPISTA公式ページ


続いて、YouTubeの画像をクリックします。

「From Our Instagram」設定では、YouTube画像のリンク先に、JEPISTAチャンネルのページに飛ぶよう設定しております。

Uscreenにおける「From Our Instagram」のYouTubeの画像


YouTubeのJEPISTチャンネルのページにしっかりとリダイレクトされました。

YouTubeのJEPISTAチャンネル


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

そして、< をクリックしてこの「From Our Instagram」編集エリアから出ます。

<をクリックしてこの「From Our Instagram」編集エリアから出る

【Bottom Call To Action】行動喚起

Uscreen(ユースクリーン)におけるこの「Bottom Call To Action」とは、訪問ユーザーに促したい行動を喚起することができるホームぺージのセクションです。

このセクションでは、行動喚起を促す文章と、ボタンを表示させることができます。

例えば、あなたの動画配信サービスを定額購読したくなるような文言を入れ、ボタンのリンク先を定額プランの購入ページ(Join Page)にすることなどが考えられます。

今回の私の例では、このセクションを「お問い合わせ」とします。もちろんあなたの方で「お問い合わせ」にする必要はありません。設定の方法について説明するための一例であります。

セクションの編集は「Bottom Call To Action」をクリックします。

Uscreenにおける「Bottom Call To Action」の編集をする


左が編集エリアに、右が当該セクションに切り替わります。

Uscreenにおける「Bottom Call To Action」の編集画面


左の編集エリアには「Title」、「Subtitle」、「CTA Text」、「CTA Link」があります。

以下の画像のとおり、文章等を編集します。

編集すると、右のサイトに反映されます。

「Bottom Call To Action」の編集には「Title」、「Subtitle」、「CTA Text」、「CTA Link」がある


「CTA Link」にリンク先としたいページを選択します。

先述した、「あなたの動画配信サービスを定額購読したくなるような文言を入れ、ボタンのリンク先を定額プランの購入ページ(Join Page)にすることなどが考えられます。」の場合であれば、ここで「Join Page」を選択することとなります。

「CTA Link」にリンク先としたいページを選択する


私の例では、JEPISTA Serviceにおける「お問い合わせ」ページをリンク先にします。

JEPISTA Serviceホームぺージ


JEPISTA Serviceにおけるお問い合わせページのURLをコピーします。

JEPISTA Serviceにおけるお問い合わせページのURLをコピーする


Uscreenのダッシュボード画面に戻り、「CTA Link」にURLを張り付けます。

そして「Save」をクリっクし、設定を保存します。

Uscreenにおける「Bottom Call To Action」の設定を保存する


Storefrontへいき、動作確認をします。

「お問い合わせ」をクリックします。

Uscreenにおける「Bottom Call To Action」の動作確認をする


すると、JEPISTA Serviceのお問い合わせページにリダイレクトされます。

JEPISTA Serviceのお問い合わせページにリダイレクトされた


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

そして、< をクリックしてこの「Bottom Call To Action」編集エリアから出ます。

<をクリックしてこの「Bottom Call To Action」編集エリアから出る

【SEO Settings】SEO設定

Uscreenのホームぺージのカスタマイズおけるこの「SEO Settings」とは、Uscreenで作るこの動画配信サービスのホームぺージについてのSEOタイトルやSEO説明欄を設定できるセクションです。

このSEO設定のタイトルと説明欄を設定することで、Googleなどの検索エンジンの検索結果で、あなたが表示させたいタイトルや説明欄の文章とすることができます。

以前の第8回【メインデザイン「テーマ」選びと、「共通ページ」のカスタマイズ】においては、「カタログページ」に係るSEO設定をしました。

今回は、ホームぺージ(サイトのトップページ)に係るSEO設定であり、よってあなたの動画配信サイトを、検索エンジンにて見つけるユーザーの多くは、ここで設定するこのホームぺージに係るSEOタイトルとSEO説明欄を見ることになるでしょう。

セクションの編集は「SEO Settings」をクリックします。

Uscreenの「SEO Settings」の編集


編集エリアにページが切り替わります。

この「Page Title」には、あなたが検索エンジン(Google)の検索結果に表示させたいタイトルを入力します。

Uscreenで作る動画配信サイトのホームぺージに係るSEOタイトルとディスクリプション


検索エンジン(Google)の検索結果に表示されるタイトルとは、例えばJEPISTA Serviceの場合「定額制動画配信システムのことなら【JEPISTA Service】」と表示されているものです。

JEPISTA Serviceの検索結果でのSEOタイトル


Uscreenの編集エリアにおける「Page Description」欄には、検索エンジン(Google)の検索結果に表示させたい説明欄の文章を入力します。

検索エンジンにおける説明欄とは、以下の部分です。

JEPISTA Serviceの検索結果でのSEO説明欄


私の例では、以下のとおり入力します。

UscreenにおけるSEO SettingsのPage TitleとPage Descriptionの入力例


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

「SEO Settings」セクションの編集が終わったら「Save」をクリックし変更を保存する


< をクリックしてこの「SEO Settings」編集エリアから出ます。

Uscreenにおける「SEO Settings」から出る

Uscreenのホームぺージのカスタマイズおけるこの「Footer」とは、Uscreenで作るこの動画配信サイトのフッターを編集するセクションです。

フッターとは「足」という意味であり、サイトの一番下の部分を指します。反対にヘッダーは「頭」であり、サイトの一番上の部分を指します。

セクションの編集は「Footer」をクリックします。

Uscreenのホームぺージのカスタマイズおけるこの「Footer」の編集


編集エリアにページが切り替わります。

右のサイトの一番下に「©acme, Inc. 2018」、右側にSNSアイコンがあります。

これらが、ここでのフッターに該当するものです

中央にある「Redeem a gift card」や「Buy a gift card」は、メニューに該当します。この文章の変更や非表示の方法等については、第11回「Navigation(メニュー)の設定」にて詳しく解説します。

「Footer」の編集


Uscreenで作る動画配信サイトの「Footer」におけるSNSアイコン


左の編集エリアにおいてデフォルトにて、各SNSのURLが入っています。この入力欄に、あなたのSNSページのURLを入力します。

もし、SNSページをお持ちでない場合、入力欄を空欄にしてください。

空欄にすると、サイトのSNSアイコンが非表示となります。

Link欄を空欄にすると、サイトのSNSアイコンが非表示となる


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

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


Storefrontへいき、動作確認をします。

Twitterアイコンをクリックします。

「Footer」セクションの編集が完了し、動作確認をする


すると、TwitterのJEPISTAページにリダイレクトされます。

TwitterのJEPISTAページにリダイレクト

【Settings】全体の色など

Uscreenのホームぺージのカスタマイズおけるこの「Settings」とは、Uscreenで作るこの動画配信サイトの色などを設定するセクションです。

ここまでのこのホームぺージのカスタマイズでは、編集エリアの「Blocks」というタブに表示されているメニューから、各セクションの編集をしてきました。

<をクリックしてこの「Footer」編集エリアから出る


今回のこの「Settings」の設定では、「Settings」タブをクリックします。

Uscreenにおけるホームぺージのカスタマイズの「Settings」タブ


「Background Color」をクリックし、お好きな色を指定すると、サイト全体の背景色が変更できます。

「Background Color」にて色を選択すると、サイト全体の背景色が変更できる


「Primary Color」では、私の例においては「今すぐ会員登録」や「お問い合わせ」のボタンの色を変更することができます。

Uscreenで作る動画配信サイトのMain BannerのCTA


Uscreenで作る動画配信サイトのBottom Call To ActionのCTA


Primary Colorの色を変更します。

すると、Main BannerセクションのCTA「今すぐ会員登録」の色が変わります。

Uscreenで作る動画配信サイトにおけるMain BannerCTAの色を変更する


Bottom Call To ActionセクションにおけるのCTA「お問い合わせ」の色も変更されます。

Uscreenで作る動画配信サイトにおけるBottom Call To ActionのCTAの色を変更する


左の編集エリアの「Show Program Duration」とは、動画のサムネイルに動画の時間を表示させるかというものです。

Uscreenにおける「Show Program Duration」とは、動画のサムネイルに動画の長さを表示・非表示する設定

以下の画像のとおり、動画のサムネイル右下には、動画の長さ(時間)が表示されています。

動画のサムネイル右下に、動画の長さが表示されている

「Show Program Duration」における緑マークを外すことで、この時間が表示されなくなります。

※動画を一本も上げていない現在の状態においては、「Show Program Duration」の緑マークを外しても、動画時間が非表示されないかと思います。
これは現在、サイトに表示されている動画は、Uscreenのサンプル動画のサムネが表示されており、あなたオリジナルの動画ではないため、よって非表示設定が反映されません。

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

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

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

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

今回のブログ解説は、以下の動画のおいての「11:26 ~ 最後」です。

Uscreen(ユースクリーン)使い方シリーズ【YouTube動画版】と【ブログ版】

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

» 【Uscreen(ユースクリーン)使い方シリーズ】再生リスト【YouTube動画版】

» 【Uscreen(ユースクリーン)使い方シリーズ】ブログ一覧【ブログ版】

次回「Backups(バックアップ)の使い方【シリーズ】第10回」

次回は、Backups(バックアップ)の使い方についての解説をします。次回は【Uscreen(ユースクリーン)使い方シリーズ】の第10回となります。



今回の説明は以上です。

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

コメント

タイトルとURLをコピーしました