分析ダッシュボードはビジュアライゼーションの質によって成否が決まります。私たちは複雑なデータを即座に理解可能でアクショナブルな形で提示するための体系的なアプローチを開発しました。
チャートライブラリの選択
特定のニーズに応じて異なるチャートライブラリを使用しています。
- Recharts： 標準チャート（折れ線、棒、面、円）のメインライブラリです。Reactネイティブで、高度にカスタマイズ可能で、レスポンシブなサイジングにも対応しています。
- Chart.js： Rechartsでは対応できない特殊なビジュアライゼーション、特にアニメーションのドーナツチャートやレーダープロットに使用します。
- カスタムSVG： ファネルチャートや比較バーなどのユニークなビジュアライゼーションには、完全な制御のためにカスタムSVGコンポーネントを構築します。
3Dグローブの実装
インタラクティブなグローブはZenovayのシグネチャーとなるビジュアル要素で、リアルタイムの訪問者の位置を表示します。
- Mapbox GL JS： スムーズな60fpsの回転とズームのためにWebGLアクセラレーションを使用した3Dレンダリングを提供します。
- カスタムマーカー： 訪問者のピングは、到着時にパルスし10秒後にフェードするアニメーションの円です。
- アーク接続： 訪問者と目的地を結ぶ線は、二次ベジェ曲線を使用します。
- フォールバックデザイン： WebGLが利用できない場合は、CSSアニメーションの2D表現が読み込まれます。
ヒートマップビジュアライゼーション
クリックとスクロールのヒートマップには慎重なカラースケーリングが必要です。
- カラーグラデーション： 青（冷）→緑→黄→赤（熱）は直感的な密度認識を提供します。
- 対数スケーリング： ホットスポットがビジュアライゼーション全体を支配しないよう、対数変換を適用します。
- オーバーレイレンダリング： ヒートマップは完全な位置合わせのためにページスクリーンショット上にキャンバスオーバーレイとしてレンダリングされます。
- インタラクティブな検査： ホバーすると正確なクリック数と要素セレクターが表示されます。
分析のためのカラースケール
一貫したカラー使用により、ユーザーはデータを素早く解釈できます。
- パフォーマンス指標： 直帰率、読み込み時間などについて、緑（良好）→黄（警告）→赤（危険）。
- 訪問者価値： 青の濃度は訪問者スコア（0〜100）と相関し、濃いほど価値が高い。
- トラフィックソース： 各ソースタイプには専用の色があります—ダイレクト（青）、オーガニック（緑）、ソーシャル（紫）、リファーラル（オレンジ）。
- 比較チャート： 現在の期間はプライマリブルーを使用し、前の期間はミュートグレーを使用して明確に区別します。
レスポンシブチャートデザイン
チャートはすべての画面サイズで機能する必要があります。
- アスペクト比の維持： チャートはデスクトップでは16:9、モバイルでは縦方向の活用を高めるために4:3に移行します。
- ラベルの省略： 小さな画面では長軸ラベルが省略記号で切り捨てられ、ツールチップにフルテキストが表示されます。
- 凡例の配置： モバイルでは下部の凡例、デスクトップではサイドの凡例でチャートエリアを最大化します。
- タッチインタラクション： タッチデバイスでの時間範囲ナビゲーションのための大きなタップターゲットとスワイプジェスチャー。
アニメーションガイドライン
動きは注意をそらすためではなく、理解を促進するためのものです。
- 初期ロード： チャートは最初のレンダリング時にゼロからアニメーション（300msイーズアウト）してデータに注目を集めます。
- データ更新： データ状態間のトランジションは、変化を示しながらコンテキストを維持するために200msの期間を使用します。
- ホバー状態： ツールチップとハイライトエフェクトへの即時応答（遅延なし）。
- モーション軽減： すべてのアニメーションはprefers-reduced-motionを尊重し、無効にすることができます。