Progateを3周したのに、いざ「自分で何か作れ」と言われると手が止まる。
その壁にぶつかったのは、私だけではないはずです。
経済学部卒の私が独学6年かけてIT企業に入社するまで、ポートフォリオは人生の転換点になりました。就活で応募28社・内定2社。ポートフォリオが見事に「文系でもエンジニアやれる」という証明になった体験を、すべて記録します。
- ポートフォリオを作る前の準備（技術選定・公開方法）
- ポートフォリオ制作の5ステップ（体験ベース）
- 制作手段別のメリット・デメリット比較（HTML/CSS/React/WordPress）
- 就活で評価されるポートフォリオの条件
- 初心者がやりがちな3つの失敗と対策
ポートフォリオを作る前に知っておくべき3つのこと
ポートフォリオの前に、押さえておくべき基本が3つあります。これを知らないと「作っては消す」の繰り返しになります。
ポートフォリオとは何か
ポートフォリオとは、自分の技術力と作成実績を証明するWeb上の作品集です。プログラミングの場合、作ったアプリやウェブサイトのURL、ソースコード、技術的な判断理由をまとめて公開します。
企業はポートフォリオを見て、「この人が実際に何を作れるか」を判断します。資格や学歴よりも、実物を見たほうが正確だからです。
独学者にポートフォリオが必須な理由
独学者には「学校で体系的に学んだ」という裏付けがありません。そこでポートフォリオが「独学でもこれくらい作れる」という客観的な証拠になります。
実際、経済学部の友人に「なんでエンジニア？」と聞かれるたびに口頭で説明していましたが、ポートフォリオのURLを貼ったらそれだけで伝わりました。
ポートフォリオは「できる」という主張を「見せる」に変えるツールです。
どんな技術を使えばいいか
結論から言うと、自分が作りたいものを選ぶべきです。ただし就活でよく見られる組み合わせに傾向はあります。次のセクションで手段を比較します。
公開方法の一覧比較
作ったポートフォリオを公開する方法を、用途別にまとめました。
| 手段 | 対象 | 費用 | 難易度 | おすすめ度 |
|---|---|---|---|---|
| GitHub Pages | 静的サイト | 無料 | 低 | ★★★★★ |
| Vercel | 静的サイト・Next.js | 無料プランあり | 低 | ★★★★★ |
| Netlify | 静的サイト | 無料プランあり | 低 | ★★★★☆ |
| Render | バックエンド付き | 無料プランあり | 中 | ★★★★☆ |
| Heroku | バックエンド付き | 有料（無料プラン終了） | 中 | ★★★☆☆ |
| さくらのVPS等 | 何でも | 月1,000円〜 | 高 | ★★★☆☆ |
最初のポートフォリオならGitHub PagesかVercelがおすすめです。無料・デプロイが簡単・カスタムドメインも設定できます。
ポートフォリオ制作手段の比較（HTML/CSS／React／WordPress）
作る内容によって使う技術を選びます。私が実際に使った経験から、代表的な手段のメリット・デメリットを整理しました。
HTML/CSS/JavaScript（静的サイト）
最も基礎的な手段です。サーバー不要、ブラウザだけで動きます。
- 無料で公開しやすい（GitHub Pagesなど）
- 基礎力がしっかりつく
- 重い処理が不要なLPや自己紹介サイトに最適
- 動的な機能（ログイン・DB連携）が作れない
- ページ数が増えるとメンテナンスが大変
React / Next.js（フレームワーク）
モダンなWebアプリ開発の標準的な選択肢です。
- インタラクティブなUIが作りやすい
- 企業の技術スタックと近い
- Next.jsならSSR/SSGでSEOにも強い
- 学習コストが比較的高い
- ビルド手順や依存関係の理解が必要
WordPress（CMS）
ポートフォリオサイト自体をWordPressで作る方法です。
- 記事追加が楽（ブログ兼ポートフォリオ）
- テーマを選べばデザインである程度見栄えがする
- クライアント作業の受注にもそのまま使える
- サーバー契約・ドメイン取得のコストがかかる
- セキュリティ维护が自分持ち
- 「WordPressでポートフォリオを作った」だけでは技術アピールにならない
Python（Flask / Django）
バックエンド中心の開発をしたい場合の選択肢です。
- データ分析・AI連携のポートフォリオに最適
- Flaskは小規模、Djangoは大規模に強い
- フロントエンドの知識も別途必要
- 公開にバックエンドサーバーが必要
私の経験: 最初はHTML/CSSのLPから入り、次にReactのWebアプリを作りました。2本目で技術の幅を示せたのが、就活で効いたと感じています。
ポートフォリオ作成の5つのステップ（私の体験ベース）
私が実際にポートフォリオを作ったときのステップを、そのまま共有します。この順番で進めれば、迷わず作れます。
-
テーマを決める「何を作るか」を1本に絞る。課題意識があるテーマが長続きする
-
技術スタックを選ぶ作りたいものに合わせて言語・フレームワーク・公開手段を決める
-
プロトタイプを作るまず動くものを作る。デザインは後回しでいい
-
公開とドキュメント作成GitHubに上げ、READMEに構成・技術選定理由・起動方法を書く
-
振り返りと改善「何 Learned か」「次はどう改善するか」をREADMEかブログに記録する
ステップ1: テーマを決める（課題起点で選ぶ）
「何か面白いもの作ろう」では続かないので、自分が実際に困っていることをテーマに選びます。
私の場合、高校2年のときゲームMODを作りたいという動機でPythonを独学し始めました。その後、「大学の授業でExcel集計が面倒」と感じたことをきっかけに、Pythonで自動集計ツールを作りました。これが最初のポートフォリオになりました。
ポイント: 自分の生活や学習の中で「これ手間だな」と思ったことが、最高のテーマになります。実用性があるからこそ作りきれます。
ステップ2: 技術スタックを選ぶ
テーマが決まったら、それを作るための技術を選びます。以下の基準で決めました。
- 学習中で扱ったことのある言語を選ぶ（無理して新しい言語は選ばない）
- 公開方法まで考えて選ぶ（静的か動的か）
- 就活を意識するなら、企業の募集要項でよく見るスタックを選ぶ
私の場合は、1本目がHTML/CSS/JavaScript、2本目がReact + Firebaseでした。どちらもUdemyの講座で学んだ後に自分で拡張しました。
ステップ3: プロトタイプを作る（まず動くもの）
デザインは後回しで、まず機能だけ作ります。Progateを3周したあと「自分で何も作れない」と感じた私が、最初に 깨달은のは「チュートリアルと同じことを、チュートリアルなしで再現する」ことの重要性でした。
具体的には、Udemyの講座を1本終えたあと、動画を一度も見ずに同じものを作ることを習慣にしました。これが「写経」と「オリジナル開発」の間にある溝を埋める一番早い方法でした。
プロトタイプは「汚くていい」ので完成させましょう。中途半端に10個作るより、1つを「動く状態」まで持っていくことが大切です。
ステップ4: 公開とドキュメント作成
作ったアプリを公開し、GitHubでソースコードを管理します。
READMEには以下の情報を必ず書きました。
- このプロジェクトで解決した課題
- 使った技術スタックと選定理由
- ローカルでの起動方法
- 改善ポイント（今後の課題）
技術的な選定理由を書くことは、面接で「なぜこの技術を選んだんですか？」と聞かれたときの準備になります。
ステップ5: 振り返りと改善
完成したら「何を学んだか」を記録します。私はNotionに学習ログをつけていて、以下を記録しました。
- 学習にかけた時間（Notionログのタイマー記録に基づく）
- つまずいたポイントと解決方法
- 次に活かせる知見
この記録が、就活の自己PRで具体数を出すときの根拠になりました。「独学6年」という数字自体は長いですが、「どの教材に何時間かけたか」まで言えると、説得力が段違いです。
私のポートフォリオ実体験：Progate3周の壁から就活まで
ここからは、私が実際に経験したポートフォリオの軌跡を、等身の数字で記録します。
Progate3周しても「自分で何も作れない」壁
Progateを3周するまでは順調でした。問題なくクリアできるし、学んだ気になります。
しかし「では自分で何か作ってください」と言われて、真っ白な画面の前に1時間座り込んだことがあります。写経はできるけれど、ゼロから設計する力が身についていなかったのです。
この壁を破るためにやったのは、前述した「チュートリアルを再現する」訓練です。まず手を動かす量を増やし、そこから少しずつオリジナルの要素を足していきました。
長期インターンでのGit大失敗
3年生のとき、長期インターンで初めてチーム開発を経験しました。個人開発では気づけないスキルが大量に必要になることを、痛いほど痛感しました。
具体的には、Gitのブランチ管理でマージコンフリートを多発させました。個人で使っている分には問題にならなくても、複数人になると「mainを頻繁にpullする」「小さい単位でコミットする」「レビューを受けてからマージする」といった運用ルールが重要だとわかりました。
この失敗は、ポートフォリオのREADMEに「チーム開発で学んだこと」として記録しました。失敗を隠さず書くことも、ポートフォリオの価値になります。
就活でポートフォリオが差になった
就活の結果は応募28社、内定2社でした。決して多くはない内定数ですが、ポートフォリオがあったことで「文系なのにエンジニア？」という質問に具体的な答えを出せました。
ほぼ全ての面接でポートフォリオのURLを伝え、実際に画面を見ながら説明しました。面接官がポートフォリオを指して質問してくれる場面が多く、ポートフォリオが会話の起点になるのがわかりました。
私の教訓: 「作りました」ではなく「作って公開して、READMEに記録した」までやって初めて、ポートフォリオとして成立します。
就活で評価されるポートフォリオの条件
私が面接で実際に聞かれたことと、他のエンジニア志望者のポートフォリオを見て感じたことをまとめます。
評価されるポートフォリオの特徴
- 「何を解決したか」がREADMEの1行目に書いてある
- 技術選定理由が書いてある
- 動くデモURLが貼ってある（ソースコードだけではない）
- Gitのコミット履歴が綺麗（または改善プロセスが見える）
- 「次やるならここを改善する」という反省がある
評価されないポートフォリオの特徴
- ProgateやUdemyのチュートリアルをそのまま載せている
- READMEがない、または一行だけ
- 技術スタックの選定理由が書かれていない
- 完成品が公開されておらず、ZIPファイルのダウンロードだけ
- エラーが出るままの状態
ポートフォリオの数 versus 質
結論から言うと、質の高い作品を2〜3個が現実的です。
私は最初の就活で3本提出しました。数は少なくても「何を解決したか」「どんな技術を選んだか」「何 Learned か」が明確な作品のほうが、面接官の記憶に残ります。
10個の中途半端な作品より、2個の「作りきった」作品のほうが評価されます。
よくある質問
最初のポートフォリオ制作に約2ヶ月かけました。Progate修了後、自分で何も作れない状態からのスタートです。1ヶ月目でHTML/CSSのLPを作り、2ヶ月目でReactのWebアプリを作りました。
作れます。ただしProgateやドットインストールを修了しただけでは、自分で一から作る力がつかないのが現実です。チュートリアルを1本やりきってから「同じ機能でいいので自分で最初から書く」ことをおすすめします。
静的サイトならGitHub PagesかVercelが無料でお手軽です。データベースを使うアプリならRenderやFly.ioが無料プランあります。Herokuは2022年に無料プランが終了したので注意してください。
応募28社のうち、ほぼ全ての面接でポートフォリオについて聞かれました。文系卒でコンピュータサイエンスの専門教育を受けていない分、ポートフォリオが「実際に作れる証拠」として機能しました。内定2社が出たときも、面接官がポートフォリオを指して質問してくる場面が複数ありました。
質の高い作品を2〜3個が現実的だと思います。私は最初の就活時点で3本提出しました。数は少なくても「何を解決したか」「どんな技術を選んだか」「何を学んだか」が明確な作品のほうが評価されます。
おすすめの教材（私が実際に使ったもの）
以下の教材は、私が実際にポートフォリオ制作で使ったものです。使っていない教材は紹介しません。
Udemy（実践的なWeb開発講座）
Progate卒業後、ポートフォリオの土台をつくったのはUdemyの講座です。特に以下の講座が役立ちました。
Udemy でプログラミング講座を検索する（アフィリエイトリンクを含む場合があります）
講座を選ぶ基準は、「最終課題でオリジナルアプリを作る」構成になっているかです。写経だけの講座は、ポートフォリオ制作にはつながりにくいので注意してください。
コメント