GitHubのプロフィールをデコろう
はじめに
まず、リポジトリの準備から始めましょう！
リポジトリの名前を自分のユーザー名にします。
そうすると、special repositoryと出ると思います。
add README.mdにチェックを入れて、リポジトリを作成しましょう！
リポジトリ作成できたら、早速README.mdをいじっていきます。
編集ボタンを押します
ここからは、デコるための素材集めができるサイト紹介です。
Icon系
Skill Icons
よくみるやつ
100以上の技術アイコンをURLパラメータで指定するだけで表示。テーマやレイアウトもカスタマイズ可能。高速で統一されたデザインが特徴。
[](https://skillicons.dev)
Devicon
150以上の技術アイコンを提供するオープンソースライブラリ。Font形式とSVG形式の両方に対応。CDN経由またはNPMでの利用が可能。
<i class="devicon-javascript-plain colored"></i>
TechStack Generator
アニメーション付きの技術スタックアイコンを生成。30以上の技術に対応し、動的なSVGアイコンを生成。GitHubのREADMEでの使用に最適化。
Animated Fluent Emoji
Microsoftの動くFluent絵文字を集めたサービス。カテゴリー別に整理され、開発プロジェクトに簡単に統合可能。
Profile Technology Icons
オンラインジェネレーターで技術アイコンを生成。アイコンサイズのカスタマイズが可能で、Markdownコードを自動生成。
Badges / Shield
Shields.io
月間16億枚以上配信される高性能バッジサービス。動的・静的両方のバッジを生成可能。数百のサービスと連携し、豊富なカスタマイズオプションを提供。
Badges4-README.md-Profile
30以上のカテゴリにわたる大量のバッジコレクション。「for-the-badge」スタイルで統一されたデザイン。コピー&ペーストで簡単に使用可能。
Markdown Badges
AI、ブロックチェーン、データベース、フレームワークなど幅広い分野をカバー。複数のスタイルオプション（flat、plastic、social）を提供。
Stats
GitHub Readme Stats
GitHub統計情報を動的に生成するサービス。統計カード、使用言語カード、リポジトリピン、WakaTime連携など豊富な機能。30以上のテーマと多言語サポート。
GitHub Profile Trophy
GitHub統計をトロフィー形式で表示。SSS〜Cまでのランキングシステム、30種類以上のテーマ、リアルタイム更新機能。
[](https://github.com/ryo-ma/github-profile-trophy)
草系・アクティビティ可視化
Generate Snake Game from GitHub Contribution Grid
コントリビューショングラフからアニメーションのスネークゲームを生成。GIF・SVG形式での出力、複数のカラーパレット、毎日自動更新機能。
- uses: Platane/snk@v3
with:
github_user_name: ${{ github.repository_owner }}
outputs: |
dist/github-snake.svg
dist/github-snake-dark.svg?palette=github-dark
typograssy
草を使って、文字を表現するやつ
GitHub Profile 3D Contrib
GitHub Actionを使用して3D立体的な貢献カレンダーを生成。毎日自動更新され、パブリック・プライベート両方のリポジトリをサポート。
GitHub Readme Activity Graph
過去31日間のGitHub活動を動的に生成するアクティビティグラフ。Vercelでセルフホスト可能、DRACULAなど様々なテーマをサポート。
[](https://github.com/yourusername)
音楽・エンターテイメント
Spotify GitHub Profile
現在再生中のSpotify楽曲をGitHubプロフィールに表示。リアルタイム更新でSpotify APIと連携。
[](https://spotify-github-profile.kittinanx.com/api/spotify)
Spotify Readme
動的でカスタマイズ可能なSpotify現在再生中ウィジェット。再生していない時は最近の楽曲を表示。
Spotify Recently Played README
最近再生したSpotifyトラックをGitHubプロフィールREADMEに表示。Last.fmとの連携も可能。
Readme Spotify Now Playing
SVG形式のSpotify現在再生中ウィジェット。READMEやWebサイトのどこでも使用可能。
総合ツール・ジェネレーター
GitHub Profile README Generator
カスタマイズされたGitHubプロフィールREADMEを生成。スキル・技術、ソーシャルリンク、訪問者カウンター、統計カードなど豊富な要素。チェックボックスベースの直感的インターフェース。
Awesome GitHub Profile README
優れたGitHubプロフィールREADMEのキュレーションリスト。リアルタイム更新される最新事例を収集。
GitHub Readme Collection
GitHub READMEウィジェットのコレクション。多様なウィジェットとツールを一箇所で管理。
アニメーション・エフェクト
Readme Typing SVG
動的に生成されるタイピングエフェクトSVG。テキストを入力・削除するアニメーションでプロフィールを魅力的に演出。
[](https://git.io/typing-svg)
日常・ライフスタイル
GitHub Readme Daily Quotes
毎日更新される名言・格言ウィジェット。light、dark、vue、algolia、nord、dracula、monokaiなど複数テーマを提供。
Weather Readme Widget
OpenWeatherMap APIを使用した天気情報ウィジェット。現在の天気とアイコンを動的に表示。
Current Book Status from GoodReads
GoodReadsと連携して現在読んでいる本の情報を表示。読書進捗を自動同期。
ソーシャルメディア・コミュニケーション
Discord Status Integration
専用のDiscord鯖に入る必要がありそう？
Lanyard APIを使用してDiscordのリアルタイムステータスを表示。現在のアクティビティや使用中のアプリケーションを表示。
[](https://discord.com/users/:id)
Discord README Badge
専用のDiscord鯖に入る必要がありそう？
IDEのRich Presenceと連携したDiscordバッジ。現在作業中のプロジェクトを表示。
GitHub Readme Medium
Medium記事を自動表示。GitHub Actionsを使用してRSSフィードから最新記事を取得。
ブログ・コンテンツ
Blog Post Workflow
dev.to、Medium、個人ブログなどからRSSフィードを取得して最新記事を表示。GitHub Actions使用。
- uses: gautamkrishnar/blog-post-workflow@master
with:
max_post_count: "4"
feed_list: "https://dev.to/feed/username"
GitHub Readme StackOverflow
StackOverflowのアクティビティと評価を表示。質問・回答履歴を可視化。
学習・スキル
LeetCode Stats
LeetCode問題解決統計を表示。解決した問題数、難易度別統計、ランキングを表示。
WakaTime Stats
WakaTimeと連携したコーディング時間統計。言語別・プロジェクト別の開発時間を表示。
エンターテイメント
README Jokes
毎日更新される開発者向けジョークを表示。プロフィールにユーモアを追加。
GitHub Profile Views Counter
プロフィール閲覧数カウンター。訪問者数を追跡・表示。
Discussion