top of page

アセット(Assets)

アセット(Assets)はレイアウトを構成する基本要素です。テキスト、画像、図形、線などのコンテンツを表示するために使用される静的オブジェクトです。

画像

bandicam 2026-07-03 16-08-53-996.jpg

アセット(Assets)パネル「画像」をクリックすると、画像ライブラリが開き、メディアページにアップロードした画像ファイルが表示されます。

※注:目的の画像がない場合は、メディアページに移動する必要はありません。PCのファイルエクスプローラーから目的のファイルを画像ライブラリに直接ドラッグ&ドロップして、アップロードすることができます。

image popup eb.png
file explorer.jpg

arrow.png
  • 画像ライブラリで画像を選択すると、すぐにキャンバスに追加されます。

  • キャンバス上の画像をクリックすると、左側のパネルに画像設定が表示されます。設定を変更すると、その結果が即座にキャンバスに反映されます。

画像設定

  • 置換 (Replace): キャンバス上で選択した画像を、ライブラリ内の別のファイルに置き換えます。

  • 配置

    • キャンバスに揃える: 画像をキャンバスの特定の基準線に合わせて自動的に整列します。

      • 左/中央/右揃え: 水平軸を基準として、画像をキャンバスの左端、中央、右端に配置します。

      • 上/中央/下揃え: 垂直軸を基準として、画像をキャンバスの上端、中央、下端に配置します。

      • キャンバス中央配置: 画像をキャンバスの中央に配置します。

    • 反転(Flip):画像を左右または上下に反転します。

      • 左右反転: 画像を水平方向に反転させます。

      • 上下反転: 画像を垂直方向に反転させます。

  • 位置とサイズ: 画像の正確な座標とサイズを設定します。

    • X, Y 座標: キャンバス内における画像の開始点(左上隅を基準)の位置を指定します。

    • W (幅), H (高さ): 画像の幅と高さを指定します。

    • 縦横比を固定 (鍵アイコン):

      • アイコンがロックされている場合、幅(W)または高さ(H)の値を変更すると、元の比率を維持したまま反対側の数値が自動的に調整されます。

      • アイコンを解除すると、幅と高さをそれぞれ独立して調整できます。

  • スケールモード: キャンバス上の画像をクリックすると、画像の外側に選択フレームが表示されます。四隅のハンドルをドラッグすると画像の元のアスペクト比を維持したままサイズが変更され、上下左右の辺のハンドルをドラッグすると、選択したスケールモードに応じて次のように動作します。

    • Fit (比率維持): 元の画像の比率を維持したまま、選択フレーム内に全体が表示されます。選択フレームと画像の比率が異なる場合、上下または左右に余白が生じます。

  • Fill (全体表示): 元の画像の比率を維持しながら、選択フレームをいっぱいに満たします。この際、選択フレームからはみ出した画像の端の部分は切り取られます。

  • Stretch (比率無視): 元の画像の比率を無視し、選択フレームのサイズに合わせて強制的に引き伸ばしたり縮小したりします。選択フレーム全体を満たしますが、画像に歪みが生じます。

  • 背景色と不透明度: ​

    • 背景色: 画像の背景色を設定します。

    • 不透明度: 画像の不透明度を設定します。

  • 枠線:

    • 不透明度と色: 枠線の不透明度と色を設定します。

    • 太さ: 枠線の太さを設定します。

  • 角丸: 画像の角の丸みを設定します。中央のリンクアイコンをクリックして有効にすると、4つの角の値を同時に調整できます。

  • 調整: 画像の表示を細かく調整します。

    • 明るさ: 画像の明るさを調整します。

    • コントラスト: 画像の明るい部分と暗い部分の差を調整します。

    • 彩度: 画像の色の鮮やかさを調整します。

  • : 画像に影の効果を追加します。​

    • 影を適用: スイッチをオンにして影の効果を有効にします。

    • Xオフセット / Yオフセット: 影の水平方向(X)および垂直方向(Y)の位置を設定します。

    • ぼかし: 影のぼかしの強さを調整します。

    • 色と不透明度: 影の色と不透明度を設定します。

  • アニメーション: 画像アセット(Assets)にアニメーション効果を追加し、より魅力的で動きのある表示を実現します。​

    • アニメーションタイプ: ドロップダウンメニューから、画像に適用するアニメーション効果を選択します。

      • Back In [方向]: 指定された方向から現れ、一度少し通り過ぎてから弾むように元の位置に戻ります。

      • Bounce In: **弾むような動き(バウンス)**を伴いながら、徐々に大きくなって表示されます。

    • 速度: スライダーを使用してアニメーションの再生速度を調整します。左に動かすほど速くなり、右に動かすほど遅くなります。

    • 遅延: スライダーを使用して、アニメーションが開始されるまでの待機時間を設定します。

    • 繰り返し回数: アニメーションを再生する回数を設定します。スライダーで任意の回数を指定でき、0に設定するとアニメーションが無限に繰り返されます。

image properties01 ja.jpg

scale mode ja.jpg

fit.jpg
fill.jpg
stretch.jpg

image settings3 ja.jpg

anime set ja.jpg

動画

bandicam 2026-07-03 16-09-23-838.jpg
  • アセット(Assets)パネルの 「動画」をクリックして、動画ライブラリを開きます。ライブラリから動画を選択すると、すぐにキャンバスに追加されます。

  • キャンバス上の動画をクリックすると、左側のパネルに設定が表示されます。設定の変更内容は、キャンバスに即座に反映されます。

※注: 動画設定の詳細については、画像設定のセクションをご参照ください。

テキスト

bandicam 2026-07-03 16-09-34-399.jpg
  • アセット(Assets)パネル「テキスト」をクリックして、キャンバスにテキストを追加します。

  • テキストをダブルクリックして内容を入力または編集するか、キャンバス上の任意の場所にドラッグしてください。テキストを選択すると左側にテキスト設定パネルが表示され、そこで設定を調整できます。

テキスト設定

  • フォント

    • フォントファミリー: ドロップダウンメニューから、目的のフォントと太さを選択します(例:Open Sans, Bold 700)。

    • フォントサイズ: フォントのサイズを設定します。

  • スタイル

    • 書式: 以下のコントロールを使用してテキストスタイルを適用します。

      • B (太字): テキストを太字にします。

      • I (斜体): テキストを斜体にします。

      • U (下線): テキストに下線を追加します。

      • T (取り消し線): テキストの中央に取り消し線を引きます。

      • X² (上付き文字): テキストを基準線より上に小さく表示します。

      • X₂ (下付き文字): テキストを基準線より下に小さく表示します。

    • 配置: テキストを左寄せ、中央揃え、右寄せに設定します。

    • 間隔:

      • 行間: テキストの行間の垂直距離を調整します。

      • 文字間隔: 文字間の水平距離を調整します。

    • アウトライン:

      • 色: アウトラインの色を設定します。

      • 太さ:スライダーをドラッグして太さを調整します。

  • :

    • 文字色: テキストの文字色と透明度を設定します。

    • 背景色: テキストの背景色と透明度を設定します。

text settings ja.jpg

ドキュメント

bandicam 2026-07-03 16-32-20-597.jpg
  • キャンバスにドキュメントファイル(Word、Excel、PDF、PPTなど)を追加するには、アセット(Assets)パネル「ドキュメント」をクリックし、ドキュメントライブラリを開きます。ライブラリには、メディアページにアップロードしたドキュメントファイルが表示されます。

  • ドキュメントライブラリでドキュメントを選択すると、即座にキャンバスに追加され、左側のパネルに ドキュメント設定が表示されます。​

※注:目的のドキュメントファイルがない場合は、メディアページに移動する必要はありません。PCのファイルエクスプローラーから目的のファイルをドキュメントライブラリに直接ドラッグ&ドロップして、アップロードすることができます。

Webページ

bandicam 2026-07-03 16-53-48-233.jpg
  • キャンバスにWebページを挿入するには、アセット(Assets)パネルWebページ」をクリックし、Webページライブラリを開きます。ライブラリには、メディアページからアップロードしたWebページが表示されます。

  • WebページライブラリからWebページを選択すると、すぐにキャンバスへ追加されます。

スクロールテキスト

bandicam 2026-07-03 16-54-26-520.jpg
  • テキストをテロップ(ティッカー)形式で流れるように表示でき、お知らせ、ニュース、プロモーション情報などを効果的に配信できます。

  • アセット(Assets)パネル「スクロールテキスト」をクリックします。追加したスクロールテキストはドラッグしてキャンバス内の好きな位置に配置でき、左側のサイドバーにあるスクロールテキスト設定パネルから、メッセージの入力やデザインの変更が可能です。

スクロールテキスト設定

  • 表示するテキスト:

スクロール効果を適用して画面に表示させたいテキストの内容を、直接入力するための入力ボックスです。

  • スクロール方向:

テキストが移動する方向を設定します。左(<)、上(^)、下(v)のいずれかの方向に移動させるか、あるいは動きを付けずにテキストを固定(■)することができます。

  • スクロール速度:

スライダーを左右に調整して、テキストが移動する速さを設定します。右側に動かすほど、テキストの動きが速くなります。

scroll settings ja.jpg

カメラ

bandicam 2026-07-03 16-54-46-366.jpg

カメラは主に以下の2つの目的で活用されます。

  • 店舗のセキュリティおよびリアルタイムモニタリング: Public View Monitor (PVM) アプリケーションにおいて、カメラウィジェットを通じて現場の映像をリアルタイムでデジタルサイネージ画面に配信し、店舗のセキュリティを強化します。

  • 視聴者データの分析と戦略立案: カメラで顔を検出し、性別や年齢層を推定してデータを分類します。これらのデータは指標、時間帯、曜日別に分析され、効率的な店舗運営戦略を立案するために活用されます。

  • アセット(Assets)パネルで 「カメラ」をクリックすると、キャンバスにカメラが追加されます。ドラッグ&ドロップでキャンバス内の好きな位置に配置できます。

  • サイズ調整:

    • 比率を維持: カメラアセット(Assets)のコーナーハンドルをドラッグすると、元の比率を維持したままサイズが調整されます。

  • カメラ映像出力設定: キャンバスにカメラアセットを追加しても、物理的なカメラがデバイスに接続されている必要があります。また、デバイス設定で USB Camera または ONVIF Profile S を選択しなければ、映像は正常に出力されません。

camera settings ja.jpg

※注: レイアウトエディターのプレビューモードではカメラ映像は表示されません。実際の再生機器でご確認ください。

プレイリスト

bandicam 2026-07-03 16-55-07-627.jpg

キャンバスにプレイリストを追加して、1つの画面内で複数の動画や画像をループ(Loop)形式で再生することができます。

アセット(Assets)パネル「プレイリスト」をクリックすると プレイリストライブラリが開き、任意のプレイリストを選択すると、即座にキャンバスに追加されます。

図形

bandicam 2026-07-03 16-55-26-325.jpg

長方形、円、星型、矢印などの図形をキャンバスに追加して、サイズや色、境界線などを自由にカスタマイズし、デザインのアセット(Assets)として活用できます。

追加するには、アセット(Assets)パネル「 図形」をクリックし、表示される図形ライブラリから任意の図形を選択すると、図形がキャンバスに追加されます。

アイコン

bandicam 2026-07-03 16-55-58-504.jpg

Google Material Symbolライブラリを活用して、様々なアイコンをキャンバスに追加できます。視覚的な直感性を高めるグラフィック要素として、レイアウトに配置することで、メニュー、通知、情報などの意味を効果的に伝達してください。

追加するには、アセット(Assets)パネル「 アイコン」をクリックし、表示されるGoogle Material Symbolライブラリから任意のアイコンを選択すると、キャンバスに追加されます。

QRコード

bandicam 2026-07-03 16-56-09-963.jpg

キャンバスにQRコードを追加することで、ウェブサイトのリンクやアプリのダウンロード、連絡先情報などを提供できます。

  • アセット(Assets)パネル「QR コード」をクリックし、キャンバスに追加します。

  • キャンバス上でQRコードを選択すると、左側のサイドバーにQR コード 設定パネルが開きます。

  • そのパネルでQRコードに埋め込むデータを入力し、、デザイン(色、スタイルなど)をカスタマイズすることができます。

QRコード設定

QRデータの入力:QRコードにエンコードするURLまたはテキストを入力してください(例:https://connectplayer.net)。

qr code settings ja.jpg
bottom of page