エンジニアポートフォリオの例とは　参考になる作り方を紹介

ポートフォリオとは？

ここではポートフォリオについて聞いたことはあるが詳しくはわからない、ポートフォリオで何を書けばいいのかわからないなどポートフォリオを書いたことがない人やなんとなく書いていた人に向けて解説していきます。

ポートフォリオって何？

まず、ポートフォリオは応募者自身の実績をアピールし、スキルを証明するものです。職務経歴書に経歴を書いたうえでアピールポイントのような要素でポートフォリオを通じて相手に理解をしてもらいます。
また、技術をアピールするだけでなく、自身のスキルについて振り返るきっかけを与えてくれることやキャリアを形成するうえで今後必要なスキルが具体的に理解しやすくなります。

ポートフォリオに記載する内容としては

• 参画したプロジェクトの内容と役割
• 得意なプログラミング言語・スキル
• 自らが作成した成果物であればブログなどのアウトプット

履歴書・職務経歴書との違い

ポートフォリオは履歴書や職務経歴書と違って人材価値を判断することに重きを置かれています。
そのため、ポートフォリオに記載する内容からも読み取れるように、実際にどのように働いたかをプロジェクト内容、自身の役割について具体的に示すことや成果物を通じて自身の技能スキルについて理解してもらうことが重要です。

ポートフォリオの必要性

結論から述べると転職をする場合にはポートフォリオは必要です。理由として、転職する場合には相手企業に提出を求められることが多々あるため必要になります。また、提出が必須でなかった場合でも確認して提出することでアピールに繋がります。

転職をしない場合であれば、ポートフォリオを提出するなどの場面はありません。しかし、自分のキャリアを形成する、必要なスキルを新たに獲得するためにもポートフォリオを作成して考え方やスキルを整理することが大切になってきます。

ポートフォリオ作成のメリット

ここではポートフォリオを作成した場合のメリットを４つ解説していきます。

自らの実績や能力を示せる

ポートフォリオを作成する最大のメリットは、自分の実績や能力を相手にアピールすることができる点です。
過去に参画したプロジェクトの内容や自身の担った役割、使用したツールなどを明示することができます。

さらに、実際に作成したアプリケーションやサービスなどがあれば、画像やデモ映像を盛り込むことで文字では伝えられない要素を具体的に視覚的に訴えかけることができます。

自分のスキルを整理できる

ポートフォリオを作成することで自分でもスキルや経験を視覚的に見返すことができます。
感覚的にわかっていることを言語化することで自分の経験を正しく語ることができるようになることや目標に対して今後習得すべきスキルについて体系立てた計画建てが行いやすくなります。
このことからキャリアプラン、キャリアアップについて検討する際にはポートフォリオを作成することをおすすめします。

エンジニア同士のつながりを作れる

エンジニア同士のコミュニケーションであっても、ポートフォリオの存在は非常に便利に働きます。例えば、新しくプロジェクトが発足し、今までに仕事をしたことのないメンバー同士であっても、ポートフォリオを見せ合うことで互いのスキルを理解し、円滑に仕事を進めることができます。

また、自分が獲得したいスキルに精通している人を探す場合や逆に指導する場合であっても互いの持っているスキルについて具体的に知り合えるため、必要な情報を交換しやすくなるメリットがあります。

転職時のミスマッチを防げる

転職時に履歴書や職務経歴を元に採用の判断を行うといままで担ってきた役割や持っているスキルについて認識の齟齬が生まれてしまうことがあります。そのため、希望していた職種に配属されないことや持っているスキル以上の期待をかけられることで重荷になり自身にとっても企業にとっても良くない結果をもたらします。
しかし、ポートフォリオを元に面接などを行い正しく互いに理解することでミスマッチを防ぐことに繋がります。

ポートフォリオの基本の作り方　6ステップ

ここでは誰でもできるポートフォリオの作り方について解説していきます。

STEP 01ポートフォリオに載せるアプリやプログラムの特徴を決める

まず、提出する企業や希望の職種の特徴、ポートフォリオの利用目的にあわせて掲載するアプリやプログラムの特徴を決定します。

STEP 02掲載するアプリやプログラムを作成または過去のものから選ぶ

決定した特徴に合致する過去の成果物がある場合はそれを載せることで問題ありません。

一方、過去の成果物では今のスキルや伝えたいことを伝えられない場合には新しく成果物を作成することが必要です。
プログラムの複雑さよりも使いやすさやきちんと動作することを重視しましょう。

STEP 03動作するシステムのURL、ソースコードを公開する

成果物を作る場合、過去のものを利用する場合どちらであっても動作するシステムのURLを公開することが必要です。
ソースコードで相手に送ることもできますが、相手がコンパイルする必要があり、手間になるため基本的には公開してそのURLを記載するようにしてください。,

ただし、ソースコードも公開する必要があります。アプリを製作することでスキルに関してはある程度保証できますが、コードの綺麗さや価値のあり方についてはコードを見なければ詳細にわかりません。
自分のスキルを示すためにも「GitHub」や「Qiita」など無料で公開できるサービスに登録して公開しましょう。

STEP 04ポイントをまとめる

ポートフォリオを書くにあたって制作物を魅せるだけでは不十分です。そのため、以下の部分についてまずまとめてみてください。

このようにアウトプットまでの経緯をまとめることで人間性や技術スキルを正確に判断しやすくなります。特に開発背景で「自分が解決したかった事象」について書けていることが重要になってきます。

STEP 05スキルシートを作成する

スキルシートを作成することもポートフォリオにおける重要な項目です。具体的に以下の要素を書き出してください。

スキルシートを用いて自身の経験や技術について余す所なく伝えることが大切です。また、自分に向けてでも現在の立ち位置などを整理するために重要になってくるために、ある程度簡略化して見やすく漏れなく記載できるかもエンジニアの腕の見せどころになってきます。

スキルシートは個人の資料作成のレベルや思考性についても見られるためシンプルかつ丁寧に作成すると良いです。

STEP 06ポートフォリオをまとめて公開する

今までの情報を集めることができたら、ポートフォリオにまとめて書き出し、公開しましょう。
ポートフォリオを公開するサイトはどこでも構いませんが採用担当者や他の人がアクセスしやすいように公開します。

最後に、公開した内容を確認します。文章が正しく伝わる構成になっているか、デザインは見やすいように整えられているかをチェックします。
完成した場合には自分のことをそれほど知らない人に一読してもらい感想をもらうことで完成度を高めることができます。

実務未経験の人向けの作り方

実務経験がない人はポートフォリオに記載するためのアプリやサービスを設計・開発する必要性があります。この場合、自分の得意とするスキルを示すことが非常に大事です。

実務未経験者の場合はこれからの伸びしろなどに期待をするために、無理に企業のやり方に合わせるのではなく、自分のスキルを正しく認知させることを目標に設計・開発をすることをおすすめします。

したがって、要件定義の段階で得意なツールの技術を中心とする技術の使用意図を明確にします。その上で開発する機能が複雑にならず、コードを読みやすく動作が確実に行われるようコーディングをしましょう。

これ以降の手順は実務経験者と同じになります。

職種別ポートフォリオの作り方

エンジニアと一口にいってもWebエンジニアやインフラエンジニアなど様々な種類な種類があり、転職時のキャリアパスも様々です。そのため、職種別にポートフォリオに載せるとよいことの例を紹介していきます。

フロントエンジニア

フロントエンジニアを対象としたポートフォリオを作成する場合には、プログラミング言語としてHTML・CSS・Javascriptによるコーディングスキルがわかることが必要です。 そのうえで以下の要素も入れることができればさらに良くなります。

• レスポンシブデザイン
• UI/UXを意識したデザイン

使いやすい、見やすいことが第一なWebサイトを作ることができれば非常に良いです。デザイナーではないので動きの激しいデザインや魅せることに注力したWebサイトは逆にNGです。

バックエンドエンジニア

バックエンドエンジニアを対象としたポートフォリオを作成する場合には、データベースとの連携処理の部分やOAuth、API連携のコードが中心に来るようにしましょう。外部との連携部分を作った事があるなどのコーディングスキルやデータベースの設計能力の高さがアピールは評価が高くなる傾向があります。

また、AWSやMicrosoft Azureといったクラウドを使っている処理をみせることで、クラウド環境での開発構築をしていたんだなというのが伝わりやすくなります。

最後にセキュリティ対策を行っている・意識している処理が入っていることも重要になります。

システムエンジニア・プロダクトマネージャー

ポートフォリオ参考例

作り方はわかると言っても参考になる例が欲しい、エンジニアの職種によってどのような違いをポートフォリオで見せればよいのか視覚的に理解したいという人に向けてぜひ参考にしたいポートフォリオ参考例を４つ取り上げます。

それぞれのエンジニアの主たる職種が異なるものを挙げているので、アピールしたい方向に近いものを参考に他のものと比較してポートフォリオ作成に役立ててください。

Webエンジニアの参考例

出典：）Makoto Hirao

このサイトはフロントエンドエンジニアの平尾さんのポートフォリオです。
このサイトの特徴は海外で働くことも前提にしているために英語で書かれています。また、開いたページの一部が隠れていることによってスクロールをしてもらう意図を持たせている/span>など魅せる工夫を感じさせられます。

全体が黒で統一され、アニメーションがスムーズなことから魅せたい部分が強調されてつつ、UIが整っている良い参考例になります。

出典：）「HODA Engineering Laboratory」Hodalab

このサイトはバックエンドエンジニアのHodaさんによって作成されたサイトです。
基本的なサイトの構成をしており、非常に見やすく作られている特徴があります。所々に遊び心が散りばめられており、Hodaさんの個性が垣間見えます。

シンプルではありますが、更新がしっかりとされており、読み手に必要な情報が伝わる非常に優れた例です。

インフラエンジニアの参考例

出典：）「chibiharu Information Technology WebSite」chibiharu’lab

このサイトはインフラ（クラウド）エンジニアのchibiharuさんのポートフォリオです。
白黒基調で余白が多くシンプルなことが特徴です。

この理由としてインフラエンジニアはフロントエンドの経験が浅いからです。しかし、ポートフォリオがない場合に比べてシンプルなビジュアルでもスキルシート、インフラエンジニアとしての実績が視覚的に理解でき非常に好印象が得られます。

このようにインフラエンジニアなどのフロントエンドの経験が浅くてもポートフォリオを作ることの重要性がわかると思います。

その他のエンジニアについて

フロントエンドについての知識が浅いとポートフォリオのサイトを作ることは難しいことがあります。
しかし、WordPressやWixなどのサイト作成を補助するツールを用いることやnoteなどのメディアプラットフォームを使うことで簡単にポートフォリオを作成することができます。

WordPress等で作成する場合

WordPress等のCMSを利用してポートフォリオを作成する方法は

• CMSの決定
• 基盤環境の構築
• ドメイン設定
• メールサーバーの設定
• ポートフォリオの作成

この場合のメリットとして独自のサイトが手軽に作れるということ、自分が示したい実績や成果物を魅せやすいということです。

note等で作成する場合

note等のメディアプラットフォームを利用して作成する方法は

• メディアプラットフォームの決定
• 基本情報の登録
• ポートフォリオの作成

note等を利用した場合のメリットはプラットフォームの形式でポートフォリオを作成できるため、ビジュアルを考える必要がありません。また、媒体の中で見え方が統一されているため独自性は下がりますが、読み手が読みやすいことが挙げられます。

このようにポートフォリオを作ることのハードルは簡単に下げられます。尻込みせず、挑戦していくことで経験にもなりますので、ポートフォリオを作ってみることが大事です。

魅せるポートフォリオのポイント

トレンド・需要のある技術でアピール

トレンドの技術や需要のある技術でアピールすることが大前提として大事になってきます。特別な実績を残したとしても需要のある技術でなければ他の人から見た際に理解されにくいです。

また、トレンドの技術を抑えていることで、新しい技術・知識を入れられる人という好印象を与えられるため非常に重要です。

独自性がある

ポートフォリオはありきたりな内容になりがちです。そのために、サイトを魅せるときに独自の配色や動きをつけることが一つの方法です。また、ブログなどを運営している場合にはそちらに誘導するなど動線を様々な方向に張ることが重要です。

しかし、シンプルなテイストを好む場合には自分なりの工夫ポイントや制作意図、今後の展望などを盛り込むなど文章で読んでもらえるようにしましょう

ユーザー目線で設計する

ポートフォリオで最も大事なのは見やすさです。 作った人が技術を詰め込んで作成したサイトであっても、動作が重いことや動線がわからないなどユーザーが感じれば優れたポートフォリオではなくなります。

シンプルであっても配色や文字の色味などでUIを損ねます。作成した後は前提知識がない人にみてもらうことが必要です。

コードを綺麗に整える

ポートフォリオを見る人は成果物だけでなく、コードを解読することでポートフォリオを評価します。また、誰もが読みやすいコードを書けるエンジニアは重宝されます。
そのため、第三者から見てコードがすぐ読めるようにしておくことが重要です。

• インデントや改行、コメントを規則正しく配置する
• 命名規則を統一する
• 適切なタグの使い方をする

上記の項目に特に気をつけてコードを整えましょう

ポートフォリオ作成の注意点

制作物の無断転載に気をつける

ポートフォリオに過去の実績を乗せる場合には、無断転載に気をつけましょう。自分が開発したアプリやサービスであっても守秘義務や機密情報に触れてしまう場合があります。

また、ポートフォリオを作成する上で他人のポートフォリオを参考にした場合に似すぎないことや独自の部分をしっかりと出すことが当然ですが必要です。

複雑に作り込みすぎない

魅力的、理解しやすい、確実に動作するポートフォリオを作成するためにもできるだけシンプルでわかりやすい、ユーザー目線のポートフォリオになるように心がけましょう。

アピールしたい気持ちがあればあるほど、複雑に作り込みすぎてしまいます。設計の段階で要件を整理し、作成を開始してからは内容を追加することは避けましょう。

まとめ

今回の記事ではエンジニアのポートフォリオの必要性から作成方法まで解説していきました。エンジニアは自分の技術を磨く、相手に技術を見せる両面で自己理解が非常に大切です。そのためにもポートフォリオを作成し、今後の成長、キャリアパスの再考、転職に活かしてください。