テーマ設定

概要

テーマ設定は、異なるWalkMeアプリ間でデザインを統一できる新しいWalkMe機能です。 テーマ設定では、カラースキーム、タイポグラフィ、レイアウトなど、幅広いプリメイドやカスタマイズ可能なデザインエレメントを使用して、すべてのWalkMeアイテムに一貫したルック＆フィールを簡単に適用できます。

アクセス方法

テーマ設定はコンソールにあり、アクセスできます

• https://console.walkme.com/themes
• コンソールサイドパネルを経由

ご利用方法

メイン画面

初めてテーマにアクセスすると、メイン画面にWalkMeが提供するすべてのテーマが表示されます。

画面の右側に、このテーマのプレビューが表示されます。 異なるアイテムタイプ間を移動し、各アイテムがこのテーマでどのように見えるかを確認できます。

プレビューのさまざまなエレメントにカーソルを合わせると、テーマから継承される内容を確認します。 例えば、シャウトアウトの画像を含むフレームは色（背景、メイン）を継承し、テキストのタイトルがタイトル（大）のタイポグラフィと色のテキスト、メインを継承します。

アクティブおよび公開テーマ

アクティブのラベルは、このテーマが現在エディタコンテンツに適用されていることを意味します。

ラベル公開とは、このテーマが現在、公開環境でユーザーに表示されることを意味します。

アクティブなテーマと公開されているテーマが同じではない場合があることに注意してください。

テーマをアクティブに設定すると、エディタで表示できます。 ただし、テーマをユーザーに表示するには、最初に公開する必要があります。

テーマをアクティブとして設定するには：

1. [Options menu（オプションメニュー）]をクリックします。
2. [Set as active（アクティブとして設定）
   
   ]を選択します
3. テーマをまだ公開したくない場合は、[Confirm（確認）
   ]をクリックします
4. テーマも公開するには、チェックボックスにチェックを入れ、[Confirm（確認）]をクリックします

テーマの編集

WalkMeテーマを編集し、結果を新しいテーマとして保存できます。

テーマを編集するには、[Options menu（オプションメニュー）]をクリックして[Edit（編集）]を選択するか、テーマをダブルクリックします。

テーマの色、タイポグラフィ、ボタンのプロパティを変更できます。

色

• [Colors（色）]タブでは、異なるデザインエレメントの色を変更できます
• 右側のプレビューで、何が正確に変更されているかを確認できます
• 変更を行う際、アイテムナビゲーションバーにアニメーションが表示され、この変更を確認できるアイテムが表示されます

タイポグラフィ

• タイポグラフィタブでは、すべてのテキストエレメントのフォントタイプとサイズを変更できます
• プライマリとセカンダリのフォントを変更できます
• それぞれのタイトルとテキストタイプを継承する2つのうち、プライマリまたはセカンダリを選択できます

• 各テキストエレメントが現在使用されている場所を確認できます
  ご存知ですか？

  これは一般的に推奨されていますが、他の場所でもこれらのテキストタイプを使用することを選択できます。 例えば、ランチャーにタイトル（大）プロパティを継承させる これは、エディタで設定できます - 以下の詳細をご覧ください。

ボタン

• ボタンの境界幅とコーナー半径を変更します
• 色の枠を付けて、それぞれの辺に厚さを設定できます
• 塗りつぶしとテキストの色はテーマから自動的に継承されます。ここから変更することはできませんが、[Color（色）]タブを継承する色を変更でき、ここでボタンに影響します

• セカンダリのテキストボタンの色には、デフォルトで塗りつぶしの色がありません（透明です）（例：このシャウトアウトの戻るボタン）

• 追加のボットは、テーマからほとんどのプロパティを継承します
• テキストの色のみを変更できます

編集が完了したら、テーマを新規として保存できます。

テーマがマイカスタムテーマの下に表示されます。

WalkMeテーマとは異なり、カスタムテーマの名前を変更、複製、削除することもできます。

エディタでのテーマ設定

テーマ設定はすべてのエディタコンテンツに適用されます。 [Customize content style（コンテンツスタイルのカスタマイズ）]に移動して、バルーンとスマートチップにどのように影響するかを確認します。

バルーン

バルーンタブでは、バルーンに適用されたアクティブテーマを確認できます。

ハイライトの色をテーマの色に変更できます。

コンテンツがテーマの影響を受けないよう、テーマから切り離すこともできます。

例えば、テーマからハイライトの色を切り離すと、コンソールでテーマを変更しても、その色のままになります（この場合は - ピンクの Primary、Main）。

[Change template（テンプレートを変更）]をクリックして、利用可能なすべてのテンプレートを確認します。

テーマの異なるテキストと色タイプが異なるテンプレートに接続されている方法をよりよく理解するには、以下のマッピング：テーマとテンプレートの関係セクションを参照してください。

テーマの特定のテンプレートを変更する場合は、[Edit（編集）]アイコンをクリックします。

CSSコンソールが開きます。 バルーンのプロパティのいずれかを調整できます。

プライマリ色をセカンダリに置き換えるか、完全に変更できます-例えば、黒または白など。

テーマから来るCSS変数は、テーマのCSSの記事で見つけることができます。

編集したテンプレートを新規として保存し、[User Templates（ユーザーテンプレート）]タブに表示されます。

スマートウォークスルーステップ画面では、テーマの色からテキストパーツの色を選択できます。 テーマから継承されているため、タイポグラフィースタイルはここから変更できません。

別のテンプレートを変更することもできます。

スマートチップ

スマートチップタブには、スマートチップに適用されたアクティブテーマが表示されます。

[変更]アイコンをクリックして、スマートチップに持っていきたいアイコンを選択します。

アイコンの色とサイズを変更する[Edit（編集）]アイコンをクリックします。 テーマから任意の色を選択できます。

チップ自体の色を変更することもできます。

このデザインエレメントがテーマの影響を受けないようにするには、テーマからいずれかの値を切り離すこともできます。

ランチャー

ランチャーを作成すると、このテーマで利用可能なすべてのテンプレートから選択できます。

デザインドロップダウンでは、テーマから優先する色を設定できます。

テーマから切り離し、関係のない色を設定することもできます。

テーマから色を切り離すと、それを説明する専用のアイコンが表示されます。

いつでもテーマに戻すことができます。

ランチャーを作成したら、ランチャーオプション画面でテンプレートを変更できます。 ランチャーのテキストは同じままになります。

タイポグラフィスタイルを変更したり、テーマから異なる色を選択することもできます。

サーベイ

• サーベイはデフォルトでテーマに接続されています
• サーベイで利用できるテンプレートは1つだけです

マッピング：テーマとテンプレートの関係

• すべてのテキストと色値（タイトル1、本文1、プライマリ、セカンダリなど）は、同じテーマ内でもテンプレートによって動作が異なります
• 例えば、ここに添付されているスマートウォークスルーのテンプレートは同じテーマを使用しています
• ご覧の通り、値と値の関係はテンプレートによって異なります
• 添付されている画像から、色とテキストのマッピングを見つけます

スマートウォークスルーのテンプレート

ランチャーのテンプレート

スマートチップのテンプレート

ビジュアルデザイナーのテーマ設定

新しいテンプレート

新しいシャウトアウトを作成すると、新しいテンプレートが表示され、すべてがアクティブとして設定したテーマに表示されます。

色の横にあるテーマのアイコンにカーソルを合わせると、現在使用されているテーマを確認できます。

テーマの色とタイポグラフィスタイルを選択するか、テーマから切り離し、独自の色またはフォントプロパティを設定できます。

ボタン

ボタンのどのプロパティをテーマと関連付けるか、またはテーマから切り離すかを決めることができます 例えば、フォントを切り離し、独自のフォントを選択し、テキストの色と塗りつぶしをテーマに接続できます。

エディタの変更

技術的な注意事項

• 管理者とコンテンツマネージャーの役割のみが編集と公開権限を持っています。 他のすべてのロールは、テーマの閲覧権限のみを持ちます。
• ウィジェットメニューはまだサポートされていません
• ProメニューとPro Lightメニューのみサポートされています。
• カリフォルニアのバルーンのみサポートされており、クラシックバルーンはサポートされていません。
• ビジュアルデザイナーではダイナミックレイアウトテンプレートのみがサポートされています。
• 以下のフォントがサポートされています：
  • Arial、Tahoma、Georgia、Courier、Proxima Nova、Poppins、Open Sans
• 多言語アプリのプレビューは動作しますが、実際の色は反映されません