Room Designer

Room Designerでは、ルームリンクを開いた人に表示される画面を準備できます。映像、ナビゲーションボタン、ノート、タイマーを配置し、組織のカラーとロゴを適用します。

ダッシュボード > Room Designerを開きます。参加者画面にはレイアウト、ホストと参加者の外観にはブランディングを使用します。

横向きと縦向きは別々のデザインです。ルームは、各参加者の画面の向きに合ったデザインを選択します。

クイックスタート：映像と下部ボタン、ノートとサウンドなし

1. レイアウトを開き、横向きを選択します。
2. プレゼンテーションプリセットを選びます。カスタムレイアウトがオンになり、映像がボタンの上に配置され、スライドノートが非表示になります。
3. 参加者のデフォルトで、参加時にスピーカーノートを開くがオフになっていることを確認し、共有音声をミュートで開始をオンにします。
4. 縦向きを選択し、同じプリセットを適用します。縦に持ったスマートフォンに合わせて比率を調整します。
5. ホストアプリでグローバル画面共有を使い、共有する画面、NDIソース、またはStudio Programを選択します。
6. 保存済みと表示されるまで待ってから、通常のルームリンクを共有します。
7. イベントの前に別のデバイスでリンクを開き、両方の向きと選択したソースを確認します。

新しい参加者には、ホストが割り当てたソースが表示されます。Designerはそのソースを中心に画面を構成するもので、キャプチャを開始したり、ソースの割り当てを上書きしたりすることはありません。

共有音声とクリック音は別々です。Designerのミュートのデフォルトは、受信する共有音声に適用されます。クリック時も無音にしたい場合は、ホストアプリのサウンド設定でクリック音をオフにします。参加者は後から共有音声のミュートを解除できます。ただし、ブラウザでの音声再生にはユーザー操作が必要な場合があります。Programに出演中の通話参加者には共有音声は聞こえません（自分の声が遅れて戻ってくるためです）。Programから外れると共有音声が戻ります。

プランと変更の適用範囲

ルームでは、そのルームを所有するアカウントが保存したデザインが使用されます。どの保存済み機能が表示されるかは、ルームの開始に使用したプランまたはライセンスキーによって決まります。たとえば、Studio 8Kアカウントで保存したデザインでも、下位プランのキーで開始したルームではホワイトラベルのブランディングは有効になりません。

ブランディングタブのブランディングの適用範囲パネルには、お使いのプランとキーのうち、カラーまたはフルブランディングに対応しているものが表示されます。

開始時のレイアウトを選ぶ

プリセットで置き換わるのは、選択中の向きの配置だけです。プレゼンテーションは、両方の向きに適用される共通の参加者デフォルトも設定します。プリセットを適用前に戻したい場合は元に戻すを使います。

デスクトップ、タブレット、スマートフォンの切り替えでは、プレビューの比率が変わります。同じパーセント指定のレイアウトがさまざまな画面にどう収まるかを確認するためのもので、保存されるレイアウトが3つ追加されるわけではありません。

要素を配置する

カスタムレイアウトをオンにし、横向きまたは縦向きを選んでから、リストまたはキャンバスで要素を選択します。

目のアイコンで要素の表示と非表示を切り替えます。表示設定は横向きと縦向きで個別に保存されます。ナビゲーションボタンを両方とも非表示にすると大きなクリック用コントロールがなくなるため、エディターに警告が表示されます。

ロゴは向きごとに個別に移動とサイズ変更ができます。Studio 4KのユーザーはCliqerのワードマークを配置できます。Studio 8Kのユーザーは、ブランディングでワードマークを置き換えたり、目のアイコンで非表示にしたりできます。

正確に移動する

• 選択したボックスをドラッグすると移動し、ハンドルをドラッグするとサイズを変更できます。
• ボックスは、キャンバスの端、中央、ほかの表示中の要素にスナップします。
• キーボードではTabで要素に移動し、EnterまたはSpaceで選択します。
• 矢印キーを押すと、選択中の要素がビューポートの 1% ずつ移動します。
• Shiftを押しながら矢印キーを押すと、 5% ずつ移動します。
• Escを押すと選択が解除されます。

ボックスはキャンバスの外には出ません。移動できる各ボックスの最小幅と最小高さは、ビューポートの6%です。位置とサイズはパーセントで指定されるため、デザインは利用可能なスペースに合わせて拡大縮小されます。

横向きと縦向き

横向きは、閲覧者の画面が縦より横に長い場合に使用されます。縦向きは、横より縦に長い場合に使用されます。スマートフォンを回転させると、保存済みのデザインが切り替わります。

一方の向きを編集しても、もう一方の向きの要素は動きません。ルームを共有する前に両方を確認してください。特に、横長の映像、長いノート、タイマーがスペースを取り合いそうな場合は注意が必要です。

参加者のデフォルトを設定する

参加者のデフォルトを設定をオンにして、ルームの初期設定を選びます。

これらは初期設定であり、固定されたコントロールではありません。カスタムレイアウトがオフでも、利用資格のあるルームに適用されます。配置やカラーを編集しても、参加者が選んだ設定が繰り返しリセットされることはありません。デフォルト自体を更新すると、接続中の参加者に新しい設定が適用されます。

既存の保存済みデザインは、デフォルトを明示的に有効にするかプレゼンテーションプリセットを選ぶまで、以前の設定の動作を維持します。

タイマーを配置してカスタマイズする

1. 要素リストでタイマーを選択します。
2. 非表示になっている場合は、目のアイコンをオンにします。
3. キャンバス上でタイマーのボックスをドラッグし、サイズを変更します。
4. 通常時の文字、警告時の文字、超過時の文字、背景のカラーを設定します。
5. 背景の不透明度と文字サイズを調整します。
6. プレビュー状態で、通常時、警告時、超過時のカラーを確認します。
7. 向きを切り替えて、もう一方の画面形状に合わせてタイマーを配置します。

プレビューではサンプルの時間が使われます。実際のルームでは、警告、超過、点滅の状態を含め、ホストの既存のライブカウントダウンが表示されます。別のタイマーを作成したり、時間や警告のしきい値を変更したりすることはありません。

配置したタイマーは、標準の参加者用タイマーと同じブラウザのタイポグラフィを使用し、数字は幅が一定です。文字はボックス内に収まるように表示されます。大きな文字サイズが窮屈に見える場合は、ボックスを大きくしてください。タイマーの外観をリセットすると、位置はそのままで、カラー、不透明度、文字サイズが元に戻ります。

タイマーがルームに表示されるには、ホストがライブカウントダウンを開始して共有している必要があります。カスタムレイアウトでタイマー要素を非表示にすると、そこでのカウントダウンは非表示になりますが、ホストのタイマーは停止しません。組み込みビューやマルチホストビューでは、標準のタイマー位置が使用されます。

自社ブランドに仕上げる

架空のブランドを使ったイメージプレビューです。保存した1つのアイデンティティが、ホストアプリから参加者画面まで引き継がれる様子を示しています。

Room Designerのブランディング、または設定 > ブランディングを開きます。どちらでも同じ保存済み設定を編集します。

ホストと参加者のカラー

ホストアプリのカラーは、デスクトップのホストアプリとダッシュボードで使用されるプライマリとセカンダリのパレットを制御します。発表者カラーは、リモート参加者のルームを制御します。

一貫したアイデンティティにするには、発表者カラーをホストと同期したままにします。同期をオフにすると、参加者用に別のパレットを使用できます。たとえば、オペレーターには暗い制作デスク風の配色、リモートの発表者には明るいコントロールといった使い分けです。参加者のパレットを変更する際に、ホストのパレットを変更する必要はありません。

次の項目も設定できます。

• ホストグラデーションと発表者グラデーションを個別に設定。
• ホストテーマ：ライト、ダーク、またはデバイスの設定。
• 発表者テーマ：ホストに合わせるか、独自にライト、ダーク、デバイスの設定を使用。
• バッジスタイル：デフォルト、角丸、四角。

コントロールを見やすくするには、コントラストの強いプライマリとセカンダリの組み合わせを選びます。グラデーションだけでなく単色でもプレビューし、明るい背景と暗い背景の両方でロゴを確認してください。

アイコンとワードマーク

Studioのホワイトラベルブランディングでは、2種類の画像アセットを使用できます。

JPG、JPEG、PNG、GIFファイルを、それぞれ最大2 MBまでアップロードできます。画像をさまざまな背景に重ねる場合は、通常、透過PNGが適しています。アイコンをアップロードしても、参加者用ワードマークは自動的には置き換わりません。アイデンティティを完成させるには、両方のアセットを設定してください。

表示を使うと、アップロードを保存したままアセットを一時的に非表示にできます。レイアウトでは、横向きと縦向きでそれぞれルームのロゴを移動・サイズ変更できます。Studio 4KではCliqerのワードマークの位置とサイズを調整でき、Studio 8Kではどちらの向きでもワードマークを置き換えたり非表示にしたりできます。Studioのワードマークを表示するには、ブランディングの表示設定と、有効なレイアウトのロゴの表示設定の両方で表示を許可する必要があります。

同じコントロールで作成できる例は次のとおりです。

• ブルーのパレット、企業のワードマーク、スライド、下部ナビゲーションを備えた企業向けルーム。
• 明るいカラーの組み合わせ、イベントロゴ、大きなボタン、表示されたカウントダウンを備えたイベント用ルーム。
• 落ち着いたホストパレットと、クライアントのブランドを反映した別の参加者画面を備えたクライアント向け制作。
• コントロールを非表示にし、Studio 8Kではロゴも非表示にした、映像中心のミニマルなルーム。

カスタムドメインを使えば、独自のルームアドレスでStudioの体験を仕上げられます。ダッシュボードのカスタムドメイン設定で別途設定してください。ロゴをアップロードしても、カスタムドメインは変更されません。

保存、元に戻す、リセット

レイアウトの編集は、少し間を置くと自動保存されます。ヘッダーには保存中と表示され、最新の編集が保存されると保存済みと表示されます。未保存は、リクエストが失敗したことを意味します。現在の編集内容はエディターに残り、再試行で再送信されます。ページを閉じる前に、保存済みと表示されるまで待ってください。

接続中のルームページには、保存した変更がリアルタイムで反映されます。開いている別のDesignerタブにも、保存した変更が反映されます。イベント中の編集は、参加者画面へのライブの変更として扱ってください。

元に戻すとやり直すは、各エディターの最近の履歴の範囲内で機能します。レイアウトの履歴には、プリセット、位置、表示設定、参加者のデフォルト、タイマーの外観が含まれます。ブランディングには独自の履歴があります。

向きをリセットするときは、確認を求められます。保存済みのレイアウトを有効にしても、以前のブランディングカラーは復元されません。レイアウトとブランディングは個別に保存されます。

デザインしたルームを共有する

ルームを埋め込むに6文字のルームコードを入力します。iframeをコピーするか、ルームを開くか、表示されたリンクを共有します。通常のルームリンクには、保存したレイアウトと対象となるブランディングが自動的に反映されます。

<iframe
  src="https://cliqer.io/ABC123"
  allow="camera; microphone; fullscreen; autoplay"
  style="border:0;width:100%;aspect-ratio:16/9"
  title="Cliqer room"
></iframe>

ABC123は、使用中のルームコードに置き換えてください。iframeの比率を変更する場合は、狭いサイズでの縦向きデザインも確認してください。

ソースの選択と表示の制限

キャプチャソース、画面、カメラ、NDIフィード、Studio Program、オーディオ入力は、ホストアプリで選択します。DesignerがURLでソースを選択したり固定したりすることはありません。画面共有とビデオエンコードと画面共有の音声を参照してください。

カスタムボックスは、単一ストリームのルームビューに適用されます。マルチホストのグリッドでは、組み込みの配置が使用されます。ストリームを1つ選択すると、再びカスタム配置が適用されます。screenonly=trueのリンクでは、映像専用のビューが使用されます。

ルームバー（接続、タイマー、チャット、描画、スライドコントロール、発表者設定）は、プレビューと同じくカスタムレイアウトの右上隅に固定されます。タイマー、ボタン、その他のボックスは、この隅にかからないように配置してください。プリセットはそのように配置されています。チャット、接続メッセージ、システム通知は組み込みの位置のままです。ボックスを非表示にすると画面表示は変わりますが、参加者の権限が取り消されたり、ホストのソースが停止したりすることはありません。

トラブルシューティング

レイアウトタブまたはロゴのコントロールがロックされている

カスタムレイアウトを使うには、Presenter、Studio HD、Studio 4KではDesignerアドオンが必要です。Studio 8KとEnterpriseには含まれています。Studio 4Kでは、Cliqerのワードマークを移動・サイズ変更できます。Cliqerのマークを置き換えたり非表示にしたりするには、Studio 8K以上が必要です。エディターは利用できるのにルームが標準の外観のままの場合は、ルームの開始に使用したプランまたはキーを確認してください。

保存した変更が反映されない

保存済みの表示、ルームの所有者、ルームのプランまたはキー、閲覧者の現在の画面の向きを確認してください。カスタムの配置を使うには、カスタムレイアウトもオンにする必要があります。マルチホストのグリッド、screenonly=trueのリンク、またはカラー、テーマ、ロゴの動作を上書きするURLパラメーターがないかも確認してください。

プレビューではタイマーが表示されるが、ルームには表示されない

プレビューには常にサンプルの時間が表示されます。実際のルームでは、ホストのライブカウントダウンが必要です。現在の向きでタイマーの目のアイコンを確認し、ホストがカウントダウンを共有していることを確認してください。

ロゴが表示されない

ルームのプランにホワイトラベルのブランディングが含まれていることを確認してから、アップロードしたワードマーク、その表示設定、有効な向きのロゴの目のアイコンを確認してください。ホストのアイコンと参加者用ワードマークは別々のアセットです。

映像やノートが空になっている

映像ボックスには、ホストが共有するソースが必要です。ノートを表示するには、現在のスライドのノート内容、開いた状態の参加者ノートコントロール、そしてカスタムレイアウトで表示されているノート要素が必要です。

ボックスがルームバーの下に隠れる

ルームバーは、すべてのカスタムレイアウトの右上隅に重なって表示されます。プレビューで、両方の向きについて、バーに覆われなくなるまでボックスを移動または縮小してください。映像はバーの下にかかっても構いませんが、タイマー、ロゴ、ボタンはかからないようにしてください。

参加者がクリックできない

有効な向きで、ナビゲーションボタンを少なくとも1つ表示してください。ボタンの目のアイコンを使うか、その向きをリセットします。

関連ガイド

• 発表者URLのカスタマイズ
• マルチホストの設定
• 画面共有とビデオエンコード
• 画面共有の音声