テーマ設定
概要
テーマ設定は、ユーザーが異なるWalkMeアプリ間でデザインを統一できる新しい機能です。 テーマ設定により、配色、タイポグラフィ、レイアウトなどのあらかじめ用意されたさまざまなデザイン要素やカスタマイズ可能な要素を使用して、すべてのWalkMeアイテムに一貫したルック＆フィールを簡単に適用できます。
コンソールでのテーマ設定
アクセス方法
テーマはコンソールにあり、アクセスできます
- https://console.walkme.com/themes
- （コンソールサイドパネル経由）
ご利用方法
テーマの選択
- メイン画面にWalkMeが提案するテーマが表示されます（青がデフォルト）
- ユーザーはWalkMeテーマを編集できません
- これらのテーマのいずれかを選択すると、画面の右側にプレビューが表示されます
- アイテムの種類を選択して、このテーマでそれぞれがどのように見えるかを確認することもできます
テーマのカスタマイズ
- WalkMeが提供する既存のテーマを変更したい場合は、テーマのいずれかを選択し、それをベースに独自のテーマを作成することができます
- 選択したテーマの一部を変更するには、［Next（次へ）］ボタンをクリックします
- ここで色を変更することができます（アクセシビリティの関係上、黒と白の基本2色を除きます）
- すべての色に、メイン色とは別にティント（明るい色）とシェード（暗い色）の2つの色合いがあります
- メイン色（パレットの中央色）を変更すると、他の2つの色もそれに応じて変化します
- ユーザーはセカンダリカラー（ティントとシェード）を変更できません。パレットのメイン色に応じて自動的に調整されます
- タイポグラフィタブでは、テキストタイプ（タイトル1、タイトル2、本文、ツールチップなど）ごとに、フォント、フォントサイズ、テキストのフォーマットを変更できます
- ボタンタブでは、テーマの色とフォントから、すべてのボタンの色とタイポグラフィを変更することができます。
- 色とタイポグラフィの変更もここに反映されます
- ホバーとクリックモードでは、ボタンのデザインをカスタマイズできます
新しいテーマを作成
- また、右上隅にある新しいテーマの作成ボタンをクリックして、新しいテーマを作成することもできます
- 青色のWalkMeテーマがデフォルトとして使用されます。そこからカスタマイズできます
新しいテーマの保存
- テーマの編集が完了したら、［Save as new（新規として保存）］をクリックします
- 新しいテーマを保存すると、それがデフォルトとして設定されます
- テーマをすぐにいずれかの環境にパブリッシュできるオプションがあります
- パブリッシングは新しいテーマ設定にのみ適用されます
テーマのパブリッシング
- 新しく作成されたテーマをパブリッシュまたは変更するには、右上隅にあるパブリッシュボタンをクリックします
- パブリッシングは新しいテーマ設定にのみ適用されます
デフォルトテーマの選択
- デフォルトとして選択されたテーマがエディタで表示されるテーマです（パブリッシュ後にエンドユーザーに表示されます）
- テーマのタイトル横にある3点ドットメニューをクリックして、デフォルトの設定を選択することで、デフォルトのテーマを簡単に変更できます
テーマの削除と名前の変更
- カスタムテーマの削除または名前を変更するには、テーマの右上隅にある3点ドットメニューをクリックします
マッピング：色と色の関係
- すべてのテキストと色値（タイトル1、本文1、プライマリ、セカンダリなど）は、同じテーマ内でもテンプレートによって動作が異なります
- 例えば、ここに添付されているスマートウォークスルーのテンプレートは同じテーマを使用しています
- ご覧の通り、値と値の関係はテンプレートによって異なります
- 添付されている画像から、色とテキストのマッピングを見つけます
スマートウォークスルーのテンプレート
ランチャーのテンプレート
スマートチップのテンプレート
ビジュアルデザイナーのテーマ設定
ご利用方法
色
- ビジュアルデザイナーでは、色が適用される場所ならどこでもテーマ設定を使用できます
- 例えば、ポップアップの背景を現在のテーマの色に変更できます
- テーマの色を変更すると、このテーマを使用しているポップアップが自動的に変わります
テーマから切り離す
- 自分のエレメントを常にテーマと結びつけたり、それを永続させたりしたくない場合、サイドメニューのリンクの解除アイコンをクリックして、テーマから切り離すことができます
- テーマに戻るには、サイドメニューにある4つの正方形のアイコンをクリックして、デザインに添付するテーマを選択します
タイポグラフィ
- タイポグラフィは、色と同じようにテーマを使用します。現在のテーマが含むテキストの任意のフォントやフォーマットを選択することができます
- タイポグラフィを使用しない場合は、テーマから切り離すこともできます
ボタン
- ボタンをテーマと関連付けることができます
- ボタンのどのプロパティをテーマと関連付けるか、またはテーマから切り離すかを決めることができます
- 例えば、フォントを切り離して自分の好きなフォントを選び、他の色や塗りつぶしはテーマに沿ったものにすることができます
新しいテンプレート
- テーマでは、新しいビジュアルデザイナーのテンプレートも導入されます
- 各テンプレートは、特定のテーマに関連付けられます
エディタでのテーマ設定
エディタの変更
| グローバルバルーン | |
| 前 | 後 |
|
|
| スマートチップツールチップ | |
|
テキスト、背景、ボーダーの色を選択できます
|
色はテーマに由来するものであり、マッピングを変更したり、テーマから切り離したりすることができます
|
|
スマートチップ |
|
| 前 | 後 |
| スマートチップツールチップ | |
|
テキスト、背景、ボーダーの色を選択できます
|
色はテーマに由来するものであり、マッピングを変更したり、テーマから切り離したりすることができます
|
| スマートチップアイコン | |
|
|
| ローカルバルーン | |
|
|
| ローカルランチャー | |
|
|
この記事は役に立ちましたか？
はい
いいえ
ご意見ありがとうございます！