ビジュアルデザイナーダイナミックレイアウト

Download as PDF

概要

ダイナミックレイアウトを使用して、ビジュアルデザイナーでシャウトアウトをデザインできます。 フレックスレイアウトのキャンバスの適応性を提供し、ユーザーに自由と柔軟性を提供します。

この記事では、レイアウトの主要な機能と機能について説明します。

ダイナミックレイアウトの主な利点

• シャウトアウトは、表示されている画面のサイズと向きに自動的に適応します
• 構築時間を短縮します – キャンバスで使用する準備ができているコンテンツアレンジメントがあります
• 使用するデバイスに関係なく、読みやすくナビゲートしやすいダイナミックレイアウトを作成する機能
• すべてのデバイスでポップアップを簡単に使用できるようにすることで、ユーザーエクスペリエンスを向上
• ポップアップをより速く読み込み、リソース数を減らすことで、ウェブサイトの全体的なパフォーマンスを向上させます
• 異なる言語をサポートするために簡単に適合できる単一のデザインを作成できます
• 翻訳されたテキストのサイズが元の言語を超える場合、バルーンはそれに応じて適応します

ダイナミックレイアウトの主な機能

ダイナミックレイアウトキャンバスは、次のレイヤーで構成されています。

• キャンバス：ユーザーの画面上でどのように表示されるかを示すシャウトアウトの本文
  • フレームとウィジェットをキャンバスに追加できます
• フレーム：キャンバスの指定されたスペースで、移動してデザインできます
  • ウィジェットをフレーム内に追加できます
• ウィジェット：フレーム内のエレメント
  • ウィジェットの種類：テキスト、画像、ボタン、ライン、ウェブビュー

全般

色指定

選択した場合、デザインの各レベルは、特定の色で強調表示されます。

• キャンバス：緑
• フレーム：ピンク
• ウィジェット：青

スタイリング

• キャンバスとフレームの場合、背景色、コーナー半径、境界線幅をスタイリングタブで設定できます

ブレッドクラム

• ブレッドクラムは、プロパティバッグとキャンバスで利用できます
• 例えば、ウィジェットを選択すると、ウィジェットに属するフレームが表示されます
• ブレッドクラムをクリックして使用して移動できます

キャンバス

スタイリング

• スタイリングタブ
  
  から、コーナー半径、境界幅、塗りつぶし色、境界色を変更できます
• 現在、シャウトアウトのキャンバスに影を追加する機能があります。 ユーザーは、「なし」、「ソフト」、「レギュラー」、「レトロシャドウ」という事前定義されたオプションから選択できます
• コーナーは個別に制御でき、異なるものにできます
  

レイアウト

サイジング

• シャウトアウトの幅は、キャンバスから直接伸ばすか、プロパティバッグで測定値を適用することで変更できます
• 高さは、コンテンツの量に基づいて自動的に調整されます
• キャンバスの幅のみをユーザーによってサイズ変更できます

内部スペーシング

• キャンバスの側面とフレームの間の距離は、プロパティバッグで調整できます - 表示はキャンバスに表示されます
• デフォルトでは、すべての側面で同じ距離が設定されます
• いずれかの側面に異なる値を適用するには、境界アイコンをクリックします

閉じるボタン

• 閉じるボタンをオフにすると、キャンバスから閉じるボタンが非表示になります
  • 再度表示するには、閉じるボタンの場所にカーソルを合わせ、クリックしてクリックし、[閉じるボタンを表示] トグルをオンにします
• 閉じるボタンは、スタイリングタブからカスタマイズできます - アイコンのサイズ、ボタン半径、塗りつぶし、境界線幅と色を変更できます
• ボタンのサイズは、キャンバスから変更できます
• 位置は、レイアウトタブ（右上/左隅）から変更できます

位置

• 画面上のキャンバスの位置は、プロパティバッグからのみ変更できます
• デフォルトオプションのいずれかを選択するか、カスタム位置トグルをオンにし、より特定の変更で優先設定を入力します

フレーム

スタイリング

• スタイリングタブから、コーナー半径、境界幅、塗りつぶし色、境界色を変更できます

レイアウト

サイズ変更

• フレームは、別のフレームに関して水平方向にサイズ変更できます。 これを行うには、サイズ変更するフレームをドラッグします。
• フレームのサイズ変更は、別のフレームと共有されている側からのみ可能です
• フレームサイズは、キャンバスサイズの割合に基づいています。 フレーム幅は、パーセントで表示されます。
• フレームは、フレームのコンテンツよりも小さくすることはできません

垂直アライメント

• フレームレベルでは、エレメントは水平または垂直に揃えることができます
• このオプションは、エレメントがより多くのコンテンツを有する別のフレームの隣にあるフレーム内にいる場合に利用できます

ウィジェットスペーシング

• フレームのウィジェット間のデフォルトの垂直間隔を調整します
• ウィジェットレベルで特定のウィジェットの異なる間隔を設定することもできます

フレームの追加

• フレームは、既存のものを複製するか、キャンバスの外側領域にカーソルを合わせると強調表示された領域に表示されるプラス記号をクリックすることで追加できます
• 1行に最大4つのフレームを追加できます
• 垂直フレームの数に制限はありません
• 新しいフレームが作成される（または削除される）場合、キャンバスのサイズはフレーム数で分割され、すべてのフレームは同じサイズになります
• フレームの最小サイズは、キャンバスの10％です

移動フレーム

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

内部スペーシング

• フレームの側面からウィジェットまでの距離は、プロパティバッグで調整できます
• フレームを選択し、すべての側面のデフォルト距離を設定するか、境界アイコンをクリックします - そして、各側面を個別に制御します
• フレームと同じサイズの画像があり、フレームを選択する必要がある場合 - ブレッドクラムを使用して、ウィジェットとフレームを切り替える

Widget（ウィジット）

スタイリング

ウィジェットのスタイルは、プロパティバッグから変更できます。

• 画像：アップロードし、コーナー半径、境界幅、境界色を選択します
  • ユーザーが画像をクリックしたときのアクションを選択します。たとえば、外部URLまたは電子メールアドレスにリダイレクトされるなど、アクションを実行します
    注

    URLには、http://または https://を含める必要があります

  • アクションが選択されると、アイコンインジケータはニュートラルから緑に変更されます

• テキスト：テキストのフォント、フォントサイズ、色、位置決めを選択します
• ライン：コーナー半径、境界幅、線色、境界色を変更します
• ウェブビュー：URLを過去にし、プレビューを表示します
• ボタン：ボタンを実行するアクションを選択します
  • アクションが選択されると、赤いアイコンインジケータは緑に変更されます
  • ボタンの複数行のテキストがサポートされています - Enterキーを押して新しい行を作成します

• 色ピッカーには、デザインにすでに存在する色をキャプチャするピペットツールがあります

ウィジェットの追加

• ウィジェットを追加するには、プロパティバッグのプラスボタンをクリックし、選択したウィジェットをキャンバスにドラッグします
• ウィジェットが追加される場所が青で表示されます
• 4つのウィジェットを1つのフレーム内の行に追加できます

レイアウト

ウィジェットのサイズ変更

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

• ボタンサイズは、外側（他のウィジェットからの距離）と内側（ボタンのテキストから境界までの距離）の両方で制御できます

ウィジェットを大きくする

• ウィジェットは、ストレッチアイコンをクリックすることで、ストレッチできます
• アスペクト比がロックされると、ウィジェットは挿入された図に拡大されます
• アスペクト比がロック解除されると、ウィジェットはフレーム内で利用可能な水平スペース全体を取得します
• 行に複数のウィジェットがある場合、各ウィジェットは、フレーム内のスペースを埋めるために動的に調整されます
  • 例えば、2つのウィジェットがある場合、それぞれがスペースの50％を占め、4つがある場合、それぞれが25％を占めます
• ウィジェットを手動で制御できる場合の高さ

外部スペーシング

• 複数のウィジェット間にスペースを作成するには、ウィジェットを選択し、プロパティバッグの外部間隔を調整します
• デフォルトでは、すべての側面で同じ距離が設定されます
• いずれかの側面に異なる値を適用するには、境界アイコンをクリックします

Tip Tuesday動画

ヴィジュアルデザイナーへのアップデート

ビジュアルデザイナーの紹介 - ダイナミックレイアウト

ビジュアルデザイナーによる構築

技術的なノート

制限

• ビジュアルデザイナーは、グローバルまたはカスタムCSSを使用してカスタマイズできません
  • グローバル/カスタムCSSを使用するために必要なすべてのものを「エディタ」機能に置き換えることを目指しています
• フレームセットサイトはサポートされておらず、コンテンツをフレームセットに描画することはできません

サポート

• ウェブプレーヤー：シャウトアウトをサポート
• モバイルプレーヤー：シャウトアウト、スマートウォークスルー（制限付き）、サーベイ、ランチャーをサポート
• デスクトッププレーヤー：シャウトアウトとスマートウォークスルー（制限付き）をサポート