学習目標
この記事を読み終えると、以下のことができるようになります:
- ✅ READMEプロフィールを作成して自己紹介ができる
- ✅ GitHub StatsとBadgeをプロフィールに追加できる
- ✅ 最初のリポジトリを作成できる
- ✅ プロフィールをポートフォリオのように最適化できる
前回の復習
基礎編 #1ではGitHubの紹介とアカウント作成を学びました:
- GitHubとは何かを理解
- GitHubアカウントの作成とメール認証
- Usernameとパスワードの設定
- メールプライバシー設定
シリーズ紹介
「今からでも始めるGitHubマスター」シリーズの2回目の記事です。
前回GitHubアカウントを作成しました。今度はそのアカウントを魅力的にカスタマイズする番です!
GitHubプロフィールはあなたの第一印象でありポートフォリオです。採用担当者が実際に確認する部分なので、丁寧に作成しましょう!
1. 基本プロフィール設定
所要時間: 約10分
難易度: ⭐⭐ (簡単)
プロフィールページへの移動
まず、プロフィール設定ページに移動します:
- GitHubログイン状態を確認
- 右上のプロフィールアイコンをクリック
- "Settings" (設定) を選択
- 左メニューから "Public profile" をクリック (既に選択されている場合もあります)
Settings > Public profile の経路で移動してください
プロフィール写真の設定
なぜ重要なのか?
- プロフィール写真があるとプロフェッショナルに見えます
- ないとデフォルトアイコン(丸い色の円)だけが表示されます
- 第一印象が重要です!
手順:
- "Public profile" ページでプロフィール写真セクションを見つける
- 現在のプロフィール写真の横にある "Edit" ボタンをクリック
- "Upload a photo..." を選択
- コンピューターから写真を選択
- 写真の位置を調整 (必要に応じて)
- "Set new profile picture" をクリック
Editボタンをクリックすると写真アップロードオプションが表示されます
写真選択のヒント:
- ✅ 顔がはっきり見える写真 (証明写真のような堅苦しいものは避ける)
- ✅ 正方形の比率を推奨 (1:1の比率)
- ✅ 最低200x200ピクセル以上
- ❌ 暗すぎる写真
- ❌ ぼやけていたり画質が低い写真
💡 写真がない場合は?: アバター生成サイトを活用しましょう!
- https://www.dicebear.com/ - ランダムアバター生成
- https://avatarmaker.com/ - カスタムアバター
- https://www.gravatar.com/ - Gravatarを使用
基本情報の入力
同じ"Public profile"ページで、以下の情報を順番に入力します:
1. Name (名前)
Nameはプロフィールに表示される実際の名前です。
例: 山田太郎, Yamada Taro, 太郎
UsernameとNameの違い:
| 区分 | Username | Name |
|---|---|---|
| 例 | yamada-taro |
山田太郎 |
| 用途 | URLアドレスに使用 | プロフィールに表示 |
| 変更 | 難しい (推奨しない) | いつでも自由に変更可能 |
| 言語 | 英数字、ハイフンのみ | 日本語、英語すべて可能 |
💡 ヒント: Nameは本名または活動名を使用してください。後でいつでも変更できます!
2. Bio (一行紹介)
Bioはプロフィールの核心です! あなたが誰なのかを一行で示してください。
例:
- 🌱 Web開発を勉強中です
- 💻 フロントエンド開発者志望 | React勉強中
- 🚀 バックエンド開発者 | Python, Django
- 👨🎓 大学生 | コンピュータサイエンス専攻 | 開発学習中
Bio作成の公式:
[現在の状況] | [主な技術/関心事] | [特徴/目標]
初心者向けBioサンプル集:
- 🌱 開発学習開始! | Python勉強中
- 👨🎓 情報工学部の学生 | Web開発勉強中
- 💻 フロントエンド入門者 | HTML, CSS, JavaScript
- 🚀 バックエンド開発勉強中 | Java基礎から
- 📚 コーディングブートキャンプ修了 | 就職準備中
- 🎯 開発者転向準備中 | React & Node.js
💡 ヒント: 絵文字を入れるともっと目立ちます!
- Windows:
Winキー + .またはWinキー + ;- Mac:
Cmd + Ctrl + Space
3. Company (会社/学校)
例:
- 東京大学
- カカオ
- @会社名 (GitHub組織アカウントがある場合)
- オプション項目です
- 学生なら学校名
- 会社員なら会社名
- なければ空欄でもOKです
4. Location (地域)
例:
- Tokyo, Japan
- 東京、日本
- Osaka
- オプション項目です
- 日本語、英語すべて可能
- 都市または国名
5. Website (ウェブサイト/ブログ)
例:
- https://blog.example.com
- https://portfolio.example.com
- ブログや個人ホームページURL
- なければ空欄
- 後で追加してもOKです
6. Social accounts (ソーシャルアカウント)
連携可能なサービス:
- Twitter / X
- LinkedIn
- YouTube
- Twitch
- など
- オプション項目です
- 連携するとプロフィールにアイコン表示
✅ すべて入力したら?
- ページの一番下にある "Update profile" 緑色のボタンをクリック
- プロフィールページで確認 (右上のプロフィールアイコン → "Your profile")
2. READMEプロフィールの作成 (GitHubの隠し機能!)
所要時間: 約15分
難易度: ⭐⭐⭐ (中級)
基本プロフィール設定が完了しました。次はGitHubの特別な機能を使ってみましょう!
READMEプロフィールとは?
GitHubの隠し機能! 🎉
通常のプロフィール:
👤 プロフィール写真
山田太郎 (yamada-taro)
🌱 Web開発勉強中です
READMEプロフィール:
👤 プロフィール写真
山田太郎 (yamada-taro)
🌱 Web開発勉強中です
┌─────────────────────────┐
│ │
│ ✨ READMEプロフィール! │
│ - 自己紹介 │
│ - 技術スタック │
│ - プロジェクト │
│ - GitHub統計 │
│ │
└─────────────────────────┘
どうやって作るの?
- 自分のusernameと同じ名前のリポジトリを作ると
- そのリポジトリのREADME.mdファイルがプロフィールに表示されます!
- まるでInstagramのプロフィール紹介文のような概念です
例: usernameがyamada-taroなら
-
yamada-taroというリポジトリを作成し - その中にREADME.mdファイルを作成すると
- プロフィールページに素敵に表示されます!
💡 なぜ特別なのか? GitHubで唯一、usernameと同じ名前のリポジトリのみがこの機能を使用できます!
READMEプロフィールの作成 (手順)
ステップ1: 特別なリポジトリの作成
- GitHubメインページで右上の "+" ボタンをクリック
- "New repository" を選択
-
Repository nameに "自分のusername" を入力 (完全一致!)
- 例: usernameが
yamada-taroならyamada-taroと入力
- 例: usernameが
-
緑色のボックスが表示されます! "You found a secret! 🎉"
- これが表示されれば正しくできています!
- Public を選択 (チェックされている必要があります)
- "Add a README file" をチェック ✅
- "Create repository" ボタンをクリック (緑色のボタン)
usernameと同じ名前のリポジトリを作成すると "✨ You found a secret! ✨" メッセージが表示されます
💡 このメッセージが表示されない場合は? Repository nameを再確認してください。大文字小文字、ハイフンまで正確に一致する必要があります!
ステップ2: READMEの編集
- 今作成したリポジトリページが開きます
- README.mdファイルが表示されます
- 鉛筆アイコン(編集ボタン)をクリック
- 以下のテンプレートをコピーして貼り付け
README.md右上の鉛筆アイコンをクリックして編集してください
初心者向けシンプルなREADMEテンプレート
以下のコードをコピーして貼り付けてください!
⚠️ 重要:
山田太郎、your-email@example.comのような部分を必ず自分の情報に変更してください!
# こんにちは! 👋 私は山田太郎です
## 🙋♂️ 自己紹介
- 🌱 Web開発を学んでいます
- 💻 フロントエンドに興味があります
- 📚 毎日少しずつ成長中です
## 🛠️ 学習中の技術
## 📫 連絡先
- メール: your-email@example.com
- ブログ: https://your-blog.com (あれば)
バッジの色を変える:
- バッジURLの色コード(
E34F26、1572B6など)を変えると別の色で表示されます - より多くのバッジはshields.ioで作成できます!
中級者向けの素敵なREADMEテンプレート
より華やかなプロフィールが欲しい場合はこのテンプレートを使用してください!
⚠️ 重要:
YOUR_USERNAME、山田太郎、your-blog.comのような部分をすべて自分の情報に変更してください!
<div align="center">
# こんにちは! 👋 私は山田太郎です
### Web開発者を目指す情熱的な学習者です
[](https://github.com/YOUR_USERNAME)
[](https://your-blog.com)
</div>
---
## 🚀 About Me
- 🎓 コンピュータサイエンス専攻 (または職業)
- 💼 現在 [プロジェクト名] 開発中
- 🌱 React, Node.js 勉強中
- 👯 オープンソース貢献に興味あり
- ⚡ Fun fact: コーディング中にコーヒーを飲むのが好きです ☕
## 🛠️ Tech Stack
### Languages
### Frontend
### Tools
## 📊 GitHub Stats
## 📈 Activity Graph
[](https://git.io/streak-stats)
---
<div align="center">
### 💬 一緒に成長できる仲間を探しています!
[](https://hits.seeyoufarm.com)
</div>
テンプレート使用方法:
- 上記のコード全体をコピー
- README.md編集画面に貼り付け
-
YOUR_USERNAMEを8箇所すべて自分のusernameに変更 -
山田太郎、your-blog.comなどの個人情報を修正 - 保存!
💡 検索機能の活用:
Ctrl+F(Windows) またはCmd+F(Mac)でYOUR_USERNAMEを検索して一度に変更しましょう!
ステップ3: 保存
- 編集が完了したらページ下部にスクロール
- "Commit changes" ボタン (緑色) をクリック
- もう一度 "Commit changes" をクリック
- 完了!
ステップ4: 確認
-
自分のプロフィールへ移動
- 右上のプロフィールアイコンをクリック
- "Your profile" を選択
- 完成! 素敵なプロフィールが表示されます! 🎉
こんな素敵なプロフィールが完成します! 🎉
💡 ヒント: 最初から完璧である必要はありません。ゆっくり一つずつ追加して更新していきましょう!
GitHub Statsの設定
GitHub Statsはプロフィールの活動を視覚的に表示するツールです:
主要オプション:
-
show_icons=true: アイコン表示 -
theme=: テーマ選択 (radical, dark, light, tokyonightなど) -
locale=ja: 日本語表示 -
hide_rank=true: ランキング非表示
プロフィールバッジの追加
shields.ioを活用して技術スタックを視覚的に表現できます:
3. 最初のリポジトリを作成
リポジトリの作成
- 右上の "+" ボタン → "New repository"
- Repository name: 意味のある名前を選択
- Description: プロジェクトの説明を追加
- Public/Private 選択
- "Initialize with README" チェック推奨
最初のコミット
git clone https://github.com/username/repository-name.git
cd repository-name
echo "# My First Project" >> README.md
git add README.md
git commit -m "docs: Update README"
git push origin main
4. プロフィール最適化のヒント
活動履歴を埋める
草を植える戦略
毎日継続的にコミットして連続ストリークを達成する戦略
実践ガイド:
- コード改善: 既存コードのリファクタリング、コメント追加、変数名改善
- ドキュメント更新: README補完、学習ノート作成、コメント追加
- 学習内容整理: 新しく学んだ概念整理、サンプルコード作成
- アルゴリズム問題: LeetCode、AtCoder、Paizaの問題解答
💡 ヒント: 小さなコミットでも大丈夫です! "Learn: Add JavaScript array methods example"のような小さな学習コミットも意味があります。
オープンソース貢献ステップガイド
| ステップ | 活動 | 難易度 | 予想時間 |
|---|---|---|---|
| 1段階 | タイポ修正、翻訳 | ⭐ | 30分 |
| 2段階 | ドキュメント改善 | ⭐⭐ | 1-2時間 |
| 3段階 | バグレポート | ⭐⭐⭐ | 2-3時間 |
| 4段階 | バグ修正 | ⭐⭐⭐⭐ | 4-8時間 |
| 5段階 | 新機能提案/実装 | ⭐⭐⭐⭐⭐ | 1週間+ |
フォロー & スター
- 興味のある開発者とプロジェクトをフォロー
- 有用なリポジトリにスター
- トレンドリポジトリをチェックして最新技術動向を把握
よくある質問 (FAQ)
Q1. READMEプロフィールが表示されません!
A: リポジトリ名がUsernameと正確に一致しているか確認してください。大文字小文字も区別されます!
Q2. 他の人のプロフィールコードをコピーしてもいいですか?
A: はい、GitHubはオープンソース精神を重視しています。ただし、内容は必ず自分のものに修正してください。
Q3. プロフィールをどのくらいの頻度で更新すべきですか?
A: 決まったルールはありませんが、新しいプロジェクトや技術を学ぶたびに更新するとよいでしょう。
Q4. GitHub Statsが更新されません!
A: Statsはキャッシュのためリアルタイム反映されません。通常数時間後に更新されます。
実習課題
📝 必須課題
- プロフィール写真をアップロード
- Name、Bioを作成
- READMEプロフィールリポジトリを作成 (username/username)
- 基本テンプレートでREADMEを作成
- GitHub Statsを追加
- プロフィールページで確認
🚀 チャレンジ課題
- 中級者テンプレートにアップグレード
- バッジ(Badge)を5個以上追加
- Streak Statsを追加
- 訪問者カウンターを追加
- 絵文字でセクションを装飾
まとめ
🎉 おめでとうございます! あなただけの素敵なGitHubプロフィールができました!
プロフィールはあなたのポートフォリオです。継続的に更新・管理すれば、就職活動時に大きな助けになるでしょう。
💡 プロフィール管理のヒント
- 週1回: 新しいプロジェクトや学んだ技術を追加
- 月1回: 全体的なレイアウトと内容をチェック
- 四半期1回: トレンドに合わせてデザインを更新
🎯 次のステップ
次回はセキュリティ設定を学びます!
- 2段階認証(2FA)設定
- SSHキーの生成と登録
- アカウントセキュリティ強化方法
📚 GitHubマスターシリーズ
🌱 基礎編（初心者）
- GitHubの紹介とアカウント作成
- プロフィールカスタマイズとポートフォリオ 👉 現在の記事
- セキュリティ設定と認証
- Repositoryを理解する
- README作成方法
- .gitignoreとライセンス
- 初めてのコミットと管理
- git addとcommit
- git pushとpull
- 実践ワークフロー
- Branch基本
- MergeとRebase
- ブランチ戦略
- ForkとClone
- Pull Request