スタートアップガイドで示したような、サイネージ用にデザインが完成している画像をプレイリストの各行に１つずつ並べて順に表示する場合には、レイアウトタイプとして「全画面」を選択して追加するだけでコンテンツが完成します。

Beapoではデザインが完成した画像を別途用意するのではなく、素材画像を組みわあせてレイアウトすることができます。そのためのレイアウトタイプが「フリー配置」です。以下では、このフリー配置の使い方をサンプルプレイリストを用いて説明します。

プレイリスト「⭐️サンプル（セール）」を例にとり、まず最初に、背景に関する操作について説明します。

背景画像

レイアウト行の背景サムネールをクリックすると背景設定パネルが現れ、背景画像の指定が行えます。例えば、２行目の背景サムネールをクリックすると背景画像として「⭐️背景プール.jpg」が設定されています。このファイル名をクリックするか、その左の 🔍 アイコンをクリックして別の画像を指定することができます。画像を指定しない場合には空欄にしてください。背景は基本的に画面全体にフィットするように表示されますので、背景には 16:9 の画像を使用されることを推奨します。

背景色

背景設定パネルの左側は背景色の設定です。背景画像を指定しない場合には、単色あるいはグラデーション色を指定できます。背景画像を指定した場合でも、背景画像の不透明度が100%でない場合には、背景色が不透明度の割合に応じて反映されます。例えば「⭐背景さくら.png」の不透明度が30%程度にすると、赤のグラデーションに桜がごく薄く表示される程度になります。

背景フィルタ

背景画像に対して不透明度以外に、ぼかしや彩度調整を行うフィルタを利用できます。必要に応じてご利用ください。

Beapoにおけるテキスト表示には２つの方法があります。一つは短い一行の文字列を画像化して、PNG画像と全く同じ扱いをする「タイトルテキスト」を用いる方法と、画像や動画とは全く異なる表示レイヤーに表示する文章をレイアウトした「テキストリスト」を用いる方法です。サンプルレイアウトではタイトルテキストのみを使用しています。ここではタイトルテキストの利用方法について説明します。

タイトルテキスト

「.title.png」という拡張子を持つPNGファイルはタイトルテキスト画像です。例えば、プレイリスト「⭐️サンプル（セール）」の２行目「⭐️開催機関.title.png」はタイトルテキスト画像です。

タイトルテキストはメディア管理画面でタイトルタブを選択するとメディア一覧に現れます。「⭐️開催機関.title」をクリックするとタイトル編集パネルが表示され、編集・変更が可能となります。編集後はパネル右下の「⬇」ボタンを押して保存してください。⭐マークが付いているファイルを編集して保存した場合、⭐マークのない名称で保存され、元ファイルは変更されません。︎

「⭐️開催機関.title」の日時や色などを変更して保存したものを、仮に「開催機関.title」とします。プレイリスト管理画面に戻り、「⭐️開催機関.title.png」を「開催機関.title.png」に変更して、保存してください。これで文字の変更が反映されたものがサイネージコンテンツとして表示されるようになります。︎

レイアウト

プレイリスト「⭐️サンプル（セール）」の各行は複数の画像（タイトルテキスト画像を含む）で１つのシーンを構成しています。これらの位置やサイズを変更するには、「フリー配置」の左の アイコンをクリックしてレイアウト設定パネルを開きます。

レイアウト設定パネル内の上部のプレビューエリアには上下左右と四隅に吸着ポイントがあり、クリックすると端に吸着し、そこからのオフセットで位置が決まります。サイズは画面横幅に対する画像横幅の割合です。元画像の縦横比は常に保たれます。画像がJPEG画像の場合には、角を丸めたり周囲をぼかしたりするフィルタが利用できます。

画像の置き換え

画像を別の画像に置き換えるには、レイアウト設定パネル内の上部の  ボタンをクリックして、画像を選択します。

表示順序

複数の画像を配置するには、レイアウト設定パネル内の上部の「追加」ボタンをクリックして、画像を選択します。追加した順に表示され、位置が重なっている部分は後から追加した画像が上に表示されます。但し、一番最初に指定した画像、即ち各行のファイル名として表示される画像をメイン画像と呼び、このメイン画像が常に一番最後に（一番上に）表示されます。、サンプル（セール）では「⭐️全商品対象.png」や「⭐️開催期間.title.png」などです。

画像の順序はレイアウト設定パネル内の上部のプルダウンメニューに順に表示されます。順序を変更するには変更したい画像をプルダウンメニューで選択し、「↑」「↓」ボタンで行います。それぞれ「一番上に」「一番下に」移動させることができます。

持続的な視覚効果

各行において指定された表示時間の間、持続的に視覚的な動きを伴わせることができ、これを「効果」と呼びます。ケンバーンズは複数の画像がレイアウトされた画面全体に効果を与えるものですが、それ以外はメイン画像のみの効果です。

遷移時の視覚効果

各行シーンの切り替わり時の視覚効果を一般的にトランジション効果と呼びます。Beapoではディゾルブ／スクロール／スライドイン／スライドアウト／ワイプの５つのトランジションを用意しています。スライドインとスライドアウトは聞き慣れないかも知れません。スラウドインは前のシーンがフェードアウトしながら次のシーンがスクロールして来るものです。一方、スライドアウトは前のシーンがスクロールアウトして行きながら次のシーンがフェードインします。

トランジションの効果はプルダウンメニューで選択するだけですので、簡単に確認いただけます。プルダウンメニューの右側のスピーメーターアイコンをクリックしてトランジション速度を変更することができますので、併せてお試しください。

遷移効果の個別設定

遷移時の視覚効果のメニューには「個別に設定」というものがあります。これはレイアウトされた複数の画像を表示順に個別にトランジションを設定するものです。各画像が表示される際のトランジションをそれぞれ方向／速度ととも指定できます。

また、次の画像の表示に移るまでの待ち時間（保持時間）を設定することも可能です。