私は、将来的にエンジニアになりたいと思っている学生の方には実務経験が大事だとよく言っています。そしてその実務経験を積むためにはエンジニアのアルバイトやインターンをする必要があります。ではどのようにインターンへ参加できるのでしょうか？
それはずばりポートフォリオを作成することです!!
じゃあどうやってポートフォリオ作ればいいの？
そこでこの記事では、
- ポートフォリオとは？
- ポートフォリオが必要な理由
- ポートフォリオの作り方
- やむちゃが作成したポートフォリオを紹介
について解説していきたいと思います！ぜひ最後までご覧ください！
自己分析、面接対策、自分に合った企業を紹介まで完全無料でしてもらえるので、とりあえず就活スタート時に登録しておきましょう。
- エンジニア就活始めに面談をキャリアセレクト
- プログラミング未経験ならエンジニア就活
- 【理系向き】無料プログラミングスクール付きTECH-BASE Engineering
そもそもポートフォリオって何？
ポートフォリオというのは、自分ができることややってきたことをまとめたもので、簡単に言うと自分が何者であるかをアピールするためのものです。
大学生だとまさに就職活動のときやインターン面接の際に使います。
一般的に「ポートフォリオ」と言われるときには2つの種類のポートフォリオがあります。
1つは「ポートフォリオサイト」と呼ばれる自分自身の成果物や経歴、連絡先などを掲載する作品集のようなものです。
もう1つには「ポートフォリオアプリ」と呼ばれる成果物・制作物そのものです。
具体例を交えながらそれぞれ見ていきましょう！
種類①: 制作物や経歴をまとめるホームページ
まず最初は自分の作成したポートフォリオを掲載するWEBサイトを制作していきます。
イメージとしては自分自身を紹介するWEBページのようなものです。
ポートフォリオサイトに掲載すべき内容の例としては、
- 自己紹介
- 経歴や経験
- 実績（制作物）
- スキル
この5つが掲載されていれば問題ないです。
自己紹介
簡単な自己紹介を作成しましょう。
内容は自分の魅力が伝わるように簡潔なものが良いでしょう。
自分の写真なども合わせて掲載しておくとより相手に伝わりやすいです！
経歴や経験
自身の今までの学歴や職歴、インターンの経験を書くと良いです。
また上記の他にエンジニアに関する大学時代に学んだことなどを時系列に織り込んでいくとオリジナル性のあるものになります。
例えば、アルバイトや個人開発などでプログラミングを使った経験を書いていきましょう。
情報系の学部で学んでいる方は大学での研究にについて書くのもありです。
実績（制作物）
こちらには実際に自分がしたことや制作したものを紹介していきましょう。
ポートフォリオサイトを見た人がわかりやすいように、成果が視覚的に見えるもの、実際に作成したアプリやサイトを掲載するようにしましょう。
例えば、
- ToDoリストアプリ
- 自分が運営しているWEBサイト
- 簡単な○✕ゲーム
ここでポイントになるのがただただ成果物を掲載するのではなく、
・なぜそれを作ろうと思ったのかなどの開発経緯
・開発に使用した技術（なんのプログラミング言語を使用したか等）
・簡単な機能の紹介（ログイン機能やレスポンシブ対応だったり）
これらの情報を付け加えておくと見る側にとってわかりやすいですしアピールになります。
スキル
自身のこれまでの経験で得たスキルを掲載します。
例えば、
| 言語 | HTML/CSS/JavaScript/PHP/Python/C |
|---|---|
| フレームワーク | Flask/Django/React/Vue.js/Ruby on Rails |
| 開発環境 | Git/Docker/Vagrant |
| データベース | MySQL/Postgres |
| クラウドサービス | AWS/Azure/GCP |
| OS | MacOS/Windows/Linux |
このようなスキルを、
- 現状どの程度のレベルか
- どういった経緯でスキルを取得したか
これらを合わせてポートフォリオサイトに掲載するようにしましょう。
種類②: 制作物そのもの(Webアプリ)
実際にポートフォリオサイトに掲載する制作物についてです。
例としては、
- 大学の授業評価サイト
- 大学の学園祭で利用するイベントを管理するサービス
- オリジナルのプログラミング言語
- 動画に直接メモを残せるサービス
- 欲しい物リストを共有してプレゼントの贈り合いが出来るアプリケーション
- AIが画風を変えてくれるアプリ
- FPSのようなシューティングゲーム
これらを、開発経緯・開発に使用した技術（なんのプログラミング言語を使用したか等）・簡単な機能の紹介（ログイン機能やレスポンシブ対応だったり）をあわせて紹介することで見る側にとってわかりやすくなりますし、アピールにもなります。
正直何を作っていけばいいかわからない、どうやってオリジナル性を出していけばいいのかわからないといった方がほとんどだと思います。
初期段階としては作るものは簡単なToDoアプリや○✕ゲームなど、作り方はUdemy
などの動画教材を見ながらでぜんぜん大丈夫です。
一旦制作してみた後でこんな機能があったら便利そう、こんな機能があったら面白いんじゃないか、個々のデザインをもっとこうしたいなど自分で思いついたアイデアを付け足していくことでオリジナル性も出ていきますし、さらなるスキルアアップにも繋がります。
大学生のインターンや就活にポートフォリオが必要な理由
それでは、ポートフォリオが何かわかったところで、大学生が就職やインターンを始める際にポートフォリオが必要な理由を説明していきます。
- ポートフォリオの作成自体がアピールになる
- 自分のスキルの証明になる
- 面接でのコミュニケーションをスムーズにする
一つ一つ見ていきましょう。
ポートフォリオの作成自体がアピールになる
まず一番はこれです。数多くのエンジニアになりたい大学生がいる中で、実際にポートフォリオを作成できるまでしっかり勉強してきたというだけでもやり遂げる力を証明することになります。
いくつかの制作物やアプリケーションを作り、ポートフォリオサイトを作り経歴や自己紹介を書くことでアピールにつながります。
自分のスキルの証明になる
企業のエンジニアの方はソースコードや実際に作ったポートフォリオを見ることでその大学生の大体の技術力を推測することができます。
そのため、ポートフォリオを作成することで、自分のスキルを直接的に証明することができます。
ポートフォリオサイトの見た目だけでなく、ソースコードについても相手に見やすい整理されているものが望ましいです。
面接でのコミュニケーションをスムーズにする
大学生のエンジニアのインターンや就職の面接では、ポートフォリオを作っている場合、ポートフォリオについての話になることが多いです。
制作した過程などを深掘りされますが、このときこだわりを持って作っていれば、やる気やエンジニアとしての素質をアピールすることができます。
こだわったポートフォリオによってその人のスキルだけでなくなんとなく性格も分かるのが良いですね!!
また、就活に特化したポートフォリオの内容は以下の記事でも述べています。
友達に自慢できる
これは就職などには関係ありませんが、、、笑
自分の頑張りを友人やいろいろな人に自慢することができます。
私の場合はTwitterを通じて日々の開発の様子や、自分の経験などを情報発信しています。
いいねがたくさん来たりするとシンプルに嬉しいですし、モチベーションupにも繋がるのでおすすめです！
また、Twitter経由で最新の情報や役立つ情報を仕入れることが多々あるので情報収集の面でもおすすめできます。
これは私だけかもしれませんが、友人にこんなことやってると伝えても言葉だけでは伝わらなかったのが、ポートフォリオを実際に見てもらったらかなり褒めてもらえました。笑
種類①: ポートフォリオサイトの作り方
ここまででひとまず大学生でインターン面接や就職面接にはポートフォリオサイトが必須だと言うことがわかったかと思います。
ここからはこの大事なポートフォリオサイトの作り方を例を交えて解説していきます。
- どのようなサイトにするかを決める
- アピールできる制作物を作る
- プロフィールやスキルセットを書き込んでいく
まずはポートフォリオサイトとしてどういう形で作成するかを考えます。
このサイトのようにWordPressで構築するのも良いですが、
個人的なおすすめはNext.jsとmicroCMSを使うことです。これを使えば完全無料で公開することができまし、自分のスキルをアピールすることもできます！
[補足]サイトが作れるようになるまでのロードマップを公開！
僕が実際にポートフォリオサイトを作れるようになるまでに行った勉強のロードマップを公開します。(WordPressで作成する場合はここは飛ばして大丈夫です!)
- ステップ①:インターネットについて学ぶ
インターネット上でどのようにサイトが動いているか、どのようにインターネットが構築されているか、基礎的なことを学んでいきます。 - ステップ②:HTML/CSSについて学ぶ
WEBサイトを表示するときに使用されているプログラミング言語です。
基本的なことを一通り学習した後に、模写コーディングなどをするのがおすすめです。 - ステップ③:JavaScriptについて学ぶ
上記のHTML/CSSで作成したWEBサイトにより複雑な動きをつけたり機能を追加する際に使用します。
これを使うことでより洗練されたWEBサイトを作成できるようになります。 - ステップ④:パッケージマネージャーについて学ぶ
フロントエンドエンジニアにとって必須の知識です。正直、雰囲気で乗り切ろうと乗り切れます。
簡単に説明すると、他の人が作成した便利な機能などがまとまったものをダウンロードして自分でも使用できるようにするものです。
開発していく中で雰囲気を掴んでいくと良いと思います。 - ステップ⑤:フレームワークについて学ぶ
JavaScriptのフレームワークには、「React.js」「Vue.js」「Angular」などがありますがその中でもよく使用されているReactとそのラッパーであるNext.jsをまず始めに学習するのがおすすめです。
ざっとこんな感じです！
より詳しいことはこちらの記事に書いてあるので見てみてください。
種類②: 制作物(ポートフォリオアプリ)の作り方
こちらについてはまた別で記事を出そうと思います。
簡単なものだと、TODO共有アプリとかが作りやすいと思います。
他の例としては、
- 大学の授業評価サイト
- 大学の学園祭で利用するイベントを管理するサービス
- オリジナルのプログラミング言語
- 動画に直接メモを残せるサービス
- 欲しい物リストを共有してプレゼントの贈り合いが出来るアプリケーション
- AIが画風を変えてくれるアプリ
- FPSのようなシューティングゲーム
- 何か特定のSNS
- 掲示板アプリ
- リアルタイムチャットアプリ
- 画像処理ライブラリ
これをポートフォリオサイトに載せる時に必要な情報としては、
- 何人で作成したか
- 何ヶ月かかったか
- なぜそれを作ったのか
- 工夫をした点
- 苦労した点
- どう言う技術を利用したのか？なぜその技術を利用したのか？
- インターネットに公開しているか？
- ソースコードはGithubなどに上げているか
これらを合わあせてポートフォリオサイト(種類1)に掲載することで、制作意図や自分の実力が相手に伝わりやすいです。
制作物(成果物)系のポートフォリオの作り方手順
- 自分の周りにある課題を見つける
- その課題を技術的に解決する手段を見つける
- 技術構成を考える
- 実際にコードを書いていく
- 動くようになったら友達や家族に使ってもらう
- そのフィードバックをポートフォリオに反映する
重要なことは、それぞれの工程で考えたことや意思決定の動機をしっかりとメモしておくことです。
ここが話せればエンジニア就活や長期インターンの面接でかなり有利に働きます。
また、フィードバックを貰うという経験はかなり大事です。エンジニアの経験としても重要ですし、面接でのウケもかなりよくなります。
プロフィールやスキルセットを書き込んでいく
これで準備が整ったと思うので、最初に作成したポートフォリオサイトの方に成果物と自分のプロフィールやスキルセットを書き込んでいきます。
ポートフォリオ(制作物)を作るのが難しそう、、と感じる方へ
大学生限定で3ヶ月でオリジナルのプロダクトやアプリケーションを作成できるようになるGeekSalon(ギークサロン)というプログラミングスクールがあります。
このようなサービスを利用するのも手です。まずは無料相談で色々相談してみるのが良いと思います！
大学生のポートフォリオでのアピールの仕方や書き込む内容
さて実際にポートフォリオを作成したらアピールポイントを以下の内容を書き込んでいきます。
- 自己紹介や経歴、学歴
- スキルセット(言語、フレームワーク、ツール)
- 今まで作成した制作物
- お問い合わせフォーム(最悪TwitterのDMでも可)
お問い合わせフォームはNext.jsとmicroCMSで作成した場合は実装が無料枠では難しいのでTwitterのDMを解放する形でも良いかもしれません。
やむちゃのポートフォリオを公開
さあ、ここまでで大学生がインターンや就活を突破するためにポートフォリオを作るべき理由とどう作っていけば良いかイメージがついてきたかもしれません。
最後に、おまけで私がインターンへ応募した際に使用していたポートフォリオサイトのテンプレート例をソースコード付きで載せておきたいと思います。
サイト: https://sample-portfolio-psi.vercel.app/
ソースコード: https://github.com/hpfull-yamucha/sample-portfolio
※上記例では経歴は未掲載です。
上記参考に必ずポートフォリオを作りましょう!!
コメント