レイアウト構成

レイアウト機能では、画像・動画・テキスト・ウィジェットなどをキャンバス上に自由に配置し、デジタルサイネージ向けコンテンツを直感的に作成・管理できます。
あらかじめ用意されたテンプレートを利用して、すばやく作成を開始することも、空白のキャンバスから自由にデザインすることも可能です。また、天気・ニュース・カレンダーなどのリアルタイム情報を表示する多様なウィジェットにより、コンテンツの価値を高めることができます。さらに、ドラッグ＆ドロップ編集、レイヤー管理、リアルタイムデータ連携により、誰でも効率的に高品質なコンテンツを作成できます。

レイアウトタブに移動し、「①新規レイアウト制作」をクリックすると、テンプレートライブラリが開きます。

①

テンプレートライブラリの探索

用意されたテンプレートを利用することで、効率よくコンテンツを作成できます。ブランドイメージを維持しながら、用途に合わせてデザインを簡単にカスタマイズできます。

② +空白のキャンバス: テンプレートを使用せず、真っ白な画面から自由にデザインを作成できます。
③ カテゴリ: テンプレートは用途やテーマごとに分類されています。キーワード検索やカテゴリ閲覧から、目的に合ったテンプレートを見つけてください。
- カテゴリ一覧: シーズンキャンペーン、飲食・外食、サービスプロモーション、アイキャッチ、製品プロモーション、クラス、自動車、ゲストスピーカー、ホテル・リゾート、旅行
テンプレートをクリックすると、レイアウトエディタが開きます。画像、動画、テキストなどのさまざまなアセット(Assets)やウィジェットを活用して、レイアウトを作成できます。

③

②

レイアウトエディタ概要

レイアウトエディタは、ディスプレイに表示するコンテンツを作成・編集するための作業画面です。メディア、テキスト、プレイリスト、ウィジェットなどを組み合わせて視覚的に魅力的なレイアウトを構成でき、デザイン経験がなくても簡単に利用できます。

①キャンバス設定: アイコンをクリックすると、キャンバス設定パネルが開きます。このパネルでは、画面の向き、ビデオウォールレイアウト、背景色、および背景音を設定できます。
②アセット(Assets)パネル: アセット(Assets)は、画像、動画、テキスト、Webページ、図形など、レイアウトを構成する基本的なコンテンツオブジェクトです。
③ウィジェットパネル: ウィジェットは、天気、時計、RSSなどの外部データに基づいて情報を自動表示・更新する動的コンテンツオブジェクトです。
④上部ツールバー: アセット(Assets)やウィジェットの削除、整列、ズーム、プレビューなど、キャンバス上のレイアウトとウィジェットを操作するためのツールが配置されている領域です。
⑤キャンバス: レイアウトとウィジェットの順序を管理し、実際のデザインを行う作業空間です。
⑥ レイヤーパネル: 画面に配置されたレイアウトとウィジェットの順序を管理し、選択するためのレイヤー専用空間です。

①

②

④

③

⑥

キャンバス設定パネル

キャンバス設定は、実際のディスプレイの物理構成と一致する作業環境を提供し、最終的な出力画面と同じ状態でレイアウトをデザインできるようにします。

名前: レイアウトの名称を入力します。
画面の向き: 画面の向きを横向きまたは縦向きに設定します。
- 横モード
- 縦モード
ビデオウォールレイアウト: 複数モニターを設置する際、以下のレイアウトオプションを提供します。
- 1 × 1, 1 × 2, 1 × 3, 1 × 4, 2 × 1, 3 × 1, 4 × 1, 2 × 2
背景色: キャンバスの背景色を選択します。
背景オーディオ: レイアウトと一緒に再生するBGMを設定します。

トップツールバー

①

②

③

キャンバス上で主要な編集機能に素早くアクセスできるツールセットです。デザイン作業中にアセット(Assets)とウィジェットの位置、レイヤー、データ同期を直感的に制御できます。

「①削除」アイコン：選択したアセット(Assets)とウィジェットをキャンバスから削除します。
「複製」アイコン：選択したアセット(Assets)とウィジェットを正確にコピーしてキャンバスに追加します。
「元に戻す(Ctrl+Z) /やり直す(Ctrl+Y)」アイコン：直前に実行した操作を取り消す、または Undo で取り消した操作を再度復元します。
「前面へ移動 / 背面へ移動」アイコン：選択したアセット(Assets)とウィジェットを1つ前または1つ後ろのレイヤーに移動します。
「②レイヤー表示切替」アイコン：右側のレイヤーパネルを表示または非表示にします。
「③Google Sheets連携」アイコン：クリックするとGoogle Sheets連携設定ウィンドウが開きます。

Google Sheets連携は、Google スプレッドシートのデータとデザインアセット(Assets)をリンクし、リアルタイムで更新する機能です。Google スプレッドシートのデータが更新されると、レイアウト内の関連コンテンツも自動的に更新されます。手動でレイアウトを編集することなく、最新情報を画面へ反映できます。複数のテキストボックスや画像を異なるセルにリンクすることも可能です。例：店舗の価格自動更新、イベントスケジュールの同期。

Google Sheetsの作成と共有設定
1. メニューテンプレートと連携するGoogle Sheetsを作成します。
2. 右上の共有ボタンをクリックします。
3. 一般的なアクセスを「リンクを知っている全員」に変更します。
4. 権限を閲覧者（Viewer）に設定し、完了をクリックします。

※ 外部システムがデータを読み取れるように、必ず共有設定を変更してください。

データ接続情報の入力

Google Sheets連携設定画面で、以下の情報を入力して保存をクリックします。
Google Sheets URL: 連携するGoogle SheetsのURLをコピーして貼り付けま(https://docs.google.com/spreadsheets/d/1iVB0Lx-gFim0J5i-Zgm1idinTUcGI_DUNGj5Ybo2msQ/edit?usp=sharing)
シート名: Google Sheets下部に表示されるシートタブ名を入力します。（例：menu item）
シート範囲: データの読み取りを開始するセル位置を入力します。最初のメニューデータが開始するセル（A2）を入力してください。
更新間隔

Google Sheetsの変更内容を自動反映する間隔（分単位）を設定します。

追加メニューの連携

同じ方法で、MENU #2 ～ MENU #13にもそれぞれGoogle Sheetsのセルを連携します。

画像連携

Google Driveに保存された画像の共有URLをシートに入力し、画像アセットと連携します。シート内のリンクを変更するだけで、表示画像を更新できます。

※ Google Drive画像を使用する場合は、共有可能なリンクを使用してください。

「ズームコントロール」：キャンバスビューをズームインまたはズームアウトします。
「プレビュー」：デザインが画面にどのように表示されるか、リアルタイムでプレビューします。
「ミュート / ミュート解除」：プレビューモード中の音声再生を切り替えます。

レイヤーパネル

キャンバス上のすべてのアセット(Assets)とウィジェットを一覧で表示し、レイヤーの順序や表示状態、さらに各要素の詳細なプロパティを簡単に管理できます。

レイヤーリスト :

テキスト、図形、アイコン、画像、動画など、デザイン内のすべてのアセット(Assets)とウィジェットを表示します。
各レイヤーは種類またはファイル名でラベル付けされ、簡単に識別できます。
レイヤーの並べ替え：ドラッグ＆ドロップでキャンバス上の重なり順を変更します。
「⑨ロック / ロック解除」（鍵アイコン）：レイヤーをロックして編集を防止し、解除すると再び編集できるようになります。
「⑩表示切替」（目のアイコン）：削除せずに個別レイヤーの表示を切り替えます。
「⑪削除」（ゴミ箱アイコン）：選択したレイヤーをキャンバスから削除します。

⑨

⑩

⑪