GitHub のプロフィールは、ユーザーが自分自身を紹介するためのページです。
自分のアカウントと同じ名前のリポジトリを作成することで、そのリポジトリの README.md が https://github.com/{ユーザー名} で表示されるようになります。

この記事では、GitHub プロフィールを色々と調べて作ってみた結果、より良いものを作りたい・ならではの悩み事があると考える人向けです。前提の詳細についての記事は以下があるので、そちらをまずは参考にしてください。

https://qiita.com/soranjiro/items/f34a81919b3cd2b5668e

前置き

はじめに断っておきますが、GitHub プロフィールは必須ではありませんし、むしろ何も作らず pin されているすごいリポジトリを置いておくほうが潔くて良いのかもしれません。
様々な要素を貼り付けて書くよりは、経歴や資格のみを簡潔に書いた方が良いでしょう。
しかし、それでは面白くありません。
どうせなら、自分のプロフィールを見た人が少しでも興味を持ってくれる、どのような角度であれ面白みを感じてくれるような内容にしたいと思いました。

プロフィールを作る上での悩みごと

まず、プロフィールを作っている上で思った課題が以下の通りです。

1. 他のユーザが作ったものをコピペすると似たようなものになる。

GitHub プロフィールは全世界のユーザが使用していることから、リンクを貼れば自分の情報を元にした画像を挿入するサービスなどが存在します。
もちろん、コードを輸入してきて、自分専用のものに変更もできますが、結局は似たようなものになってしまいます。

2. 自分の private リポジトリや、所属している organization での貢献・活動が反映されない。

特に、公開されているサービスはセキュリティ的な観点から、ユーザの private リポジトリや、所属している organization での活動を反映させることができません。private リポジトリは設定次第で反映できる場合もありますが、組織レベルでの活動まで反映できるものはあまり見たことがありません。
特に、公開しているものよりも、他の場所での活動の方が PR 数などは溜まるため、せっかくならそれも反映させたいと思いました。

3. せっかく毎日自動更新ができるなら、もっと動的なものにしたい。

毎日 svg 画像を自動作成して更新するという手がありますが、この更新は毎日ちょっとずつ変わるだけなのでもっと活用できるのではないかと思いました。

方針

上記の悩みごとから、色々試した結果、以下の方針で進めることにしました。

1. オリジナルの svg 画像を作成し参照する

既存のものをヒントに良いところを組み合わせつつ、全く新しい要素も取り入れて作ることにしました。

2. GitHub API を使用して、自分の情報を全て取得する

自分のアカウントで認証したghコマンドを使用して、ユーザの情報を private リポジトリも所属している organization での活動も全て取得することにしました。

3. AIを使用して、動的なプロフィールを作成する

最近は AI も発展してきているので、AI を使用した毎日更新されるものを作成することにしました。
デザインから全て毎回 AI に任せて、定期的に自動で変わるものも面白いと思いましたが、最終的にできたデザインが結構気に入ったのでデザインは今回は固定しています。
毎回 AI がデザインまで生成するのは非常に面白いとは思うので、今後のアップデートでやってみたいと思います。

結果

できたものが以下の通りです。

gif 画像は、2026年3月13日時点のものです。
また、gif 画像にした影響により、少し画質と見た目は変更されています。

ちょっとした解説

構成としては、以下の要素から成り立っています。

プロフィール訪問者数

プロフィール訪問者数は、なんとなく知りたかったのでデータベースをわざわざ用意しなくて良い以下のサービスを使って集計しました。

自己紹介文

自己紹介文は、取得したデータや日々の活動を元に、AI に毎回生成してもらうようにしました。
これには、copilot-sdk を使用して、2026年3月13日時点では pro plan で無料で使用できるgpt-4o-miniモデルを使っています。
文章を AI に生成して、それを元に svg 画像を生成するようにしています。

データの取得と svg 化

データの取得は、ghコマンドを使用して、ユーザの情報を private リポジトリも所属している organization での活動も全て取得するようにしました。
取得したデータを元に svg 画像を javascript で生成するようにしました。
そのため、プロフィールを手動で更新せずとも、自動で今のスキルセットなどの情報が反映されるようになっています。
デザインや、生成のコードは AI coding しているので、ここでは詳細については触れません。

ただ、リポジトリをフォークして、GitHub Actions の secret に GitHub Token を設定するだけで動かせるようになっています。

このプロフィールをそのまま使うために必要な手順はここから確認できます。

https://github.com/soranjiro/soranjiro?tab=contributing-ov-file

ついでに star もしてもらえると嬉しいですね。

ダークモードとライトモード

ブラウザの表示モードに合わせて、ダークモードとライトモードを切り替えるようにしました。
そのため、svg 画像もダークモード用とライトモード用の2種類を生成し、背景は透過しています。
svg 画像の切り替えは、以下のように行なっています。

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./assets/svg/profile-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="./assets/svg/profile-light.svg">
  <img src="./assets/svg/profile-dark.svg" alt="Profile" width="480" />
</picture>

セキュリティ

データを取得する上で、privateやorganizationの情報も取得するため、それらの情報が外部に漏れないようにする必要があります。
そのため、今回は直接的な対応するスキルセットやリポジトリ情報を入れていません。
また、取得したデータも全て in-memory で完結させ、外部のデータベースなどには保存しないようにしています。

ダッシュボードページも作成

プロフィールには載せきれなかったものや、表現しきれなかったものを供養するために、ダッシュボードページも作成しました。
これは単純な GitHub Pages で、プロフィールと同様に毎日更新されるようにしています。
ついでに、プロフィールにもダッシュボードへのリンクも貼るようにしました。

最後に

GitHub プロフィールを作っている時の悩みを解決するために、オリジナルのプロフィールを作成してみました。
同じような悩みを持っている人の参考になれば幸いです。

それでは、Happy Coding! 💻