エンジニア未経験者でもできる！絶対ためになる魅力的なポートフォリオの作り方！

SHARE

エンジニア未経験者でもできるポートフォリオの作り方を今日は紹介するよ！

  • エンジニアの転職でポートフォリオって必要なの？
  • どんなポートフォリオだと評価が高いかな？
  • ポートフォリオって言われても作り方がわからない

などの疑問をお持ちの方の悩みを解決できる記事になっています！

近年、エンジニアにポートフォリオや、ソースコードなどの成果物を求める企業が増えてきました。Webデザイナーなどは自分のポートフォリオを持っている人が多いですが、エンジニアは少ないです。

そのため、「エンジニアってどんなポートフォリオを作ればいいの？」と疑問に思う人も多いでしょう。

実際に、ポートフォリオなしで転職に成功したという事例はあります。しかし、長い目で見て、ポートフォリオや成果物を作っておいた方が多くのメリットがあります。

この記事では、現役のフリーランスエンジニアが、エンジニアがポートフォリオをもつメリットとポートフォリオの作り方について解説します。

これからエンジニアに転職を考えている人は、この記事を読んで、ポートフォリオを作りましょう！

ポートフォリオを作ることで、多くの学びと経験ができますよ！

こんな人におすすめ
  • これからエンジニアへの転職活動を考えている人
  • エンジニア向けのポートフォリオの作り方を知りたい人

エンジニアのポートフォリオとは

ポートフォリオとは、一般的に個人の「作品」を集めたものを言います。デザイナーや、イラストレーター、カメラマンなど、クリエイターが自分の作品を一覧にまとめた「作品集」のイメージが強いです。

ポートフォリオを持つ意味は、「自分のスキルや実績をアピール」するためです。自分のスキルや実績を評価してもらうために、営業の資料や転職時のアピール材料として使われます。

では、エンジニアのポートフォリオは、どのようなものを掲載するのでしょうか。

エンジニアのポートフォリオも同じように、自分が作った作品を一覧にまとめます。しかし、それ以外にも、次のようなものがポートフォリオの資料として使えます。

  • プロジェクトの経歴
  • GitHubのソースコード
  • OSSへのコミット
  • ブログ、Qiita、Zennへの投稿記事
  • 趣味で作ったWebサイトやアプリ
  • プログラミングスクールの成果物
  • 登壇で使用したスライド

エンジニア経験者なら、プロジェクトの経歴、OSSへのコミットなど、ポートフォリオとして使えます。エンジニア未経験者なら、自作したWebサイトやアプリ、プログラミングスクールで取り組んだプロジェクトや成果物をポートフォリオとして活用できます。

エンジニアのポートフォリオは、自身のスキルをアピールできるものなら何でもありです。

実際に、私がフリーランスの営業活動として使うのは、プロジェクトの経歴やブログの記事、GitHubのソースコードなどを活用します。これらを使うことで、自分のスキルや実績を効率的にアピールでき、案件の獲得がしやすくなります。

ここで注意して欲しいのは、必ずしも、「見栄えがよくて、完成したものばかり」でなくていいことです。

ポートフォリオを持つ目的が、「転職時にアピールするため」だったら、多少見栄えが悪くても、提出すべきです。なぜなら、「積極的にプログラミングを学習している」という姿勢をアピールできるので、何もないよりは、あった方が評価が高いです。

エンジニアがポートフォリオを持つと多くのメリットがある

私は、フリーランスエンジニアとして活動していますが、エンジニアがポートフォリオを持つメリットは、たくさんあると感じています。実際に、ポートフォリオのおかげで仕事のオファーがあったり、転職時に有利になったことがあります。

エンジニアがポートフォリオを持つメリットをまとめると、次の通りです。

  • 転職で有利になる
  • アウトプットで圧倒的に成長できる
  • 自分の資産になる
  • 将来、フリーランスになるときも有利

転職で有利になる

ポートフォリオを持つことで、書類選考や、面接で非常に有利に働きます。なぜなら、ポートフォリオは「自分のスキルと実績」を証明するための強力なツールだからです。また、企業の採用担当者がポートフォリオを見て、興味を持って連絡をくれるなんてこともあります。

実際に、私の実績を見て声をかけてくれた企業がありました。そのあと、カジュアルな面談をし、気付いたら「採用！」を頂きました。

エンジニア経験者は、「経験値」をアピールしましょう。今まで経験したプロジェクトの概要をまとめるのがいいです。

「なぜその技術を使ったのか、どのように問題を解決したのか、どのくらいその技術に造詣があるのか」など、まとめると面接官のウケがいいです。

エンジニア未経験者は、経験値がありません。なので、「自分のスキル」を最大限にアピールしましょう。

  • プログラミングスクールで取り組んだ課題
  • 独学で作ったWebサイトやアプリ
  • 学んだことをまとめたブログ記事

このような内容をポートフォリオに盛り込むと、評価は上がります。

企業が未経験者のエンジニアを見るポイントは、

  • 「この人はちゃんと技術力を満たしているのか」
  • 「積極的にプログラミングを学んでいるのか、」
  • 「今後も成長し、活躍してくれるか」

などです。

企業は、未経験者に即戦力は期待していないかもしれませんが、エンジニアとして成長してくれる人材かは注視します。

未経験者の方は、「自分が積極的にプログラミングを学んで、アウトプットもしてる！」ということをアピールしましょう。

アウトプットで圧倒的に成長できる

エンジニアがポートフォリオを持つメリットの一つに、「エンジニアとしての成長」があります。

エンジニアは作ってなんぼの世界です。

いくら、プログラミングの仕様を理解していても、作り方や仕組みを知らないと価値は発揮されません。

先ほど紹介したポートフォリオの資料の例を見てみましょう。

  • GitHubのソースコード
  • OSSへのコミット
  • ブログ、Qiita、Zennへの投稿記事
  • 趣味で作ったWebサイトやアプリ
  • プログラミングスクールの成果物
  • 登壇で使用したスライド

これらは、全てアウトプットしてできるものです。

アウトプットすることによって、圧倒的なスピードで成長することができます。

なぜなら、アウトプットすることでプログラミング学習の定着率が格段に上がるからです。

アウトプットするために多くのことをインプットし、トライアンドエラーを繰り返します。その過程で、自分で調べたり、誰かに聞いたりして、作り方を学んでいきます。作り方と同時に、プログラミング言語の使い方や、仕様の理解を更に深めることができます。

実際に、ある研究によると、「自ら体験する」「他人に教える」というアウトプットは学習の定着率が一番良いとされています。

引用元: 「平均学習定着率が向上する「ラーニングピラミッド」とは？」

先ほどのポートフォリオの例を当てはめると、次のようになります。

自ら体験する 他の人に教える
  • GitHubのソースコード
  • OSSへのコミット
  • ブログ、Qiita、Zennへの投稿記事 (実際にコードを書くため)
  • 趣味で作ったWebサイトやアプリ
  • プログラミングスクールの成果物
  • ブログ、Qiita、Zennへの投稿記事
  • 登壇で使用したスライド

インプットに比べて、アウトプットには多くのメリットがあるのが分かりますね。

エンジニア未経験者におすすめなのは、「ブログ、Qiita、Zennへの投稿記事」です。

最初の頃は、プログラミング言語の仕様を学ぶのに必死だと思います。

しかし、あえて、自分が教える側の立場に回るのです。

自分が教える側の立場に回ると、正確な情報を伝えなければなりません。そのため、本やチュートリアルでしっかりと理解する必要があります。ただ言われた通りに本を学習するよりも、より正確に理解しようとするので、知識の定着率が上がります。

さらに、学習した内容を初心者目線で、初心者向けの記事にまとめてください。初心者の頃に分からなかったことは、他の人が悩んでいることです。

それを分かりやすくまとめることで、他の人のためにもなるし、自分のためにもなります。

例えば、JavaScriptを勉強しているなら、JavaScriptの解説サイトを立ち上げましょう。

次のサイトのように、基礎とチュートリアル形式でもいいでしょう。

JavaScript Primer

本で学んだ内容をブログに投稿するのでもいいと思います。

大事なことは、「何かをアウトプットすること」です。

エンジニア未経験の人で、プログラミング学習に悩んでいる人は、アウトプットを意識してみましょう。

自分の資産になる

エンジニアのポートフォリオは、自分の資産になります。

  • 一生懸命取り組んだプロジェクト
  • 独学で取り組んだWebサービス
  • パフォーマンスのために設計したコード
  • 経験から導いた、拡張性のあるアーキテクチャ
  • プログラミング言語の知識

これら全ては、知識、経験の資産になります。

ただ、形あるものにしないと、誰にも気づかれない存在になってしまいます。

ポートフォリオを作ることによって、知識を貯めましょう。そして、アピールしましょう。

金融資産は下がる可能性がありますが、自分自身の資産は下がりません。

ポートフォリオを通して、エンジニアとしての価値を高めましょう。

将来、フリーランスになるときも有利

エンジニア未経験者で、将来フリーランスエンジニアになりたい人は、今のうちにポートフォリオを作っておきましょう。

なぜなら、ポートフォリオはフリーランスエンジニアの営業資料として強力なツールになるためです。

フリーランスエンジニアは、常に即戦力を求められています。

企業がフリーランスを採用する際は、

  • 「この人は、どのくらいプログラミングの経験があるのか」
  • 「専門性はどのくらいあるのか」
  • 「即戦力として活躍してくれるか」
  • 「全てを任せても問題ないか」

などを見ます。

特に、「経験値」と「専門性」が大事です。

企業は、プロジェクトを引っ張ってくれるエンジニアを求めています。プロジェクトをリードできるエンジニアは、ある程度の経験と専門性がないとできません。もし、社内にそのような人材がいない時は、フリーランスエンジニアを活用するでしょう。

フリーランスエンジニアが案件を獲得するには、「経験値」と「専門性」をポートフォリオでアピールしましょう。

例えば、フロントエンドエンジニアの人は、

  • モダンなJavaScript、TypeScriptの仕様の理解
  • モダンなフレームワークの理解
  • SPA、SSRの作り方の理解
  • Webパフォーマンスの理解
  • UI、UXデザインの理解

などをプロジェクト履歴と共に、盛り込むと高い評価をもらえます。

私の周りでも、この「経験値」と「専門性」を兼ね備えているエンジニアは安定的に稼ぐことができています。

ポートフォリオを持っておいて損はありません。

将来、フリーランスエンジニアに独立したい人は、参考にしてくださいね。

【年収アップ】フリーランスエンジニアになる方法【現役フリーランスが解説】

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

エンジニアがポートフォリオを持つメリットを見てきましたが、デメリットも抑えておきましょう。

  • 書類選考で落とされる可能性も
  • 自分のスキルをアピールできない
  • インプット中心の学習になってしまう

書類選考で落とされる可能性も

エンジニア未経験の人は、ポートフォリオがないと書類選考で落とされてしまうかもしれません。

なぜなら、技術力をアピールするものが何もないからです。

仮に、受かったとしても、「技術力を必要としない派遣のブラック企業」なんてこともあり得ます。

優良企業は、スキルと実績、エンジニアとしての伸びしろを見ます。

簡単に受かってしまうということは、簡単に辞めてしまうかもしれないので注意しましょう。

自分のスキルをアピールできない

エンジニアは技術職です。自分の技術をいかにアピールできるかで、評価は変わります。

「何もしなくても評価してくれる」

と思い込んではダメです。

エンジニアの成長戦略は、常にスキルアップをすることです。

スキルアップしても、誰にも気づかれななかったら悲しいですよね。

個人が重要視されている昨今、エンジニアとして生き残るためには、自分をアピールする術を知りましょう。

インプット中心の学習になってしまう

ポートフォリオなどに載せる作品や、課題がないとインプット中心の学習になってしまいます。

先ほど説明した通り、アウトプットには大きなメリットがあります。

「本を読んだ」だけより、「本を読んで、誰かに教える」方が遥かに記憶の定着率が高いです。

プログラミング学習サイトやプログラミング本を読んだだけで、満足していないでしょうか。

  • 「プログラミングが難しい…」
  • 「プログラミングつらい…」
  • 「成長の実感がない…」

という人は、自分の学習方法を見直してみましょう。

アウトプットがなく、インプット中心になっているかもしれません。

そんな方は、ポートフォリオを作って、アウトプットの幅を広げてみましょう。

エンジニアのポートフォリオの例

では、実際にエンジニアのポートフォリオの例を見てみましょう。

  • HodaLabさん
  • Kentaro Matsushitaさん
  • unshiftさん

HodaLabさん

引用元: HodaLab

エンジニアHodaさんのポートフォリオは、シングルページデザインで全体的にスッキリとした印象です。自身のプロフィールと、ブログ、GitHub、Qiitaの情報も載せています。制作物では、今まで作った作品を見ることができます。

スキルセットは、グラフにしているので、ひと目で分かりやすいですね。

プログラミング言語やスキルセットは、グラフや図にするのがおすすめです。言葉で書くよりも、直感的に幅広くアピールすることができます。

Kentaro Matsushitaさん

引用元: Kentaro Matsushita

Kentaro Matsushitaさんのポートフォリオサイトは、シンプルなデザインで綺麗にまとまっています。

  • スキル
  • GitHub
  • Qiita
  • ブログ記事
  • スライド

をセクションごとに分けて、見やすいですね。

各セクションのデータは、APIを利用して、自動的に更新されるようです。この辺の工夫も参考にしたいですね。

アウトプットを継続的にされていて、素晴らしいです。

unshiftさん

引用元:unshift

unshiftさんは、デザイン性が高いポートフォリオサイトです。フロントエンドを専門にされているだけあって、WebGLやthree.jsを使って、インタラクティブなデザインが特徴的です。

フロントエンドエンジニアを目指す人は、ポートフォリオサイト自体を凝った作りにして、スキルのアピールをすることができますね！

色や余白の使い方も上手なので、デザインを学びたい人は参考にするといいと思います。

エンジニア未経験者OK！ポートフォリオの作り方

では、エンジニア未経験でもできる、魅力的なポートフォリオの作り方を解説します！

次のステップで始めてみましょう！

  1. エンジニアがアピールすべきポイントを知る
  2. 自分のスキルセットを棚卸しする
  3. ポートフォリオを作るポイントを知る
  4. ポートフォリオを作る

エンジニアがアピールすべきポイントを知る

まずは、ポートフォリオで何をアピールすべきか知りましょう。

エンジニアがポートフォリオでアピールするべきポイントは、次の通りです。

  • スキルセット
  • プロジェクトの経歴
  • Qiita、Zenn、ブログなどの記事
  • Webサイト、アプリなどの実績
  • 発表などの登壇履歴やスライド
  • GitHubのソースコード

スキルセット

スキルセットは、プログラミング言語や自身のスキルセットを視覚化したものです。

例えば、先ほどの例で見た「Kentaro Matsushitaさん」は、棒グラフにしてますよね。

ここでは、自分のスキルを客観的に載せましょう。

気をつけたいのは、「自分が何が得意なのか」をハッキリさせることです。フロントエンドかバックエンドか、インフラ周りか、デザインなのか。

分かりやすいグラフにすることで、ひと目で見たときに「この人はこれが得意なんだ」という印象付けをすることができます。

Qiita、Zenn、ブログなどの記事

ポートフォリオには、Qiitaやブログ記事のリンクも載せましょう！

QiitaやHatenaブログは、APIが提供されているので、自分の記事一覧を表示することもできます。

「記事の数が少ないから恥ずかしい…」

という人もいるかもしれません。

少なくても努力した証なんですから、アピールしましょう。

それに、「載せるからには記事を書かない！」という動機付けにもなります。

ポートフォリオ駆動で、アウトプットを促しましょう！

Webサイト、アプリなどの実績

エンジニア未経験者の方は、重要なパートです。

プログラミングの実務経験がないので、実績でアピールするしかありません。

作るものは、何でもいいと思います。そんなに大きなサイトでなくても大丈夫です。ログインページのみや、LP(ランディングページ)だけでもいいでしょう。

ただ、「アピールしたい技術」はハッキリさせておきましょう！

例えば、フロントエンドエンジニアなら「モダンなJavaScriptフレームワークを使える」ことや「HTML&CSSのコーディングができる」ことをアピールしましょう。

アピールしたい技術 作るもの アピールポイント
  • React.js
 SPA(シングルページアプリケーション)のログインページ
  • モダンなJavaScriptフレームワークを使える
  • SPAの作り方を知っている
  • HTML5&CSS
 擬似のLPサイト
  • HTMLコーディングできる
  • CSSの知識がある
  • デザインについても勉強してる

そして、作った過程で

  • 学んだこと
  • 苦労したこと
  • 工夫したこと
  • 使用した言語

などの概要をポートフォリオにまとめてあると、更にプラス評価です。

例えば、次のようなイメージですね。

それ以外にも、

  • Todoアプリ
  • 掲示板
  • チャットアプリ
  • TwitterのようなSNSサイト

などもいいと思いますよ！

発表などの登壇履歴やスライド

技術コミュニティで発表したことがある人は、スライドをポートフォリオに載せましょう。

登壇するのは少しハードルが高いかもしれません。地方在住で、なかなか機会がないという人もいるでしょう。

そんな人は、スライドだけ作って載せるのもありです！

スライドに概要だけ載せて、面接時に詳細な説明をしたり、Youtubeに動画で上げたりなど、工夫次第で活用法はあります。

GitHubのソースコード

GitHubのソースコードを全て見る担当者はいないかもしれません。

ただ、ポートフォリオに載せている作品のソースコードは公開しておきましょう。

技術担当の人は、どんなソースコードを書いているかチェックします。

エンジニアなら、ソースコードを見れば、だいたいのレベルが分かります。

  • コードのシンプルさ&綺麗さ
  • ファイル構成
  • アーキテクチャ

など、自身でチェックしておきましょう。

実際、少し注意すれば、誰でも綺麗なコードを書くことができます。

常に、誰が読んでも分かるコードを書くように心がけることが大事です。

自分のスキルセットを棚卸しする

エンジニアのポートフォリオで、何がアピールポイントになるのか理解した後は、自分のスキルセットを棚卸ししましょう。

  • 今までやってきたプロジェクトの概要
  • プログラミングスクールで習ったこと、課題など
  • 使えるプログラミング言語
  • ブログ記事
  • アピールしたいGitHubのリポジトリ

この段階で、アピールできるものが少なかったら、少しずつ増やしていきましょう。

ブログ記事なら、3記事でもいいです。

何度も言うようですが、ポートフォリオ駆動で、アウトプットを増やしましょう！

長い目で見て、アウトプットすることに意味があります。それを貯めておく場所として、ポートフォリオを活用しましょう。

スキルセットの棚卸しで重要なのは、「自分が何が得意なのかを知ること」です。

そのために、プログラミング言語は、アピールしたい主軸になるものを一つ選びましょう。

  • フロントエンドなら、JavaScript、TypeScript
  • バックエンドなら、Ruby、PHP、Go
  • アプリなら、Swift

など、自分が自信のある言語をピックアップして、アピールポイントにしましょう。

ポートフォリオを作るポイントを知る

エンジニアのポートフォリオを作るポイントは、次の通りです。

  • シンプルなものでいい
  • デザイン性よりも分かりやすさ重視
  • 文字は少なくてもいい

Webデザイナーやグラフィックデザイナーだと、デザインセンスを問われることがありますが、エンジニアが注視されるのは「技術力」です。（もちろん、デザインにこだわった方が評価が高いこともありますよ）

そのため、シンプルなもので全然問題ありません。

先ほど例で紹介した、シングルページはいいと思いますよ。

多くの文字や情報を載せなくても、しっかりとアピールはできます。

特に転職だと、採用担当者はポートフォリオの全てを見るわけではありません。分かりやすくて、要点がまとまっていた方が高評価になることがあります。

ポートフォリオを作る

スキルセットの棚卸しもできて、ポートフォリオのポイントも抑えたら、あとは作るのみです！

作りたいサイトをイメージして紙に書く。

figmaなどのデザインツールを使う。

それを元にHTMLを組み上げる。

やり方はそれぞれですが、自作したポートフォリオは愛着も湧くし、ポートフォリオ自身も作品の一部になります！

紹介したことに注意して、魅力的なポートフォリオを作ってみましょう！

【時間がない方向け】ポートフォリオを作れるサービスもあります

しかし、実際にポートフォリオを作る時間がないという人も多いでしょう。

そんな方は、エンジニア向けのポートフォリオ作成サービスを利用しましょう。

  • RESUME
  • Wantedly
  • LAPRAS

シンプルで綺麗なデザイン「RESUME」

引用元: RESUME

RESUMEは、誰にでも簡単にポートフォリが作れるポートフォリオ作成サービスです。エンジニアのみならず、マーケター、起業家、カメラマンなど、幅広いニーズに答えるために設計されています。

RESUMEでは、

  • プロフィール
  • 職務経歴
  • 作品
  • スキルセット

など、上記で紹介したポートフォリオの項目をフォームから登録できます。

RESUMEのデザインは洗練されていて、とても綺麗です。履歴書代わりにもなるので、「職務経歴」+「ポートフォリオ」と活用するといいでしょう。

プロフィールも作れる「Wantedly」

引用元：Wantedly

Wantedlyは、SNSのような形で企業担当者と繋がることができる求人サービスです。

ポートフォリオ作成サービスを提供している訳ではありませんが、Wantedlyのプロフィール機能はポートフォリオとして活用できます。

プロフィール機能では、

  • 自己紹介
  • やってみたいこと
  • 職歴
  • プロジェクト
  • ポートフォリオや作品
  • スキル
  • 学歴
  • 資格

などを書くことができます。

Wantedlyのプロフィールを充実させておくと、企業の担当者からスカウトメールが届くことがあります。

実際に、私も何度か頂いたことがあります。

Web系のスタートアップが多いので、興味のある人はぜひ登録しておきましょう！

また、外部に公開する用のリンクも生成できるので、Wantedly以外の求人応募をするときもリンクを送信すれば、「履歴書」+「ポートフォリオ」として使えます。

オープンデータから自動で作れる「LAPRAS」

引用元：LAPRAS

LAPRASは、GitHub、Qiita、Compassなどのオープンデータから自動でポートフォリオを作成してくれるツールです。

自分でポートフォリオの項目を書く必要はなく、完全に自動で情報を収集し、スキルを客観的にスコア化してくれます。

GitHubのソースコードや、ブログ記事の執筆だけに集中したい人にはおすすめのサービスですね。

未経験からエンジニアの転職をしたい方は

企業のIT化の加速で、エンジニアの需要は急速に高まっています。

それに伴い、未経験からエンジニアになりたいという人は多くなりました。

エンジニアになるためには、正しいステップを知る必要があります。

こちらの記事を読んで、最短でエンジニアへの転職を目指しましょう。

【初心者のための】未経験からWebエンジニアになる3ステップ【完全保存版】

まとめ

この記事では、エンジニアがポートフォリオをもつメリットとポートフォリオの作り方についてまとめました。

最後にもう一度内容を確認しましょう。

  1. エンジニアがアピールすべきポイントを知る
  2. 自分のスキルセットを棚卸しする
  3. ポートフォリオを作るポイントを知る
  4. ポートフォリオを作る

「ポートフォリオがなくても転職はできたよ！」

という声もあるでしょう。

しかし、ポートフォリオは「転職のため」だけではありません。

ポートフォリオは、エンジニアとして成長するためのツールです。

何度も言うようですが、大事なのはアウトプットをし続けることです。

ポートフォリオは、そのアウトプットという資産を貯めておく場所です。

ポートフォリオ駆動で、色んなことにチャレンジしてみましょう！

経験値とスキルを残しておけば、実績の証になります。

「実績と経験値」、「スキル」が高い人には仕事が安定的に舞い込んできます。

なにより、成長している自分が楽しいですよ。

エンジニアになりたい人は、ぜひ、チャレンジしてみてくださいね！

前の記事

プログラミングがわからないのはどうして？その原因と対策を解説！…

次の記事

フロントエンドエンジニアのポートフォリオの作り方と実例を紹介！