AI時代のキャリアチェンジ・キャリアアップをサポートするキャリアポータル「AI HACKキャリア」

エンジニアのポートフォリオ例と作り方|GitHubで作る手順

/著者:AI HACK編集部キャリア
SHARE
エンジニアのポートフォリオ例と作り方|GitHubで作る手順

この記事の要約と結論

  • エンジニアのポートフォリオは、自己紹介・スキル・成果物2〜3個・連絡先で構成します。

  • GitHubのプロフィールREADMEとGitHub Pagesを使えば、無料で公開できます。

  • 作品ごとに目的・使った技術・工夫した点を書くと、評価されやすくなります。

エンジニアのポートフォリオは、自分で作ったアプリやツールと、その説明をまとめた作品集です。

載せる項目と見せ方の型を押さえると、実務経験が少ない方でも、技術力と学ぶ姿勢を採用担当者に伝えられます。

本記事では、エンジニアのポートフォリオの作り方を6つのステップで解説します。さらに、職種別の作品例、GitHubのプロフィールREADMEとGitHub Pagesで公開する手順、READMEのテンプレートも紹介します。

エンジニアのポートフォリオとは【必要な項目の早見表】

エンジニアのポートフォリオとは、自己紹介・スキル・成果物・連絡先の4つで、自分の技術力を示す作品集です。職務経歴書が「何を担当したか」を伝える書類なのに対し、ポートフォリオは「何を作れるか」を見せる役割を持ちます。

ここでは、ポートフォリオに載せる項目を早見表で示したうえで、職務経歴書との違いと、未経験で求められる理由を紹介します。

エンジニアのポートフォリオに載せる項目は、以下のとおりです。

項目

載せる内容

目安

自己紹介

名前(ハンドルネーム可)・目指す職種・経歴の要約

3〜5行

スキル

使える言語・フレームワーク・クラウド・ツール

一覧1つ

成果物

作品の概要・目的・使った技術・工夫した点・デモURL・ソースコード

2〜3個

学習・発信の記録

技術ブログ・資格・勉強会への参加

あれば

連絡先

メールアドレスかSNS・GitHubのURL

1〜2個

※項目と目安は、AI HACKキャリア編集部が採用担当者の確認しやすさを踏まえて整理したものです

成果物は数を増やすより、2〜3個に絞って説明を充実させるほうが評価されやすくなります。

職務経歴書との違い

ポートフォリオは、職務経歴書に書いたスキルの「証拠」を見せる資料です。職務経歴書は文章で経験を伝えるため、技術の深さまでは採用担当者が判断しにくいからです。

たとえば、職務経歴書に「Pythonでデータ集計ツールを作成」と書き、ポートフォリオでソースコードと画面を見せると、技術力の裏づけになります。ただし、ポートフォリオだけで応募できる求人は少ないため、職務経歴書とセットで用意しましょう。

あわせて読みたい
エンジニアの職務経歴書の書き方|職種別の例文とテンプレート

未経験でポートフォリオが求められる理由

未経験からエンジニアを目指す場合、ポートフォリオは技術力を示す数少ない手段です。実務経験がないと、職務経歴書だけでは開発の力を判断する材料がないからです。

たとえば、同じ「独学でプログラミングを3ヶ月学習」でも、動くアプリとソースコードを見せられる方は、学習の到達度が伝わります。ただし、ポートフォリオの提出を必須とする求人ばかりではないため、応募先の募集要項を確認しましょう。

\ 職種・経験・年代から、自分に合う転職エージェントを探せます /

AI・IT転職に強いサービスを比較する

エンジニアのポートフォリオの作り方【6STEP】

エンジニアのポートフォリオは、目的を決めてから作品を作り、説明を書いて公開する、という順番で作ります。作品から作り始めると、目指す職種と作品の内容がずれやすいからです。

ここでは、ポートフォリオの作り方を6つのステップで紹介します。

STEP

やること

期間の目安

STEP1

目指す職種と、見せたいスキルを決める

1日

STEP2

作品のテーマと機能を決める

2〜3日

STEP3

作品を設計・開発する

1〜2ヶ月

STEP4

ソースコードをGitHubで公開する

1日

STEP5

READMEに目的・技術・工夫を書く

1〜2日

STEP6

ポートフォリオのページにまとめて公開する

2〜3日

※期間の目安は、学習を始めて3〜6ヶ月の方が平日夜と週末に作業する場合を想定して、AI HACKキャリア編集部が見積もったものです

STEP3の開発に最も時間がかかるため、最初の作品は機能を絞り、1〜2ヶ月で公開できる規模にしましょう。

【STEP1】目指す職種と見せたいスキルを決める

ポートフォリオ作りは、目指す職種と、作品で見せたいスキルを決めることから始めます。職種によって、採用担当者が確認したい技術が異なるからです。

たとえば、Webエンジニアならフロントエンドとバックエンドの両方、インフラエンジニアならクラウドの構築手順を見せる作品が向いています。ただし、職種を決めきれない場合は、応募したい求人の必須要件に多い技術から選びましょう。

【STEP2】作品のテーマと機能を決める

作品のテーマは、自分や身近な人の困りごとを解決するものにすると、作った目的を説明しやすくなります。採用担当者は、技術だけでなく、課題を見つけて形にする力も見ているからです。

たとえば、「家計簿の入力が面倒」という困りごとから、レシートの写真を読み取って集計するアプリを作る、という流れです。ただし、最初から機能を増やしすぎると完成しないため、必須の機能を3つ程度に絞りましょう。

【STEP3】作品を設計・開発する

作品の開発は、画面の構成とデータの設計を簡単に書き出してから始めます。設計を残しておくと、READMEや面接で作品の構造を説明しやすいからです。

たとえば、画面一覧・テーブル設計・使う外部APIを1枚にまとめ、リポジトリのドキュメントに置いておきます。ただし、教材やチュートリアルのコードをそのまま使った部分は、自分で書いた部分と区別して説明しましょう。

【STEP4】ソースコードをGitHubで公開する

完成した作品のソースコードは、GitHubのパブリックリポジトリで公開します。採用担当者は、コードの書き方やコミットの履歴から、開発の進め方を確認できるからです。

たとえば、機能ごとに分けてコミットし、メッセージに「ログイン機能を追加」のように変更内容を書いておくと、開発の流れが伝わります。ただし、APIキーやパスワードをリポジトリに含めないよう、設定ファイルの扱いに注意しましょう。

【STEP5】READMEに目的・技術・工夫を書く

READMEは、作品を開かなくても内容が分かるように、目的・使った技術・工夫した点を書きます。採用担当者が1つの作品にかけられる時間は限られており、READMEで興味を持たれるかが決まるからです。

READMEに書く項目は、H2「GitHubでエンジニアのポートフォリオを作る方法3つ」のテンプレートで紹介します。ただし、READMEが長すぎると読まれにくいため、画面1〜2枚分に収めましょう。

【STEP6】ポートフォリオのページにまとめて公開する

作品が2〜3個そろったら、自己紹介・スキル・成果物・連絡先を1つのページにまとめて公開します。応募書類に1つのURLを書くだけで、すべての作品を見てもらえるからです。

まとめる方法は、以下のとおりです。

方法

向いている方

注意点

GitHubのプロフィールREADME

まず手軽に公開したい方

デザインの自由度は低い

GitHub Pagesで作る個人サイト

フロントエンドの技術も見せたい方

公開サイトのサイズは1GBまで

Notion・PDFのスライド

コードを書かない職種も目指す方

動く作品はデモURLを別に用意する

※2026年10月13日時点・GitHub公式ドキュメントより

どの方法でも、職務経歴書と同じ内容になるように、経歴やスキルの表記をそろえましょう。

職種別のエンジニアのポートフォリオ例3つ

ポートフォリオの作品は、目指す職種の業務に近いものほど評価につながります。採用担当者は、作品から入社後に任せられる仕事を想像するからです。

ここでは、Webエンジニア・インフラエンジニア・AI/データ職の3つについて、編集部が作成した作品例を紹介します。

職種

作品例

見せられるスキル

Webエンジニア

勉強会の参加登録アプリ(ログイン・登録・一覧・通知)

フロントエンド・API・DB設計・認証

インフラエンジニア

個人ブログをAWS上に構築し、構成をTerraformで管理

クラウド構築・コードでのインフラ管理・監視

AI・データ職

公開データを使った需要予測と、結果を見られるダッシュボード

データの前処理・モデル作成・可視化

※作品例は、AI HACKキャリア編集部が作成した架空の例です

Webエンジニアのポートフォリオ例

Webエンジニアのポートフォリオは、ログイン・データの登録・一覧表示がそろったWebアプリが基本です。Web系の開発で使う、画面・API・データベースの一通りを見せられるからです。

たとえば、勉強会の参加登録アプリなら、ユーザー登録・イベント作成・参加申込・リマインドメールの機能で、画面からDBまでの設計を示せます。ただし、デザインの作り込みより、動作の安定とコードの読みやすさを優先しましょう。プログラマーを目指す方は、未経験からプログラマーになる方法も参考にしてください。

インフラエンジニアのポートフォリオ例

インフラエンジニアのポートフォリオは、クラウド上に環境を構築し、構成図と手順をまとめたものが向いています。インフラの仕事は画面に表れにくく、構成と手順を文書で見せる必要があるからです。

たとえば、個人ブログをAWS上に構築し、構成をTerraformのコードで管理して、監視とバックアップの設定まで書きます。ただし、クラウドの利用料が発生するため、公開後は不要なリソースを止めましょう。詳しくは、未経験からインフラエンジニアになる方法で解説しています。

AI・データ職のポートフォリオ例

AI・データ職のポートフォリオは、データの取得から分析・結果の見せ方までを1つにまとめた作品が向いています。AI・データ職の仕事は、分析の結果を業務の判断につなげることだからです。

たとえば、自治体などの公開データを使って需要を予測し、結果をダッシュボードで見られるようにします。ただし、利用規約で再配布が禁じられているデータは、リポジトリに含めないようにしましょう。データ職を目指す方は、未経験からデータアナリストになる方法も参考にしてください。

GitHubでエンジニアのポートフォリオを作る方法3つ

GitHubを使うと、ソースコードの公開からポートフォリオのページ作りまで、無料で始められます。採用担当者がコードを直接確認できる点も、GitHubを使う利点です。

ここでは、GitHubでポートフォリオを作る3つの方法を、公式ドキュメントの条件とあわせて紹介します。

  • プロフィールREADMEで、自己紹介と作品の一覧を見せる
  • リポジトリのREADMEで、作品ごとの説明を書く
  • GitHub Pagesで、ポートフォリオのサイトを公開する

プロフィールREADMEを作る

GitHubのプロフィールREADMEは、プロフィールページの上部に自己紹介を表示できる機能です。応募書類にGitHubのURLを書くと、採用担当者が最初に目にするページになります。

GitHub公式ドキュメントによると、プロフィールREADMEを表示する条件は、以下のとおりです(2026年10月13日時点・GitHub公式ドキュメントより)。

  • GitHubのユーザー名と同じ名前のリポジトリを作る
  • リポジトリをパブリックにする
  • リポジトリのルートにREADME.mdを置く
  • README.mdに内容を書く

プロフィールREADMEには、自己紹介・スキル・主な作品へのリンクを書き、作品の詳しい説明は各リポジトリのREADMEに任せると読みやすくなります。

リポジトリのREADMEを書く

リポジトリのREADMEは、作品ごとの説明書です。READMEがないリポジトリは、コードを読まないと内容が分からず、採用担当者に見てもらえない可能性があります。

以下は、AI HACKキャリア編集部が作成したREADMEのテンプレートです。

見出し

書く内容(例)

作品名・概要

勉強会の参加登録アプリ。主催者がイベントを作り、参加者がWebで申し込める

作った目的

表計算ソフトで管理していた参加者の集計を、自動にしたかった

デモURL・画面

公開URLと、主な画面のスクリーンショット2〜3枚

使った技術

TypeScript・React・Node.js・PostgreSQL・AWS

主な機能

ユーザー登録・イベント作成・参加申込・前日のリマインドメール

工夫した点

申込が定員を超えないよう、同時に申し込まれた場合の処理を設計した

今後の改善

決済機能と、参加者アンケートの集計機能を追加したい

※作品例は、AI HACKキャリア編集部が作成した架空の例です

「工夫した点」と「今後の改善」は、面接で質問されやすい項目です。自分の言葉で説明できる内容を書きましょう。

GitHub Pagesでサイトを公開する

GitHub Pagesは、GitHubのリポジトリからWebサイトを公開できる機能です。HTML・CSS・JavaScriptで作ったポートフォリオのサイトを、サーバーを用意せずに公開できます。

GitHub公式ドキュメントと利用制限のページで確認できる主な条件は、以下のとおりです(2026年10月13日時点・GitHub公式ドキュメントより)。

項目

公式の記載

無料プランで使う条件

GitHub Freeの場合、リポジトリはパブリックである必要がある

公開サイトのサイズ

1GBまで

帯域の目安

月100GBのソフトリミット

使えない用途

オンラインビジネス・ECサイト・商用SaaSなど、商取引を主な目的とするサイト

個人のポートフォリオの公開であれば、上記の条件の範囲で使えます。ただし、パスワードやクレジットカード番号などの機密情報を扱うサイトには使わないよう、公式ドキュメントでも案内されています。

エンジニアのポートフォリオの評価を上げるポイント4つ

評価されるポートフォリオは、作品の数より、作った理由と技術の選び方を説明できることが共通しています。採用担当者は、作品を通して入社後の考え方や学び方を見ているからです。

ここでは、ポートフォリオの評価を上げるポイントを4つ紹介します。

ポイント

具体的にすること

オリジナルの要素を入れる

教材の作品に、自分で考えた機能を1つ以上加える

求人で使われている技術を選ぶ

応募したい求人の必須要件に多い言語・クラウドを使う

使う人の目線で作る

画面の操作手順を3ステップ以内にする

コードを読みやすく整える

命名をそろえ、テストとLinterを導入する

特に、教材の作品をそのまま載せると、学習の到達度が伝わりにくくなります。教材で学んだ技術を使い、テーマや機能を自分で考えた作品にしましょう。

学習の進め方から見直したい方は、AIエンジニアのロードマップも参考にしてください。

エンジニアのポートフォリオを作るときの注意点3つ

ポートフォリオは公開する資料のため、権利と情報の扱いに注意が必要です。他者の素材や業務のコードを無断で載せると、トラブルにつながるおそれがあります。

ここでは、ポートフォリオを作るときの注意点を3つ紹介します。

  • 他者の画像・デザイン・コードを無断で使わない
  • 業務で書いたコードや社外秘の情報を載せない
  • APIキー・パスワードをリポジトリに含めない

画像やアイコンは、商用利用や再配布の条件を確認してから使いましょう。作り込みすぎて完成が遅れるより、2〜3個の作品を公開し、更新を続けるほうが学ぶ姿勢を示せます。

エンジニアのポートフォリオのよくある失敗と改善方法3つ

ポートフォリオのよくある失敗は、見た目・更新・説明のどれかに偏ることです。作品の中身が良くても、伝え方で評価を落とす場合があります。

ここでは、よくある失敗と原因、改善方法を3つ紹介します。

よくある失敗

原因

改善方法

デザインに時間をかけ、機能が動かない

見た目を優先して開発の順番を決めた

必須の機能を先に完成させ、デザインは最後に整える

更新が1年以上止まっている

公開した時点で完成と考えた

学んだ技術を作品に反映し、月1回はコミットする

READMEがなく、作品の目的が伝わらない

コードを見れば分かると考えた

目的・技術・工夫・改善の4項目をREADMEに書く

3つの失敗はいずれも、公開後の見直しで防げます。応募の前に、READMEとデモの動作を確認する時間を取りましょう。

\ 職種・経験・年代から、自分に合う転職エージェントを探せます /

AI・IT転職に強いサービスを比較する

エンジニアのポートフォリオを応募書類に載せる方法

ポートフォリオは、URLを応募書類に書いて初めて採用担当者に見てもらえます。URLを書く場所が分かりにくいと、作品を開かずに書類選考が進むことがあります。

ここでは、ポートフォリオのURLを載せる場所を4つ紹介します。

載せる場所

書き方

職務経歴書の「資格・アウトプット」欄

URLと、作品名・使った技術を1行ずつ

履歴書の自由記述欄・本人希望欄

「ポートフォリオ:URL」と1行で

転職サイト・スカウトサービスのプロフィール

ポートフォリオ・GitHubのURLの入力欄に

転職エージェントへの事前送付

面談の前に、職務経歴書と一緒にURLを送る

職務経歴書のアウトプット欄の書き方は、エンジニアの職務経歴書の書き方で例文つきで解説しています。

面接でエンジニアのポートフォリオを見せる方法3つ

ポートフォリオは、面接で説明して初めて評価が固まります。面接官は、作品の説明を通して、技術の理解度と説明する力を確認するからです。

ここでは、面接でポートフォリオを見せるときの準備を3つ紹介します。

  1. 作品の説明を1分・3分の2パターンで用意する
  2. 技術の選び方と、つまずいた点の解決方法を説明できるようにする
  3. 画面共有でデモを見せられるよう、動作を確認しておく

たとえば、「なぜReactを選んだのか」「同時申込の処理で何に苦労したか」は、面接で質問されやすい内容です。答えに詰まらないよう、READMEの「工夫した点」を声に出して説明する練習をしましょう。

転職エージェントの面談でポートフォリオを見せる場合の準備は、転職エージェントの面談で聞かれることで解説しています。

ポートフォリオがない場合の代わりのアウトプット3つ

作品がまだ完成していない場合も、学習の記録を公開しておくと、学ぶ姿勢を示せます。採用担当者は、完成した作品だけでなく、学習を続けているかどうかも見ているからです。

ここでは、ポートフォリオの代わりになるアウトプットを3つ紹介します。

アウトプット

内容

始めやすさ

技術ブログ

学んだ技術やエラーの解決方法を記事にする

◎

GitHubの学習記録

教材の演習や小さなツールを公開する

◎

勉強会・ハッカソンへの参加

参加の記録と、作ったものを公開する

○

※◎:今日から始められる、○:開催日程に合わせて準備が必要

アウトプットを続けながら、未経験からIT職への転職の進め方は未経験からIT業界へ転職する方法で確認しておきましょう。

エンジニアのポートフォリオに関するよくある質問

エンジニアのポートフォリオについて、よくある質問をまとめました。

作り始める前の疑問の解消に役立ててください。

未経験でもエンジニアのポートフォリオは必要ですか?

未経験からエンジニアを目指す場合、ポートフォリオは用意しておくのがおすすめです。実務経験がない方にとって、技術力を示せる数少ない手段になるからです。

エンジニアのポートフォリオはどのくらいのレベルが必要ですか?

エンジニアのポートフォリオは、ログイン・登録・一覧表示など基本の機能が動き、作った目的と工夫した点を説明できれば十分です。機能の多さより、自分で考えた要素が入っているかが重視されます。

ポートフォリオはGitHubだけでもいいですか?

ポートフォリオはGitHubだけでも作れます。プロフィールREADMEに自己紹介と作品の一覧を書き、各リポジトリのREADMEで作品を説明すれば、1つのURLですべてを見てもらえます。

スクールの課題をポートフォリオに載せてもいいですか?

スクールの課題は、自分で考えた機能を加えたうえで載せるのがおすすめです。課題のままの作品は、ほかの受講生と同じ内容になりやすく、学習の到達度が伝わりにくいからです。

まとめ

  • ポートフォリオは、自己紹介・スキル・成果物2〜3個・連絡先で構成する
  • 作り方は、目指す職種を決める→作品を作る→GitHubで公開→READMEを書く、の順番
  • GitHubのプロフィールREADMEとGitHub Pagesを使えば、無料で公開できる
  • 作品ごとに、目的・使った技術・工夫した点を説明できるようにする

ポートフォリオの準備ができたら、未経験者の転職を支援するサービスの一覧から、応募書類の添削を受けられるサービスを選びましょう。

\ 職種・経験・年代から、自分に合う転職エージェントを探せます /

AI・IT転職に強いサービスを比較する

RECOMMEND

この記事を読んだ方へおすすめ