シャウトアウト:動的、無料、フレックスレイアウト

Last Updated 3月 13, 2026

概要

ビジュアルデザイナーには、3つのタイプのテンプレートがあります:

A. 動的

B. 無料

C. Flex

Flexレイアウトは廃止されました。新機能で更新されず、テンプレートギャラリーには表示されません。

ただし、Flexで作成された既存のシャウトアウトは、引き続きサポートされます。

Flex機能をアップグレードして強化し、さまざまな新機能と改善されたビルドエクスペリエンスを提供する動的レイアウトを開発しました。

すべてのシャウトアウト、特に多言語を使用する場合は使用することをお勧めします。シャウトアウトビルドは、テキストの量に基づいてサイズを調整します。

無料レイアウトは、以前と同じ機能で引き続き利用できます。

動的レイアウトは、テンプレートギャラリーに関連タグがあります。 タグのないテンプレートはすべて、フリーレイアウトです。

この記事では、3つのレイアウトの違いを説明します。

動的レイアウトの利点

  • 動的レイアウトテンプレートで作成されたシャウトアウトは、表示される画面に自動的に適合します。
  • 多言語を使用する場合:翻訳されたテキストのサイズがオリジナルを上回った場合、バルーンはそれに応じて調整します。
  • 構築時間を短縮します。キャンバス内にはコンテンツ配置のバリエーションが用意されています。

制限

  • グローバルまたはカスタムCSSを使用したカスタマイズはサポートされません。
  • フレームセットサイトはサポートされません。
  • 図形、画像、ウェブビューはサイズ変更が可能なウィジェットのみです。ボタンテキストのサイズは変更できません。
  • 個々のウィジェットの最小または最大サイズはなし。
  • キャンバスの手動サイズ変更は不要(キャンバスのサイズはコンテンツに自動的に適合します)。

比較

テンプレートの構造

テンプレートの構造

動的レイアウト

動的レイアウトには、キャンバス、フレーム(青い四角形でマーク)、ウィジェット(赤い線で区切)の3つのレイヤーがあります。

複数のフレームを次へ、下へ、上へ追加できます。 フレーム内のウィジェット行は、水平に配置できます。

無料レイアウト

要素は、任意の順序で配置できます。

フレックスレイアウト

フレックスレイアウトには、キャンバスとウィジェットという2つのレイヤーがあります。

1行に1つのフレームしか存在できません。(別のフレームを次へ追加することはできません。) フレーム内の行は、水平にのみ配置できます。

コンテンツに基づく適応性

コンテンツに基づく適応性

動的レイアウト

テキストフレームは自動的に拡大縮小されます。

2つのフレームが隣に置かれた場合、そのうちの1つにテキストを追加すると、2番目のフレームも拡張されます。

2つのフレームが隣にあり、1つのフレームが上/下にある場合 - 単一フレームにテキストを追加しても、他の2つのフレームのサイズには影響しません。

1つのフレームに画像があり、もう1つのフレームにテキストがある場合、画像のサイズを変更すると、キャンバス全体に影響します。

無料レイアウト

テキストをさらに追加する際、フレームとキャンバスのサイズを手動で変更する必要があります。

フレックスレイアウト

テキストフレームは自動的に拡大縮小されます。

キャンバスの位置

キャンバスの位置

動的レイアウト

画面上のキャンバスの位置は、プロパティバッグからのみ変更できます。 デフォルトオプションのいずれかを選択するか、「カスタム位置」をオンに切り替え、より具体的な変更については、ピクセルまたは割合で希望の設定を入力します。

無料レイアウト

キャンバスの位置は、画面(選択して自由にドラッグ)から変更できます。またはプロパティバッグ(事前に設定された位置のいずれかを選択するか、カスタム位置を設定できます)から変更できます。

フレックスレイアウト

キャンバスの位置は、画面(選択して自由にドラッグ)から変更できます。またはプロパティバッグ(事前に設定された位置のいずれかを選択するか、カスタム位置を設定できます)から変更できます。

キャンバスサイズの変更

キャンバスサイズの変更

動的レイアウト

シャウトアウトの幅は、キャンバスのサイドハンドルを伸ばすか、プロパティバッグに測定値を適用することで変更できます。 高さは、コンテンツの量に基づいて自動的に調整されます。

ユーザーがサイズを変更できるのはキャンバスの幅のみです。

無料レイアウト

キャンバスは、サイドパネルの幅と高さの設定を使用してサイズを変更するか、手動で境界を伸ばすことでサイズを変更できます。

フレックスレイアウト

キャンバスのサイズは、サイドパネルから変更できます。 そうするには、レイアウトタブの高度なサイズボックスでトグルをオンに切り替えます。 最大幅と高さは、ピクセルまたは割合で設定できます(ブラウザー画面のサイズから)。

キャンバス内は、内部のコンテンツまたは画面のサイズに合わせて自動的に拡大しますが、設定された幅/高さの最大制限を超えません。

要素の位置

要素の位置

動的レイアウト

フレームの横からウィジェットまでの距離は、プロパティバッグで調整できます。 フレームを選択し、すべての側面のデフォルト距離を設定するか、境界アイコンをクリックします - そして、各側面を個別に制御します

2つのウィジェット間にスペースを作成するには、ウィジェットを選択し、プロパティバッグの外側スペースを調整します。 外側スペースを使用して、より正確な位置結果を取得します。

デフォルトでは、すべての側面で同じ距離が設定されます。 いずれかの側面に異なる値を適用するには、境界アイコンをクリックします 「混合」という表示が現れます。

フレームレベルでは、エレメントは水平または垂直に揃えることができます このオプションは、要素がフレーム内にあり、より多くのコンテンツを持つ次へフレームの横にある場合に利用できます。

キャンバスレベルで外枠を使用し、境界線と要素の間のスペースを拡大します。

ウィジェット間隔を使用して、ウィジェット間の垂直スペースを変更します。

無料レイアウト

要素は、キャンバス内で自由に移動できます。

フレックスレイアウト

要素は、要素をドラッグしたときにユーザーに自動的に提案される事前設定された位置でのみ配置できます。(潜在的な位置は青い線で示されます。)

フレームは、ドラッグ&ドロップで移動できます - 水平または垂直

より正確な結果を得るには、フレームには内部スペース、ウィジェットには外部スペースを使用します。

フレームの横からウィジェットまでの距離は、プロパティバッグで調整できます。 フレームを選択し、すべての側面のデフォルト距離を設定するか、境界アイコンをクリックします - そして、各側面を個別に制御します

要素の位置は、キャンバス内で、他の要素との関連で調整できます。サイドパネルのレイアウトタブでは、要素の配置を選択し、外側スペースを設定します。

注:垂直配置は、オブジェクトが次へ高さのオブジェクトの横にある場合にのみ利用できます。

十分なスペースがある限り、同じ行にウィジェットを追加できます。 スペースが終了すると、ウィジェットは別の行に作成されます。

ウィジェットのサイズ

ウィジェットのサイズ

動的レイアウト

ウィジェットをサイズ変更するには、それを選択し、ハンドルバーをドラッグします

ウィジェットは、ストレッチアイコンをクリックすると拡大できます。

アスペクト比がロックされている場合、ウィジェットは挿入された図形に合わせて拡大されます。 アスペクト比がロック解除されると、ウィジェットはフレーム内で利用可能な水平スペース全体を占めます。

行に2つのウィジェットがある場合 - 各ウィジェットはフレーム内のスペースの50%を占めます。

ウィジェットの高さは、手動で制御できます。

無料レイアウト

画像、ウェブビュー、図形のサイズは、両方のテンプレートでキャンバス上で簡単に変更できます。 フレックスレイアウトでは、キャンバスが適応します。

テキストボックスとボタンのサイズは、キャンバスまたはサイドパネルでも変更できます。

フレックスレイアウト

画像、ウェブビュー、図形のサイズは、両方のテンプレートでキャンバス上で簡単に変更できます。 フレックスレイアウトでは、キャンバスが適応します。

テキストボックスとボタンサイズは変更できません。 ウィジェットは、ストレッチアイコンをクリックすると拡大できます。

スペースがある場合、ボタンを水平または垂直に伸ばすことができます。

キャンバスのサイズを超えています。

キャンバスのサイズを超えています。

動的レイアウト

キャンバスが拡大するのは、コンテンツの量に応じてです。 再生されますが、画面を超える部分は表示されず、ユーザーは編集モードでもアクセスできません。

無料レイアウト

あまりにも多くのコンテンツを追加し、キャンバスの境界を超えた場合。

フレックスレイアウト

キャンバスが収まるよりも多くのコンテンツを追加し、キャンバスの最大高さおよび/または幅に達したとき。

 

この記事は役に立ちましたか?

ご意見ありがとうございます!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×