メインコンテンツへスキップ
無料5 minutes中級

3Dグローブのカスタマイズオプション

3Dグローブのビジュアルスタイルと、共有グローブページおよびHTMLウィジェットで利用できるカスタマイズオプションについて説明します。

globecustomizationbrandingwidget
最終更新日:

3Dグローブのビジュアルデザインを理解し、共有グローブページおよび埋め込み可能なHTMLウィジェットで利用可能なカスタマイズオプションについて学びます。

グローブのビジュアルスタイル

3Dグローブは暗いMapboxテーマを使用しており、リアルタイム訪問者データを可視化するためのクリーンでプロフェッショナルな外観を提供します。このスタイルはすべてのユーザーで統一されており、訪問者マーカーとオーバーレイの最適な可読性のために設計されています。

グローブに表示される内容

グローブビューには、複数の組み込みビジュアル要素が含まれています:

要素説明
ダークマップベース国境付きMapbox暗いテーマ
訪問者マーカー訪問者の場所にあるDiceBearアバターマーカー
アクティビティフィード最近の訪問者アクティビティを表示するサイドパネル
トップ統計オーバーレイライブ訪問者数、推定訪問者価値、およびトップリファラーソース
ミュージックプレイヤーオンまたはオフに切り替えられるオプションのアンビエント背景音楽

レスポンシブデザイン

グローブは画面サイズに自動的に適応します:

  • デスクトップ: すべてのオーバーレイが表示されるフル機能ビュー
  • タブレット: 適切なサイズのコントロール付き調整レイアウト
  • モバイル: コンパクトなコントロールと最適化されたタッチターゲット

手動のレスポンシブ構成は必要ありません - グローブが自動的に処理します。

共有グローブページのホワイトラベル

Scale プラン

ScaleおよびEnterpriseのお客様は、ホワイトラベル設定を使用して共有グローブページの外観をカスタマイズできます。これは公開グローブ共有リンク(/share/globe/TOKEN)に適用されます。

利用可能なホワイトラベルオプション

設定説明
Zenovayブランディングを削除共有ページの「Powered by Zenovay」フッターを非表示にします
カスタムプライマリカラーブランドカラーをUI アクセントのCSS変数として適用します

ホワイトラベルの仕組み

共有グローブリンクがロードされるとき:

  1. 共有トークンが検証されます
  2. 関連するウェブサイトのホワイトラベル構成が取得されます
  3. カスタムCSS変数が適用されます(例:プライマリブランドカラー)
  4. ブランディング可視性は構成に基づいて設定されます

ホワイトラベル設定はZenovayアプリのAgencyダッシュボード(/agency)で管理されます。これらはワークスペースのすべてのウェブサイトの共有グローブページに適用されます。

HTMLウィジェットのカスタマイズ

Zenovayは3Dグローブから独立した埋め込み可能なHTMLウィジェットを提供します。これらのウィジェットは簡単な訪問者統計を表示し、カスタマイズできます。

ウィジェットタイプ

ウィジェット説明
リアルタイムパルス表示インジケーター付きのライブ訪問者数
プレビューラインチャート付きの24時間訪問者タイムライン
チャート国別内訳付き30分棒グラフ

ウィジェットカスタマイズオプション

ウィジェットの外観はドメイン設定のウィジェット設定パネルを通じて構成されます:

設定説明
プライマリカラーウィジェットのメインアクセントカラー(16進色)
セカンダリカラーグラフと塗りつぶしのセカンダリカラー(16進色)
テーマライト、ダーク、またはシステムテーマ
テキストサイズメイン表示番号のフォントサイズ
ブランディングを非表示ワークスペースがホワイトラベルブランディング削除を有効にしている場合「Powered by Zenovay」フッターを削除します(ScaleおよびEnterprise)

ウィジェット設定の適用

  1. ドメイン設定に移動します
  2. ウィジェットタブに移動します
  3. ウィジェットをオンまたはオフに切り替えます
  4. ウィジェットタイプタブ(リアルタイム、プレビュー、またはチャート)を選択します
  5. 色、テーマ、テキストサイズを調整します
  6. リアルタイムでウィジェットをプレビューします
  7. 生成されたiframe埋め込みコードをコピーします

ウィジェット設定はプレビューを直ちに更新するため、埋め込む前にウィジェットがどのように見えるかを正確に確認できます。

ベストプラクティス

プレゼンテーション向け

  • ダークグローブテーマは大画面とプロジェクターに適しています
  • 最大の視覚的インパクトのためにフルスクリーンモードを使用してください
  • アンビエントミュージックプレイヤーはライブデモ中の体験を向上させることができます

共有リンク向け

  • ScaleおよびEnterpriseホワイトラベルはプロフェッショナルなクライアント対応体験のためにZenovayブランディングを削除します
  • カスタムプライマリカラーは共有ページでブランド一貫性を維持するのに役立ちます

埋め込みウィジェット向け

  • ウェブサイトのデザインを補完する色を選択してください
  • ウェブサイトの背景に対してライトとダークテーマの両方をテストしてください
  • 訪問者の好みに自動的に一致するようにシステムテーマオプションを使用してください

次のステップ

この記事は役に立ちましたか?