キャンペーンのユーザーインターフェイスとユーザーエクスペリエンスを最適化する方法について疑問に思うかもしれません。 この記事では、最適なエレメント配置とキャンペーンスタイルについて説明します。

新しくて改善されたWYSIWYG（WalkMe Mobile SDK v1.13.1+）

エレメントの理解

新しいWYSIWYGのオブジェクトの下にあるすべての項目は、現在プレビューデバイスの画面にあるオブジェクトに対応しています。

これらのオブジェクトのいずれかを選択して配置とカスタマイズを行うには、オブジェクトツリーまたはプレビュー デバイス画面でクリックします。

オブジェクトツリーでキャンバスをクリックし、ハイライトされたセクションをプレビューデバイス画面の周りにドラッグすると、画面上のすべてのエレメントを一緒に移動できます。

また、上記のいずれかの方法でオブジェクトを選択し、キーボードの上/下/左/右矢印キーを使用して、任意のオブジェクト（キャンバスを含む）を移動することもできます。

キャンペーンデザインのヒントとトリック

エレメントを前後に移動する

オブジェクトによっては、画面上の他のエレメント（HTMLのzインデックスと同様）に対して前後に移動できます。 これは次の2つの方法のいずれかで実行できます。

1. オブジェクトの「サイズと位置」タブに移動し、「リオーダー」セクションの右側にあるアイコンのいずれかをクリックします。
   
   • 見た目の順にアイコンの意味は 1) 最前列に移動し、 2) 一つの層を前進させ、 3) 一つの層を後ろに移動し、 4) 一番後ろの階に移動します。
2. オブジェクトを右クリックするか、プレビューデバイス画面の青いタブをクリックして、階層の順序オプションのいずれかを選択します。
   

同じデザインで複数のオブジェクトを作成する

オブジェクトツリーのオブジェクトの右側に表示される「重複」オプション、またはデバイスプレビュー画面でオブジェクトを右クリックしたときに使用するだけです。

ズームインで精度を高める

大きなデザインや小さなデザインにズームインすると便利です。 コンテンツにピクセル単位の完璧な追加をしたい場合は、キャンバスにズームインしてください。

タブレットやiPadなどの大画面デバイスで作業している場合は、ズームアウトして別の視点を取得してください。

エンドユーザーデバイスでのコンテンツのプレビュー

キャンペーンコンテンツ構築の重要な部分は、デバイスOSとサイズに関係なく、快適なUIを提供することです。

新しいWYSIWYGにあるプレビューを使用すると、中小規模および大規模のAndroidおよびiOSデバイス上で、縦方向と横方向の両方でキャンペーンの外観をシミュレートできます。

縦方向と横方向を切り替えるには、プレビューデバイス画面の上にある切り替えボタンをクリックします。

コンテキストメニュー

オブジェクトを右クリックするか、青い枠線タグをクリックすると、迅速で一般的なアクションが使用できます。

キャンバス内のオブジェクト配置

正確なデザインで美しいキャンペーンを作成することは、次の2つのオブジェクト配置機能を使用するよりも簡単です。

1. オブジェクトの位置合わせ：複数のオブジェクトを水平または垂直に整列し、
2. オブジェクト配布：オブジェクトを水平または垂直に配置して、オブジェクト間の間隔を均等に作成します。

相互に位置合わせまたは配布するオブジェクトを選択するには、「Command」（Mac）または「Ctrl」（PC）キーを押したままマウスでオブジェクトをクリックします。

さらに、2つ以上のオブジェクトを強調表示すると、WYSIWYGの「プロパティ」セクションに次のようなボタンが表示されます。

元に戻す、やり直す

キャンペーンのデザインを変更する前に躊躇する必要はありません！ 編集中に行った変更は、XXXをクリックすることで取り消すことができる ボタンを元に戻すか、「Command + Z 」（Mac）または「Ctrl + Z」（PC）を入力します。

何かを元に戻すことを後悔している場合は、「やり直す」をクリックするか、「Shift + Command + Z」（Mac）または「Shift + Ctrl + Z」（PC）を入力してやり直すことができます。

キーボードショートカットとアクション

キーボードの矢印キーを使用して、マウスを使用するときよりも、キャンバスとその中にあるオブジェクトを感度良く移動できるようになりました。

さらに、次のキーボードショートカットをすべて使用して時間を節約できます。

プレビューデバイスの設定を保存した

WYSIWYGでキャンペーンをプレビューするデバイスの選択は、次回同じキャンペーンを開くときにも保持されます。 これは、同じコンピューターでキャンペーンを開いている場合にのみ機能します。

不透明度0%のキャンバスでキャンペーンを作成する

ユーザーが特定のUIエレメントと相互作用するのを防ぎ、その背後にあるアプリを見ることができるようにする透明なキャンペーンを作りたい場合は、キャンバスの不透明度を0%に設定してください。

シャドウの作成

キャンペーンオブジェクトの1つにシャドウ効果をシミュレートする場合は、次の手順に従います。

1. オブジェクトと同じサイズと位置のプロパティを持つ黒いシェイプを作成します。
   
   
2. 黒いシェイプをオブジェクトの後ろに配置し、
3. 影をつけたい方向に黒いシェイプを少し動かし、
4. 作成したい影の色に応じて、黒いシェイプの不透明度を変更します。
5. そして、こちらが最終製品です！
   

クリック可能なイメージの作成

クリックしたときにアクションを実行するイメージをキャンペーンに追加する場合は、次の手順に従います。

1. ボタンオブジェクトをキャンバスにドラッグするか、すでにそこにあるボタンオブジェクトをクリックし、
2. ボタンのアイコンを有効にし、
3. アイコンにイメージを割り当てます。
   
   
4. 「フォーマット」セクションで、適切なアクションを選択し、イメージがエリア全体をカバーするようにボタンのサイズを変更します。
   
   

デフォルト以外のデザインで「x」ボタンを作成する

上記の「クリック可能なイメージの作成」セクションの手順に従って、キャンペーンに表示する「x」をイメージとして使用します。

絶対的、相対的、カスタムサイズ/位置

絶対的なサイジングのユースケースは、次のとおりです。

1. すべてのデバイスで同じサイズのままになるボタンを作成し（例えば、「x」ボタン）、
2. ランドスケープモードまたはより大きなデバイス画面で置き換えられるイメージをキャンペーンに追加し、
3. テキストを追加するとき（通常は常に「絶対的」）、
4. リストオブジェクトの場合、リストオブジェクト内のテキストも「絶対的」であるためです。

相対的なサイジングのユースケースは、次のとおりです。

1. キャンペーンのキャンバスとオブジェクトが、デバイスの向きや画面のサイズに応じてサイズを変更できるようにし、
2. キャンペーンでCarouselウィジェットを使用するときにより良いUXを作成し、
3. キャンペーンオブジェクトのサイズをアプリのネイティブオブジェクトに比例させます。

カスタムサイジングのユースケースは、次のとおりです。

これにより、各軸でこれらのモードを選択できるため、相対的なサイジングと絶対的なサイジングを組み合わせる場合に最適です。 たとえば、ボタンを同じ高さに保ちながら幅を変更する場合（横長モードの場合など）、幅は「相対的」、高さは「絶対的」を選択します。

プロチップ：「絶対的」、「相対的」、および「カスタム」の位置オプション間を移動すると、オブジェクトの画面上での位置が変わります。「プレビューと風景」オプションを使用して、位置の変化がどのようなデバイスに反映されるかを確認します。

オブジェクトのアスペクト比を理解する

画像のアスペクト比がロックされている場合、画面サイズの変化に応じて影響を受ける画像のアスペクト比がどれだけ小さくなっても大きくなっても変わらないことを意味します。 これを実現するには、イメージのいずれかの軸が（好みに応じて）「絶対的」または「相対的」モードにロックされ、もう一方の軸に沿ったイメージのサイズが自動的に調整され、軸比率が維持されます。

ロックされている軸を選択するには、目的の軸の入力フィールドで「自動」という単語をクリックします。

キャンバスに新しいイメージを追加すると、そのアスペクト比は自動的に「ロック」されます。

オブジェクトツリーでの作業

オブジェクトの名前を変更する

オブジェクトツリー内のオブジェクトの名前を変更して、識別しやすくする意味のある名前を付けることができます。

ツリー上のオブジェクトにカーソルを合わせる

オブジェクトツリー内のオブジェクトをホバリングすると、WYSIWYGでオブジェクトが強調表示されるようになり、各オブジェクトを簡単に見つけることができます。

キャンペーンデザインのベストプラクティス（レガシーとニューWYSIWYGの両方）

キャンペーンウィザードでキャンペーンを作成する場合は、次のベストプラクティスに従ってください。

• エンドユーザーが使用する最小限のデバイスでキャンペーンをモデル化し、
  • エンドユーザーのデバイスに十分なスペースがない場合は、WalkMeコンテンツが完全に表示されないことがあり、
  • キャンペーンのエンドユーザーをデバイスサイズでセグメント化することを検討してください。
• エンドユーザーのデバイス画面に表示されるキャンペーンの最も直感的でエラーが発生しにくい配置は、中央揃えまたは片側にドッキングすることであり、
  • エンドユーザーデバイス画面の幅または高さ全体にわたるキャンペーンをご希望の場合は、WYSIWYGエディターで、キャンバスエレメントのサイズが、展開する軸に沿って100%表示されるまで展開します。
• 縦長モードに加えて横長モードもサポートする必要がある場合は、この目標を念頭に置いて、設計とサイズ設定を行い、エレメントを創造的に配置する際に頻繁にQAを実行します。
• キャンペーンのオーバーレイオブジェクトにアクションを割り当てることを忘れないでください。
  
  • オーバーレイにアクションを割り当てるための一般的なユースケースと、それを実現するためのユースケースには以下のようなものがあります。
    • エンドユーザーがキャンペーンオブジェクトをクリックしてキャンペーンを解除するだけである場合は、「なし」アクションを選択して、このアクションにより、画面のオーバーレイがクリック不能に変更され、
    • メニューテンプレートまたはその他のシャウトアウトを使用している場合に、ユーザーが画面オーバーレイをタップしてシャウトアウトを閉じて操作性を向上させるには、画面オーバーレイアクションを「閉じる」に設定し、
    • シャウトアウトメッセージを拒否するすべてのユーザーにフィードバック調査を提示する場合は、画面オーバーレイアクションをキャンペーンに設定し、目的の調査を選択し、
    • アクションについてはこちらをご覧ください。
• キャンペーンに画像を追加する場合は、できるだけファイルサイズが小さい画像をアップロードして、キャンペーンのダウンロードプロセスを迅速に行います。

レガシーWYSIWYG（WalkMe Mobile SDK v1.13.0以降）

エレメントの理解

WYSIWYGの「キャンペーンエレメント」の下にあるすべての項目は、現在アプリ画面に表示されているエレメントに対応しています。

これらのエレメントのいずれかを選択するには、「キャンペーンエレメント」セクションまたはアプリ画面そのものでクリックします。

「キャンペーンエレメント」の下にある「キャンバス」をクリックし、強調表示された部分をアプリ画面の周りにドラッグすると、画面上のすべてのエレメントを一緒に移動することができます。

キャンペーンデザインのヒントとトリック

エレメントを前後に移動する

エレメントによっては、画面上の他のエレメント（HTMLのzインデックスと同様）に対して前後に移動できます。 これは次の2つの方法のいずれかで実行できます。

1. エレメントの右側にあるドロップダウンメニューをクリックして、「前方に移動」または「後方に移動」を選択するか、
2. アプリ画面で画像自体を右クリックし、「前方に移動」または「後方に移動」を選択します。

これは、CTAトリガーをアプリ画面上の同じ場所にある別のエレメント（たとえば、イメージの上にあるシェイプ）に割り当てる場合に役立ちます。

キャンバスのスケーリングとドッキング

ほとんどのエレメントは、設定パネルのサイズフィールドを使用するか、アプリ画面でエレメントの枠をクリックして手動でドラッグサイズを変更することによって任意にサイズ変更できます。

さまざまなデバイスおよびデバイスサイズを設計する場合は、この点を考慮して要素のサイズを特定し、設定する必要があります。 アプリ画面の赤いガイダンスラインを使用して、エレメントがアプリ画面の中央にあるか、または横にドッキングされているかを理解します。

たとえば、エレメント（次の図ではキャンバスエレメント）が垂直方向と水平方向に中央揃えされている場合、2本の交差する赤いガイダンス線が表示されます。

エレメントが縦と横に中心を合わせると、「プレビュー装置」パネルでどの装置を選択したかに関係なくアプリ画面の中央に表示されるが、コンテンツの大きさが大きすぎて該当装置の画面に収まらない場合は遮断されることもあります。

エンドユーザーデバイスでのコンテンツのプレビュー

キャンペーンのコンテンツ構築で重要なことは、デバイスのOSやサイズに関係なく、キャンペーンが快適なUIを提供できるようにすることです。

「デバイスのプレビュー」を使用すると、小型、中型、大型のAndroidおよびiOSデバイス上で、縦方向と横方向の両方でキャンペーンの外観をシミュレートできます。

キャンペーンのバックカバーのカスタマイズ

Mobile SDKバージョン1.7.0以降では、キャンペーンの背面カバー（またはキャンペーンが表示されているときにキャンペーンの背後にあるエリア）をカスタマイズできます。

バックカバーの色、不透明度、および関連するCTAを指定できます（最後の1つはシャウトアウトのみ）。

デフォルト値は次のとおりです。

• 色：黒、
• 不透明度：0.7、
• CTA：多分。