結論：PNG は固定共有向きで、ライブ更新向きではありません
GitHub contribution PNG は貢献活動を固定した画像です。公開後に変わらないポートフォリオ、記事、スライド、SNS プレビューに向いています。
PNG を真実の元データとして扱わないでください。元データは GitHub contribution graph と GitHub のルールです。公式グラフで欠けている活動は、PNG にしても欠けたままです。
プロフィール README では、動的 SVG カードや github-profile-3d-contrib の方が向く場合があります。3D 表現なら GitHub City を使います。
PNG・SVG・3D 貢献ビジュアルの使い分け
形式は表示場所で決めます。PNG は扱いやすい一方、自動更新されません。SVG は README で鮮明に表示でき、3D は探索やポートフォリオ表現に向いています。
固定公開なら PNG、更新性なら SVG、操作して見せるなら GitHub City を選びます。
元データを選ぶ
GitHub公式グラフまたは信頼できるジェネレーターから始めます。ユーザー名、期間、非公開コントリビューションの表示設定を確認してください。
固定公開には PNG を使う
スライド、ポートフォリオ、記事画像、SNSプレビューなど、固定画像が必要な場所で PNG を使います。
更新される README には SVG を使う
README に表示し、常に最新状態を保ちたい場合は SVG カードまたは workflow で生成するアセットを使います。
探索には GitHub City を使う
訪問者が表示を操作したり活動密度を比べたり、開発の流れを見せたりするなら GitHub City へ案内します。
GitHub Contribution PNG の実践ワークフロー
適切な手順は書き出しボタンより重要です。まず公式グラフが正しい活動を示しているか確認し、最終表示サイズで読みやすい画像を書き出して、周囲に説明を添えます。
README では静的 PNG をアップロードしたまま放置しないでください。最新性が必要なら SVG または自動化した workflow を選びます。
| 形式 | 向いている用途 | 更新方法 |
|---|---|---|
| コントリビューション PNG | ポートフォリオ、記事、発表、SNSプレビュー | 静的スナップショット。手動更新 |
| README SVG カード | README のセクションや軽いバッジ | サービスまたは workflow で更新可能 |
| 3D コントリビューション画像 | プロフィール用ビジュアルや年間の振り返り | workflow で生成することが多い。出力を確認 |
| GitHub City 3D ビュー | インタラクティブな探索とストーリー表示 | 公開データに基づくブラウザ体験 |
GitHub Contribution PNG が向いている用途
最新性より安定性が重要なときは静的画像を使います。表示を更新したり操作したりする必要があるなら別の形式を選びます。
ポートフォリオの実績
特定の年、プロジェクト期間、スプリントを説明するには PNG が適しています。
発表スライド
スライドには、外部サービスに依存しない安定したビジュアルが必要です。
記事の図解
PNG は説明を補助しますが、結論はインデックス可能な HTML テキストに残します。
README では注意
静的 PNG は古くなります。動的カードまたは README テンプレートのセクションを選びます。
トラブルシューティング：PNG が正しく見えない理由
画像が空または不完全に見える場合は、書き出し設定より先にデータを調べます。コミットメール、ブランチ、fork、非公開設定、更新遅延を確認してください。
画像がぼやける場合は大きめに書き出してから一度だけ圧縮します。画像に長い文章を入れず、説明はインデックス可能なテキストに残してください。
選択のルール
固定公開には PNG、更新される README には SVG または生成カード、インタラクティブな探索には GitHub City を使います。
FAQ
GitHub contribution PNG はどう作りますか？
まず公式グラフまたは信頼できるジェネレーターを確認し、固定表示が必要なときに高解像度画像を書き出します。
GitHub README では PNG が SVG より優れていますか？
通常はそうではありません。SVG や生成カードの方が鮮明で更新しやすい傾向があります。
PNG に非公開コントリビューションを表示できますか？
元のグラフが公開または匿名化して示す活動だけです。非公開リポジトリの詳細を明らかにしてはいけません。
PNG に一部のコミットが表示されないのはなぜですか？
PNG は元のグラフを反映することが多いためです。メール、ブランチ、fork、非公開設定、更新時間を確認してください。
PNG より GitHub City を使うべきですか？
インタラクティブな 3D 都市には GitHub City、固定アセットには PNG を使います。