テーマ設定
概要
テーマ設定は、異なるWalkMeアプリ間でデザインを統一できる新しいWalkMe機能です。 テーマ設定では、カラースキーム、タイポグラフィ、レイアウトなど、幅広い種類の既製デザイン要素やカスタマイズ可能なデザイン要素を使用して、すべてのWalkMeアイテムに一貫したルック＆フィールを簡単に適用できます。
アクセス方法
テーマ設定はコンソールにあり、アクセスできます
- https://console.walkme.com/themes
- コンソールサイドパネルを経由
有効化する方法
新しいシステムを作成しながらテーマ設定を有効にするには：
-
作成したばかりのシステムをクリックします
-
構築設定に移動します
-
テーマ設定のトグルを有効にします
ご利用方法
メイン画面
初めてテーマにアクセスすると、メイン画面にWalkMeが提供するすべてのテーマが表示されます。
画面の右側に、このテーマのプレビューが表示されます。 異なるアイテムタイプ間を移動し、各アイテムがこのテーマでどのように見えるかを確認できます。
プレビューのさまざまなエレメントにカーソルを合わせると、テーマから継承される内容を確認します。 例えば、シャウトアウトの画像を含むフレームは色（背景、メイン）を継承し、テキストのタイトルがタイトル（大）のタイポグラフィと色のテキスト、メインを継承します。
アクティブおよび公開テーマ
アクティブのラベルは、このテーマが現在エディタコンテンツに適用されていることを意味します。
ラベル公開とは、このテーマが現在、公開環境でユーザーに表示されることを意味します。
アクティブなテーマと公開されているテーマが同じではない場合があることに注意してください。
テーマをアクティブに設定すると、エディタで表示できます。 ただし、テーマをユーザーに表示するには、最初に公開する必要があります。
テーマをアクティブとして設定するには：
- [Options menu（オプションメニュー）]をクリックします。
- [Set as active（アクティブとして設定）
]を選択します - テーマをまだ公開したくない場合は、[Confirm（確認）
]をクリックします - テーマも公開するには、チェックボックスにチェックを入れ、[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、プライマリ、セカンダリなど）は、同じテーマ内でもテンプレートによって動作が異なります
- 例えば、ここに添付されているスマートウォークスルーのテンプレートは同じテーマを使用しています
- ご覧の通り、値と値の関係はテンプレートによって異なります
- 添付されている画像から、色とテキストのマッピングを見つけます
スマートウォークスルーのテンプレート
ランチャーのテンプレート
スマートチップのテンプレート
ビジュアルデザイナーのテーマ設定
新しいテンプレート
新しいシャウトアウトを作成すると、新しいテンプレートが表示され、すべてがアクティブとして設定したテーマに表示されます。
色の横にあるテーマのアイコンにカーソルを合わせると、現在使用されているテーマを確認できます。
テーマの色とタイポグラフィスタイルを選択するか、テーマから切り離し、独自の色またはフォントプロパティを設定できます。
ボタン
ボタンのどのプロパティをテーマと関連付けるか、またはテーマから切り離すかを決めることができます 例えば、フォントを切り離し、独自のフォントを選択し、テキストの色と塗りつぶしをテーマに接続できます。
エディタの変更
前
- エディタで色を選択したり、テンプレートのCSSを編集して確認したり、CSSのデザインをテンプレートとして保存したりすることができます
後
- 色とタイポグラフィの編集はテーマで行われます
- テーマに関連した新しいテンプレートがユーザーに提供されます
- グローバルバルーンテンプレートCSSを編集できます
前
- テキスト、背景、ボーダーの色を選択できます
後
- 色はテーマに由来するものであり、マッピングを変更したり、テーマから切り離したりすることができます
前
- アイコンは画像です。色は変更できません（ユーザーは異なる画像を1枚のみ選択できます）
- CSSで色を変更することはできません
後
- アイコンはHTMLです
- アイコンはテーマにリンクしており、テーマの色が変更された場合はその影響を受けます
- マッピングとアイコンのサイズを変更できます
前
- フォントファミリーを変更することはできません
後
- タイトルと本文に適用されたタイポグラフィが表示されます
- デザインはテーマに添付されています
前
- ランチャーのテキストを変更することはできません
- 異なるテキストを持つ新しいテンプレートのみ作成できます
後
- ローカルランチャーのテキストを変更するには、[カスタムテキストを使用]ボックスにチェックを入れる必要があります。
- ギャラリーが更新され、新しいテーマに接続されたテンプレートが利用可能になりました
技術的な注意事項
- 管理者とコンテンツマネージャーの役割のみが編集と公開権限を持っています。 他のすべてのロールは、テーマの閲覧権限のみを持ちます。
- ウィジェットメニューはまだサポートされていません
- ProメニューとPro Lightメニューのみサポートされています。
- カリフォルニアのバルーンのみサポートされており、クラシックバルーンはサポートされていません。
- ビジュアルデザイナーではダイナミックレイアウトテンプレートのみがサポートされています。
- 以下のフォントがサポートされています：
- Arial、Tahoma、Georgia、Courier、Proxima Nova、Poppins、Open Sans
- 多言語アプリのプレビューは動作しますが、実際の色は反映されません
- モバイルウェブはサポートされていません。
- テーマ設定とテーマ設定以外のシステム間のアカウントのコピーはサポートされていません。
🙂
Q：「管理者」権限を持つユーザーのみがテーマにアクセスできますか？ アクセスにはシステムマネージャーは含まれますか？それとも管理者全体にのみ含まれますか？
A：テーマの編集という新しい権限を導入しました。 この権限は、公開者、コンテンツマネージャー、システムマネージャー、管理者に対してデフォルトで有効になっています。 カスタムロールを作成し、必要に応じてこの権限を管理できます。
Q：テーマ設定は既存のCSSと重複しますか？ ブランディングの編集が重い企業では、どのような階層構造がありますか？
A：階層はテーマ設定を第一にし、次にカスタムCSSが順になります。CSSの影響が最も大きいです。
Q：グローバルルールとして構築されたCSSはテーマの設定を上書きしますか？
A：正しいです。
Q：テーマ設定は特定のシステムですか、それとも複数のシステムに分散させることができますか？
A：現在、システムごとに設定されています。 システム間でテーマの共有を有効にするロードマッププランがあります。
Q：テーマ内のカスタムフォントのグローバルルールを設定できますか？
A：まだです。 これは来四半期に予定されていますが、それまでCSSを使用してこれを実現できます。
Q：テーマ設定でウィジェット画像を調整する方法はありますか？
A：現在ではありませんが、将来のアップデートのために計画されています。
Q：幅や高さの変更など、サーベイをカスタマイズするためのオプションは増える予定ですか？
A：より多くのデザインオプションを備えた新しいサーベイアプリが近日公開されます。 現在のサーベイはテーマ設定に接続されています。
Q：テーマ設定がない場合、ユーザーはテーマ設定から切断できますか？
A：はい、オプトアウトできます。
Q：システムでテーマ設定が有効になっている場合、既存のコンテンツは遡って更新されますか？
A：現段階では、新しいシステムのみがサポートされています。 既存のシステムでは、ユーザーはコンテンツを積極的に更新する必要がありますが、これは部分的にしか発生しません。
Q：既存のコンテンツはテーマ設定で更新できますか？
A：既存のコンテンツは、積極的に更新されるまで変更されません。 テーマ設定は現在、新しいシステムで利用できます。既存のシステムは管理センターから追加できますが、アイテムは<100個以上である必要があります。
Q：テーマ設定にカスタムフォントを追加できますか？それともCSSは必要ですか？
A：CSSは未だに行われていますが、間もなく利用可能になります。
Q：システムに基づいて異なるテーマを設定するオプションはありますか？
A：はい、テーマはシステムベースです。
Q：テーマを編集すると、公開されたビルドは変更されますか？
A：いいえ、更新されたテーマを公開する必要があります。
Q：複数のテーマを同時にアクティブにできますか？
A：一度にアクティブにできるテーマは1つだけです。
Q：各テーマには、異なるテーマでグローバルCSS用に固有のCSS IDがありますか？
A：テーマを使用するためにCSSの知識を必要とすることはありませんが、システム間のテーマの共有は、将来のリリースで利用可能になります。
Q：アイテムが多数あるシステムでは、テーマ設定を利用できますか？
A：はい、これは将来のリリースで予定されています。
Q：既存のシステムがテーマ設定を使用するためのタイムラインはありますか？
A：2025年夏のリリースを計画しています。
Q：テーマ設定は複数のシステムに適用できますか？それともシステム固有の設定ですか？
A：現在、テーマ設定はシステムレベルですが、2025年春リリースではテーマを共有する機能を導入します。
Q：TeachMeとアクションボットでテーマ設定は動作しますか？
A：将来のアップデートで、TeachMeとアクションボットがサポートされる予定です。
Q：テンプレートを変更する前に構築されたコンテンツはどうなりますか？
A：新しいテンプレートに接続されない限り、テーマ変数を継承します。
Q：テーマ設定を選択した場合、後でオプトアウトでき、コンテンツは元のデザインに戻りますか？
A：テーマ設定に接続しない限り、コンテンツは変更されず、有効化されるとオプトアウトすることはできません。
Q：使用されているシステムが「新しい」システムか古いシステムか、どのようにしてわかりますか？
A：アイテムが100未満で、デフォルトのテンプレートとしてクラシックバルーンを使用していないシステムは、「新しい」と見なされます。
Q：WalkMeで使用するために、新しいプロプライエタリフォントをダウンロード/アップロードできますか？
A：この機能は、2025年春のリリースで予定されています。
Q：新しいテーマはカナダデータセンターで利用可能になりますか？
A：はい、利用できます。
Q：複数のアクティブテーマが必要な理由は？
A：オレンジのトレーニングリソース、青のヘルプリソース、赤のエラーなど、さまざまな目的に使用できます。 単一のテーマ内で、異なるテンプレートを異なる変数に接続することで、これを実現できます。