エンジニア志望者がポートフォリオを作るべき理由と作り方を解説【就職を目指す大学生必見】

【大学生向け】エンジニア志望者がポートフォリオを作るべき理由と作り方を解説

エンジニア志望者はポートフォリオを作成すべきってよく言われているけど、なんでですか?
ポートフォリオってどんなものを作ればいいんですか?
作り方まで小学生でも分かるように具体的に解説して下さい!!

こんな悩みに答える記事になっています。

情報系出身者などであれば話は別ですが、文系・未経験からのエンジニア志望の場合はポートフォリオは必須と思ってもらっていいでしょう。

maipyon

また、フリーランスなど、個人で仕事を取りたいと思ったときは、全員必須になってくるものですね。

ただ、このポートフォリオ、作り方があんまり載ってないんですよね・・・。

ということで今回の記事では

この記事の内容
  • エンジニア志望者がポートフォリオが大切な理由
  • ポートフォリオの作成手順
  • ポートフォリオの内容についてのアドバイス

上記の内容について現役エンジニアの視点から紹介していきます。

ポートフォリオ内容のアドバイスについては、知らないと損をするレベルなので、ぜひ最後まで読んでみてください。

この記事を読めば、ポートフォリオの重要性を知り、そのままポートフォリオ作成の流れまでスムーズに持っていけますので、必見です。

エンジニア志望者がポートフォリオを作るべき理由

ポートフォリオを作るべき理由をサクッと解説していきます。

ポートフォリオを作るべき理由は、主に以下の3つ。

ポートフォリオを作るべき理由

  • ポートフォリオ=自分のスキル証明になる
  • 面接で評価されるためのカギとなる
  • 面接でポートフォリオについて質問される

maipyon

どれも重要なので、一つずつ解説していきます!

ポートフォリオ=自分のエンジニアとしてのスキル証明になる

ポートフォリオはもちろん資格ではありません。

しかし、自分は〇〇ができます!と証明するための資格のような働きをしてくれます。

  • このポートフォリオのレベルのサイトを作れるんだな
  • ポートフォリオの制作物を見る限り、この人はこんなスキルを持っているんだな

というような感じで、形として見せたほうがスキルレベルってわかりやすいんですよね。

同じスキルレベルでも発想力やデザインの違いが出てくるため、あなたの良さが一発で伝わります。

maipyon

3級程度の資格よりも、ポートフォリオがある人の方が「おっ!」と思えますね。

ポートフォリオが面接で評価されるための鍵となる

情報系の学科など、専門的に学習してきた学生でさえポートフォリオを見せる大学生は少数です。

だからこそ、ポートフォリオを見せることができれば大きな差別化を図れるんですよね。

履歴書も当然ポートフォリオがあればかなり楽に埋まります。

ポートフォリオのURLや作成しようと思った理由、苦労した点などを書いていれば勝手に埋まっていきます。

maipyon

大学生活中アクティブに活動した人でさえ周りと同じになりがちな履歴書。
でもポートフォリオの事なら確実にあなた1人だけの内容になります!

面接でポートフォリオについて質問される

面接でポートフォリオについて質問される

ポートフォリオを見て、苦労した点や作成理由、使った言語やツールなどを色々聞かれます。

面接時間がそれで埋まった・・・という人も中にはいるようです。

サービス開発をした内容だと、特に聞かれるのは

  • 何故作ろうと思ったのか
  • 目玉機能はどこか

ですね。

例えばですが、「いつも行っているバイトのシフト管理で店長が悩んでいるので、シフトを入れ込めるシステムを作った」とかですと、他に頑張っていることと絡められます。

上記の感じですと、「面接のためのポートフォリオ」感がでなくて好印象ですね。

プログラミングは結局問題解決のためのスキル。

「解決方法や解決のためのプロセス」を見られるので、作成理由がしっかりしていると高評価ですね。

面接が得意な人はなかなかいませんが、自分のやったことを説明するのであれば割と楽に面接も乗り越えられます。

上記のように、ポートフォリオがあると面接や案件の提案で大きな力を発揮してくれるのは間違いありません。

エンジニアのポートフォリオの作成手順【まずは構成を考えよう】

ここから、ポートフォリオの作成手順を具体的に解説していきます。

大きく分けて、以下のステップで紹介していきます。

ポートフォリオの作成手順
  1. ポートフォリオに何を書き込むかを知る
  2. 制作物があれば、内容や見せ方をまとめる
  3. WordPressでポートフォリオのトップページを実際に作成していく
  4. その他制作物をホスティングして、トップページからアクセスできるようにする

WordPressを使う理由は、お問い合わせフォームなどがすぐ置ける+ポートフォリオ用のテーマがある+プラグインでコーディングほぼなしで綺麗な見た目に仕上げられるからですね。

WordPressと聞くと「レベルが高い・・・」と思ってしまいますが、そんなことはないですよ。
逆に、楽に作るためにWordPressを選択します。

エンジニアのポートフォリオの中身を知ろう

ポートフォリオって、そもそも何を書き込めばいいの?

と思うでしょうか、以下のような感じ。

ポートフォリオに記載する内容
  • 簡単な自己紹介
  • スキルレベル(どんな言語やツール、フレームワークが使えるか)
  • サービス内容
  • 今まで制作物(ブログのURL・githubアカウント・登録、変更、削除、参照機能があるWebサービスなど)
  • お問い合わせフォーム
サービス内容とお問い合わせフォームは個人で仕事を請け負いたい人向けですね。

maipyon

ほとんどの人は、ポートフォリオ自体の見た目のレベルと、今までの制作物のレベルを上げることに専念しましょう!
エンジニアのポートフォリオの中身を知ろう
イメージとしては、WordPressで作成したポートフォリオのトップページから、各制作物のページへのリンクが貼られている感じですね。

一番オススメはWebサービスをポートフォリオに組み込むこと

ポートフォリオの制作物の中にWebサービスがあると評価が一気に高くなります。

Webデザイナーを目指す場合不必要ですが、エンジニアを目指している場合はこのレベルまではやっておくと良いですね。

登録、変更、削除、参照機能があるWebサービスだとGood!

例えばSNSだと、「コメントの登録」「コメントの再変更」「コメントの削除」「コメントを見せる(参照)」ができますよね。

上記のような機能があるWebサービスだとある程度のスキルがあるなと思われます。

さらにその制作物に以下の情報も付け加えると完璧です。

  • どんな言語、ツール、フレームワークを使ったか
  • なぜその技術を選んだか。
  • 今後その制作物をどうしたいか(反省点など)

【こんな手も】ポートフォリオ作成をスクールで一緒にやるのもアリ

ここまで読んできて、「滅茶苦茶難しい・・・」と思った人がほとんどだと思います。

実は「スクールでポートフォリオ作成を担当者にアドバイスをもらいつつ作成する」という手もありますので、サクッと紹介します。

例えばTechAcademy [テックアカデミー]ではどのコースでも最後にはオリジナルサービスの作成があり、そこでポートフォリオの一部を作成するということですね。

実際に以下の記事では「未経験の文系大学生がTechAcademyで学習→受講中に作成したサービス+卒業後に作成したサービスで就職成功」という体験を元にしています。

【就職できた!】テックアカデミーの評判を文系大学生が実体験を元にレビュー 【就職できた!】テックアカデミーの評判を文系大学生が実体験を元にレビュー 文系大学生からテックアカデミーに入会して就職できた経験を元に、テックアカデミーの評判を書いていきます。テックアカデミーはメンター全員が現役エンジニアなこともあり、メンタリングでかなり支えてもらえました。

もしプログラミングを始めたてでポートフォリオ作成の内容で困っているのであれば、こんな手もアリですね。

ポートフォリオのトップ画面を作っていこう

ポートフォリオに記載する中身が決まりだしたところで、ポートフォリオのトップ画面を作っていきましょう。

maipyon

一旦トップ画面だけ作成した状態で中身を充実させていくという順序でもOK!

今回は中でも簡単なレンタルサーバーを使用して全世界に公開できる状態にしていきます。

今回紹介する方法はWordPressは必要ないのですが、今後のためにもWordPressを開設しつつサーバーを契約するのがオススメです。

以下の記事で、誰でも分かるようにWordPressの立ち上げ方を解説しています。

WordPressの立ち上げ方
ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】 ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】 この記事の通りに進めれば、30分でWordPressの立ち上げ・ポートフォリオのアップロードが完了します!ポートフォリオ作成時のホスティングやWordPress学習の参考になる記事になっています。

maipyon

立ち上げたあとに、サーバー上にポートフォリオのHTMLやCSSを入れていく感じですね。

レンタルサーバーを借りたら、ポートフォリオのHTMLをアップロードしよう

ポートフォリオのHTMLについてですが、【無料】ポートフォリオHTMLテンプレート(ベーシック)でダウンロードするのが簡単かと。

参考 【無料】ポートフォリオHTMLテンプレート(ベーシック)未経験からWebデザイナーへ!

以下のようなテンプレートが用意されているので、それをサーバー上にアップロードして、カスタマイズしていく感じですね。

レンタルサーバーを借りたら、ポートフォリオのHTMLをアップロードしよう

なお、アップロードの方法は簡単でして、サーバー上にファイルを作って、そこにDLしたHTMLやCSSなどのファイルを一括で入れ込むだけ。

これでネット上で誰でも見れる状態になります。(ホスティングと言います。)

ホスティングのやり方

上記はHTMLをアップロードした例ですが、PCでのファイル操作と基本同じでとっつきやすいです。

最後に、ポートフォリオトップページから各制作物へリンクをしていく

ポートフォリオのトップページは良い感じにできたとしても、今までの成果物も見てもらえる形にする必要があります。

この章で紹介すること

今まで作成した模写サイトや、オリジナルデザインサイトは、誰でも見れる形になっていませんよね。
レンタルしたサーバーに上記ファイルも一緒に置いて、誰でも見れる形にします。

最後にポートフォリオのトップページからのリンクを貼れば完成です。

maipyon

デザイナーの方や、特に見せられるものがないなぁという方はこの章は不要です!
デザイナーの方は、制作物を画像にしてポートフォリオトップページに貼っていきましょう。

このホスティングはかなり簡単で、こちらもサーバー上に完成品のファイルを追加するだけです。

詳しく解説します。

 

ホスティングのやり方

まずはレンタルサーバー内でファイルマネージャーを開いて、サーバー内のファイルを見ていきます。

ホスティングのやり方

次に、独自ドメインの下に『portfolio』ファイルを作って、その中に成果物を入れていくだけ!

maipyon

テストとして、適当なHTMLファイル(mysite.html)を入れてみました。

それが終わったら、実際にアクセスしてみて確認してみましょう。

例えば上記は『portfolio』>『mysite.html』を成果物として見せたいので、

https://yoursite.com/portfolio/mysite.html

にアクセスすれば閲覧できます!(サイトのURLは例としてyoursite.comとしておきます。)

つまり、

[あなたのサイトのURL]/[独自ドメインの下に置いたファイル]/[ファイル名]

にアクセスすることで閲覧可能です。

maipyon

トップページをアップロードした際も上記のようなURLのイメージになります。
注意
ホスティングによってCSSなどの読み込み・成果物内でのリンクが上手くいかないことがあります。
パスが間違っている可能性大なので、ホスティングした場合のファイル構成のパスに書き直しましょう。

上記の成果物に向けて、ポートフォリオのトップページからリンクを作ってアクセスできる状態にしてあげれば完成です!

模写コーディングをポートフォリオとして扱う場合、著作権的にアウトな場合があります。
ポートフォリオとして掲載可能かどうかについては各自で判断して下さい。

今回紹介した方法では、トップページも各成果物も同じ考え方でサーバーにアップロードしていけば大丈夫です!

エンジニア志望の人はポートフォリオを作成しよう!

長い記事になったのでざっくりとまとめて終わりにします。

ポートフォリオに記載する内容
  • 簡単な自己紹介
  • スキルレベル(どんな言語やツール、フレームワークが使えるか)
  • (個人で仕事を請けたい人は)サービス内容
  • 今まで制作物(ブログのURL・githubアカウント・登録、変更、削除、参照機能があるWebサービスなど)
  • (個人で仕事を請けたい人は)お問い合わせフォーム

ポートフォリオに記載する内容はぶっちゃけ自由ですが、上記は必須かなと。

特におすすめなのは登録、変更、削除、参照機能があるWebサービスを作ることでして、以下のことに注意しつつ作成すればOK。

ポートフォリオに載せるWebサービスの注意点

  • 量より質を意識する
    量があってもちょっとしたバグがあると低評価に繋がる
  • 魅せ方に気を配る
    ちょっとでもずれがあると美しくない
    余白を意識しつつ作ろう
  • 目玉機能に凝って、他は凝らないように
    全部を完璧にするとかなりしんどい。目玉機能だけ凝って、そこを強みとして言えるようにしよう

そんなポートフォリオの作成手順はざっと以下の通り。

ポートフォリオの作成手順
  1. ポートフォリオに何を書き込むかを知る
  2. 制作物があれば、内容や見せ方をまとめる
  3. WordPressでポートフォリオのトップページを実際に作成していく
  4. その他制作物をホスティングして、トップページからアクセスできるようにする

ということで、今すぐポートフォリオを作成したいなという方は、WordPress開設からですね。

以下の記事を参考に、レンタルサーバー契約&WordPress開設から始めていきましょう!

ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】 ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】 この記事の通りに進めれば、30分でWordPressの立ち上げ・ポートフォリオのアップロードが完了します!ポートフォリオ作成時のホスティングやWordPress学習の参考になる記事になっています。
スクールでポートフォリオ作成の手もアリ
【就職できた!】テックアカデミーの評判を文系大学生が実体験を元にレビュー 【就職できた!】テックアカデミーの評判を文系大学生が実体験を元にレビュー 文系大学生からテックアカデミーに入会して就職できた経験を元に、テックアカデミーの評判を書いていきます。テックアカデミーはメンター全員が現役エンジニアなこともあり、メンタリングでかなり支えてもらえました。