Pendoでは、ウェブブラウザウィンドウまたはさまざまなモバイルデバイスの両方でガイドを表示するときに、表示されるデバイスの画面に合わせてレイアウトが調整される、レスポンシブなガイドを設計できます。これにより、同じガイドのコピーを複数作成し、ユーザーのデバイスに応じて各コピーをセグメントにターゲティングする必要がなくなります。
ウェブアプリのレスポンシブガイドを作成する
ウェブアプリでガイドがレスポンシブに表示されるように設計するには、ガイドに流動的な幅を定義します。さらに、デバイスの画面比率を模倣したブラウザウィンドウでガイドをプレビューすることもできます。
要件
- エージェントバージョンv2.213.1以降が必要です
幅を設定する
ガイドのステップレベルで、画面のパーセンテージに基づいて、最小、最大、デフォルトの幅を設定します。ガイドステップレベルの幅の値は、ガイドテーマレベルの幅の値を上書きします。ガイドステップは、設定された下限または上限に達するまで、変更されるパーセンテージ幅と一致するように再調整されます。
- ビジュアルデザインスタジオ（Visual Design Studio）で、ガイド内のステップを選択して、［コンテナを編集（Edit container）］ウィンドウを開きます。
-
［スタイル設定（Styling）］の［寸法（Dimensions）］で、［流動的（Fluid）］を選択します。
- 幅の割合を使用して最小ピクセル幅を選択するか、最小幅と最大幅を入力します。ピクセル幅がデフォルトの選択です。デフォルトの幅のパーセンテージと最大ピクセル幅は、表示画面に基づいています。パーセント値は必須です。
- ［完了（Done）］を選択します。
ガイドのプレビュー
携帯電話やタブレットの画面比率を模倣したブラウザウィンドウでガイドをプレビューして、異なる画面サイズに対するガイドの動作を確認できます。デスクトップ、タブレット、モバイル、カスタムのどのプレビューモードでガイドをプレビューするかを指定します。幅と高さの値を切り替えることで、デバイスの向きを変更できます。
ブラウザウィンドウでガイドをプレビューするには、次の手順を実行します。
- ガイドの詳細ページで、［プレビュー（Preview）］の横にある矢印を選択して［プレビューオプション（Preview Options）］を選択するか、ビジュアルデザインスタジオでヘッダーバーの［プレビュー］を選択します。
-
［プレビュー設定］で、ガイドを起動する場所を選択します。レスポンシブ性をテストするには、［新しいウィンドウ（New window）］を選択して、新しいウィンドウでの起動を選択します。
- 必要な画面サイズを選択します。カスタムサイズの場合は、画面の幅と高さを入力してください。
- ［プレビューを起動（Launch preview）］を選択します。
注：全画面モードで表示すると、指定したサイズで新しいウィンドウを開くことができず、ガイドプレビューが新しいタブで開きます。
モバイルアプリのレスポンシブガイドを作成する
注：この機能によるガイドセグメント化への影響はありません。
Pendoは、ポートレートモードおよびランドスケープモードのどちらの場合でも、スマートフォンとタブレットの両方で見やすいガイドを作成できます。ほとんどのモバイルガイドはデフォルトで「レスポンシブ」になっており、デバイスのタイプと向きに応じて反応します。この記事では、ガイドを効果的に拡張するために実行できる追加設定について詳しく説明します。
モバイルデバイスのガイドを作成する
モバイルデバイスのガイドを作成する場合は、デバイスのフレームを使用してデザインできます。
- ビジュアルデザインスタジオで、上部トレイにある［ディスプレイオプション（Display Options）］のドロワーを開きます。
- ドロップダウンリストから、［スマートフォン（Phone）］または［タブレット（Tablet）］を選択します。
- 横向き（landscape）または縦向き（portrait）のいずれかの向きを選択します。
デフォルトの左右マージンはスマートフォン向けに最適化されていますので、タブレット向けに変更してください。
ガイドはビジュアルデザインスタジオ（Visual Design Studio）のプレビューにHTMLで表示されるのに対し、実際のモバイルデバイスではiOSやAndroidのネイティブコンポーネントで表示されます。そのため、ビジュアルデザインスタジオのプレビューではガイドのだいたいのサイズや比率が把握できますが、実際のデバイスでのガイドの見え方を正確に表すことはできません。実際のデバイスでガイドを確認することを強くお勧めします。
スタイル設定
以下の設定は、異なるモバイルデバイス向けにガイドのスタイル設定を最適化するために使用します。
- フルスクリーンガイド（Full Screen Guide）
- ガイド幅を制限
- マージンとパディング（Margin and padding）
フルスクリーンガイド（Full Screen Guide）
［フルスクリーンガイド（Full Screen Guide）］のトグルボタンをオンにすると、どのデバイスでもガイドをフルスクリーンで表示するように設定されます。
マージンとパディング（Margin and padding）
マージンとパディングを使用して、画面上のガイドの配置を定義します。
ガイド幅の制限
この設定を使用して、ガイドが拡張できる最大幅を制限します。これは主に、タブレットとスマートフォンの両方に単一のガイドを提供するために使用されます。これにより、実質的に「スマートフォンサイズ」のガイドが大きなタブレット画面に表示されます。この設定を使用しない場合、ガイドが大きくなりすぎる可能性があります。この設定は、［フルスクリーンガイド（Full Screen Guide）］がオフになっている場合に使用できます。
幅を制限することで、ガイドの幅（スクリーン幅から余白を引いたもの）が広くなりすぎず、画面の幅がより広いデバイスでガイドを表示するときでも「ポップアップ」の外観を保てます。
アプリを縦向き、横向きの両方で使用する場合も同じです。この場合、ポップアップガイドで最大幅を設定すれば、横向きモードで表示したときのポップアップの外観を保てます。
ツールチップ
ツールチップには独自のプロパティがあります。ツールチップの幅はコンテンツによって決まります（幅のコントロールには改行を使用）。ツールチップのサイズは、デバイスに関係なく常に同じサイズのままで、タブレットでは特別な調整は不要です。