【キャンペーン中!】月額たった3,278円で独学離れができるプログラミング学習サービス

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

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

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

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

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

maipyon

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

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

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

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

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

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

記事の終盤では、ポートフォリオサイトのテンプレートについても紹介しています。

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

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

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

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

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

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

maipyon

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

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

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

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

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

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

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

maipyon

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

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

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

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

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

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

maipyon

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

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

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

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

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

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

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

ですね。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

サービス内容とお問い合わせフォームは個人で仕事を請け負いたい人向けですね。

なかなかイメージがわかないと思いますので、ポートフォリオのデモサイトも見つつイメージしてみてください。

エンジニアのポートフォリオの中身を知ろう
完成品のイメージとしては、ポートフォリオのトップページから、各制作物のページへのリンクが貼られている感じですね。

ポートフォリオに組み込む制作物として代表的なのは以下の通り。

おすすめ制作物例
  1. ブログ
  2. 自作のLP(架空の商品販売ページなど)
  3. 自作のWebサイト(架空の企業HPなど)
  4. 今までに制作したバナーやデザイン
  5. 自作したWebサービス

学習内容や目指す目標によって大きく変わってきますが、上記のような制作物でスキルレベルは分かるので組み込みましょう。

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

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

エンジニアを目指している場合はこのレベルまではやっておくと就活でも役立ちます!

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

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

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

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

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

maipyon

面白いアイデアのWebサービスならそれだけで面白いと思ってもらえる可能性アリ!
時間やアイデアがあれば独特なアイデアで作ってみましょう。

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

ここまで読んできて、「自分でレベルの高い制作物なんて作れないよ・・・」と思った人がほとんどだと思います。

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

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

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

人気記事ひどいし最悪?テックアカデミーの評判や内容・おすすめコース全まとめ

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

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

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

maipyon

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

手順としては以下の通り。

STEP.1 レンタルサーバーを契約

STEP.2 レンタルサーバー上に作成したファイルをアップロードしていく

難しいことは全くなく、解説通りにやっていけば問題なくできるかと。

まず、以下の記事でレンタルサーバーの契約方法を紹介しています。

参考ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】

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

後々制作物としてWordPressを使いたい!という場合に困るので、WordPressも同時に開設する方法を紹介しています。

おすすめのレンタルサーバーはConoHa WINGというサーバーになります。

安いのにスピードも速く、管理画面も分かりやすいので初めての方にも安心です。

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

レンタルサーバーを借りることが出来たら、次にポートフォリオのファイル(HTMLとかCSSとか)をアップロードしていきます。

長くなるので、『ポートフォリオサイトのテンプレート配布』の記事にてアップロード方法について詳しく解説しています。

ポートフォリオサイトテンプレート(シンプル)無料配布とカスタム方法 ポートフォリオサイトテンプレート(シンプル)無料配布とカスタム方法 ポートフォリオサイトテンプレートを無料配布します。カスタマイズ方法や、サーバーへのアップロードの仕方まで丁寧に解説。シンプルなテンプレートなので、カスタマイズして自分なりのページにしてみましょう。

上記記事では、ポートフォリオのデモサイトを配布しつつ、それをアップロードする手順を解説しています。

『ポートフォリオのファイル群をアップロードする』という手順は全く同じですので、上記記事を参考にしてみてください。

maipyon

配布しているデモサイトは自由にカスタマイズしてもいいので、是非使ってみてください!

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

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

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

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

なお、成果物もポートフォリオのトップページも同じサーバーにファイルを分けてアップロードすれば問題ありません!

maipyon

デザイナーの方や、特に見せられるものがないなぁという方はこの章は不要です!
デザイナーの方は、制作物を画像にしてポートフォリオトップページに貼っていきましょう。
注意
ホスティングによってCSSなどの読み込み・成果物内でのリンクが上手くいかないことがあります。
パスが間違っている可能性大なので、ホスティングした場合のファイル構成のパスに書き直しましょう。

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

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

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

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

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

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

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

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

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

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

どれも大切なポイントなので、気にしつつ作ってみてください。

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

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

ということで、今すぐポートフォリオを作成したいなという方は、レンタルサーバーの契約からですね。

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

関連記事ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】

関連記事ポートフォリオサイトテンプレート(シンプル)無料配布とカスタム方法