ITエンジニアのポートフォリオの題材を何にするか
ポートフォリオの題材は、前の仕事や身の回りの困りごとから選ぶのがおすすめです。
誰のどんな手間を減らすために作ったのかが最初から決まっているので、面接で作った理由を聞かれたときに、自分の経験として話せます。
順番は、作るものを先に決め、必要な技術とかかる時間はそこから逆算します。
「Reactを使いたいから何か作る」のように技術から入ると、作る理由が後付けになり、面接で深掘りされたときに答えに詰まりがちです。
困りごとがどうしても思いつかなければ、掲示板・クイズゲーム・診断コンテンツのような初学者向けの題材から1つ選んでも構いません。
その場合も、なぜその題材を選んだのか、誰に使ってほしいのかだけは決めておきます。
それだけで、教材をなぞった作品との違いを説明できるようになります。
前の仕事の困りごと
紙の台帳で受けていた予約、表計算ソフトで数えていた在庫など、前の仕事で手間がかかっていた作業はそのまま題材になります。
実際にその作業をしていた人にしか分からない不便さがあるので、作品の説明に具体性が出ます。
ただし、前の職場のコードや資料をそのまま持ち込むのはやめてください。
会社の発案で仕事として作ったプログラムは、契約などで別の定めがない限り、会社が著作者になります（著作権法 第15条第2項）。
前の職場の資料や顧客のデータは営業秘密にあたることもあるため（不正競争防止法 第2条第6項）、作品に入れるデータは自分で作ったサンプルの値にします。
身の回りの困りごと
学生の方や、前の仕事を題材にしにくい方は、家族の予定の共有や学習時間の記録など、毎日か毎週繰り返している手間から選べます。
繰り返しの多い作業ほど、作ったものを自分や家族が実際に使い続けられるので、改善点も見つかりやすくなります。
家族や知人の店・活動を題材にする方法もあります。
SiiDの受講生には、お母さんのネイルサロンのホームページを、ノーコードツールを使わず自分でコードを書いて作った経済学部の大学生がいます。
実際に使われる前提で作るので、誰のために作ったかを面接でそのまま話せます。
関連記事：文系大学生（男性）が完全未経験から医療系スタートアップのエンジニアインターンに内定した話
ポートフォリオを作り切る4つの手順
ポートフォリオは、機能と使う技術の絞り込み、画面とデータの設計、最小限の機能の実装、インターネットへの公開の順に進めます。
機能が決まらないと設計できず、設計が無いと途中で画面やデータを作り直すことになり、動くものが無いと公開できないためです。
手順1｜機能と使う技術の絞り込み
最初の版には、題材の目的に欠かせない機能だけを入れ、完成までの範囲を先に決めます。
必要最小限の機能で最初の版を出し、使ってもらいながら育てていく考え方をMVP（Minimum Viable Product）と呼びます。
紙の台帳で受けていた予約が題材なら、「予約を受ける機能」と「予約の一覧を見る機能」の2つがあれば最初の版になります。
僕は、最初の版を2〜3週間、遅くても1ヶ月で作れる範囲に機能を絞るよう勧めています。
作業できる時間が少ない方は、期間を延ばすより機能を減らすほうが完成に近づきます。
デザインの作り込みやほかの機能は、最初の版が動いてから足していきます。
使う技術は、応募したい企業が使っている技術に合わせるのが基本です。
求人票の「開発環境」や「使用技術」の欄を見れば確認できます。
僕が採用する側なら、未経験の方は技術力そのもので差がつきにくいので、使っている技術が自社と合っているかを「入社後に早く追いつけそうか」の目安にします。
そのうえで、ほかの応募者と違う工夫を入れたいなら、理由を説明できる技術を1つだけ足すくらいがちょうどいいです。
関連記事：ソフトウェア開発におけるMVPとは？ポートフォリオ作成におけるMVPの役割
手順2｜画面とデータの設計
コードを書く前に、作る画面の一覧と、保存するデータの項目を書き出しておきます。
仕事の開発でも、求める機能を決めてから設計に進みます。
先に書き出しておくと、作りながら画面やデータの持ち方をやり直す回数を減らせます。
データベースでは、データを「予約」「ユーザー」のような種類ごとの表（テーブル）に分けて保存します。
テーブル同士の関係はER図（データベースの設計図）にまとめ、READMEに載せておきましょう。
ER図があると、行き当たりばったりではなく設計してから作ったことが採用側に伝わります。
設計で決めたことと、そう決めた理由もREADMEの技術の欄に添えておくと、面接で技術を選んだ理由を聞かれたときにそのまま答えられます。
作り始める前に、次の3点を確認しておきます。
- テーブルの項目ごとに「この項目が無いと何が困るか」を言えるか
- 作成と一覧表示だけでなく、更新と削除をどう扱うか決めているか（他人のデータを書き換えられないか、消したデータにつながるデータをどうするか）
- 主に使われるのはパソコンかスマートフォンか、優先する画面を決めているか
手順3｜最小限の機能の実装
Webサービスの開発では、最初に大まかな全体の試作を作り、後から細かい画面や機能を作り込む進め方がよく取られます。
ポートフォリオでも、最初の版の画面がひととおり動く状態を先に作っておくと、途中で作業が止まっても応募に使える作品が手元に残ります。
Git（コードの変更履歴を記録するツール）を使い、機能を1つ足すたび、不具合を1つ直すたびに、変更を記録（コミット）してGitHubに送って（プッシュして）おきます。
いつ何のために直したかが残るので、面接の前に自分の作業を見返す材料になります。
手順4｜インターネットへの公開
作品をインターネットに公開すると、応募書類に作品のURLを書けるようになり、書類選考の段階で作品を開いてもらいやすくなります。
自分のパソコンの中だけで動く作品は、採用側から見ると動くかどうか確かめられない作品と同じです。
完璧でなくても、まず公開してから直していきましょう。
2026年11月時点では、HTML・CSS・JavaScriptだけで作ったサイトなら、公開リポジトリに置くことでGitHub Pagesを使って無料で公開できます。
一方、PHP（Laravel）などサーバー側で処理を動かすアプリはGitHub Pagesでは動かないため、Fly.ioやRenderのような、サーバー側の処理を動かせるサービスに公開します。
Fly.ioはLaravelの公開手順を公式に用意しており、RenderはDockerを使えばPHPのアプリも動かせます。
2026年11月時点で、Fly.ioには新規アカウント向けの無料枠がなく使った分だけの課金、Renderには制限付きの無料プランがあります。
料金は変わることがあるので、使う前に公式の料金ページで確認してください。
ログインが必要なアプリなら、採用担当者がすぐ触れるように、テスト用のアカウントを用意してREADMEに書いておきます（後で紹介するREADMEの項目の7番）。
AIで作ったポートフォリオは評価されるか
生成AIが書くプログラムの質は年々上がっていて、AIを使って作ったこと自体が評価を下げる時代ではなくなりました。
僕は、評価の軸がコードを「書けるか」から、AIを「使いこなして、出てきたものを正しく判断できるか」へ移りつつあると考えています。
その分かれ目は、作品の中に自分で説明できない行が残っていないかです。
面接では「この処理は何をしていますか」「なぜこのライブラリを選んだのですか」と踏み込んで聞かれます。
AIが書いたコードでも、どう確かめてどこを直したかを話せれば評価につながり、答えられなければ作品全体の信頼が下がります。
AIにコードを書かせただけで中身を説明できない作品は、AIを使ったことではなく、説明できないことで評価を落とします。
そのために、AIの答えはうのみにせず、出てきたコードを実際に動かして確かめ、そのまま使った箇所と自分で直した箇所を記録しておきます。
初学者のうちはAIを家庭教師のように使って仕組みを教わり、自分で判断できるようになってから作業を任せる、という順番がおすすめです。
そのうえで、API（ほかのサービスの機能をプログラムから呼び出す仕組み）やRAG（AIに資料を参照させて答えさせる仕組み）を使ってAIをアプリの機能として組み込めていれば、さらに加点になります。
SiiDの卒業生も、この順番の大切さを話しています。
1人は「自分で理解していないコードは絶対にコピー＆ペーストしない」と決めてAIを使っていて、もう1人は「バイブコーディング（AIに指示してコードを書いてもらう進め方）のようなやり方では表面的な知識しか身につかなくて」と振り返っています。
関連記事：文系大学生（男性）が完全未経験から7ヶ月でフロントエンドエンジニアになった話
関連記事：20代男性・塾講師（鹿児島県）が挫折を経て自社開発企業のITエンジニアに内定した話
関連記事：未経験からITエンジニアになるには？仕事内容や資格、勉強法を解説
GitHubでポートフォリオを見せる準備
ポートフォリオのコードは、GitHubの公開リポジトリに置いておきます。
応募書類には、GitHubのリポジトリのURLと、作品を開ける公開URLの両方を載せます。
採用担当者がワンクリックでコードも作品も確かめられるのは、選考する側にとって大きな利点です。
複数の作品を並べて見せたい場合は、GitHub Pagesのユーザーサイト（「ユーザー名.github.io」のURL）を使うと、作品一覧のページを1つ作れます。
ユーザーサイトはGitHubアカウントごとに1つです。
関連記事：エンジニア必見！履歴書にGitHubアカウントを載せるべき理由
READMEに書く内容
READMEは、多くの場合、リポジトリを訪れた人が最初に目にするファイルです。
僕がREADMEに入れてほしいと考えている項目は次のとおりです。
上から読むだけで作品の全体像がつかめる順に並べています。
- アプリの概要と作った理由（1〜3行）
- 画面のスクリーンショット（いちばん見せたい機能を上のほうに）
- 主な機能の箇条書き
- 使用技術（フロントエンド・バックエンド・データベース・インフラに分けて）と選んだ理由
- ER図
- 手元のパソコンで動かすための手順
- 公開URLとテスト用アカウント
- 工夫したところと、AIに任せた箇所（どう確かめ、どこを直したか）
画面の動きが魅力のアプリなら、操作の様子を録画してGIF（動く画像）にし、READMEに貼っておくと、静止画では伝わらない部分が数秒で伝わります。
プロフィールに出す内容
GitHubでは、自分のユーザー名と同じ名前の公開リポジトリを作り、そこにREADME.mdを置くと、その内容がプロフィールのページに表示されます（プロフィールのREADMEを管理する）。
簡単な自己紹介と、作品へのリンクを載せておくとよいでしょう。
2026年11月時点では、公開リポジトリなどを最大6個までプロフィールに固定して表示できます（プロフィールにアイテムをピン止めする）。
ポートフォリオのリポジトリを固定しておけば、プロフィールを開いた採用担当者がすぐたどり着けます。
公開前に外す内容
パスワードやAPIキー（外部サービスを使うときに本人確認に使う、パスワードのような文字列）を書いたファイルは、.gitignore（Gitで管理しないファイルを指定する設定ファイル）に名前を書いて、Gitの管理から外しておきます。
注意したいのは、すでにコミットしてしまったファイルは、.gitignoreに書き足すだけでは管理から外れないことです。
先に git rm --cached ファイル名 でそのファイルを管理対象から外してから、.gitignoreに書きます（ファイルを無視する）。
万が一パスワードやキーを公開してしまったら、最初に、そのキーを発行したサービスの管理画面でキーを失効させ、新しいものに取り替えてください。
リポジトリの履歴から消す作業はその後です（リポジトリから機密データを削除する）。
また、著作権は登録しなくても作った時点で発生します（著作権法 第17条第2項）。
登録の表示が無い画像や文章でも著作物なので、他人が作ったものを許可なく作品に載せないようにしましょう。
ITエンジニア面接で作品を説明する3つのポイント
ITエンジニアの面接では、作品の画面を見せながら、作った理由・技術を選んだ理由・つまずいて直した箇所の3つを話せるように準備します。
作品はすぐ開けるように、公開URLと、手元のパソコンで動く状態の両方を用意しておきましょう。
「まだ用意していません」「今サーバーが落ちています」は、面接では避けたい回答です。
自分で作った作品なのだから話せて当然、と思うかもしれません。
でも、SiiDの模擬面接で僕が作品について聞くと、作った本人でも、こだわった点や作った理由をうまく話せない方が少なくありません。
作れることと説明できることは、別の練習が必要です。
選考の分かれ目は作品の数ではなく、この説明の準備にあります。
関連記事：未経験でエンジニア転職を目指す方への面接NG回答例
関連記事：20代男性・フリーターが独学の限界を越えて8社内定しITエンジニアに転職した話
1. 作った理由を話すこと
最初の1〜2文で、誰のどんな困りごとを解決するために作ったかを話します。
前の仕事が題材なら、その作業にどれくらい手間がかかっていたかを、回数や時間で言えるようにしておきます。
そのうえで、作って分かったことと、最初の版から外して次に足したい機能まで話せると、作品を育てる視点があることが伝わります。
印象に残る答えと残らない答えの違いは、具体的な人と場面が出てくるかどうかだと、僕は考えています。
たとえば次の2つでは、聞く側の受け取り方が大きく変わります。
- 印象に残りにくい答え：「プログラミングの力をつけるために、予約管理アプリを作りました」
- 印象に残る答え：「前職の店舗では、電話で受けた予約を紙の台帳に書いていて、週に何度もダブルブッキングが起きていました。それをなくすために作りました」
2. 技術を選んだ理由を話すこと
使った言語やサービスについて、ほかに考えた候補と比べて、なぜそれを選んだのかを話します。
AIに任せた箇所は、READMEの8番に書いた記録をもとに、確かめ方と直した箇所を話します。
「教材で使っていたからです」とだけ答えると、技術を自分で選んだ経験が無いように聞こえます。
僕が面接官なら、続けて「ほかに候補は調べましたか」「今の作品をもう一度作るなら、同じ技術を選びますか」と聞くと思います。
教材の技術をそのまま使ったこと自体は問題ないので、その技術で作ってみて分かった長所と短所を話せるようにしておきます。
3. つまずいて直した箇所を話すこと
作る途中で出たエラーについては、エラーの内容、調べたこと、直した方法の順に話します。
そのためにも、つまずいた箇所と直し方を、エラーの文面や、試してうまくいかなかった方法と一緒にメモに残しておきましょう。
「エラーが出たので、AIに聞いて直しました」だけでは、何が起きていたのかを理解したかが伝わりません。
自分で原因を切り分けた過程まで話しましょう。
「エラーの文面から、データベースへの接続設定が原因だと考えて、設定ファイルと接続先を順に確かめたところ、環境ごとの設定が食い違っていました」のように、仮説と確かめた順番が話せると、仕事で問題に当たったときの動き方が想像できます。
ポートフォリオのよくある質問
ポートフォリオは何個作ればいい？
まずは1作品を最後まで作り切ってください。
応募に使える目安は、最初の版の機能がエラーなく動き、公開URLで誰でも触れて、READMEを読めば何のアプリか分かる状態です。
1つ作り切ると、自分に足りない技術や、ほかに解決したい困りごとが見えてくるので、2つ目で別の技術を使うのか、別の困りごとを解決するのかを決められます。
HTML・CSS・JavaScriptだけで作ったサイトも、応募に使えます。
ただ、Webアプリの開発職を目指すなら、データベースにデータを保存したりログインしたりできるアプリを1つは作っておくと、扱える範囲が伝わります。
1作品を作り切った後は、小さな作品を短い期間で作って数を増やしていく方法もあります。
スクールの課題で作った作品でもいい？
スクールの課題をもとにした作品も、ポートフォリオに載せられます。
課題から自分で変えた箇所があれば、変えた理由をそのまま作った理由として話せます。
ただ、同じスクールの卒業生は、似た技術と似た構成の作品で応募しがちです。
課題をなぞっただけの作品は、ほかの応募者と見分ける手がかりが無いので、印象に残りにくくなります。
題材を自分の困りごとに置き換えるか、手順1で書いたように理由を説明できる技術を1つ足すかのどちらかで、課題との違いを1文で言える状態にしておきましょう。
ポートフォリオを作るのにどのくらいかかる？
作るのにかかる期間は、最初の版に入れる機能の数と、1週間に作業できる時間で変わります。
最初の版は、手順1で書いた2〜3週間を目安に、その期間で作れるところまで機能を絞ってください。
僕自身、大学4年の就職活動ではエンジニア職に絞ってから2週間でポートフォリオを作り、それを持って面接に臨みました。
最初から大きな作品を目指すより、小さく作り切って公開し、そこから育てていくほうが早く応募に進めます。
作った理由を自分の言葉で話せる1作品から作り切ろう
ITエンジニア転職のポートフォリオは、技術の数より、作った理由と判断を説明できる1作品を先に作り切ることが大切です。
まずは自分や周りの困りごとを1つ書き出し、題材と、最初の版に入れる機能を決めるところから始めてみてください。
題材選びや学習の進め方に迷ったら、僕が代表を務めるAIプログラミングスクールSiiDの個別説明会で相談できます。
SiiDで学べることや受講スタイルに加えて、自分の年齢や経歴で転職を目指せるか、仕事と両立して学習できるかといった相談に、講師が答えます。
SiiDでは、AIツールを使いながらポートフォリオの企画・設計・開発を講師の添削を受けて進め、書類添削や模擬面接まで一続きで支援しています。
AIプログラミングスクール「SiiD」について
AIプログラミングスクール「SiiD」は、未経験からITエンジニア転職を目指す方向けのオンラインスクールです。
SiiDの特徴
- 現役エンジニアでYouTube登録者約13万人の「セイト先生」が代表兼主任講師
- 採用側の実務知見（2,000人以上の選考・150名以上のエンジニア採用）にもとづく指導
- 生成AIを取り入れた学習設計と、実務レベルのフルスタックWeb開発スキル
- Workship CAREER（株式会社GIG）と連携した無料の転職伴走支援
- 経済産業省認定のReスキル講座で、給付金の条件を満たせば実質105,600円〜
- 学割あり（35%オフ）
こんな方におすすめ
- 未経験・文系・社会人からITエンジニア転職を本気で目指したい方
- 独学に限界を感じている方
- 費用を抑えながら実務スキルと転職サポートを両立したい方
「未経験だから」とあきらめる必要はありません。採用する側を知り尽くしたプロが、給付金で負担を抑えながら内定まで伴走します。
