【完全ガイド】未経験エンジニアにポートフォリオは必要？評価される15のポイントと優先順位

エージェントは複数登録が基本。カウンセリングで業界知識も深まります。

未経験エンジニアにポートフォリオは本当に必要？

「未経験からエンジニアに転職したいけど、ポートフォリオは本当に作らないとダメ？」「作るなら、面接官はどこを評価するの？」——そんな疑問を、この記事1本で解決します。

ネットには「ポートフォリオは必須」という意見もあれば、「未経験でも不要」という意見もあります。結論から言うと、高学歴・高職歴がない実務未経験者にとって、ポートフォリオはほぼ必須です。ただし、15項目すべてを盛り込んだ神レベルの作品を作る必要はありません。

この記事では、①そもそも必要なのか、②面接官に評価される15のポイント、③何から取り組むべきか、の順に解説します。極端な不要論や完璧主義に振り回されず、転職につながる「ちょうどいい1本」を完成させましょう。

【そもそもポートフォリオとは？】
IT転職におけるポートフォリオとは、自分の実力や実績を示すために作るオリジナルのWebサイトやアプリです。職務経歴書だけでは伝わらない「作れる力」を見せる名刺だと考えてください。

未経験エンジニアがポートフォリオを作るべき理由2つ

理由①：未経験者が「実力」を証明できる唯一の武器だから

実務経験がない人は、エンジニアとしての実力を職歴で証明できません。
面接で「プログラミングを一生懸命勉強しました」と伝えても、採用担当者は言葉だけでは評価できないのです。

そこで効くのが、実力を証明する成果物＝ポートフォリオです。成果物を見れば、どれほど熱量を持って勉強し、何を作れるのかが伝わります。「未経験からエンジニアになりたい」という大勢のライバルから選ばれるには、セールスポイントと、それを裏付けるアウトプットが必要です。

すでにエンジニアとして実務経験がある場合は、ポートフォリオ不要の面接も多いです。オリジナルアプリではなく「どんな仕事をしてきたか」という質疑応答で実力を測れるからです。

理由②：作る過程で「実装力」が一気に伸びるから

ポートフォリオは就職のために見せるだけのものではありません。作ること自体に、実装力が飛躍的に上がるメリットがあります。自分でテーマを決め、分からない技術を調べ、エラーを解決して公開するまでの経験は、教材を読むだけでは得られません。

プールに入らず教本ばかり読む水泳部や、ピアノを弾かず教本ばかり読むピアニストが試合や演奏で力を出せないように、コードを書かないエンジニアも実務では苦労します。最も効率の良い実力の獲得方法は、自分でアプリを作ること。これは転職前でも転職後でも変わりません。

「ポートフォリオ不要論」が語られる本当の理由

では、なぜ「ポートフォリオはいらない」と語られるのでしょうか。不要論には、大きく2つのパターンがあります。

理由①：ポートフォリオなしでも価値を証明できる人がいるから

たしかに、次のような人はポートフォリオなしでも自分の価値を証明できる可能性があります。

・高学歴
・高職歴
・新卒

有名大学や有名企業の経歴、新卒という育成枠の強みがあれば、「育成する価値がある」と別の材料で判断してもらえます。その成功例だけを見て、すべての未経験者に不要だと一般化するのは危険です。裏を返せば、学歴や職歴で証明できない人ほどポートフォリオが重要になります。

理由②：SES営業のポジショントークだから（要注意）

もう一つ注意したいのが、「実務未経験歓迎」をうたう一部のSES企業による不要論です。悪質な企業では、次のようなスキームが使われることがあります。

❶「弊社ならポートフォリオがなくてもエンジニアになれますよ」と人を集める
❷「エンジニアに必要な営業力を身につけましょう」と無関係の営業職に回す
❸いつまでもエンジニアになれず、搾取され続ける

「そもそもエンジニアにさせるつもりがないから、ポートフォリオは不要」というケースです。「作るのが面倒だから」という理由で甘い言葉に飛びつかず、本当に開発業務へ就ける企業なのかを確認しましょう。

「神レベルのポートフォリオが絶対必要」論にも要注意

不要論とは逆に、「極端にレベルの高いポートフォリオが絶対に必要」という意見にも注意が必要です。そう主張するサロンやスクールの運営者には、制作期間を長引かせ、在籍期間と学費を増やしたい利害がある場合もあります。

まずは「それなりのポートフォリオ」を完成させて「それなりの会社」に就職し、早く実務経験を獲得するのが正解です。スター企業は、その後の転職で目指せます。

もちろん「それなりの会社」ならどこでも良いわけではありません。1社目を選ぶ基準はエンジニア1社目の転職先の選び方Top5も参考にしてください。

フロントエンドのポートフォリオで評価されるポイントTop15

必要性が分かったら、次は面接官が見る場所を押さえましょう。そこを外すと、時間をかけても評価されません。上位ほど重要なランキング形式で紹介します。

1位：バグがない｜まず「開いた瞬間」で判断される

基本中の基本ですが、最重要です。アプリを開いた瞬間にレイアウトが乱れていると、それだけで中身を見てもらえない可能性があります。最低でもChromeとSafariで動作を確認しましょう。

2位：直感的に使える｜説明書なしで触れるか

面接官は忙しいです。使い方の説明を添えても、読まれない前提で考えましょう。次に何を押せばいいか分からないアプリは、興味を持ってもらえません。

3位：オリジナリティ｜「何を作らないか」で差別化する

メルカリクローンや普通のタスク管理アプリだけでは差別化できません。ポイントは、用途や機能をあえて絞ることです。

・主婦専用のフリマアプリ
・ITの勉強専用のタスク管理アプリ

差別化で大切なのは「何をするか」だけでなく「何をしないか」です。

4位：axiosで非同期通信ができる

axiosは非同期通信ライブラリです。楽天トラベルAPIから旅館情報を取得するように、外部サーバーからデータを取得して画面へ描画できることは、フロントエンド開発で必須です。

5位：Reactを使っている

Reactを使えば、非同期で取得したデータを画面に表示しやすくなり、コードの管理もしやすくなります。快適なUI/UXにもつながります。「なぜVueやAngularではなくReactなのか」は、フロントエンドフレームワークはReactを選ぶべき理由で解説しています。

6位：TypeScriptを使っている

TypeScriptは型やスペルのミスを検出し、コードの保守性と可読性を高めます。型定義はAPI仕様書のようなドキュメントとしても役立ちます。

7位：モジュールバンドラーをカスタマイズしている

具体例はNext.js・Vite・webpackです。create-react-appの初期設定だけで終わらず、目的に応じて構成を選んだり移行したりした経験があれば評価されます。技術名を並べるだけでなく、選定理由も説明できるようにしましょう。

8位：UIコンポーネントライブラリを使っている

具体例はMaterial-UIやBootstrapです。管理画面ではライブラリ、ユーザー画面では純粋なCSSが使われることも多いため、両方の経験があると評価されます。

9位：ESLintとPrettierを導入している

ESLintはスペルや文法のミスを指摘し、Prettierは改行位置などを整えてコードの一貫性を保ちます。複数人が同じルールで書くチーム開発には欠かせません。

10位：Jestでテストを書いている

Jestはコードのミスを自動で検出します。テストは「アプリの仕様書」にもなり、新しく参加した人と認識を共有しやすくなります。

11位：huskyで自動チェックしている

huskyを導入すると、コミット前にESLintやテストを自動実行できます。「エラーがあるままコミットした」というミスを防ぎ、コードの品質を保てます。

12位：Firebaseでバックエンドも触っている

Firebaseを使えば、サーバーサイド言語を扱えなくてもAPIを開発できます。JavaScriptを中心にタスク管理アプリなどを完成させつつ、バックエンドの知見も身につけられます。

13位：GitHub Actionsで自動デプロイしている

GitHub Actionsを使えば、プッシュしたタイミングでアプリを自動公開できます。サーバーへログインして手作業でアップロードする手間を削減できます。

14位：AWS／GCP上でアプリが公開されている

Herokuやレンタルサーバーでも公開できますが、AWSやGCPなど実務で使われるクラウドの経験があると加点になります。ただし、公開先より先にアプリの完成度を上げましょう。

15位：Dockerで開発している

Dockerを使うと、アプリごとに異なるNode.jsなどのバージョンを分離できます。フロントエンドエンジニアが環境をゼロから構築する機会は多くありませんが、Docker上で作業し、コンテナに入ってサーバーを立ち上げる程度はできると良いです。

全部いる？ポートフォリオの優先順位

15個すべてを最初から完璧にする必要はありません。上位ほど「ないと減点」、下位ほど「あると加点」と考え、次の順番で仕上げましょう。

① 最優先：1〜3位（バグなし・直感的・オリジナリティ）
② 次に対応：4〜6位（非同期通信・React・TypeScript）
③ 余力で加点：7〜15位（開発環境・テスト・CI/CD・インフラ）

①は技術力以前の最低ラインです。まず、説明なしで使えて最後まで正常に動くオリジナルアプリを完成させます。次に、②でフロントエンドの実装力を示します。③は応募先の求人票を見て、求められる技術から選ぶのが効率的です。

技術を増やして未完成になるより、上位6項目を満たす1本を公開するほうが評価されます。

応募前の最終チェックリスト

□ 公開URLを開くとエラーなく表示される
□ ChromeとSafari、スマートフォンで操作できる
□ 説明書なしでも主要機能を使える
□ 誰のどんな課題を解決するアプリか説明できる
□ 外部データの取得・表示ができる
□ ReactとTypeScriptを使った理由を説明できる
□ READMEに概要・機能・技術選定・起動方法がある
□ GitHubのコードと公開アプリを面接官が確認できる