はじめに
エンジニアの方のGitHubプロフィールを見ると、自分の初期設定のプロフィールとは全然違って、動きのあるカッコいいデザインになっていることがありませんか？
「これカッコいいなぁ、自分もこうしたい！」
そう思って調べた結果、実はすごく簡単にカスタマイズできることが分かりました。
今回は「ちょっとカッコよく」「動きのある自己紹介」を作りたい方向けに、GitHubプロフィールをカスタマイズできる便利サービス7選を詳しくご紹介します。
GitHubプロフィールのカスタマイズ基礎
GitHubプロフィールをカスタマイズする方法はとてもシンプルです。
まず、GitHubの自分のアカウント名と同じ名前のリポジトリを作成します。
例えば、アカウント名が「ryoma-abe」なら、「ryoma-abe」というリポジトリを作成になります。
次に、そのリポジトリにREADME.mdファイルを作成します。
このREADMEファイルに書いた内容が、そのままプロフィールページに表示されます。
詳しくは公式ページをご確認ください。
例えば、TypeScriptのコード風に自己紹介を書くと、こんな感じになります：
const ryo = {
location: "北海道在住",
background: "陸上自衛隊(11年)",
currentRole: "フリーランスエンジニア",
expertise: ["Shopify開発", "EC構築", "Web制作"],
passions: ["映画鑑賞(年100本)", "読書(年100冊)", "筋トレ", "カメラ"],
availableHours: "7:00-21:00 (土日対応可)",
responseTime: "1時間以内",
};これは普通のMarkdown記法で書いただけですが、プロフィールが少しエンジニアっぽくなります。
Markdown記法については下記を参考にしてみてください。
1. readme-typing-svg
まず紹介するのは、タイピング風のアニメーションテキストを表示できる「readme-typing-svg」です。
このサービスを使うと、まるでリアルタイムでタイピングしているかのような動きのあるテキストを表示できます。プロフィールページを開いた瞬間から、訪問者の目を引くことができます。
使い方は簡単で、URLのパラメータで文字・色・速度・フォントなどを指定するだけです。日本語も対応していますが、日本語を使う場合はencodeURIComponentでエンコードすると安定して表示されます。
実装例：
<img src="https://readme-typing-svg.herokuapp.com?font=Fira+Code&pause=1000&color=6AAB73&width=500&lines=Shopify+Expert;Web+Developer;From+JSDF+to+Engineer" />👉 上記の例では「Shopify Expert」「Web Developer」「From JSDF to Engineer」が順にタイピング表示されます。lines= の部分を自分の好きな文章に変更してください。; 区切りで複数行を設定できます。
このコードを埋め込むと、「Shopify Expert」「Web Developer」「From JSDF to Engineer」という3つのテキストが順番にタイピングアニメーションで表示されます。プロフィールの最初に配置すると、インパクト大です！
URL: https://readme-typing-svg.herokuapp.com/
2. Shields.io
Shields.ioは、GitHubで最もよく使われているバッジ生成サービスです。
このサービスの素晴らしい点は、単にきれいなバッジを作るだけでなく、動的な情報も表示できることです。
例えば、npmパッケージのダウンロード数、GitHubのスター数、ビルドステータスなど、リアルタイムの情報をバッジとして表示できます。
使い方も非常に簡単で、URLのパラメータを調整することで、色、スタイル、ロゴ、ラベルなどを自由にカスタマイズできます。1000以上のブランドロゴに対応しているので、使っている技術スタックを視覚的に分かりやすく表示できます。
実装例：
<p align="left">
<img src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white" />
<img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" />
<img src="https://img.shields.io/badge/Shopify-7AB55C?style=for-the-badge&logo=shopify&logoColor=white" />
</p>👉 上記の例では Next.js、TypeScript、Shopify のバッジを表示しています。
表示したい技術に応じて Next.js や TypeScript の部分を自分の使っている技術に置き換えてください。
カスタマイズ項目としては背景色（#000000など）、スタイル（for-the-badgeなど）、ロゴ（logo=shopifyなど）、ロゴカラー（logoColor=whiteなど）を変更できます。
これらのバッジを並べることで、スキルセットを一目で伝えることができます。
URL: https://shields.io/
3. GitHub Readme Stats
GitHub Readme Statsは、GitHub活動を美しいカード形式で表示してくれるサービスです。
このサービスの魅力は、コミット数、PR数、イシュー数、貢献したリポジトリ数などの統計情報を、見やすくデザインされたカードで自動的に表示してくれることです。
さらに、最も使用している言語の割合も円グラフやバーグラフで表示できます。
テーマも豊富で、tokyonight、dracula、radical、gruvboxなど20以上のデザインテーマから選択可能です。ダークモード対応のテーマも多く、訪問者の環境に合わせて見やすく表示されます。
実装例：
<img src="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=tokyonight&count_private=true" />
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact&theme=tokyonight" />👉 上記の username=anuraghazra を自分のGitHubユーザー名に書き換えてください。
例：username=ryoma-abe
統計カードと言語使用率カードを組み合わせることで、開発活動を定量的にアピールできます。
特に、継続的にコミットしている人には強力なアピールツールになります。
URL: https://github.com/anuraghazra/github-readme-stats
4. GitHub Streak Stats
GitHub Streak Statsは、あなたの連続コミット日数を炎のようなビジュアルで表示する、モチベーション向上に最適なサービスです。
このツールの特徴は、現在の連続コミット日数、最長記録、総コントリビューション数を、燃え上がる炎のグラフィックと共に表示することです。
カスタマイズ性も高く、背景色、炎の色、テキストの色、枠線など、細かい部分まで調整可能です。GitHubの標準的なコントリビューショングラフよりも、インパクトがあり目を引くデザインになっています。
実装例：
<img src="https://streak-stats.demolab.com?user=anuraghazra&theme=tokyonight&hide_border=false&date_format=%5BY%20%5DM%20j" />👉 上記の user=anuraghazraを 自分ののGitHubユーザー名に書き換えてください。
例：user=ryoma-abe
特に、オープンソース活動をアピールしたい方や、継続力を示したい方には必須のツールです。
URL: https://github.com/DenverCoder1/github-readme-streak-stats
5. GitHub Profile Trophy
⚠️ 現在、一部環境で `github-profile-trophy` が表示されない不具合が発生しています（Vercel側のデプロイ停止による影響）。
復旧まで待つか、自分でVercelや他の環境にデプロイして利用する方法を検討してください。GitHub Profile Trophyは、GitHubでの活動実績をゲームのトロフィーのように表示する、遊び心満載のサービスです。
このサービスは、スター数、コミット数、フォロワー数、リポジトリ数など、様々な実績に応じて自動的にトロフィーを付与します。ブロンズ、シルバー、ゴールドのランクがあり、実績を積むごとにトロフィーがアップグレードされていきます。
トロフィーの種類も豊富で、「Super Star（1000スター獲得）」「Commit Machine（1000コミット達成）」「Pull Shark（100PR作成）」など、様々な称号があります。これらのトロフィーは、GitHub活動の多様性と深さを視覚的に表現してくれます。
実装例：
<img src="https://github-profile-trophy.vercel.app/?username=ryo-ma&theme=dracula&column=7&margin-w=15&margin-h=15" />👉 上記の例では ryo-ma アカウントのトロフィーを、ドラキュラテーマ、横7列、余白調整ありで表示しています。
表示するユーザー名は `username=ryo-ma` を自分のGitHubユーザー名に書き換えてください。URL: https://github.com/ryo-ma/github-profile-trophy
6. GitHub Snake Game
GitHub Snake Gameは、あなたのコントリビューショングラフ（草）を、ヘビが食べていくアニメーションとして表示する、サービスです。
このサービスの面白さは、単純な統計表示ではなく、動きのあるアニメーションでコントリビューションを表現することです。緑の草（コミット）をヘビが食べながら成長していく様子は、見ていて楽しく、プロフィール訪問者の印象に残ること間違いなしです。
実装にはGitHub Actionsを使用します。
1. Workflowファイルを作成する
GitHub Actions用のファイルを追加します。
リポジトリで「Add file → Create new file」を選び、以下のファイルを作成します。
.github/workflows/snake.yml
内容:
name: Generate Snake
on:
schedule:
- cron: "0 0 * * *" # 毎日UTC0時に実行
workflow_dispatch: # 手動実行
push: # push時も実行（任意）
branches: [ main ]
permissions:
contents: write # outputブランチへの書き込み権限
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: Platane/snk/svg-only@v3
with:
github_user_name: ${{ github.repository_owner }}
outputs: |
dist/github-snake.svg
dist/github-snake-dark.svg?palette=github-dark
- name: Push to output branch
uses: crazy-max/ghaction-github-pages@v3.1.0
with:
target_branch: output
build_dir: dist
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}2. 権限を有効にする
リポジトリの Settings → Actions → General → Workflow permissions で
「Read and write permissions」を選択してください。
これを設定しないと output ブランチにファイルを書き込めません。
3. READMEに埋め込む
最後に README.md に以下を追記します。
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ユーザー名/ユーザー名/output/github-snake-dark.svg" />
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ユーザー名/ユーザー名/output/github-snake.svg" />
<img alt="github-snake" src="https://raw.githubusercontent.com/ユーザー名/ユーザー名/output/github-snake.svg" />
</picture>👉 ユーザー名 の部分は自分のGitHubアカウント名に置き換えてください。
これで、GitHubプロフィールに毎日自動更新されるスネークアニメーションが表示されます。
プロフィールに遊び心を加えたい方、他の人とは違う個性的なプロフィールを作りたい方に特におすすめです。
URL: https://github.com/marketplace/actions/generate-snake-game-from-github-contribution-grid
7. GitHub Profilinator
GitHub Profilinatorは、GUIベースでプロフィール用のMarkdownを自動生成できるサービスです。
簡易的に設定したい方はこちらがおすすめです！
自己紹介、スキルセット、ソーシャルリンク、GitHubステータス、ブログ記事、Spotifyトラックなどを直感的に組み合わせ、クリック操作だけでREADMEに埋め込めるコードを作成できます。
実装例:
- Profilinator公式サイト にアクセス
- 表示したい要素を選択・調整
- 生成されたMarkdownをコピーし、README.mdに貼り付け
👉 デザインや要素のカスタマイズが豊富なので、初心者でも短時間で完成度の高いプロフィールを作成できます。
まとめ
これらのサービスはすべて無料で利用でき、設定も10分程度で完了します。
まずは気になったサービスから1つずつ試してみてください。
プロフィールをカスタマイズすることで、技術力や個性を効果的にアピールでき、仕事の依頼や転職活動にも良い影響を与えるはずです。
