Navigation (メニュー)の設定【Uscreen(ユースクリーン)使い方シリーズ#11】

【ブログ版】Navigation(メニュー)の設定【Uscreen使い方シリーズ】第11回Uscreen使い方シリーズ

Uscreen(ユースクリーン)とは、Amazon Prime VideoやNetflix、Dラボのような動画配信アプリを、月額8,000円ほどで誰でも簡単に作ることができるアメリカのサービスです。

Uscreen(ユースクリーン)で作るあなたの動画配信サイトのホームぺージにおけるメニューについて、デフォルト(初期状態)においては、英語となっております。

Uscreenで作る動画配信サイトのメニューは、デフォルトでは英語となっている
メニュー項目「Home・Catalog・Sign In」など、初期状態では英語である

今回は、その英語を日本語に変えていくやり方を含めた、メニューの編集について解説します。

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

【Uscreen(ユースクリーン)使い方シリーズ】とは

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

本ブログ「Navigation(メニュー)の設定」は、この【Uscreen(ユースクリーン)使い方シリーズ】の第11回となります。

»【Uscreen(ユースクリーン)使い方シリーズ】とは

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

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

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

Navigation(メニュー)とは、Uscreen(ユースクリーン)で作る動画配信サイトのメニューです。

初期状態では、ヘッダーメニューとフッターメニューの2つがあります。

  • ヘッダーメニューとは、サイトの一番上に位置しているメニューです。
  • フッターメニューとは、サイトの一番下に位置しているメニューです。
Uscreenで作る動画配信サイトのヘッダーメニュー
ヘッダーメニューとは、Home・Catalog・Sign In が表示されている部分


Uscreenで作る動画配信サイトのフッターメニュー
フッターメニューとは「Redeem a gift card」と「Buy a gift card」 が表示されている部分


Uscreen(ユースクリーン)は、アメリカのサービスであることから、これらメニューの項目の表示は英語となっております。

日本向けの動画配信サービスをお作りになる場合、これらを日本語に変更する必要があることから、ここではその方法を解説します。

また、メニュー表示されている項目を増やすこと、減らすことも簡単に設定することできます。

例えば動画配信サービスを含めたオンラインサービスにおいては、「個人情報保護方針」や「利用規約」などのページあることが通常です。そしてそれらは、サイトの一番下のフッターメニューであることがほとんどです。

したがって、これらページをメニュー項目に追加する方法についても、解説します。

Uscreen(ユースクリーン)で作る動画配信サイトのメニューの設定方法についてご説明していきます。

今のメニューの状態を確認する

はじめに、現在のサイトの状態にて、メニューがどう表示されているか確認します。

Storefrontへいきます。

※Storefrontでは、サイトを確認することができます。このことについてはこのUscreen(ユースクリーン)使い方シリーズ第2回にて解説しております。

以下は、今の私の例におけるメニューの状態です。

Uscreenで作る動画配信サイトにサインインしている状態のヘッダーメニュー
「サインインしている」状態のヘッダーメニュー


Uscreenで作る動画配信サイトにサインインしている状態のフッターメニュー
「サインインしている」状態のフッターメニュー


Uscreenで作る動画配信サイトにサインアウトしている状態のヘッダーメニュー
「サインアウトしている」状態のヘッダーメニュー


Uscreenで作る動画配信サイトにサインアウトしている状態のフッターメニュー
「サインアウトしている」状態のフッターメニュー

Uscreen(ユースクリーン)ダッシュボードの左メニューから「Customization」を選択します。

UscreenダッシュボードにおけるメニューのCustomization


ページが切り替わり、「Navigation」をクリックします。

Uscreenダッシュボードにおけるメニューの編集「Navigation」


すると、Navigation(メニュー)の編集ページに切り替わります。

UscreenにおけるNavigation(メニュー)の編集ページ

Mainメニューを編集する

Uscreen(ユースクリーン)における「Mainメニュー」とは、「ヘッダーメニュー」のことです。

「Main」の欄には、「Home, Catalog, Dashboard, Sign Out, Sign In」と表示されています。

UscreenにおけるMainメニューでは「Home, Catalog, Dashboard, Sign Out, Sign In」を編集できる


これから、このMainメニューを編集していきますが、この「Main」を編集することで変わる箇所は以下の画像のとおりです。

Uscreenで作る動画配信サイトにおいてサインインしている状態のMainメニュー
「Catalog・Dashboard・Sign Out」部分


Uscreenで作る動画配信サイトにおいてサインアウトしている状態のMainメニュー
「Home・Dashboard・Sign In」部分


「Main」欄の右にある「︙」をクリックします。

「Main」欄の右にある「︙」をクリックする


するとドロップダウンが表示され「Edit」をクリックします。

するとドロップダウンが表示され「Edit」をクリックする


「Main」と題したページに切り替わります。

ここで、「Main」メニュー(ヘッダーメニュー)を編集することができます。

「Menu Items」下にメニュー項目が表示されています。

「Home」を編集していきたいので、その右にある「︙」をクリックします。

Uscreenにおけるメニュー項目の編集


するとドロップダウンが表示され「Edit」をクリックします。

ドロップダウンが表示され「Edit」をクリックする


ページが切り替わります。

「Title」欄に「Home」と入力されています。

私の例では、これを「ホーム」に変更することとします。

「Title」欄に「Home」と入力されているが、これを「ホーム」と変更する


「Link」欄では、「Home Page」と表示されています。

これは、このメニュー項目「ホーム」のリンク先となるページを設定するものとなります。

ここではこの「Link」は「Home Page」に飛ばすようにしたいことから、変更しません。

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

メニュー項目の設定を終えたら「Save」をクリックし設定を保存する


「Save」をクリックしたら、「Main」メニューページに自動で戻ります。

「Save」をクリックしたら「Main」メニューページに自動で戻る


続いて「Catalog」の編集をします。

UscreenにおけるMainメニュー「Catalog」を編集する


「Home」の場合と同様に、デフォルトで入力されている「Title」の「Catalog」を日本語に変更します。

「Title」には「Catalog」と入力されている

この「Catalog」とは「カタログ」という意味ですが、これは日本において一般的に使われるカタログと少しニュアンスが違います。

「Link」において「Catalog Page」と表示されているとおり、このメニュー項目をクリックすると、あなたの動画配信サービスにおける「動画が一覧で表示されるページ」にいくことなります。

そのことから私の例では、この「Title」には「会員ホーム」と入力することとします。「会員ホーム」でなく、「動画一覧」とするのもお客さんにとって分かりやすいことから良いかと思います。

「Title」の入力が終えたら「Save」します。

「Title」の入力が終えたら「Save」する


「Home」を「ホーム」へ、「Catalog」を「会員ホーム」へ変更していきたのと同じように、他のメニュー項目についても同様に編集をします。

他の項目について私の例では、以下のとおり変更しました。

「Dashboard」→「ダッシュボード」
「Sign Out」→「ログアウト」
「Sign In」→「ログイン」

全てのメニュー項目の編集を終えたら、上にある「Save」をクリックし「Main」メニュー全体の変更を保存します。

全てのメニュー項目の編集を終えたら、上にある「Save」をクリックし「Main」メニュー全体の変更を保存する


「Save」をすると「Navigation」ページにリダイレクトされ、ここで「Main」欄の各項目が日本語に変更されたことが確認できます。

「Main」欄の各項目が日本語に変更されたことが確認できる

編集後、Mainメニューを確認する

Storefrontへいき、メニューが日本語に変わったことを確認します。

ログイン状態のページ(カタログページ)におけるヘッダーメニューが日本語に変わりました。

ログイン状態のページ(カタログページ)におけるヘッダーメニューが日本語に変わったことを確認


ログアウト状態(ホームぺージ)におけるヘッダーメニューが日本語に変わりました。

ログアウト状態(ホームぺージ)におけるヘッダーメニューが日本語に変わったことを確認

Footerメニューを編集する

「Footer」メニューの編集をしていきます。

デフォルトでは、Footerメニューの項目に「Redeem a gift card」と「Buy a gift card」があります。これらはサイトの一番下中央に表示されています。

※そもそもこの「Redeem a gift card」と「Buy a gift card」とは?ということについては、ギフトカードページのロゴ確認においてその機能を簡単にご説明しております。

UscreenにおけるFooterメニューの項目には「Redeem a gift card」と「Buy a gift card」がある


「︙」をクリックし、「Edit」をクリックして編集をしていきます。

UscreenにおけるFooterメニューの編集をする


はじめに、「Redeem a gift card」を編集します。該当欄の右にある「︙」をクリックし、「Edit」をクリックします。

Footerメニューの「Redeem a gift card」を編集する


「Title」にはデフォルトで「Redeem a gift card」と入力されています。

「Title」にはデフォルトで「Redeem a gift card」と入力されている


私の例ではこれを「ギフトカードを利用する」に変更します。

そして「Save」します。

「Redeem a gift card」を「ギフトカードを利用する」に変更する


他方の項目「Buy a gift card」についても同様に、「Title」を変更します。

私の例では「Buy a gift card」を「ギフトカードを購入する」に変更しました(手順は上記と同じであるため説明を省略します)。

そして上の緑色「Save」をクリックし、「Footer」メニュー全体を保存します。

「Save」をクリックし、「Footer」メニュー全体を保存する


「Save」をすると「Navigation」ページにリダイレクトされ、ここで「Footer」欄の各項目が日本語に変更されたことが確認できます。

「Footer」欄の各項目が日本語に変更されたことが確認できる

編集後、Footerメニューを確認する

Storefrontへいき、メニューが日本語に変わったことを確認します。

フッターメニューが日本語に変わったことが確認できます。

フッターメニューが日本語に変わったことが確認できる

メニュー項目を増やす方法

Mainメニュー(ヘッダー)メニューとFooterメニューにメニュー項目を追加する方法について解説します。

Mainメニューに、メニュー項目を追加する

「Navigation」ページにおける「Main」を編集してきます。

「Navigation」ページにおける「Main」を編集する


ページが切り替わります。

下に「+Add Menu Item」という青ボタンがあります。これをクリックします。
(和訳:メニュー項目を追加する)

+Add Menu Item(メニュー項目を追加する)という青ボタンがある


すると「Menu Item」欄が空の状態のページに切り替わります。

ここで、Mainメニューに追加したい項目を入力していきます。

「Menu Item」欄が空の状態のページに切り替わる


私の例では、本サイト「jepista.com」をメニュー項目に追加したいと思っております。

JEPISTA(jepsita.com)
jepista.com


「Title」には「ブログ」と入力することとします。

そして「Link」欄では「Custom Link」を選択します。

「Title」には「ブログ」と入力し、「Link」欄では「Custom Link」を選択する


補足説明:今回は「jepista.com」という外部サイトをメニュー項目に追加することからこの「Link」欄において、「Custom Link」を選択しております。

もし、Uscreenで作る動画配信サイト内ページ、例えば「定額プラン」をメニュー項目に追加されたい場合は、この「Link」欄のドロップダウンから「Choose Subscription Plan」を選択することができます。



私の例では「Link」欄のドロップダウンから「Custom Link」を選択したことから、リンク先URLを「Link」欄に入力します。

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

「Link」欄のドロップダウンから「Custom Link」を選択したことから、リンク先URLを「Link」欄に入力した


「Save」をすると「Navigation」ページにリダイレクトされ、「ブログ」が入ったことを確認できます。

メニュー項目を追加後、項目が入ったことを確認できる

Mainメニューに項目を追加後、サイトで確認する

Storefrontへいき、Mainメニューを確認します。

すると「ブログ」が追加されていることが確認できます。

Mainメニューにメニュー項目が追加されていることが確認できる


「ブログ」をクリックすると、jepista.comへしっかりとリダイレクトされます。

JEPISTA(ジェピスタ)

メニュー項目のポジションを変える

メニュー項目のポジションを変更する方法を解説します。

先述の「メニュー項目の追加」において、私の例では「ブログ」という項目を追加しました。

しかしこの新たにMainメニューに加わった「ブログ」の位置が良くありません。

この「ブログ」がある位置には本来「ログイン(もしくはログアウト)」がありました。

Mainメニューにメニュー項目が追加されていることが確認できる

よってここでは、上記の画像における「ブログ」と「ログイン」のポジションを入れ替える設定をします。

メニュー項目(アイテム)のポジションを変更する方法

「Main」のページにいきます。

「Main」メニューの編集ページ


一番下に位置している「ブログ」の左にある「≡」をクリックします。

「≡」をクリックしたまま、これを「ログアウト」及び「ログイン」の上まで、持っていきます(ドラック&ドロップ)。

Uscreenにおけるメニュー項目の位置を変更する方法


「ブログ」が「ログアウト」及び「ログイン」の上になったら「Save」をクリックします。

メニューアイテムのポジションを変更したら「Save」をクリックします。

ポジション変更後、サイトで確認する

Storefrontへいき、Mainメニューを確認します。

すると「ブログ」と「ログイン(もしくはログアウト)」の位置が入れ替わっていることが確認できます。

メニューアイテムのポジション変更が確認できる

フッターに「個人情報保護方針」を追加する

冒頭にて申したとおり、動画配信サービスを含めたオンラインサービスにおいては「個人情報保護方針」や「利用規約」などのページあることが通常です。

よってここでは「個人情報保護方針」をサイト一番下のフッターメニューに入れるデモをすることとします。

フッターに「個人情報保護方針」を追加する方法

「Navigation」から「Footer」の編集ページへいきます。

そして「+ Add Menu Item」をクリックします。

Uscreenにおけるフッターメニューに新たな項目を追加する


私の例では、jepista.comにて「個人情報保護方針」のページを持っております。

「フッターメニューに新たに追加する「個人情報保護方針」をクリックしたら、こちらのページに飛ぶ」という設定にしたいと思います。

※無論、ご自身のサービス内容に対応した「個人情報保護方針」のページをあなたご自身でお作りください。くれぐれも本例と同様に、jepista.comにおける「個人情報保護方針」をリンク先としないでください。



私の例では、jepista.comにおける本ページのURLをコピーします。

JEPISTAの個人情報保護方針ページ


Uscreenのダッシュボードに戻ります。

「Title」に「個人情報保護方針」と入力します。

「Link」については、私の例では外部サイトをリンク先とすることから「Custom Link」を選択します。

「Link」については、外部サイトをリンク先とすることから「Custom Link」を選択する


「Save」します。

Menu Itemの項目の入力を終えたら「Save」をクリックする


「Footer」ページにリダイレクトされます。

ここで「Save」をクリックし「Footer」メニュー全体の設定を保存します。

「Save」をクリックし「Footer」メニュー全体の設定を保存する


すると「Navigation」ページにリダイレクトされます。

Navigationページにリダイレクトされる

「個人情報保護方針」を追加後、サイトで確認する

Storefrontからサイトにいきます。

フッターメニューにおいて「個人情報保護方針」という新しいメニューアイテムが追加されたことが確認できます。

フッターに新しいメニューアイテム「個人情報保護方針」が入ったことが確認できる

【YouTube動画版】Navigation(メニュー)の設定

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

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

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

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

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

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

次回「Subscription(定額プラン)の作成・設定【シリーズ】第12回」

次回は、Subscription(定額プラン)の作成・設定についての解説をします。次回は【Uscreen(ユースクリーン)使い方(ユースクリーン)シリーズ】の第12回となります。



今回の説明は以上です。

お疲れ様でした。

コメント

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