テーマ

ガイドとサーベイは、お客様のブランディングに合致し、プロダクトの一部であるように感じられる必要があります。テーマを使用すると、ガイドやサーベイの外観を制御できます。

テーマを使用すると、製品内のすべてのメッセージがお客様の色、タイポグラフィー、およびデザインと一致するようになります。 控えめなガイドやページ全体にわたるサーベイは、ランダムなポップアップではなく、プロダクトの一部であるかのような見た目と操作感であるべきです。

ボタンから枠線、アニメーションから背景色に至るまで、ユーザーに対してガイドとサーベイがどのように表示されるかを制御できます。

新しいテーマを作成する

新しいガイドとサーベイのテーマを作成するには:

1. Amplitudeで、「_ガイドとサーベイ」>「Theme」_に移動します。
2. 「テーマを作成」をクリックします。 テーマエディタが表示されます。
3. ブランドとコンポーネントのコントロールを使用してテーマをカスタマイズできます。
4. [保存] をクリックすると、いつでも進捗状況を保存できます。
5. [公開] をクリックすると、ガイドやアンケートでテーマを選択できるようになります。

グローバルエージェントでテーマを作成する

Amplitudeのグローバルエージェントは、自然言語による説明や参照画像、またはその両方からガイドとサーベイのテーマを生成できます。その結果、完全に編集可能なテーマが作成され、テーマエディタでさらに細かく調整できます。

グローバルエージェントは、色、タイポグラフィー、間隔、ボタンのスタイル、フォームコントロール、カード、ウィジェットの寸法、コンポーネントレベルのオーバーライドなど、ブランドレベルとコンポーネントレベルの両方のテーマ設定を生成します。 生成された設定は、作成後にテーマエディタで調整できます。

テーマを作成する

1. Amplitudeダッシュボードのどこからでもグローバルエージェントを開くか、_ガイドとサーベイ > テーマ_ページでテーマを作成をクリックします。
2. 希望するテーマを説明してください。例：「当社のマーケティングサイトのパレットを使用：プライマリカラーはネイビー、アクセントカラーはコーラル、ボタンと入力フォームの角を丸くする」また、スクリーンショットやFigmaエクスポートを視覚的な参照として添付することもできます。
3. グローバルエージェントはテーマを生成し、テーマへのリンクを返します。リンクをクリックすると、テーマエディタでテーマが開きます。
4. 生成された設定を確認します。 ブランドまたはコンポーネントの値を調整した後、「公開」をクリックしてテーマを使用できるようにします。

グローバルエージェントが生成しないもの

グローバルエージェントはアニメーションやカスタムCSSを生成しません。テーマエディタでアニメーションを設定し、[カスタムCSS]を使用してカスタムCSSを追加します。

テーマを管理

「ガイドとサーベイ」>「テーマ」ページには、プロジェクト内のすべてのテーマが一覧表示されます。ページ上部にあるタブを使用してリストをフィルタリングすると、大量のテーマを管理できます。

• アクティブ: ガイドやサーベイで使用されているテーマです。
• 非アクティブ：ガイドや調査で使用されていないテーマ。
• アーカイブ済み: アーカイブ済みのテーマです。
• すべて: ステータスに関係なく、すべてのテーマ。

特定のテーマを検索するには、[テーマを検索] ボックスを使用します。

テーマをアーカイブする

不要になったテーマをアーカイブすると、アクティブリストおよび非アクティブリストから削除されます。アーカイブしても、すでにそのテーマを使用しているガイドやサーベイは変更されません。

1. Amplitudeで、「_ガイドとサーベイ」>「Theme」_に移動します。
2. アーカイブしたいテーマを見つけます。
3. テーマのコンテキストメニューを開き、「アーカイブ」を選択します。

テーマを復元する

テーマはガイドやサーベイと同じように機能します。テーマのアーカイブは永続的ではありませんので、後で復元できます。アーカイブされたテーマを復元して、ガイドやサーベイで再び使用できるようにします。

1. Amplitudeで、「_ガイドとサーベイ」>「Theme」_に移動します。
2. ［アーカイブ済み］ または ［すべて］ タブを選択します。
3. アーカイブ済みテーマのコンテキストメニューを開き、「復元」を選択します。

テーマビューア

テーマビューアは、ガイドやアンケートに適用されたときにテーマがどのように表示されるかを示します。 テーマを編集する際は、プレビューしたい特定のガイドやアンケートを選択して、変更内容が実際のコンテンツにどのように影響するかを確認してください。

テーマのプレビューは、プレビューする場所によって異なります。 ガイドやアンケートを作成するとき、テーマプレビューには公開済みのバージョンが表示されます。 テーマを編集するときは、プレビューに下書きの変更が表示され、プレビュー対象となるガイドやサーベイを選択できます。この動作により、ガイドを作成するときに表示される内容と、ユーザーがプロダクトで体験する内容との間で一貫性が確保できます。

ビューア上部で、ブランドエディタとコンポーネントエディタを切り替え、ライトモードとダークモードを切り替え、変更をキャンセル、保存、または公開できます。

ブランドコントロール

テーマエディタを使用して、ブランドやスタイルの要素をカスタマイズできます。

アクセント

アクセントはブランドの主要色を表します。 この色は、主要なボタンと選択したオプションに表示されます。

この例では、原色は #48705C です。

タイポグラフィー

テーマのデフォルトの書体を設定します。 Googleフォントライブラリから選択するか、サイトで既に定義済みのカスタムフォントを指定してください。

モバイルガイドやサーベイでフォントをネイティブに使用するには、アプリプロジェクトに完全なフォントファミリーを含め、そのフォントに一貫したファイル名を使用してください。

Android

• フォントファイルをプロジェクトの/res/fontディレクトリに配置します。
• 明確で一貫性のある命名規則を使用してください。
  • [fontNameWithoutSpaces]_[style].[fileExtension]
  • 例えば、adventpro_italic.ttfのようになります。
• サポートされている形式: TTF、TTC、OTF、XML。
• フォントを追加した後は、テーマ設定で直接そのフォントを参照できます。

詳細については、Android のフォント リソースを参照してください。

iOS

• Xcode プロジェクトにフォントファイルを追加します。
• 明確で一貫性のある命名規則を使用してください。
  • [FontName]-[Style].[fileExtension]
  • 例えば、Lora-Italic.ttfのようになります。
• アプリの.plistファイルにフォントを登録します。
• または、CTFontManagerRegisterFontsForURL を使用してプログラムで Core Text にフォントを登録することもできます。 テーマの設定では、フォントの PostScript 名を使用してください (例: Lora-Italic)。
• サポートされている形式：TTF、OTF。

詳細については、Appleの「アプリケーションにカスタムフォントを追加する」を参照してください。

コンテンツ

ブランドのパレットを完成させる補助色を定義します。

• 主要色
• 二次色
• 無効な色
• リンクの色
• リンクのホバー色
• 訪問済みリンクの色
• ハイライト色

境界線

以下の各状態における要素の境界線の色を指定します。

• 主要色
• 主なホバーカラー
• 無効な色

背景

指定した状態にある要素の背景色を更新します。

次の各背景バリアントを設定します。

• 主要色
• 主なホバーカラー
• 二次色
• 第2ホバー色
• 無効な色

フォームコントロール

ガイドやサーベイでのインタラクティブ要素の外観をカスタマイズできます。

以下の項目を調整します。これはすべてのフォーム要素に適用されます。

• 高さ
• コーナー半径
• パディング
• ギャップ
• シャドウ
• シャドウの色
• 背景
• アクティブなバックグラウンド
• フォーカスリングの色
• フォーカスリング幅

カード

個々のカードが画面上にどのように表示されるかを指定します。 すべてのカードに適用される次の設定を調整します。

• コーナー半径
• パディング
• ギャップ
• シャドウ
• シャドウの色

ウィジェットのサイズ

ウィジェットのタイプごとに最大サイズを指定します。

アニメーション

各ウィジェットタイプが画面に表示するために使用するアニメーションと、該当する場合は期間（ミリ秒単位）を選択します。

コンポーネントエディタ

コンポーネントは、ガイドとサーベイ全体で使用できる再利用可能な要素です。コンポーネントを使用する場合、コンテンツを一度指定してから、テーマ内の任意の場所に適用します。

各コンポーネントには、デフォルト、ホバー、フォーカスなどの状態が含まれており、これらの状態はカスタマイズできます。

テーマコンポーネントの使用状況

テーマコンポーネントは、ガイドやサーベイ全体に表示されます。このセクションでは、各コンポーネントタイプがアプリケーション内でどこに表示されるかについて説明します。

ボタン

ボタンは次の場所に表示されます：

• プライマリボタン：ガイドやサーベイで使用される主な行動を促すためのボタンです。 これらのボタンは、テーマで定義したアクセントカラーを使用します。
• セカンダリボタン: 代替アクションまたはあまり目立たない CTA。これらのボタンは、セカンダリカラー設定を使用します。
• ボタンの状態: すべてのボタンがデフォルト状態、ホバー状態、アクティブ状態、および無効状態をサポートしています。これらの状態はコンポーネントエディタでカスタマイズできます。

ボタンは次の場所に表示されます：

• アクションボタン付きの手順ガイド
• アンケート送信ボタン
• モーダルダイアログ
• バナーアクション
• フォームの提出

カード

カードは、ガイドとサーベイでコンテンツをグループ化して表示します。カードのスタイル設定は次の場合に適用されます:

• ガイドステップコンテナ
• アンケート質問コンテナ
• ガイド内のコンテンツブロック
• 情報パネル
• サーベイでの結果の表示

カードのプロパティ（角の半径、パディング、ギャップ、シャドウ）は、ガイドやサーベイ内のすべてのカード要素に均一に適用されます。

フォームコントロール

フォームコントロールは、サーベイやフォームにおけるインタラクティブな要素です。これらのコントロールは次の場所に表示されます。

• テキスト入力: アンケート回答用の短いテキスト入力フィールドと長いテキスト入力フィールドです。
• 選択ドロップダウン: 複数のオプションから選択するためのドロップダウンメニューです。
• チェックボックス: 複数選択オプション。ユーザーは複数の回答を選択できます。
• ラジオボタン: ユーザーが1つの回答のみを選択できる単一選択オプションです。
• 評価コンポーネント: 星評価、絵文字評価、フィードバック用の数値評価。
• リスト要素: アンケート質問における順序付けされたリストと順序付けされていないリスト。

すべてのフォームコントロールは、フォームコントロールセクションで設定した同じスタイルプロパティ（高さ、角丸、パディング、ギャップ、影、フォーカスリング）を共有します。

ウィジェット

ウィジェットは、ガイドやサーベイを表示するためのコンテナ要素です。ウィジェットタイプごとに特定のディメンション設定があります。

• モーダル: アプリケーション上に表示される全画面または中央に配置されたダイアログボックスです。 マルチステップガイド、サーベイ、および重要なお知らせに使用されます。
• ポップオーバー／ピン：特定の UI 要素の近くに表示されるコンテキストに依存する小さな要素です。ツールチップ、ヒント、インラインガイダンスに使用されます。
• ツールヒント：ユーザーが要素にカーソルを合わせたり操作したりするときに表示される小さな情報ボックスです。 状況に応じたヘルプや説明に使用されます。
• チェックリスト：ユーザーがタスクを完了したときにチェックを入れることができるインタラクティブなリストです。オンボーディングフローとタスク完了ガイドに使用されます。

境界線

境界線の色は次の場合に適用されます：

• フォームコントロールのアウトライン
• カードの端
• ボタンの境界線
• 入力フィールドの境界線
• コンテンツセクション間の区切り線

境界線色は、プライマリ、プライマリ ホバー状態、および無効状態をサポートしています。これらの状態はカスタマイズできます。

背景

背景色は次の場合に適用されます:

• カードの背景
• フォームコントロールの背景
• ボタンの背景（プライマリ、セカンダリ、およびそれらのホバー状態）
• 無効化された要素の背景
• ウィジェットコンテナの背景

バックグラウンド設定は、プライマリ、プライマリ ホバー、セカンダリ、セカンダリ ホバー、および無効の各状態をサポートしています。

タイポグラフィー

タイポグラフィ設定は、ガイドやサーベイ内のすべてのテキスト要素に適用されます。以下を含みます。

• ガイドステップのタイトルと説明
• サーベイに関する質問と手順
• ボタンラベル
• フォームコントロールラベル
• カードのコンテンツテキスト
• ウィジェットのヘッダーと本文テキスト

設定したタイポグラフィーは、そのテーマを使用するガイドやサーベイ内のすべてのテキストのデフォルトフォントになります。

アニメーション

アニメーションはウィジェットの画面上の表示方法を制御します。 ウィジェットタイプごとに独自のアニメーションを作成できます。

• モーダルアニメーション: モーダルが画面に出入りする方法を制御します。
• ポップオーバー／ピンアニメーション：コンテキスト要素の表示方法を制御します。
• ツールチップのアニメーション: ツールチップのフェードインとフェードアウトの方法を制御します。
• チェックリストのアニメーション: チェックリスト項目の表示方法を制御します。

アニメーションの持続時間の設定（ミリ秒単位）は、これらの遷移の速度を制御します。

コンテンツの色

コンテンツの色はテキストとリンク要素に適用されます：

• 主要色：メインテキストコンテンツに使用されます。
• 二次色：二次テキストとラベルに使用されます。
• 無効な色: 無効なテキストや非アクティブな要素に使用されます。
• リンクの色: ガイドやアンケートコンテンツ内のクリック可能なリンクに使用されます。
• リンクのホバーカラー: ユーザーがリンクにカーソルを合わせたときに使用されます。
• リンク訪問カラー: ユーザーがすでにクリックしたリンクに使用されます。
• 強調色: 重要なテキストや選択項目を強調表示するために使用されます。

カスタムCSSによる高度なカスタマイズ

カスタム CSS を使用すると、CSS クラスセレクターを使用して特定の要素を制御できます。これにより、テーマが提供するものを超えてスタイルを設定できます。 カスタム CSS は、Web SDK でのみ使用できます。

Amplitudeはほとんどのスタイリングにテーマを使用することを推奨しています。テーマで必要なコントロールが提供されない場合は、カスタム CSS を使用してください。