@0ts_st Team Coffee

# GitHubプロフィールREADMEを、オリジナルカードを追加する方法

Posted at 2026-06-22

こんにちは！わかと（@0st_ts）です。

今回は、GitHubプロフィールREADMEを自分だけのポートフォリオカードとして作った話を書きます。

GitHubのプロフィールREADMEは、普通に使うと自己紹介欄になりがちです。

名前
技術スタック
GitHub Stats
よく使う言語
SNSリンク
連絡先

もちろんこれらも大事です。

ただ、自分はそれだけだと少しもったいないと感じました。

GitHubプロフィールは、リポジトリ一覧を見る前に一番最初に目に入る場所です。

つまり、エンジニアにとっての「第一印象」を作れる場所でもあります。

そこで今回は、ただ情報を並べるのではなく、

自分の作品・世界観・活動が一目で伝わるプロフィールカード

としてGitHubプロフィールREADMEを設計してみました。

この記事では、GitHubプロフィールREADMEの作り方だけでなく、Webページとして作ったオリジナルカードをREADMEに埋め込む方法もまとめます。

今回紹介する主なリポジトリはこちらです。

WAKATO | Living Planet Portfolio
https://github.com/nitr0yukkuri/wakatopo
GitHub Planet
https://github.com/nitr0yukkuri/githubplanet
GitHub Planet
https://githubplanet-git-543426763451.asia-northeast2.run.app/

完成形

今回作ったプロフィールは、以下のような構成にしています。

最初に大きなビジュアルを置き、その下に短いコピーを入れています。

さらに、自分の代表作を Masterpiece として大きく見せる構成にしました。

普通のプロフィールREADMEというより、ポートフォリオサイトの入口に近い見せ方を意識しています。

GitHubプロフィールREADMEとは

GitHubでは、自分のユーザー名と同じ名前のリポジトリを作ると、その README.md がプロフィールページに表示されます。

例えば、GitHubのユーザー名が yourname の場合は、以下のようなリポジトリを作ります。

yourname/yourname

その中に README.md を置くと、GitHubプロフィールの上部に表示されます。

yourname/
  README.md

この仕組みを使うことで、GitHubプロフィールを自由にカスタマイズできます。

なぜGitHubプロフィールを作り込むのか

GitHubプロフィールREADMEを作り込む理由は、単に見た目をかっこよくしたいからではありません。

一番の理由は、

自分が何を作る人なのかを、一瞬で伝えたいから

です。

GitHubにはリポジトリが並びます。

でも、初めて見に来た人にとっては、

どれが代表作なのか
何を見ればいいのか
どんな技術が得意なのか
どんな世界観で開発しているのか

が分かりにくいことがあります。

特に個人開発をたくさんしていると、リポジトリが増えていきます。

その結果、本当に見てほしい作品が埋もれてしまうことがあります。

そこで、プロフィールREADME自体を「案内板」のように使うことにしました。

ただの自己紹介ではなく、

この人はこういうものを作っている
この作品を見れば雰囲気が分かる
もっと見たいならここへ進めばいい

という導線を作るイメージです。

ただの自己紹介ではなく「カード」として考える

今回一番意識したのは、プロフィールREADMEを「文章」ではなく「カード」として考えることです。

普通のREADMEは、上から順番に情報を読む構成になりがちです。

しかし、GitHubプロフィールは流し見されることも多いです。

そのため、細かい説明を読まなくても、まず視覚的に印象が残るようにしたいと思いました。

カードとして考えると、大事なのは情報量ではありません。

大事なのは、

最初にどんな印象を残すか
何を代表作として見せるか
どこに興味を持ってもらうか
どういう世界観の人だと思ってもらうか
次にどこを見てもらうか

です。

つまり、GitHubプロフィールREADMEを単なる情報欄ではなく、

自分の活動への入口

として設計するイメージです。

プロフィールカードの構成

今回のプロフィールカードは、ざっくり以下の構成にしました。

Hero
  最初に印象を残す大きな画像

Concept
  自分の世界観を短いコピーで伝える

Masterpiece
  一番見てほしい代表作を大きく表示する

Original Card
  自作サービスをカードとしてREADMEに埋め込む

Tech Stack
  使っている技術を整理して見せる

Activity / Links
  活動や外部リンクへの導線を作る

特に意識したのは、最初に情報を詰め込みすぎないことです。

プロフィールREADMEでは、つい技術スタックやバッジをたくさん並べたくなります。

でも、最初から情報量が多すぎると、結局どこを見ればいいか分かりにくくなります。

そのため、最初はあえてシンプルにしました。

1. 最初にHero画像で印象を作る

まず、一番上に大きなHero画像を置きました。

<div align="center">
  <a href="https://your-portfolio.example.com">
    <img
      src="https://example.com/your-profile-preview.gif"
      alt="Portfolio Preview"
      width="800"
    />
  </a>
</div>

GitHub READMEでは、MarkdownだけでなくHTMLも一部使えます。

そのため、div align="center" を使って中央寄せにし、画像を大きく表示しています。

Hero画像の役割は、細かい情報を伝えることではありません。

最初に、

なんか雰囲気あるな
ちゃんと作り込んでるな
この人は作品を作るタイプなんだな

と思ってもらうための場所です。

つまり、プロフィール全体の第一印象を作るパーツです。

自分の場合は、ポートフォリオサイトのプレビューGIFを置いて、プロフィールREADMEを開いた瞬間に自分の世界観が伝わるようにしました。

今回Heroに使っているポートフォリオ側のリポジトリはこちらです。

このポートフォリオは、天候、時間、音、3D表現を組み合わせて、自分の作品や活動をひとつの世界として見せることを意識して作っています。

GitHubプロフィールREADMEでも、その世界観が最初に伝わるようにしました。

2. 短いコピーで世界観を伝える

画像の下には、短いコピーを置きました。

<h3 align="center">ENTER THE LIVING PLANET</h3>

<p align="center">
  Beyond projects, beyond code.<br />
  A portfolio that breathes with weather, motion, and real-time digital atmosphere.
</p>

ここで意識したのは、長く説明しすぎないことです。

GitHubプロフィールの最初は、履歴書のように全部説明する場所ではなく、興味を持ってもらう場所だと思っています。

そのため、

何を作っている人なのか
どういう雰囲気の作品なのか
どんな方向性で開発しているのか

が短く伝わるコピーにしました。

日本語でもいいですが、自分のプロフィールでは英語の短いコピーを使いました。

理由は、ビジュアルの雰囲気と合わせたかったからです。

3. 代表作を一つ大きく見せる

プロフィールREADMEでは、全部の作品を同じ大きさで並べるよりも、まず一つ代表作を大きく見せた方が伝わりやすいと感じました。

そこで、自分の場合は Masterpiece というセクションを作りました。

## Masterpiece

**GitHub Planet** turns GitHub activity into a living 3D planet.

ここで大事なのは、作品をただ並べるのではなく、

どれを一番見てほしいのか

を明確にすることです。

リポジトリが多いと、見る側は迷います。

だからこそ、プロフィール側で「まずこれを見てほしい」と案内してあげると、見てもらいやすくなります。

今回 Masterpiece として置いているのが、GitHubの活動を3D惑星のように可視化する GitHub Planet です。

GitHub Planetは、GitHub上の活動をただ数字として見るのではなく、ひとつの惑星として表現することを目指した作品です。

プロフィールREADMEの中でも、単なるリンクではなく、カードとして大きく表示することで、作品の雰囲気がすぐ伝わるようにしました。

4. オリジナルカードをREADMEに埋め込む

今回のプロフィールREADMEで一番やりたかったのが、オリジナルのカードを埋め込むことです。

ただ画像を貼るだけではなく、自分の作品や活動を「カード」として見せることで、プロフィール全体の印象を強くできます。

自分の場合は、GitHubの活動を3D惑星として表示する GitHub Planet という作品を作っていたので、それをプロフィール上でカードとして表示しました。

イメージとしては、

GitHub Profile README
  ↓
Masterpiece
  ↓
GitHub Planet Card
  ↓
作品ページへ遷移

という導線です。

READMEを見た人が、ただテキストリンクをクリックするのではなく、カードを見て興味を持ち、そのまま作品ページへ進めるようにしています。

なぜカード化するのか

普通にリンクを置くだけなら、以下のように書けます。

[GitHub Planet](https://githubplanet-git-543426763451.asia-northeast2.run.app/)

もちろんこれでもリンクとしては機能します。

しかし、GitHubプロフィールのように流し見されやすい場所では、テキストリンクだけだと埋もれやすいです。

そこで、作品を画像カードとして見せることで、

何を作ったのか一目で分かる
視覚的に印象が残る
クリックしたくなる
プロフィール全体の世界観が出る

という効果があります。

自分の場合は、GitHubの活動を惑星として表現する作品なので、カードとして見せることで「この人はこういう世界観のものを作るんだな」と伝わりやすくなりました。

カードをクリックできるようにする

README上では、画像をリンクで囲むことで、クリックできるカードのようにできます。

<div align="center">
  <a href="https://your-project-url.example.com">
    <img
      src="https://your-image-url.example.com/card.png"
      alt="Project Card"
      width="100%"
    />
  </a>

  <br />

  <sub>Click to see my project.</sub>
</div>

ポイントは、a タグの中に img タグを入れることです。

こうすると、画像全体がクリック可能になります。

また、width="100%" を指定することで、READMEの横幅に合わせて大きく表示できます。

動的なページをカード画像として表示する

今回のカードは、単なる静的画像ではなく、Webページとして作ったカード画面を画像化してREADMEに表示しています。

GitHub READMEでは、JavaScriptを直接動かしたり、iframeでWebページを埋め込んだりすることはできません。

そのため、動的なWebページをそのまま表示するのではなく、

Webページをスクリーンショット画像として取得して、その画像をREADMEに表示する

という形にしました。

自分の場合は、カード表示用のページを用意して、それを画像化して表示しています。

card.html
  ↓
スクリーンショット画像として取得
  ↓
READMEのimgタグで表示

これによって、README上では普通の画像として扱いながら、元のカードデザインはWeb側で作り込めます。

実際の埋め込み例

実際には、以下のような形で埋め込めます。

<div align="center">
  <a href="https://githubplanet-git-543426763451.asia-northeast2.run.app/">
    <img
      src="https://image.thum.io/get/width/800/crop/400/noanimate/wait/15/https://githubplanet-git-543426763451.asia-northeast2.run.app/card.html?username=YOUR_GITHUB_ID&fix=true"
      alt="GitHub Planet"
      width="100%"
    />
  </a>

  <br />

  <sub>Click to see my planet.</sub>
</div>

YOUR_GITHUB_ID の部分を自分のGitHubユーザー名に変更します。

username=YOUR_GITHUB_ID

自分の場合は以下のようにしています。

username=nitr0yukkuri

ここでは、image.thum.io を使って、Webページを画像として取得しています。

URLの中で指定している内容は、ざっくり以下のような意味です。

width/800
  800px幅で取得する

crop/400
  高さ400pxに切り抜く

noanimate
  アニメーションを止めた状態で取得する

wait/15
  ページ読み込み後、15秒待ってから撮影する

card.html?username=YOUR_GITHUB_ID&fix=true
  実際に画像化したいカードページ

GitHub READMEは外部画像URLを読み込めるので、このように「Webページを画像化したURL」を img src に入れると、オリジナルカードのように表示できます。

GitHub Planetカードを使う流れ

今回プロフィールに埋め込んでいる惑星カードは、自分専用の固定画像ではありません。

GitHub Planetにログインして自分の惑星を生成すると、自分のGitHubアカウントに対応したカードをREADMEに埋め込めます。

GitHub Planetはこちらです。

流れとしては以下です。

GitHub Planetにアクセス
  ↓
GitHubでログイン
  ↓
自分のGitHub活動から惑星を生成
  ↓
README用のカードURLを作る
  ↓
GitHubプロフィールREADMEに埋め込む

まだGitHub Planet側で惑星を生成していない場合は、先にサイトへアクセスしてGitHubログインし、自分の惑星を作成する必要があります。

一度惑星を生成しておけば、GitHubプロフィールREADMEに自分のカードとして表示できます。

もし自分のGitHub活動を少し違う形で見せたい方がいれば、ぜひ触ってみてください。

カード用ページを分けて作る

個人的におすすめなのは、通常の作品ページとは別に、README埋め込み用のカードページを作ることです。

例えば、以下のようにします。

/
  通常の作品ページ

/card.html
  READMEに埋め込むためのカード専用ページ

通常の作品ページは、ユーザーが操作するためのページです。

一方で、カード用ページは、README上で綺麗に見せるためのページです。

この2つは目的が違います。

カード用ページでは、以下を意識すると良いです。

横長の比率にする
文字を大きめにする
情報を詰め込みすぎない
スクリーンショット化されたときに崩れないようにする
アニメーションに依存しすぎない
読み込み直後でも見た目が完成するようにする

READMEに表示されるカードは、操作できるUIではなく「入口」です。

そのため、細かい機能よりも、見た瞬間の印象を優先した方が良いと思います。

カード化するときに気をつけたこと

オリジナルカードを作るときに気をつけたことは、以下です。

1. 情報を詰め込みすぎない

カードは小さい領域で見られます。

そのため、説明を詰め込みすぎると見づらくなります。

カード内では、

作品名
一言説明
ビジュアル
必要最低限のステータス

くらいに絞るのが良いと思います。

2. README上で見たときのサイズを意識する

カード単体では綺麗でも、GitHub README上で見ると小さく見えることがあります。

そのため、文字サイズや余白は少し大きめにした方が見やすいです。

3. クリック先を明確にする

カードは見た目だけでなく、作品への導線です。

画像をクリックしたら作品ページに飛べるようにしておくと、READMEから自然に作品へ誘導できます。

4. スクリーンショット化前提でデザインする

READMEに表示する画像は、最終的にはスクリーンショットです。

そのため、アニメーション中の一瞬に依存した見た目だと、撮影タイミングによって崩れる可能性があります。

必要であれば、fix=true のようなクエリパラメータを用意して、README用には表示を固定するのもありです。

Tech Stackは表で整理する

プロフィールREADMEに技術スタックを書く場合、バッジをただ横に並べるだけでも良いですが、カテゴリごとに分けると見やすくなります。

例えば、以下のような形です。

## Tech Stack

| Area | Stack |
| :--- | :--- |
| **Frontend** | Next.js / React / TypeScript / TailwindCSS |
| **Creative** | Three.js / React Three Fiber / WebGL / GLSL |
| **Backend** | Node.js / Go / GraphQL / WebSocket |
| **Data / Infra** | PostgreSQL / Prisma / Docker / Vercel |
| **Design / Mobile** | Figma / Expo / PWA |

自分の場合は、ただ使える技術を並べるのではなく、

没入感のある体験を作るために使っている技術

として見せることを意識しました。

技術スタックも、単なるスキル表ではなく、プロフィール全体の世界観に合わせると統一感が出ます。

デザインで意識したこと

今回、デザインで意識したことは以下です。

1. 最初に世界観を見せる

プロフィールREADMEを開いた瞬間に、文字よりも先に世界観が伝わるようにしました。

最初の数秒で、

何か作っている人っぽい

と思ってもらうことを意識しています。

2. 情報を詰め込みすぎない

GitHubプロフィールでは、GitHub Statsやバッジをたくさん置きたくなります。

ただ、今回はあえて情報量を絞りました。

全部を見せるのではなく、まず見てほしいものを大きく見せる方針です。

3. 代表作を明確にする

自分の作品が複数ある場合でも、最初に見せる作品は一つに絞りました。

これは、見る側に迷わせないためです。

まずこれを見てほしい

という導線を作ることで、プロフィール全体の意図が伝わりやすくなります。

4. 文章は短くする

プロフィールREADMEの文章は、長く書きすぎないようにしました。

特に画像の近くに置く文章は、説明というよりキャッチコピーに近い役割です。

詳しい説明は、ポートフォリオサイトや記事、リポジトリREADMEに任せる方が良いと思っています。

5. スクロールしたくなる流れにする

一番上で印象を作り、その下で代表作を見せる。

この流れにすることで、プロフィールをスクロールしてもらいやすくなります。

ただ情報を並べるのではなく、

Hero
  ↓
Concept
  ↓
Masterpiece
  ↓
Original Card
  ↓
Tech Stack
  ↓
Activity

という順番で、ひとつのカードを見るような体験を意識しました。

やりすぎないために気をつけたこと

プロフィールREADMEは自由度が高いので、やろうと思えばかなり装飾できます。

ただ、やりすぎると逆に見づらくなります。

自分が気をつけたのは以下です。

バッジを並べすぎない
GitHub Statsを主役にしすぎない
画像を増やしすぎない
長文を書きすぎない
最初に何者か分かるようにする
代表作への導線を明確にする
スマホでも崩れにくい幅にする

かっこよくしたい気持ちはありますが、プロフィールREADMEはあくまで入口です。

入口で情報を詰め込みすぎると、逆にどこを見ればいいか分かりにくくなります。

そのため、

見せたいものを絞る

ことがかなり大事だと思いました。

実際に使えるテンプレート

最後に、今回の考え方をもとにした簡単なテンプレートを置いておきます。

<div align="center">

# Your Name

### Developer / Student / Creator

<div align="center">
  <a href="https://your-portfolio.example.com">
    <img
      src="https://example.com/your-profile-preview.gif"
      alt="Portfolio Preview"
      width="800"
    />
  </a>
</div>

<br />

### YOUR CONCEPT MESSAGE

Short copy about what you build.  
Short copy about your world, product, or engineering style.

</div>

<br />

## Masterpiece

**Your Project Name** turns something into something memorable.

<div align="center">
  <a href="https://your-project.example.com">
    <img
      src="https://example.com/your-project-card.png"
      alt="Project Card"
      width="100%"
    />
  </a>

  <br />

  <sub>Click to see my project.</sub>
</div>

<br />

## Original Card

<div align="center">
  <a href="https://your-project.example.com">
    <img
      src="https://image.thum.io/get/width/800/crop/400/noanimate/wait/15/https://your-project.example.com/card.html?username=YOUR_GITHUB_ID&fix=true"
      alt="Original Card"
      width="100%"
    />
  </a>
</div>

<br />

## Tech Stack

| Area | Stack |
| :--- | :--- |
| **Frontend** | React / TypeScript / Next.js |
| **Backend** | Go / Node.js |
| **Creative** | Three.js / WebGL |
| **Infra** | Docker / Vercel |

<br />

## Links

- Portfolio: https://your-portfolio.example.com
- X: https://x.com/your_id
- Zenn: https://zenn.dev/your_id
- Qiita: https://qiita.com/your_id

このテンプレートをそのまま使うというより、自分の世界観に合わせて変えるのが大事です。

プロフィールREADMEは自由に作れるからこそ、何を見せたいのかを先に決めておくと作りやすいです。

よければGitHub Planetも使ってみてください

今回紹介した GitHub Planet は、自分のGitHub活動を3D惑星のように可視化するために作った作品です。

リポジトリはこちらです。

プロフィールREADMEに埋め込むと、ただのリンクではなく、自分のGitHub活動を視覚的なカードとして見せられます。

もし気になった方は、ぜひ自分のGitHubアカウントでログインして、惑星を作ってみてください。

また、今回のプロフィールREADMEで使っているポートフォリオ側のリポジトリはこちらです。

GitHubプロフィールやポートフォリオの見せ方に興味がある方は、こちらも見てもらえると嬉しいです。

もし「面白い」「使ってみたい」と思っていただけたら、GitHub PlanetのリポジトリにStarをいただけると今後の開発の励みになります。

まとめ

GitHubプロフィールREADMEは、単なる自己紹介欄ではなく、自分の作品や活動に興味を持ってもらうための入口にできます。

ただ技術スタックを並べるだけでなく、

何を作っている人なのか
どんな世界観を持っているのか
代表作は何か
どこを見れば詳しく分かるのか

を整理すると、自分だけのポートフォリオカードのように使えます。

今回、自分はGitHubプロフィールをただのREADMEではなく、

自分の活動への入口になるプロフィールカード

として設計しました。

リポジトリ一覧の前にある第一印象をどう作るか。

そこを少し意識するだけで、GitHubプロフィールはかなり変わると思います。

また、Webページとして作ったオリジナルカードを画像化して埋め込むことで、READMEでもかなり自由に見せ方を作れることが分かりました。

プロフィールREADMEは、単なるリンク集ではなく、自分の作品や活動への入口です。

これからGitHubプロフィールREADMEを作り込んでみたい人の参考になれば嬉しいです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up