🎨 STEP 45: 可視化ポートフォリオの作成

あなたのスキルを世界に発信しよう!

📋 このステップで学ぶこと

ポートフォリオとは何か、なぜ重要なのか
GitHubでプロジェクトを公開する方法
効果的なREADME.mdの書き方
GitHub Pagesで個人サイトを作成する方法
プロジェクトの効果的な見せ方（スクリーンショット、説明文）
SNSやコミュニティでのプロモーション方法

🎯 1. ポートフォリオの重要性

ポートフォリオとは

ポートフォリオとは、あなたが作成した作品や成果物をまとめた「作品集」です。データ可視化の分野では、自分が作成したグラフ、ダッシュボード、分析レポートなどを公開して、スキルを証明します。

就職・転職活動では、「Pythonでデータ可視化ができます」と言葉で伝えるよりも、実際に作った作品を見せる方がはるかに説得力があります。

💡 ポートフォリオを身近な例で考えると

料理人が就職するとき、「料理ができます」と言うだけでは信用されません。実際に作った料理の写真やレシピを見せることで、スキルを証明します。

データ可視化のポートフォリオも同じです。「このグラフを作りました」「このダッシュボードを設計しました」と実物を見せることで、あなたの実力が伝わります。

    📊 ポートフォリオの5つのメリット
    
                メリット
                説明
                具体例
            
                スキルの証明
                「できます」より「作りました」が強い
                実際のグラフやコードを見せられる
            
                就職・転職に有利
                採用担当が実力を確認できる
                面接前にポートフォリオを見てもらえる
            
                自己ブランディング
                専門性をアピールできる
                「時系列分析に強い」など得意分野を示せる
            
                学習の記録
                成長の軌跡を振り返れる
                1年前と今の作品を比較できる
            
                フィードバック獲得
                他者からの意見をもらえる
                GitHubでスターやコメントがもらえる

メリット	説明	具体例
スキルの証明	「できます」より「作りました」が強い	実際のグラフやコードを見せられる
就職・転職に有利	採用担当が実力を確認できる	面接前にポートフォリオを見てもらえる
自己ブランディング	専門性をアピールできる	「時系列分析に強い」など得意分野を示せる
学習の記録	成長の軌跡を振り返れる	1年前と今の作品を比較できる
フィードバック獲得	他者からの意見をもらえる	GitHubでスターやコメントがもらえる

✨ 良いポートフォリオの4つの特徴

特徴	悪い例	良い例
実用的	練習用のダミーデータのみ	Kaggleや公開データセットを使用
多様性	折れ線グラフばかり	様々な手法・ライブラリを展示
説明充実	コードだけで説明なし	何を、なぜ、どう作ったか記載
見やすい	ファイルが散らかっている	きれいに整理されたレイアウト

📁 2. GitHubでの公開

GitHubとは

GitHubは、プログラムのソースコードを管理・公開するためのサービスです。世界中のエンジニアが使っており、ポートフォリオを公開する場所として最も一般的です。

GitHubにコードを公開すると、誰でもあなたの作品を見ることができます。採用担当者もGitHubをチェックすることが多いので、きれいに整理しておくことが重要です。

【GitHubアカウントの作成手順】 1. https://github.com にアクセス 2. 「Sign up」をクリック 3. メールアドレス、パスワード、ユーザー名を入力 4. メール認証を完了 ※ ユーザー名は公開されるので、本名やニックネームなど覚えやすいものを選びましょう

リポジトリ（プロジェクト）の作成

GitHubでは、プロジェクトを「リポジトリ（Repository）」という単位で管理します。ポートフォリオ用に1つのリポジトリを作成し、その中に複数のプロジェクトを入れるのがおすすめです。

【リポジトリ作成手順】 1. GitHubにログイン 2. 右上の「+」ボタン → 「New repository」をクリック 3. Repository name に「data-visualization-portfolio」と入力 4. 「Public」を選択（公開設定） 5. 「Add a README file」にチェック 6. 「Create repository」をクリック → これでポートフォリオ用のリポジトリが作成されます！

推奨するフォルダ構成

ポートフォリオのリポジトリは、以下のような構成にすると見やすくなります。各プロジェクトを別々のフォルダに分けることで、訪問者が目的の作品を見つけやすくなります。

【推奨フォルダ構成】 data-visualization-portfolio/ │ ├── README.md # ポートフォリオ全体の説明 ├── requirements.txt # 必要なライブラリ一覧 │ ├── project1-sales-dashboard/ │ ├── README.md # プロジェクト1の説明 │ ├── dashboard.py # メインのコード │ ├── data/ # データファイル │ └── images/ # スクリーンショット │ └── dashboard.png │ ├── project2-covid-analysis/ │ ├── README.md # プロジェクト2の説明 │ ├── analysis.ipynb # Jupyter Notebook │ └── images/ │ └── trends.png │ └── project3-stock-prediction/ ├── README.md # プロジェクト3の説明 ├── prediction.py # メインのコード └── images/ └── forecast.png

📝 フォルダ構成のポイント

ファイル/フォルダ	役割	ポイント
README.md	説明文書	ルートと各プロジェクトに配置
requirements.txt	必要ライブラリ一覧	pip install -r で一括インストール可能に
images/	スクリーンショット格納	README.mdから参照して表示
data/	データファイル格納	大きいファイルはGit LFSを使用

📝 3. README.mdの書き方

README.mdとは

README.mdは、リポジトリを開いたときに最初に表示される説明文書です。Markdown形式で書かれており、GitHubが自動的に見やすく表示してくれます。

README.mdはポートフォリオの「顔」です。訪問者はまずREADME.mdを読むので、ここで魅力を伝えることが重要です。

ポートフォリオ全体のREADME.md

リポジトリのルートに置くREADME.mdには、自己紹介とプロジェクト一覧を書きます。

コードが長いので、スマートフォンでは横スクロールして確認してください。

# 📊 データ可視化ポートフォリオ

## 👋 自己紹介
データ分析とデータ可視化を学んでいる○○です。
Pythonを使って、データから価値ある洞察を引き出すことに情熱を持っています。

## 🛠️ 使用技術
– **言語:** Python 3.9
– **可視化:** Matplotlib, Seaborn, Plotly
– **データ処理:** Pandas, NumPy
– **その他:** Jupyter Notebook, Streamlit

## 📂 プロジェクト一覧

### 1. 📈 売上ダッシュボード
**概要:** 小売企業の売上データをインタラクティブに可視化  
**技術:** Plotly Dash, Pandas  
**データ:** Kaggle Retail Dataset  
[詳細を見る](./project1-sales-dashboard/)

![売上ダッシュボード](./project1-sales-dashboard/images/dashboard.png)

—

### 2. 🦠 COVID-19データ分析
**概要:** 世界のCOVID-19感染者数の時系列分析  
**技術:** Seaborn, Matplotlib  
**データ:** Johns Hopkins University CSSE  
[詳細を見る](./project2-covid-analysis/)

![COVID-19分析](./project2-covid-analysis/images/trends.png)

—

### 3. 📉 株価予測と可視化
**概要:** 過去の株価データから将来を予測  
**技術:** Plotly, scikit-learn  
**データ:** Yahoo Finance API  
[詳細を見る](./project3-stock-prediction/)

![株価予測](./project3-stock-prediction/images/forecast.png)

## 📧 連絡先
– **Email:** your.email@example.com
– **LinkedIn:** [プロフィール](https://linkedin.com/in/yourname)
– **Twitter:** [@yourhandle](https://twitter.com/yourhandle)

## 📜 ライセンス
MIT License

    📝 README.mdに含めるべき要素
    
                要素
                書く内容
                なぜ重要か
            
                タイトル
                ポートフォリオの名前
                第一印象を決める
            
                自己紹介
                簡単な自己紹介
                人柄が伝わる
            
                使用技術
                使用言語・ライブラリ
                スキルセットが分かる
            
                プロジェクト一覧
                各プロジェクトの概要
                作品を一覧できる
            
                スクリーンショット
                グラフの画像
                視覚的に魅力を伝える
            
                連絡先
                メール、SNSリンク
                連絡を取りやすくする

要素	書く内容	なぜ重要か
タイトル	ポートフォリオの名前	第一印象を決める
自己紹介	簡単な自己紹介	人柄が伝わる
使用技術	使用言語・ライブラリ	スキルセットが分かる
プロジェクト一覧	各プロジェクトの概要	作品を一覧できる
スクリーンショット	グラフの画像	視覚的に魅力を伝える
連絡先	メール、SNSリンク	連絡を取りやすくする

各プロジェクトのREADME.md

各プロジェクトフォルダにもREADME.mdを置き、詳細な説明を書きます。

コードが長いので、スマートフォンでは横スクロールして確認してください。

# 📈 売上ダッシュボード

## 📋 プロジェクト概要
小売企業の売上データをインタラクティブなダッシュボードで可視化しました。
地域別、商品カテゴリ別、時系列での売上傾向を分析できます。

## 🎯 目的・背景
– 経営陣が売上状況を一目で把握できるようにする
– 地域ごとの売上パフォーマンスを比較する
– 季節性やトレンドを発見する

## 🛠️ 使用技術
| 技術 | 用途 |
|——|——|
| Python 3.9 | プログラミング言語 |
| Plotly Dash | ダッシュボードフレームワーク |
| Pandas | データ処理 |
| Plotly Express | グラフ作成 |

## 📊 分析結果
1. **北部地域が最も売上が高い**（全体の35%）
2. **12月に売上がピーク**（前月比+40%）
3. **電化製品カテゴリが成長中**（前年比+25%）

## 🖼️ スクリーンショット
![ダッシュボード全体](./images/dashboard.png)
![地域別売上](./images/regional_sales.png)

## 🚀 実行方法
“`bash
# 必要なライブラリをインストール
pip install -r requirements.txt

# ダッシュボードを起動
python dashboard.py

# ブラウザで http://localhost:8050 を開く
“`

## 📁 ファイル構成
“`
project1-sales-dashboard/
├── README.md
├── dashboard.py      # メインスクリプト
├── data/
│   └── sales.csv     # 売上データ
└── images/
    ├── dashboard.png
    └── regional_sales.png
“`

## 📚 学んだこと
– Plotly Dashでコールバック関数を使ったインタラクティブUI
– データの前処理とグルーピング
– ユーザーフレンドリーなUI設計

## 🔗 データソース
[Kaggle – Superstore Sales Dataset](https://www.kaggle.com/datasets/)

💡 プロジェクトREADMEのコツ

「何を」「なぜ」「どう」作ったかを明確に書きましょう。

単に「グラフを作りました」ではなく、「Kaggleの売上データで地域別傾向をSeabornで可視化し、北部が好調であることを発見しました」のように、背景・手法・結果をセットで書くと説得力が増します。

🌐 4. GitHub Pagesで個人サイトを作成

GitHub Pagesとは

GitHub Pagesは、GitHubが提供する無料のWebホスティングサービスです。HTMLファイルをGitHubにアップロードするだけで、個人サイトを公開できます。

GitHub Pagesを使えば、https://username.github.io/というURLで、あなたのポートフォリオサイトを世界中に公開できます。

【GitHub Pages設定手順】 1. リポジトリ名を「username.github.io」に設定（usernameはあなたのGitHubユーザー名） 2. index.html ファイルを作成 3. GitHubでリポジトリの Settings → Pages を開く 4. Source で「main」ブランチを選択 5. Save をクリック 6. 数分後、https://username.github.io/ でサイトが公開される！

ポートフォリオサイトのHTMLテンプレート

以下は、シンプルなポートフォリオサイトのHTMLテンプレートです。自分の情報に書き換えて使ってください。

コードが長いので、スマートフォンでは横スクロールして確認してください。

<!DOCTYPE html>
<html lang=”ja”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>データ可視化ポートフォリオ | あなたの名前</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: ‘Helvetica Neue’, Arial, sans-serif; line-height: 1.6; color: #333; }
        
        /* ヘッダー */
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white; padding: 60px 20px; text-align: center;
        }
        .header h1 { font-size: 2.5rem; margin-bottom: 10px; }
        .header p { font-size: 1.2rem; opacity: 0.9; }
        
        /* メインコンテンツ */
        .container { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }
        
        /* プロジェクトカード */
        .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
        .project-card {
            background: white; border-radius: 10px; overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s;
        }
        .project-card:hover { transform: translateY(-5px); }
        .project-card img { width: 100%; height: 200px; object-fit: cover; }
        .project-card .content { padding: 20px; }
        .project-card h3 { margin-bottom: 10px; color: #667eea; }
        .project-card p { color: #666; margin-bottom: 15px; }
        .project-card a {
            display: inline-block; padding: 8px 16px; background: #667eea;
            color: white; text-decoration: none; border-radius: 5px;
        }
        
        /* フッター */
        .footer { background: #333; color: white; text-align: center; padding: 30px; margin-top: 40px; }
    </style>
</head>
<body>
    <header class=”header”>
        <h1>📊 データ可視化ポートフォリオ</h1>
        <p>Pythonでデータを美しく可視化します</p>
    </header>

    <div class=”container”>
        <h2 style=”margin-bottom: 30px;”>🎨 プロジェクト</h2>
        
        <div class=”projects”>
            <div class=”project-card”>
                <img src=”images/project1.png” alt=”売上ダッシュボード”>
                <div class=”content”>
                    <h3>売上ダッシュボード</h3>
                    <p>Plotly Dashで作成したインタラクティブなダッシュボード</p>
                    <a href=”https://github.com/username/project1″>GitHub で見る</a>
                </div>
            </div>
            
            <div class=”project-card”>
                <img src=”images/project2.png” alt=”COVID-19分析”>
                <div class=”content”>
                    <h3>COVID-19データ分析</h3>
                    <p>Seabornで世界の感染者数を時系列分析</p>
                    <a href=”https://github.com/username/project2″>GitHub で見る</a>
                </div>
            </div>
            
            <div class=”project-card”>
                <img src=”images/project3.png” alt=”株価予測”>
                <div class=”content”>
                    <h3>株価予測と可視化</h3>
                    <p>機械学習で株価を予測し、Plotlyで可視化</p>
                    <a href=”https://github.com/username/project3″>GitHub で見る</a>
                </div>
            </div>
        </div>
    </div>

    <footer class=”footer”>
        <p>© 2024 あなたの名前 | <a href=”mailto:your@email.com” style=”color: #4DB8E8;”>your@email.com</a></p>
    </footer>
</body>
</html>

📸 5. 効果的な見せ方

スクリーンショット撮影のコツ

ポートフォリオでは、スクリーンショットが第一印象を決めます。コードだけでは伝わらない「見た目の美しさ」を、画像で伝えましょう。

    📷 スクリーンショット撮影のポイント
    
                ポイント
                悪い例
                良い例
            
                解像度
                小さくてぼやけている
                全体が見える高解像度
            
                フォーカス
                関係ない部分が写っている
                重要な部分を強調
            
                比較
                結果のみ
                Before/After比較を用意
            
                バリエーション
                1枚だけ
                複数のビューを用意

ポイント	悪い例	良い例
解像度	小さくてぼやけている	全体が見える高解像度
フォーカス	関係ない部分が写っている	重要な部分を強調
比較	結果のみ	Before/After比較を用意
バリエーション	1枚だけ	複数のビューを用意

説明文のポイント

スクリーンショットと一緒に、何を達成したかを説明する文章が重要です。「グラフを作りました」だけでは伝わりません。

【悪い説明文の例】 ❌ 「グラフを作りました」 ❌ 「Pythonで可視化しました」 ❌ 「売上データを分析しました」 → 具体性がなく、何がすごいのか分からない【良い説明文の例】 ✓ 「Kaggleの売上データ（10万件）を地域別に分析し、北部地域が全体の35%を占めることを発見しました」 ✓ 「COVID-19の感染者数データを時系列分析し、第2波のピークが第1波の3倍であることを可視化しました」 ✓ 「5年分の株価データをLSTMで予測し、 30日後の価格を±5%の精度で予測できるモデルを構築しました」 → 具体的な数字、発見、成果が含まれている

📝 説明文の構成テンプレート

要素	書く内容	例
1. 背景・課題	なぜこの分析をしたか	「経営陣が売上状況を把握できていなかった」
2. アプローチ	どんな手法を使ったか	「Plotly Dashでインタラクティブに可視化」
3. 結果	何が分かったか	「北部地域が売上の35%を占めることを発見」
4. 技術詳細	使用技術・データ	「Python, Plotly Dash, Kaggleデータ」

📣 6. プロモーション方法

SNSでの発信

ポートフォリオを作っても、誰にも見てもらえなければ意味がありません。SNSで積極的に発信して、多くの人に見てもらいましょう。

    🐦 SNS別の発信方法
    
                プラットフォーム
                特徴
                発信のコツ
            
                Twitter/X
                拡散力が高い
                画像 + 短い説明 + ハッシュタグ（#DataViz #Python）
            
                LinkedIn
                ビジネス向け
                詳細な技術説明 + 成果を強調
            
                Qiita/Zenn
                技術者向け
                技術記事として詳細に解説
            
                note
                幅広い読者
                ストーリー形式で読みやすく

プラットフォーム	特徴	発信のコツ
Twitter/X	拡散力が高い	画像 + 短い説明 + ハッシュタグ（#DataViz #Python）
LinkedIn	ビジネス向け	詳細な技術説明 + 成果を強調
Qiita/Zenn	技術者向け	技術記事として詳細に解説
note	幅広い読者	ストーリー形式で読みやすく

コミュニティ参加

SNSだけでなく、データ可視化コミュニティに参加することで、フィードバックをもらったり、他の人の作品から学んだりできます。

🌍 参加すべきコミュニティ

コミュニティ	内容	参加メリット
Kaggle	データサイエンスコンペ	実践的なスキルが身につく、ランキングが履歴書になる
#TidyTuesday	毎週のデータ可視化チャレンジ	定期的に作品を作る習慣がつく
GitHub	オープンソースプロジェクト	他のプロジェクトに貢献してスキルアップ
Tableau Public	データ可視化ギャラリー	他の人の優れた作品から学べる

📝 STEP 45 のまとめ

    ✅ このステップで学んだこと
    
                トピック
                重要ポイント
            
                ポートフォリオの重要性
                スキルの証明、就職・転職に有利
            
                GitHub
                プロジェクトを整理して公開
            
                README.md
                わかりやすい説明文を書く
            
                GitHub Pages
                無料で個人サイトを公開
            
                効果的な見せ方
                スクリーンショット + 具体的な説明
            
                プロモーション
                SNS発信、コミュニティ参加

トピック	重要ポイント
ポートフォリオの重要性	スキルの証明、就職・転職に有利
GitHub	プロジェクトを整理して公開
README.md	わかりやすい説明文を書く
GitHub Pages	無料で個人サイトを公開
効果的な見せ方	スクリーンショット + 具体的な説明
プロモーション	SNS発信、コミュニティ参加

💡 最後に: ポートフォリオを育てよう

ポートフォリオはあなたのスキルの名刺です。まずは3つのプロジェクトを公開し、そこから継続的に改善していきましょう。

月に1回は新しい作品を追加したり、既存の作品を改善したりすることで、ポートフォリオは成長し続けます。あなたの成長がそのまま形になります！

🏆 最終課題

最終課題総合

データ可視化ポートフォリオを作成し、GitHubで公開してください。

必須要件:

3つ以上のプロジェクト
各プロジェクトにREADME.md
実行可能なコード
スクリーンショット

推奨:

GitHub Pagesで個人サイトを公開
SNSで発信
Kaggleなどのコミュニティに参加

❓ よくある質問

Q1: プロジェクトはいくつあればいいですか?

3〜5個が目安です。少なすぎるとスキルが伝わりにくく、多すぎると管理が大変です。まずは3個の優れたプロジェクトを作り、徐々に増やしていくのがおすすめです。

Q2: どんなデータを使えばいいですか?

Kaggle、政府公開データ、APIなど公開データを使いましょう。著作権や個人情報の問題がないデータを選ぶことが重要です。Kaggleには多種多様なデータセットがあり、初心者にもおすすめです。

Q3: 英語で書くべきですか?

海外就職を目指すなら英語、国内なら日本語でOKです。両方書くのがベストですが、まずは日本語で充実させてから英語版を作成するのが効率的です。

Q4: プライベートリポジトリでもいいですか?

ポートフォリオはPublic（公開）にしましょう。採用担当者がいつでも見られるようにするためです。ただし、業務で作成したコードなど、公開できないものはプライベートのままにしてください。

Q5: どのくらいの頻度で更新すべきですか?

月に1回程度の更新がおすすめです。新しいプロジェクトの追加、既存プロジェクトの改善、最新技術の導入などを継続的に行いましょう。長期間更新がないと、「活動していない」と思われてしまいます。

🎓 コース完了おめでとうございます!

全45ステップを通じて、データ可視化のプロフェッショナルスキルを習得しました。

基礎理論から実践技術、そしてポートフォリオ作成まで、
データを「見える化」する力を身につけました。

学んだ技術を実務で活かし、データから価値ある洞察を引き出し続けてください!

🚀 Happy Data Visualization! 🚀

📝

学習メモ

データ可視化マスター - Step 45

📋 過去のメモ一覧 ▼