テーマ & カスタマイズ
ヘルパーの外観をブランドやサイトデザインに合わせてパーソナライズしてください。
AI Anywhereのテーマシステムを使用すると、ヘルパーの外観と感触をカスタマイズできます。ボタンの色からフォントまで、ヘルパーをサイトのデザインにシームレスに溶け込ませたり、ブランドカラーで目立たせたりできます。色やスタイルをカスタマイズして、サイトの外観に合わせた独自のライトモードとダークモードをデザインできます。
ボタンの色のカスタマイズ
ヘルパーボタンの色は、最も目立つカスタマイズオプションの1つです。ブランドやサイトのテーマに合わせて設定できます。
ボタンの色を設定する
ダッシュボードのヘルパー設定で、テーマ設定に移動します。ここで、次の方法でプライマリボタンの色を設定できます：
- カラーピッカー： カラーピッカーインターフェースから視覚的に色を選択します
- 16進コード： 特定の16進カラーコードを入力します（例：
#4B0076紫の場合、#007bff青の場合） - RGB値： 希望する場合はRGB値を指定します（自動的に16進に変換されます）
/* 例：ボタンの色をブランドの紫に設定する */
ボタンの色： #4B0076ラベルの色
ラベルのテキストカラー（ボタンに表示されるテキスト）は、ボタンの色に基づいて自動的にコントラストを調整します。ボタンが暗い場合、テキストは明るくなり、明るい場合はテキストが暗くなります。これにより、選択した美的感覚を維持しながら、読みやすさが確保されます。
ヘルパー
ヘルパー
左：暗いボタンに明るいテキスト | 右：明るいボタンに暗いテキスト
ライトモードとダークモードの作成
AI Anywhereには事前に構築されたダークモードは含まれていませんが、ボタンの色、テキストの色、その他のスタイリングオプションをカスタマイズして、サイトのデザインに合わせた独自のライトテーマとダークテーマを実装できます。
ダークモードのデザイン
ヘルパーのダークモードの外観を作成するには：
- より暗いボタンの色を使用してください： 暗い色を選択します（例：
#1a1a1a,#2d3748) ダークテーマのサイト用 - テキストの色を調整してください： 読みやすさのために適切なコントラストを確保してください - 暗いボタンに明るいテキスト、またはラベルの色をカスタマイズ
- サイトに合わせて\ ダークモードのカラースキームに合った色を選択してください
<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
<textarea id="message"></textarea>
<span data-helper-anchor data-helper-token="your-helper-token"></span>ダッシュボードで設定したボタンの色が外観を決定します。ダークモードにはより暗い色を、ライトモードにはより明るい色を使用してください。
フォントファミリーのカスタマイズ
ヘルパーで使用されるフォントファミリーをカスタマイズして、サイトに合わせることができます\
フォントファミリーの設定
ダッシュボードのヘルパー設定で、テーマ設定に移動し、以下を含むさまざまなフォントファミリーから選択できます：
- ウェブセーフフォント（Arial、Helvetica、Georgia、Times New Roman）
- モダンなサンセリフフォント（Inter、Roboto、Open Sans、Lato）
- セリフフォント（Merriweather、Playfair Display）
ヘルパーはすべてのテキスト要素に選択されたフォントファミリーを使用し、サイトとの視覚的一貫性を確保します\
ボタンスタイル：丸型 vs. 四角型
サイトに合わせて、丸型（ピル型）と四角型のボタンスタイルを選択できます\
丸型ボタン
丸型ボタンは完全に丸い角を持ち、モダンで親しみやすい外観を与えます。このスタイルは、現代的なデザインや柔らかいブランド美学に適しています。
丸型ボタンスタイル
四角型ボタン
四角型ボタンは鋭く、最小限の角を持ち、より幾何学的で構造的なデザインに合います。プロフェッショナルで企業的な印象を与えます。
四角型ボタンスタイル
カラコードの例
使用する可能性のある一般的なカラコードをいくつか紹介します：
- 紫：
#4B0076（AI Anywhere デフォルト） - 青：
#007bff - 緑：
#28a745 - 赤：
#dc3545 - 黄：
#ffc107 - 灰色：
#6c757d
デザインのベストプラクティス
- アクセシビリティ： ボタンとテキストの間に十分な色のコントラストを確保して、読みやすさを向上させます（WCAG AA 標準では少なくとも4.5:1のコントラスト比を推奨しています）
- コントラスト： ページの背景から際立つボタンの色を選択しますが、\
- シンプルさ： カスタマイズは最小限に抑えてください。スタイルの変更が多すぎると、Helperがブランドから切り離された印象を与える可能性があります。
- 一貫性： ヘルパーの色をサイトの主要なアクションボタンに合わせて、統一感のあるユーザー体験を提供します
- テスト： 常にヘルパーを明るい背景と暗い背景の両方でプレビューして、すべてのシナリオで見栄えが良いことを確認します
デプロイ前のプレビュー
ヘルパーを公開する前に、ダッシュボードのプレビューフィーチャーを使用して、カスタマイズがどのように見えるかを正確に確認します。これにより、次のことが可能になります：
- 色の選択がブランドに合っていることを確認する
- 読みやすさとコントラストを確認する
- ボタンのスタイルがサイトに合っていることを確認する\
- カスタムのライトモードとダークモードのデザインをテストする（該当する場合）
覚えておいてください: ヘルパーの設定でテーマを変更した後、新しいテーマ設定で更新されたコードを取得するためにスニペットを再生成し、新しいスニペットでサイトを更新してください。
