Pendoでは、ブラウザウィンドウでガイドを表示するときに、表示されるデバイスの画面に合わせてレイアウトが調整される、レスポンシブなガイドを設計できます。これにより、同じガイドのコピーを複数作成し、ユーザーのデバイスに応じて各コピーをセグメントにターゲティングする必要がなくなります。
柔軟なガイドを設計するために、ガイドに流動的な幅を定義することができます。さらに、デバイスの画面比率を模倣したブラウザウィンドウでガイドをプレビューすることもできます。
幅を設定する
ガイドのステップレベルで、画面のパーセンテージに基づいて、最小、最大、デフォルトの幅を設定します。ガイドステップレベルの幅の値は、ガイドテーマレベルの幅の値を上書きします。ガイドステップは、設定された下限または上限に達するまで、変更されるパーセンテージ幅と一致するように再調整されます。
- ビジュアルデザインスタジオ（Visual Design Studio）で、ガイド内のステップを選択して、［コンテナを編集（Edit container）］ウィンドウを開きます。
- ［スタイル設定（Styling）］の［寸法（Dimensions）］で、［流動的（Fluid）］を選択します。
- 幅の割合を使用して最小ピクセル幅を選択するか、最小幅と最大幅を入力します。ピクセル幅がデフォルトの選択です。デフォルトの幅のパーセンテージと最大ピクセル幅は、表示画面に基づいています。パーセント値は必須です。
- ［完了（Done）］を選択します。
ガイドのプレビュー
携帯電話やタブレットの画面比率を模倣したブラウザウィンドウでガイドをプレビューして、異なる画面サイズに対するガイドの動作を確認できます。デスクトップ、タブレット、モバイル、カスタムのどのプレビューモードでガイドをプレビューするかを指定します。幅と高さの値を切り替えることで、デバイスの向きを変更できます。
要件
- エージェントバージョンv2.213.1以降が必要です
ブラウザウィンドウでガイドをプレビューするには、次の手順を実行します。
- ガイドの詳細ページで、［プレビュー（Preview）］の横にある矢印を選択して［プレビューオプション（Preview Options）］を選択するか、ビジュアルデザインスタジオでヘッダーバーの［プレビュー］を選択します。
- ［プレビュー設定］で、ガイドを起動する場所を選択します。レスポンシブ性をテストするには、［新しいウィンドウ（New window）］を選択して、新しいウィンドウでの起動を選択します。
- 必要な画面サイズを選択します。カスタムサイズの場合は、画面の幅と高さを入力してください。
- ［プレビューを起動（Launch preview）］を選択します。
注：全画面モードで表示すると、指定したサイズで新しいウィンドウを開くことができず、ガイドプレビューが新しいタブで開きます。