ポートフォリオ

新卒エンジニアはポートフォリオを作るべき?必要な理由や作り方を徹底解説!

「エンジニアとして新卒で就職する場合、ポートフォリオは必要?」
「Web系に就職したい場合、どのようにして作成したらいい?」

このように、新卒でWeb系エンジニアを目指す場合のポートフォリオ作成について迷われている方も多いのではないでしょうか?

ポートフォリオは新卒であろうと既卒であろうと就職時に必要となるものなので、内容や作り方について把握しておくことが重要です。

そこで、今回は以下の内容について解説していきます。

  • ポートフォリオを作る理由
  • ポートフォリオを作るメリット・デメリット
  • ポートフォリオの作り方

Web系エンジニア向けのプログラミングスクールを運営する弊社が、ポートフォリオ作成の重要性について解説していきますので、ぜひ参考にしてみてください。

ポートフォリオとは?

積み重なった本
らんてくん
らんてくん
そもそもポートフォリオってなんだっけ?

本来ポートフォリオとは、芸術業界で「自分が作ったものを集めたもの」という意味で使われます。

エンジニア業界でも似たような意味で使われており、具体的には以下のような意味合いになります。

  • 自主制作したサービスそのもの
  • 自分が開発に携わったサービスを集約したもの

新卒で就活の際に利用するのは、「自主制作したサービスそのもの」という意味でのポートフォリオになるので、自分で一から開発する必要があるということになります。

一般的に新卒は入社後に研修などで教育してもらえますが、なぜWebエンジニアの場合は新卒でもポートフォリオが必要なのでしょうか?

その理由をみていきましょう!

新卒でもポートフォリオを作るべき理由

ファイル

ポートフォリオを作るべき理由は、以下の通りです。

  • 新卒からWebエンジニアになりたい人が増えているから
  • 新卒で実務未経験の場合は教育コストがかかるから

それでは、詳しく解説します。

新卒からWebエンジニアになりたい人が増えている

Webエンジニアの数が増え、競争が激しくなったことが一つの理由として挙げられます。

らんてくん
らんてくん
そんなに数が増えたの?

数年前までは認知度が低かったこともあり、未経験からWebエンジニアを目指す人が少なかったですが、プログラミングの認知度アップや転職ブームの影響により、ここ2〜3年でWebエンジニアを目指す人が増えています。

インターンシップでさえWebエンジニアは競争が激しくなっているため、差別化のためにポートフォリオが必須という状況です。

らんてくん
らんてくん
人と違うところをアピールするために必要なんだね!

新卒で実務未経験の場合は教育コストがかかる

実務未経験者は就職後の教育コストがかかるため、企業側は書類選考時のポートフォリオで実力を判断する傾向にあります。

らんてくん
らんてくん
でも未経験でもなれるんじゃ?…

未経験者でもWebエンジニアになることは可能ですが、全くの未経験者をとるほど余裕のある企業も多くありません。

一般的には実践的な研修がある企業の方が少ないため、Web系エンジニアを目指す場合は、就職前の自己学習が必須になります。

研修が充実しているWeb系のメガベンチャー企業だと、さらに倍率が高くなります。

らんてくん
らんてくん
そうだよね!さすがに就職してから勉強するのだと遅すぎるよね!

とくにインターン経験がない方は実力を証明するものがないため、必ずポートフォリオを準備しましょう。

ポートフォリオを作るメリット

プレゼンする女性

それでは、具体的にはどのようなメリットがあるのか見ていきましょう。

ポートフォリオを作るメリット
  • 自分の価値をプレゼンできる
  • 書類選考やインターンに有利になる
  • 技術力の担保になる

自分の価値をプレゼンできる

なにより自分の価値をアピールできる点が一番のメリットと言えるでしょう。

らんてくん
らんてくん
ポートフォリオがあると価値が伝えられるの?

面接時には自分が企業に貢献できることを伝える必要がありますが、実態ないものをどんなに話しても相手は確証が得られません。

そこで、ポートフォリオを利用することで自分ができることを証拠とともに伝えられるため、自分の価値を最大限にプレゼンできます。

学校で学んできたことや経験してきたことをただ熱弁するより、一つの作品として提示した方が信憑性が増すため、口下手な人こそ活用すべきです。

らんてくん
らんてくん
口で言うより見せた方が早いってことね!

書類選考やインターンに有利

らんてくん
らんてくん
どうして書類選考で有利なの?

近年Webエンジニアの認知度が高まっているため、応募件数が多く、インターンの競争率も高くなっております。

そのため、数ある書類選考で勝ち抜くためにはプラスアルファで自分のアピールポイントが必要です。

そこで重要なのが「ポートフォリオ」です。

履歴書だけでは、数十件〜数百件の応募の中で目立つことができません。

しかし、ポートフォリオがあれば学歴関係なく書類選考に通れる可能性が高くなります。

とくにアピールできる経験や実績がない新卒であればなおさらポートフォリオで差別化する必要があるため、有利に就活を進めたい場合は必須アイテムとして捉えましょう。

技術力の担保になる

ポートフォリオを提示することで自分の技術力が嘘でない証明になります。

前述した通り、新卒にかかる教育コストは莫大なものなので、技術力の低い人は求められない傾向にあります。

エンジニア業界は実力社会であり、即戦力として働ける人材を求める企業も多いので、技術力を証明できる機会を逃すべきではないでしょう。

らんてくん
らんてくん
技術力は口で言うより見せたほうが伝わるよね!

ポートフォリオがないデメリット

おでこを抑える女性

反対にポートフォリオがないと、どのようなデメリットがあるのでしょうか?

考えられるデメリットは以下の通りです。

ポートフォリオがないデメリット
  • 判断材料が少なくなる
  • 面接が受けられない企業もある

判断材料が少なくなる

ポートフォリオがないと判断材料が履歴書のみとなるため、面接時に不利になってしまいます。

らんてくん
らんてくん
それはまずいね!…

一般的な企業であれば、履歴書のみでも良いかもしれませんが、専門職である限り実績や経験の提示が必要です。

  • 学歴
  • 資格
  • 経験

上記で勝負する自信がない人は、判断材料が少なく評価を受けづらくなってしまうため、希望する企業に就職できる可能性も低くなってしまうと言えるでしょう。

面接が受けられない企業もある

なかには面接が受けられない企業もあるため注意が必要です。

らんてくん
らんてくん
え!どうしてそんな企業が存在するの?

企業側からすると、以下のような人材を求めると考えられます。

  • 教育コストがかからない
  • 即戦力になる
  • 志望動機ややりたいことに根拠がある

前述した通り、応募件数が多く採用側の負担が大きいため、「ポートフォリオ有り」を面接条件にしているところもあります。

らんてくん
らんてくん
少しでも応募者を絞りたいんだね!

学歴フィルターがかけられることが一般的ですが、実力社会であることに変わりはないため、ポートフォリオも含めて判断されると思っておいた方が良いでしょう。

ポートフォリオの作り方

ウェブサイト

ポートフォリオを作成する理由やメリット・デメリットについて把握できたら、あとはポイントや注意点を意識して作り込むのみとなります。

ここでは、ポートフォリオの作り方について手順を解説していきます。

ポートフォリオの作り方
  1. READMEの作成
  2. 画面遷移図作成
  3. テーブル設計
  4. GitHubでissue化、開発開始

それでは、上記手順に沿って作ってみましょう。

READMEの作成

ポートフォリオの方向性が決まってきたら、サービスの説明書となるREADMEを書いてみましょう。

READMEとは?

READMEとは、ソフトウェア購入時に添付されているサービスの利用前に読んでおくべき内容が記載されたファイルのこと。

らんてくん
らんてくん
READMEを書く際のポイントはある?

実際にREADMEを書く際は、以下の項目をまとめましょう。

  • サービスの概要
  • 想定されたユーザー
  • ユーザーが持つ課題
  • 課題の解決方法

サービスを作るには、まずは「どのような人が持つどのような課題を解決したいのか」を考える必要があります。

ユーザーが何に困っているかを考えることで、解決方法が導き出せます。

ポートフォリオを作る第一段階として、まずはREADMEを書き、企画内容を整理しましょう。

画面遷移図作成

次に行うのは、デザインツールを用いたルーティングの設計と必要な機能の選定です。

らんてくん
らんてくん
どんなツールを使ったらいいかな?

「Adobe XD」「figma」とった無料で使えるものが初心者の方におすすめされるので、自分に合ったものを選ぶと良いでしょう。

ツールが決まったら、まずはデザインにこだわらず簡易的に画面遷移できるものを作ります。

画面遷移とは?

画面遷移図とは、画面が表示される順序や画面通りの関連性を図解したもの。

作成時のポイントは以下の通りです。

  • ユーザーが抱える課題を解決できる作りになっている
  • ユーザーが使いやすい導線づくりができている
  • 無駄な機能がない
  • ルーティングの設計が適切

見栄えや自分好みのものを作るのではなく、ユーザビリティを意識した作りになっているか確認しながら進めましょう。

テーブル設計

画面遷移図の作成ができたら、テーブル設計を行います。

テーブル設計とは?

テーブル設計とは、保存しておきたい情報を簡易的にまとめて図式化したもの。

作成時のポイントは以下の通りです。

  • 適切に正規化されたテーブル設計ができている
  • アソシエーションの設定に過不足がないこと

テーブル設計はあとから変えることが難しいため、あらかじめ内容を固めておきましょう。

GitHubでissue化、開発開始

ここまで終えたら最後に実装を行っていきます。

実装タスクをプルリクエストを行う単位に分けてGitHub Issueに登録し、開発を開始しましょう。

らんてくん
らんてくん
やるべきことを忘れないようにタスクとして管理するイメージだね!

GitHub Isuueに登録する際のポイントは以下の通りです。

  • Issueからタスクの実装内容がイメージできる
  • Issueからアプリケーションの機能がイメージできる

Issueにラベルをつけてタスク管理することで、適切かつスムーズに実装が進められます。

ポートフォリオは、このような手順を踏むことで独自のものが作れるため、ぜひ意識して作成してみてください。

さらに細かく知りたい人はこちらを参考にしてみてください。

Webエンジニアに就職するのに必要なポートフォリオの作り方
未経験Webエンジニア向けポートフォリオの作り方【転職で役立つ】未経験者からWebエンジニア転職を目指す方向けのポートフォリオの作り方を、実際のRUNTEQ受講生の例を交えてご紹介。ポートフォリオが転職活動に必要な理由・作成のメリット・デメリットなどの基礎的な知識から、READMEや画面遷移図などの具体的な開発の手順、就職活動で使える数字を意識した実績の作り方などの実践的な内容まで、プログラミングスクール運営で培ったノウハウをすべてお届けします。情報は随時更新中です。...

ポートフォリオ作成のポイント

スマホ画面

ポートフォリオ作成の手順が把握できたら、3つのポイントを抑えておきましょう。

作成時のポイントは以下の通りです。

ポートフォリオ作成のポイント
  • 需要ある作品にする
  • コードを綺麗に整える
  • 使いやすさを意識する

需要ある作品にする

需要ある作品をつくることが一番のポイントと言えるでしょう。

なぜなら、ポートフォリオの作品として多く見られるのが既存サービスのクローンだからです。

  • TwitterやInstagram
  • フリマアプリ
  • 架空会社のコーポレートページ
  • LP
  • 画像診断アプリ

上記のようなサービスはプログラミングスクールの多くが最終課題として扱うため、ポートフォリオとしている人がたくさんいます。

らんてくん
らんてくん
みんな似たようなポートフォリオになるんだね!

企業側としては、「どのような思いや考えがあってそのサービスを作ったか」が知りたいので、コピー作品のようなものは見飽きている場合が多いです。

前述した通り、ポートフォリオ作成は企画を練るところから始まるので、一から独自のサービスが作れると良いでしょう。

コードをキレイに整える

動作が正常に機能することはもちろん、コードがキレイに整えられているかも重要です。

らんてくん
らんてくん
エラーが出る状態はもってのほかだね!

サンプルコードを少しいじっただけのものや見づらいコードは提出物としては適さないため、整えて作ることがおすすめです。

使いやすさを意識する

ポートフォリオとなると凝ったものを作りがちですが、ユーザー重視で作ることが重要なため使いやすさを意識するのがポイントです。

らんてくん
らんてくん
デザインばかりこだわっててもダメなんだ!?

どんなにデザインが良くても動作が重かったり、使い方が分かりづらいとユーザー目線で作れているとは言えません。

  • どこを押したらいいか分からない
  • どのようなことが解決されるサービスか分からない

上記のように「?」が生まれないようにするために、使いやすさも考慮して作ると良いポートフォリオとなるでしょう。

就職前に必要な準備

学生二人
らんてくん
らんてくん
ポートフォリオもそうだけど、就職前の準備はいつからやるといいの?

ずばり、就職前の準備は早ければ早いほど良いでしょう。

新卒で就職活動をするとなると、

  • 大手の求人媒体に応募
  • 合同企業説明会に行く

このようなイメージがありますが、一括採用をしている企業では学歴フィルターがかけられることが多いので、競争が激しい状態です。

そこで別ルートとしておすすめなのが、「インターンを活用した方法」です。

らんてくん
らんてくん
インターンって、就業体験や研修のイメージだけど実際どうなの?

インターンには3種類あり、

  • 1Day
  • 短期
  • 長期

上記のなかでも、長期インターンがおすすめです。

長期インターンはバイトのような扱いになるため、お金をもらいながら開発・実務経験を積むことができます。

しかし、Web業界ではインターンの競争も激しいため、事前に準備しておくことが重要です。

らんてくん
らんてくん
具体的にはどんなことをしたらいいの?

インターン前には、「プログラミング学習1,000時間とポートフォリオ作成」が必要です。

実際には、インターンでも学歴が見られることが多いので、自信がない人ほどポートフォリオ作成に力を入れるのがおすすめです。

大学1・2年生の場合

大学1・2年生の場合は、以下のようなステップを踏むことになります。

  1. プログラミング学習
  2. ポートフォリオ作成
  3. インターンに入る

インターンの期間が長いとエンジニア経験が長いと判断されるため、このパターンが一番エンジニアになれる可能性が高くなります。

そのため、なるべく早く学習とポートフォリオ作成を終え、インターンを始めることがおすすめです。

らんてくん
らんてくん
やっぱり経験年数が大事なんだね!

大学3年生の場合

大学3年生の3月以前の場合、1・2年生の時と同様にプログラミング学習→ポートフォリオ作成→インターンという流れになりますが、ギリギリだと経験年数が積めないため、そのままインターン先に就職するケースが多いです。

3月移行の場合は、内定をもらった後にインターンのオファーが来るケースが多いため、卒業までに経験を積むことになります。

らんてくん
らんてくん
内定後もインターンがあるんだね!

企業側としては、インターンで実力や成長度合いを判断できるため、安心して採用できるというメリットがあります。

RUNTEQ卒業生でも後者のパターンが多いため、諦めずに最後まで取り組むことが大切と言えます。

大学4年生の場合

大学4年生で在学中に内定をもらった方は、軽くインターンをして経験を積んだのちに就職という流れになりますが、就活が間に合わなかった場合は既卒での入社となります。

プログラミング学習が終わるかが鍵になるため、早く内定を決めたい方はなるべく早めに学習しておくことをおすすめします。

まとめ

以上、新卒でWebエンジニアを目指す際のポートフォリオ作成について解説しました。

今回の記事のまとめ
  • ポートフォリオは他者との差別化や自分のアピールポイントとなるため必ず作るべきである
  • ポートフォリオがない場合、判断材料が少なくなるため就活で不利になってしまう
  • 企画から構成、実装までの手順を意識して早めに取り掛かることがおすすめ

Webエンジニアの認知度が高まっていることから、企業への応募数が多くインターンを含めて競争が激しくなっているのが現状です。

他者と差別化して自分の実力をアピールするためにも、ポートフォリオを作成しておくことが重要です。

プログラミング学習と同様に、早めの準備が就活をスムーズに進める秘訣でもあるので、大学1・2年生のうちから計画的に取り組むと良いでしょう。

弊社では、開発現場が求めるエンジニアになるためのプログラミングスクール「RUNTEQ」を運営しております。

RUNTEQではポートフォリオの開発を積極的にサポートしています。RUNTEQ卒業生が作ったポートフォリオの事例をまとめておりますのでぜひ参考にしてみてください。

https://runteq.jp/blog/category/programming-career/portfolio/

この記事を読んで少しでもWebエンジニアに興味を持った方は、ぜひ無料のキャリア相談会へ足を運んでくださいね。