メインデザイン「テーマ」選びと、「共通ページ」のカスタマイズ

【ブログ版】メインデザイン「テーマ」選びと、「共通ページ」のカスタマイズ【Uscreen使い方シリーズ】第8回Uscreen使い方シリーズ

Uscreenでは、Amazon Prime VideoやNetflixのような動画配信サービスを、誰でも簡単に作ることができます。

今回はそのようなUscreenにおいて、サービスサイトのメインのデザインとなる「テーマ」(Theme)選びと、「共通ページ」のカスタマイズ(Common Pages Customozation)の設定について解説します。

今回の解説では、前半に【メインデザイン「テーマ」選び】について、後半に【「共通ページ」のカスタマイズ】についてご説明します。

やや長い解説となりますが、これは一つ一つ解説しているためです。

難しいことは何一つありません。

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

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

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

本ブログ「メインデザイン「テーマ」選びと、「共通ページ」のカスタマイズ」は、この【Uscreen使い方シリーズ】の第8回となります。

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

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

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

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

「メインデザイン「テーマ」選び」とは

メインデザイン「テーマ」選びとは、Uscreenで作る動画配信サービスサイトの大枠となるデザインテンプレートを選ぶ、ということです。

Uscreenでは、このデザインテンプレートのことを「Theme」といい、複数のテンプレートが用意されています。

よってUscreenにて動画配信サービスを作る利用者は、お好みのテンプレートを選び、それをインストールするだけで簡単にデザインのフレームワークを構築することができます。

冒頭の繰り返しになりますが、やる内容はとても簡単です。実際に操作をすれば簡単に理解できるかと思います。

【メインデザイン「テーマ」選び】の設定方法

Uscreenで作る動画配信サービスのデザインテンプレートである「Theme」の設定方法をご説明していきます。

「テーマ選び」は「Customization」ページ

Uscreen管理者ダッシュボードの左メニューから「Customization」を選択します。

すると「Customization」のページに切り替わります。

UscreenのTheme選びは、メニューのCustomizationから


この「Customization」ページの下側に「Theme Gallery」というセクションがあり、そこに複数のテンプレートがあります。※Theme Galleryはテーマギャラリーといいます。

Uscreenの「Customization」ページの下に「Theme Gallery」があり、複数のテンプレートがある。

「Theme」をプレビューし、各テンプレートを確認する

この「Theme Gallery」の各テーマに、カーソルをもっていくと「Preview」、「Install」というボタンが表示されます。

そしてこの「Preview」をクリックします。

各Themeにカーソルをもっていくと「Preview」と「Install」が表示される


すると新しいタブにて、テンプレートのデモページが開きます。

このテンプレートを使用した場合、どのようなものになるかを確認することができます。

「Preview」をクリックすると、新しいタブにて、テンプレートのデモページが開く


Uscreenの「Customization」ページに戻り、他のテンプレートもプレビューしてみます。

2つ目のテンプレートをプレビューします。

2つ目のThemeの「Preview」をクリックし、プレビューする
新しいタブにて、2つ目のテンプレートのデモページが開く


3つ目のテンプレートをプレビューします。

3つ目のThemeの「Preview」をクリックし、プレビューする
新しいタブにて、3つ目のテンプレートのデモページが開く


4つ目のテンプレートをプレビューします。

4つ目のThemeの「Preview」をクリックし、プレビューする
新しいタブにて、4つ目のテンプレートのデモページが開く

各「Theme」をご覧いただき、どれが候補となるかということだけお考えいただければ大丈夫です。

今の「Theme」を確認する

「Theme」をプレビューしてきましたが、ここではまず先に、今のあなたの動画配信サービスサイトがどのようなThemeであるかをご確認いただきます。

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

UscreenのメニューStorefront


すると新しいタブにて、今のあなたの動画配信サービスサイトが開きます。

UscreenにてStoreftontをクリックしたら、現在のサイトの状態が見れる

これは、会員ユーザー(あなたのお客さん)があなたのサイトにログインしたページであり、動画一覧が表示されるページです。

これは画面右上に「Sign Out」と表示されていることからも今「Sign In」している状態であることがわかります。

もちろんこの時点では、動画を一本もアップロードしていないので白紙状態です。

現在のサイトのテンプレートを確認したいので、この「Sign Out」をクリックし「ホームぺージ」にいきます。

StoreftontにてSign Outをクリックしたら、サイトのトップページにいく


すると、今のあなたの動画配信サービスサイトのホームぺージ(トップページ)に切り替わります。

そしてこれが今の「Theme」です(初期テンプレート)。

StorefrontからSign Outしたら、ホームぺージにページが切り替わる

「Theme」をインストールする

「Customization」の「Theme Gallery」からお好みのThemeを選び、インストールします。

これをすることで、あなたの動画配信サービスサイトの「Theme」が切り替わります。

「Theme Gallery」からお好みのThemeにカーソルをもっていき、「Install」をクリックします。

(私は2つ目のThemeを選びます)

Customizationページにおける「Theme Gallery」からお好みのテンプレートを選びInstallする


Installをクリックすると「Did you backup your current theme?」と表示さます。

これは「今のテーマのバックアップを取りましたか?」という確認メッセージです。これまでこのTheme選びや、テーマのカスタマイズを一切してきておらず、よって何らバックアップを取る必要がないことから、ここでは「Replace Theme」をクリックします(警告を無視します)。

※このバックアップの機能については、このUscreen使い方シリーズ第10回にて詳しく解説しますので、ご安心ください。

Installをクリックすると「Did you backup your current theme?」と表示され「Replace Them」をクリックする


「Replace Theme」をクリックすると「Theme was Installed!」と画面上に通知されます。

テーマのインストールが完了した、ということです。

Replace Themeをクリックすると「Theme was Installed!」と通知される

インストールしたThemeを確認する

お好みのThemeをインストールしたら、変更が反映されているかを確認しましょう。

「Storefront」へいきます。

UscreenのメニューStorefront

すると、ページのデザインが変わりました(私の例では、黒となった)。

StorefrontにてThemeが変わったことが確認できる


ホームぺージ(トップページ)の確認をするので、このSign In済みページから「Sign Out」します。

StorefrontからSign Outすることで、トップページを確認する


ホームぺージにページが切り替わり、インストールしたThemeにテンプレートが変わったことが確認できます。

※ちなみに、当然のことですが表示されている英語は全て日本語に変更できます。このことについてはこのUscreen使い方シリーズ第9回にて詳しく解説します。ご安心ください。

ホームぺージにページが切り替わり、インストールしたThemeに変わったことが確認できる。

これで、今回の解説の前半である「テーマ選び」は完了です。

「共通ページ」のカスタマイズ とは

共通ページのカスタマイズ(Common Pages Customization)とは、Uscreenで作る動画配信サービスサイトにおける共通ページ事項を編集するということです。

これには例えば、サイトのロゴや色の設定があります。

「共通ページのカスタマイズ」をする方法

Uscreenで作る動画配信サービスの「共通ページのカスタマイズ」の設定方法をご説明していきます…





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


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


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




【YouTube動画版】メインデザイン「テーマ」選びと、「共通ページ」のカスタマイズ

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

今回ご覧いただいたこの【ブログ版】とは、説明の表現が違っていたり、余談が含まれています。

私は【YouTube動画版】でなく、この【ブログ版】をお読みいただくことを推奨しておりますが、今回の解説に限っては、口頭での説明である【YouTube動画版】をご視聴いただくのも、より理解が深まるかとも思います。

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

メインデザイン「テーマ」選びと、「共通ページ」のカスタマイズ【Uscreen使い方シリーズ】第8回

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

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

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

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

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

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

【ブログ版】の第9回については、前半と後半に分けて解説します。



今回の説明は以上です。

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

コメント