プログラマーのポートフォリオ作成のコツ！注意点や参考例も紹介！｜PG転職ガイド

プログラマーのポートフォリオってどうやって作るの？

プログラマーのポートフォリオのおすすめの参考例やテンプレートを知りたい！

プログラマーのポートフォリオの作成の仕方がわからない方が多いかもしれません。

この記事ではプログラマーを目指す人に向けて、ポートフォリオの作り方や、ポートフォリオを作るメリットをご紹介していきます！

ポートフォリオを作る際のおすすめのテンプレートも紹介しているので、未経験からプログラマーを目指す方もぜひ最後までご覧ください！

また、以下の記事ではそもそもプログラマーとは何なのかについて詳しく解説しているので、ぜひ参考にしてみてください。

→プログラマーとはどんな職業？徹底的に深堀り！やりがいや年収も解説

1.プログラマーのポートフォリオとは？

ポートフォリオとは、和訳すると「書類入れ」「紙ばさみ」「折りかばん」を意味する、イタリア語の「Portafoglio」を語源にした言葉です。

ポートフォリオという単語は、デザイナーやアーティストなどのクリエイターの過去の作品集を指すほか、そのほかにも株や投資信託などの金融商品の組み合わせの内訳を指し示します。

では、プログラマーにおけるポートフォリオはどういう意味で使用されるのでしょうか。

プログラマーにおけるポートフォリオは、その人が習得しているプログラミング言語やITスキルなどをまとめた自作のWebサイトやホームページ、書類等を指します。

近年では、プログラマーの転職市場において履歴書や職務経歴書のほかにポートフォリオの提出を求めてくる企業も増えており、人材のスキルを慎重に見極める傾向が強くなってきています。

関連記事：エンジニアのポートフォリオとは？差をつけるためのコツや作り方を紹介

2.プログラマーがポートフォリオを作成するメリット

プログラマーがポートフォリオを作成するメリットは主に以下の2つです。

ポートフォリオを作成するメリット

• ・プログラマーとして持っているスキルを証明することができる
• ・ポートフォリオに個性をだすことで他のプログラマーと差別化が図れる

ここでは、それぞれのメリットを詳しく説明していきます。

2-1.スキルを証明することができる

プログラマーがポートフォリオを作成するメリットの1つ目は、自分がプログラマーとして持っているスキルを証明することができる点です。

ポートフォリオには、自分がプログラマーを目指すにあたって学習したプログラミング言語の内容や、習得したIT資格の内容、実際に制作したITシステムやアプリを盛り込むことができます。

そのため、現時点での自分の保有スキルをすべてまとめてわかりやすく、採用担当者にアピールすることが可能なのです。

関連記事：プログラマーに必要なスキルは？スキルアップに必要な知識も解説！

2-2.他のプログラマーと差別化が図れる

プログラマーがポートフォリオを作成するメリットの2つ目は、ポートフォリオに個性をだすことで他のプログラマーと差別化が図れる点です。

プログラマーにおける転職では、ポートフォリオの提出を求める企業が増えてきているとはいえ、基本的にはまだ履歴書や職務経歴書のみを提出するのが主流です。

そのためポートフォリオを用意していない場合、企業側からは履歴書や職務経歴書の書類のみで自分の経歴や能力を判断されてしまいます。

履歴書や職務経歴書などの従来型の書類ではフォーマットが指定されているため、どうしても他の求職者と似通った内容になってしまいがちであり、採用担当者の印象に残りにくいというデメリットがあります。

その点、ポートフォリオはフォーマットの指定がないため、個性を存分に発揮することが可能で、クオリティの高いものを作成できれば他の求職者と差をつけて選考に有利になれるのです。

3.プログラマーのポートフォリオの見本例３選

この章では、プログラマーのポートフォリオとして参考になる見本例として以下の3つを紹介していきます。

では、上記のポートフォリオの優れているポイントをそれぞれ見ていきましょう。

3-1.Yoichi Kobayashi

Yoichi Kobayashi氏のポートフォリオは、デザインが洗練されており、インパクトのある仕上がりになっています。

コンテンツは、これまでのキャリアと実績のみというシンプルな構成になっていますが、見た人を惹きつける独自の世界観が確立されています。

自らのスキルや価値観、今後の展望が余すことなく分かりやすく発信されているため、プログラマーを目指す方はポートフォリオを作成する際に参考になるでしょう。

3-2.Kuroda Manato

Kuroda Manato氏のポートフォリオは、グラフや画像を駆使して視覚に訴えかける構成になっており、見る人にエンタメ要素を与える仕上がりになっています。

可愛らしいデザインなため、重苦しさがなく、気軽な気持ちで内容を確認することができます。

多くのユーザーの心に刺さるポートフォリオを制作したい人はぜひ参考にしてみましょう。

3-3.Hoda’s Portfolio

Hoda氏のポートフォリオは、読みやすさとユーモアに優れた出来栄えになっています。

作者の経歴を年表形式で見られるようになっているほか、保有しているITスキルもチャートグラフを用いながら確認できるようになっています。

全体的にバランスの良い出来になっているので、万人受けするポートフォリオを制作したい人にはとても良い教材になるでしょう。

4.プログラマーがポートフォリオに書くべき要素

プログラマーがポートフォリオに絶対に記載したほうが良い要素としては以下の3つがあげられます。

では、それぞれの要素の詳細やなぜ必要なのかについて見ていきましょう。

4-1.自己紹介・経歴

プログラマーがポートフォリオに書くべき要素の1つ目は、自己紹介と経歴です。

自己紹介と経歴の記載がなければ、ポートフォリオを見た人が制作者の人となりを判断できないため、最優先で盛り込む必要があります。

経歴の部分は、プログラマー経験者であれば前職での開発環境などを記載します。

未経験者の場合は、学習で取得したIT資格や自分が運営しているWebサイトがあればそれらに関して書くようにしましょう。

4-2.保有スキル

プログラマーがポートフォリオに書くべき要素の2つ目は、自分の保有スキルです。

現段階で習得済み、あるいは学習中のプログラミング言語について、どのレベルまで身につけているかを明確にして記載しましょう。

また、プログラミング言語以外にもネットワークやセキュリティ、サーバーなどほかに保有しているITスキルがあればそれらもすべて記載してアピールしていきましょう。

4-3.自主制作物

プログラマーがポートフォリオに書くべき要素の3つ目は、自主制作物です。

自主制作物として、ホームページやWebサイト、アプリケーション、ITシステムなどがあればそれらのURLを載せるようにしましょう。

また、それらの自主制作物の開発期間や注力した部分、制作したことで成長した知識・スキル、フォロワー数や収益などの成果もあれば合わせて記載すると、より採用担当者からの評価につながりやすくなるでしょう。

5.プログラマーのポートフォリオの具体的な作成方法

プログラマーのポートフォリオの具体的な作成方法は、以下の順序で行います。

では、それぞれの手順の中身を詳しく解説していきます。

5-1.ポートフォリオの作成に必要なものを用意する

まずは、ポートフォリオの作成に必要な以下のものを用意していきます。

では、上記の素材についてさらに掘り下げていきます。

●画像データ

プログラマーのポートフォリオにおける画像データとは、ファーストビュー画像とも呼ばれるユーザーの視覚にもっとも入りやすいポートフォリオのテーマになる画像のことです。

画像データは、ポートフォリオ全体の雰囲気や印象を決定づけるため、かなりこだわる必要があります。

そのためテンプレートではなく、たとえば、独自にデザインしたイラスト画像や顔出し可能の場合は自分の顔が確認できる画像を用意して、オリジナリティや個性を出していきましょう。

●制作物

ポートフォリオに記載するために、簡単なアプリケーションなどを開発して制作物としてまとめておきましょう。

アプリケーション開発といっても、プログラミング上級者向けの難しいものではなく、未経験者でも取り組みやすい掲示板やカレンダー、カウントダウンタイマー、ToDoリストなどがおすすめです。

制作物は1つのみだと少し物足りず、数が多いほど自分のスキルをアピールできるため、5個程度は用意しておきたいところです。

●スキルシート

プログラマーのポートフォリオに載せるスキルシートは、自分の保有しているITスキルをまとめたものになります。

たとえば、習得したIT系の資格やプログラミング言語、そのほかにビジネス系のスキルがあればそれらをまとめてできる限り詳しく書いていきましょう。

5-2.ポートフォリオの構成を考える

画像データや制作物、スキルシートが用意できたらポートフォリオ全体の構成を考えていきましょう。

たとえば、自己紹介・スキル・キャリア・制作物・実績・提供できるサービス・問い合わせフォームなどの要素をポートフォリオ内にどのような順番や位置で配置するのかを決定していきます。

5-3.制作物を公開する

ポートフォリオ全体の構成を考えて、すべての要素のデザインやコーディングも完了したら、制作物を公開していきます。

制作物の公開方法は、GitHubなどのプラットフォーム上に公開すると、多くのユーザーの目にとまりやすくなるでしょう。

6.プログラマーがポートフォリオを作るときのポイント

プログラマーがポートフォリオを制作するときに注意するべきポイントは主に以下の4つです。

では、それぞれのポイントの詳細に迫っていきます。

6-1.一目でわかる構成にする

プログラマーがポートフォリオを制作するときに注意するべきポイントの1つ目は、見た人が一目で内容がわかる構成にすることです。

ユーザーや採用担当者が見た際になるべく頭を使わずに内容を確認できるように、ユーザー目線でポートフォリオを作成するようにしましょう。

自己紹介や経歴、スキル、実績などを雑に記載せずに、それぞれ区別したデザインにすると視覚的に見やすくなるでしょう。

6-2.ソースコードも読みやすいように整理しておく

プログラマーがポートフォリオを制作するときに注意するべきポイントの2つ目は、ソースコードも読みやすいように整理しておくことです。

ソースコードとは、プログラムの動作処理の内容が記載された、アルファベットや数字、記号などの文字列が並んだテキストファイルのことです。

ポートフォリオのサイトを制作した際のソースコードもユーザーに読みやすいように整理して公開しておくことで、自分のプログラミングスキルを証明したり、アピールできたりが可能になります。

6-3.オリジナリティを出す

プログラマーがポートフォリオを制作するときに注意するべきポイントの3つ目は、オリジナリティを出すことです。

どこかありふれて既視感のある没個性的なレイアウㇳや雰囲気にならないように、ポートフォリオのデザインはなるべくテンプレートを使用せずに、可能な限り自分でデザインするようにしましょう。

また、自分が持っているIT・ビジネススキルはすべて記載して、自己紹介や経歴にユーモアも盛り込むことで個性を出すことができます。

6-4.webと紙のポートフォリオの両方を用意しておく

プログラマーがポートフォリオを制作するときに注意するべきポイントの4つ目は、Web版と紙版の両方を用意しておくことです。

プログラマーの転職市場においては、IT業界ということもあり、ポートフォリオの提出はほとんどWeb版で問題ないことが多いですが、まれに紙媒体でしか受け付けていない企業もあるので、そのような場合にも対応できるように、Web版と紙版の両方があると準備万端でしょう。

7.作成だけじゃない！ポートフォリオを作った後にすべきこと

ポートフォリオは作成しただけですべての作業が終わるわけではありません。

作成したあとも以下のようなことをしていく必要があります。

では、上記それぞれの作業の詳細を見ていきます。

7-1.こまめにポートフォリオを更新する

プログラマーのポートフォリオは、1度作成したあとも定期的に内容を更新するようにしましょう。

期間が経過するにつれて、学習して身につけたスキルや実績、成果物、経歴は当然増えていくので、自分のなかに新しいものを吸収した場合や生み出した場合は、その都度ポートフォリオに記載するようにしましょう。

また、長期間更新されていないポートフォリオは、採用担当者から見た場合「この人は長い間新しいスキル習得していないから学習意欲に乏しい人材なのかな」とマイナスな印象を与えかねません。

7-2.業界研究をしておく

ポートフォリオを作成したあとは、業界研究も入念に行う必要があります。

ポートフォリオを作る目的は、プログラマーとして待遇と労働環境の整った優良企業に転職して仕事を得るためです。

そのため、ポートフォリオを作成して終わりではなく、その先の転職を見据えて面接対策のためのIT業界の研究をするようにしましょう。

業界研究の仕方がわからないなどがありましたら、IT業界専門の転職エージェントのユニゾンキャリアにぜひ1度無料でご相談ください。

IT業界に精通したアドバイザーのもとで転職活動をすることが可能になります。

8.未経験のプログラマー志望がポートフォリオを作る際の注意点

ここでは、未経験者のプログラマー志望がポートフォリオを作成するときの注意点として以下の2つの観点から解説していきます。

では、それぞれの観点を説明していきます。

8-1.プログラマー未経験者でもなるべくポートフォリオを作成しよう

プログラマー未経験者でもできる限りポートフォリオを作成したほうが転職成功しやすくなります。

未経験者であっても、自己紹介や前職の経歴や実績は記載することが可能です。

また、完全に習得していなくても学習中のIT系資格やプログラミング言語について記載することで、自分の意欲をアピールすることができます。

未経験者だからこそ、ポートフォリオで意欲や潜在能力を証明して、ほかの求職者と差別化を図る必要があるのです。

8-2.それでもポートフォリオをつくるのが難しい場合

未経験者でポートフォリオの作成の重要性を認識してもなお、自分1人で作成するのが難しいと感じた場合は、以下の2つの方法があります。

では、それぞれの方法を詳しく見ていきます。

●プログラミングスクールで基礎スキルから学ぶ

自分1人でポートフォリオを作成するのが厳しい場合は、プログラミングスクールを活用ことがおすすめです。

プログラミングスクールで言語の基礎的なスキルを学ぶことで、ポートフォリオに記載するスキルや実績、成果物を得ることが可能になります。

スクールでは、ポートフォリオの制作のサポートがカリキュラムに組み込まれている場合もあるので、そのようなところを選ぶとよいでしょう。

●転職エージェントを利用する

自分1人でポートフォリオを作成するのが厳しい場合は、転職エージェントを利用するという方法もあります。

転職エージェントでは、履歴書・職務経歴書の添削や面接対策、求人紹介のほかに、ポートフォリオの制作サポートも行ってくれる場合もあります。

自分の力のみでプログラマーのポートフォリオを制作する自信のない方は、IT業界専門の転職エージェントであるユニゾンキャリアにご相談ください。

ユニゾンキャリアでは無料でプログラマーを目指す方の転職支援を行います。

興味のある方は、まずは当社のサービスを見てみてください。⇒【ユニゾンキャリアのサービス内容】

9.プログラマーがポートフォリオを作る際におすすめのテンプレート５選

オリジナリティを出すためには、自分でデザインするのがベストですがそうはいっても未経験者にはハードルが高いでしょう。

そこで、この章では、プログラマーがポートフォリオを作る際におすすめのテンプレートとして以下の5つを紹介します。

おすすめのテンプレート

• ・Jimdo
• ・Wix
• ・resume
• ・Template Party
• ・AmebaOwnd

では、それぞれのテンプレートのおすすめポイントを紹介していきます。

9-1.Jimdo

Jimdoは、プログラマー未経験でもスムーズにホームページ制作ができるテンプレートです。

スマホで見てもパソコンで見てもレイアウトの整ったホームページを、ドラッグ＆ドロップの基本操作のみで作成することが可能です。

HTMLやCSSなどのホームページ制作のために必要なプログラミング言語の知識・スキルがなくても格調高いページが作れます。

9-2.WiX

WiXは、さまざまな業種や目的に対応できるホームページが制作できるテンプレートです。

テンプレートの種類は900個以上もあるため、他の人とほとんど被らずに個性的なページを作り出すことができます。

また、各テンプレートは無料でカスタマイズ可能なほか、白紙の状態から自分でデザインする機能もあります。

さらに集客を手助けするSEOやSNS広告のツールが揃っていることも大きなメリットです。

9-3.resume

resumeは、プログラマー未経験者でも直感的な操作で扱えるポートフォリオ作成ツールです。

ポートフォリオのカバーページからデザイン、成果物、公開作業までワンストップで行うことが可能です。

公開したポートフォリオには鍵をつけて閲覧者を制限することもできるので、セキュリティが万全なのも大きな魅力です。

9-4.Template Party

Template Partyは、Web制作業者も無料で使用できるテンプレートを配布しているホームページ制作サービスです。

役所や学校、派遣会社など企業や団体の種別ごとに適したテンプレートが用意されています。

また、ある程度のプログラミングスキルを持っている中級者向けにテンプレートのパーツを配布しているので、自分で組み合わせてホームページを制作することもできます。

9-5.AmebaOwnd

AmebaOwndは、オリジナリティあふれるホームページやブログを作成できるテンプレートです。

用意されているテンプレートはデザイン性がシンプルなものが多く、ユーザーが見やすいポートフォリオを作成するサポートとしては十分です。

また、InstagramやTwitterなどのSNSと連携する機能もあり、オウンドメディアの制作も行えます。

10.まとめ：自信をもってポートフォリオを作ろう！

この記事では、プログラマーのポートフォリオをテーマにしてきました。

プログラマーにとってポートフォリオは、未経験者でも経験者でも転職の場において、自分の経歴やスキルを証明・アピールする重要なものです。

転職エージェントのサポートを受けながらポートフォリオを制作して、ほかの求職者より一歩進んで有利な状況で転職活動を行っていきましょう。