📊 売上分析ダッシュボード

🌟 概要

売上データをリアルタイムで可視化する、美しくインタラクティブなダッシュボードです。経営判断に必要な情報を一目で把握できるよう設計されています。

✨ デモ

🔗 ライブデモはこちら

🎯 特徴

• 📈 リアルタイムデータ可視化 - 売上推移を即座に把握
• 📊 多様なグラフ表示 - 折れ線、円、棒グラフで多角的分析
• 📱 レスポンシブデザイン - PC、タブレット、スマホ対応
• 📅 期間フィルター - 年・月単位でデータを絞り込み
• 📄 PDF出力機能 - レポート作成が簡単
• 🎨 モダンなUI - グラデーション背景と洗練されたカードデザイン

📸 スクリーンショット

デスクトップ表示

モバイル表示

🛠️ 使用技術

技術	用途
HTML5	構造・マークアップ
CSS3	スタイリング・アニメーション
JavaScript (ES6+)	インタラクティブ機能
Chart.js 3.x	グラフ描画
jsPDF	PDF出力
html2canvas	スクリーンショット生成
Font Awesome	アイコン

🚀 機能詳細

1. KPIカード

• 総売上 - アニメーション付き数値表示
• 取引件数 - 前期比較付き
• 平均単価 - トレンド表示
• 顧客数 - 成長率表示

2. グラフ機能

月別売上推移（折れ線グラフ）

• 今年と昨年の比較表示
• ホバーで詳細数値表示
• スムーズなアニメーション

カテゴリ別売上（円グラフ）

• カテゴリごとの売上比率
• インタラクティブな凡例
• 美しいカラーパレット

製品別ランキング（横棒グラフ）

• TOP10製品の売上表示
• グラデーション効果
• 数値の自動フォーマット

3. コントロール機能

• 期間選択 - 年・月単位でのフィルタリング
• データ更新 - ワンクリックでリフレッシュ
• PDF出力 - A4横向きで美しくレイアウト

💻 インストール & 使用方法

ローカルで実行

1. リポジトリをクローン

git clone https://github.com/SE0831/sales-analytics-dashboard.git

2. プロジェクトディレクトリに移動

cd sales-analytics-dashboard

3. ブラウザで開く

# Macの場合
open index.html

# Windowsの場合
start index.html

カスタマイズ

データの変更

generateSampleData()関数内でデータを編集：

function generateSampleData() {
    // あなたのデータに置き換え
    const salesData = [/* your data */];
    return { salesData };
}

色の変更

chartColorsオブジェクトを編集：

const chartColors = {
    primary: 'rgba(102, 126, 234, 1)',    // メインカラー
    secondary: 'rgba(118, 75, 162, 1)',   // サブカラー
    // 他のカラー設定
};

📂 ファイル構成

sales-analytics-dashboard/
├── index.html          # メインファイル（HTML/CSS/JS統合）
├── README.md           # このファイル
└── LICENSE            # MITライセンス

🎨 デザインコンセプト

• ビジネスフレンドリー - 企業での使用を想定したプロフェッショナルなデザイン
• 視認性重視 - 重要な情報が一目でわかる配置
• モダン&エレガント - グラデーションとシャドウを活用した立体的なUI
• カラーパレット - 紫とブルーを基調とした信頼感のある配色

🔧 今後の改善予定

• リアルタイムデータ連携（API接続）
• ダークモード対応
• 多言語対応（英語版）
• データのCSVインポート機能
• グラフの種類追加（ヒートマップ等）
• ユーザー認証機能
• データの永続化（LocalStorage）

🤝 貢献

改善提案やバグ報告は大歓迎です！

1. このリポジトリをフォーク
2. 新しいブランチを作成 (git checkout -b feature/AmazingFeature)
3. 変更をコミット (git commit -m 'Add some AmazingFeature')
4. ブランチにプッシュ (git push origin feature/AmazingFeature)
5. プルリクエストを作成

📄 ライセンス

このプロジェクトはMITライセンスの下で公開されています。詳細はLICENSEファイルをご覧ください。

👨‍💻 作者

SE0831

• GitHub: @SE0831
• ポートフォリオ: 他のプロジェクト

🙏 謝辞

• Chart.js - 素晴らしいグラフライブラリ
• jsPDF - PDF生成機能
• Font Awesome - アイコンセット
• Google Fonts - Interフォント

⭐ サポート

このプロジェクトが役に立ったら、⭐スターをお願いします！

---

最終更新: 2024年8月