1. TOP
  2. エンスタマガジン
  3. フリーランス
  4. 【2023年最新】フリーランスエンジニアがポートフォリオを作るべき理由と手順とは。参考にしたい具体的なポートフォリオを紹介

【2023年最新】フリーランスエンジニアがポートフォリオを作るべき理由と手順とは。参考にしたい具体的なポートフォリオを紹介

はじめまして、エンジニアスタイル編集部です!

コラムページでは、ITフリーランスに向けてお役立ち情報を発信します。Twitterではホットな案件を紹介してまいりますので、ぜひフォローをお願いいたします!
本記事が、皆様の参考になれば幸いです。

経験がまだ少ない方にもわかりやすく説明するために、初歩的な内容も記載しております。記事も長いので、実務経験豊富な方は、ぜひ目次から関心のある項目を選択してください。

エンジニアスタイルは、最高単価390万円、国内最大級のITフリーランス・副業案件検索サービスです。フリーランス・副業案件一覧を以下からご覧いただけますのであわせてご確認ください。

目次

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

フリーランスのエンジニアとして働く際に、ポートフォリオを作るべきなのか悩まれるかもしれません。

しかしフリーランスではなくても、仕事を探している場合であれば、ポートフォリオが必要となってきます。

ではなぜ、作る必要があるのでしょうか?

それには理由があります。

ここでは、ポートフォリオを作る必要性は何かをご紹介していきましょう。

自分自身の振り返りに使える

今までどのような仕事を行ったのかを確認することもできるため、ポートフォリオが必要となってきます。

過去を振り返ることにより、どのようなプロジェクトや開発などで活躍したかの強みなどを確認する事ができるでしょう。

スキルの棚卸しができる

今までエンジニアとして持っているスキルが、どの様なものかを棚卸しができます。

この棚卸しによって、自分に合う仕事や強みが分かることでしょう。

スキルの棚卸しを行う際は、下記を参考にしてみてください。

  1. ご自身のスキルや、使えるツールをすべて書き出してみる
  2. 強み・弱み・方向性を書き出してみる
  3. 他の人が見ても分かるように、整理する

スキルの証明となる

今までエンジニアとして培ってきたスキルや実績を、ポートフォリオによって証明できます。

またポートフォリオをクライアントに見せることにより、視覚的に分かるようになります。

小さいスキルであっても、細かく書くことで良いアピールポイントになりますので書きましょう。

力量や実績がわかるため仕事を依頼されやすい

スキルや実績をアピールできるので、ポートフォリオは自己表現できる重要なアイテムです。

またポートフォリオから高い熱意や意欲が感じられた場合は、案件を取得することにも繋がります。

クライアントから案件を任せたいと思わせるような、ポートフォリオを作るように心がけましょう。

フリーランスエンジニアがポートフォリオサイトを作成する7つのステップ

では実際にポートフォリオを作る時は、どの様に作れば良いのか悩まれるかもしれません。

そこで今回は、ポートフォリオを作成する時の7つのステップをご紹介していきます。

1つずつステップを確認する事で、ご自身にあったポートフォリオを作成してみてください。

ポートフォリオのイメージに近いサイトを見つける

実際にポートフォリオを作る時は、どうやって作ればよいか迷うかもしれません。

まず初めに、フリーランスエンジニアが作ったポートフォリオをたくさん探してみてください。

ポートフォリオを公開している人が多いので、検索すれば出てきます。

たくさんのポートフォリオを見ることにより、ご自身のイメージに近いサイトを見つけることができるでしょう。

ワイヤーフレーム・サイトの構成を決める

他の人が作ったポートフォリオをいくつか見ていくうちに、ご自身のポートフォリオのイメージが湧くと思います。

しかしワイヤーフレームを作るのが苦手な場合は、簡単に作成できるツールがありますので利用して構成を決めていきましょう。

ツール名 特徴 料金
Figma クラウド型。
必要な要素が登録されているので選択することで簡単に作ることができる。
無料〜
Adobe XD クラウド型で、PhotoshopやIllustratorなどが使えるAdobeが提供。
シンプルな操作でワイヤーフレームを作ることができる。Adobeコンプリートプランをすでに利用していれば、別途契約は不要。
月額1,298円(税込)〜
cacoo クラウド型。ワイヤーフレームの他にもモックアップ・マインドアップも作成できるツール。 無料〜

作成するツールを決める

ワイヤーフレームができましたら、実際にサイト作成に入ります。

フロントエンジニアであれば、ご自身で1からサイトを作るのも良いでしょう。

しかし、デザインができない場合は、ポートフォリオを作ってくれるツールもあります。

例としていくつかサイトをご紹介します。

サイト名 特徴 料金
WordPress 今では大企業のサイトやECサイトでも使われているWordPress。
今ではWordPressを使いこなせるだけでも武器になり、アピールできるので、
WEBの技術があれば、本格的なポートフォリオを作れる。
サービスのより異なる
(レンタルサーバー代+ドメイン取得+更新費用で計5,000円くらい〜)
PORTFOLIOBOX カスタマイズが可能で、100万件以上のユニークなポートフォリオを作ってきた「PORTFOLIOBOX」。シンプルで洗礼されたデザインが多く、クリエイターに向けたポートフォリオツール。 月額3.5USD〜
Strikingly 無料でもページ制限のないポートフォリオを作成可能。またポートフォリオだけではなく、ブログやECサイトなども制作できる。 無料〜
Ameba Ownd アメーバブログなどで有名なサイバーエージェントが運営。ポートフォリオに特化していないが、ホームページやブログなどが作成可能。また更新はスマホからでもできる。 無料〜

サイトを開設する

インターネット上にポートフォリオを公開するために、サイトを開設する必要があります。

上記で紹介したようなポートフォリオを作るツールを使う場合は、サイト開設が含まれている場合もあります。

もしご自身でサイトを開設しなくてはいけない場合は、開設しましょう。

サイトを開設することにより、インターネット上で検索をしたら見られるようになります。

作成したワイヤーフレームに沿ってページを作成していく

サイトを開設したら、考えておいたワイヤーフレームに沿って、ポートフォリオを作成していきましょう。

もしページを作る際に困った場合、1つのコンテンツを四角形にして考えてみてください。

その四角いコンテンツを箱の中にきれいにはめ込むように作ると、まとまりが出て見みやすくなります。

文章や掲載画像などを選定して反映する

ポートフォリオの形が決まりましたら、実際に文章や掲載画像を入れていきましょう。

アピールできる場だからといって、情報をたくさん詰め込みすぎると見づらくなります。

そのためにも、簡潔にまとまった文章を心がけてください。

それでも文章が多すぎると感じた場合は、改行や画像を挟むことにより読みやすくなります。

文章は目視だけではなく、声に出して読むことにより誤字脱字を防げます。

完成できましたら、最後は声に出して読み返してみてください。

Google Analyticsをはじめとした計測タグの設置をする

計測タグを設置することで、サイトを観覧した人数やどういう流れで離脱したのかなどが分かります。

計測タグの詳しい情報は下記になります。

もし計測結果が悪ければ、サイト自体を変えてみましょう。

また離脱する人数が多ければ、提案文の内容も変えるなどの改修を考えてみてください。

エンジニアスタイルでは、20万件に及ぶフリーランスエージェントの案件をまとめて閲覧することができます。
自分に合った案件を見逃すことなく、じっくり案件を比較することで最適な案件に参画することができるので、ぜひ活用ください。

フリーランスエンジニアがポートフォリオに載せておくべき内容

では実際にポートフォリオを作る時、何を載せればいいのでしょうか。

載せるべきポイントを押さえることで、作成時には困らないことでしょう。

それでは、ポートフォリオに載せておいた方がよい内容をご紹介していきます。

プロフィール

まず初めに、自分がどういう人なのか簡単に紹介しましょう。

以下の項目を記載してください。

  • 名前
  • 生年月日
  • 顔写真
  • 経歴
  • 活動拠点
  • 連絡先
  • 今の仕事を選んだ理由

スキルセット・強み・アピールポイント

ご自身が使えるコードなどのスキルセットを書いてください。

その中でもご自身が強みと思っているものや、他人から褒められたなどのことがあればアピールポイントになりますので記載しましょう。

今までの実績

今まで参加してきたプロジェクトやアプリ開発などの実績がありましたら書いてください。

その場合、下記のような内容を詳しく書くと良いでしょう。

  1. 案件のどの領域を担当したか
  2. 誰と案件に取り組んだか
  3. どのような工夫をして、案件に取り組んだか

対応できるサービスや料金

料金体系を記載しておくことで、契約後のトラブルが起きにくくなります。

また、クライアント側からの値段交渉の時間も省けるのでメリットにもなるでしょう。

しかし、クライアントと相談しながら決めたい場合は、あえて料金を掲載しなくてもよいため、必要に応じて掲載するかどうか決めてみてください。

他と差別化を図るために、フリーランスエンジニアがポートフォリオを作成する際に見ておきたいポイント

ポートフォリオを作る際に、ポイントがいくつかありますので押さえておきましょう。

そのポイントを抑えることによって、クライアントが視覚的にもわかりやすくなり、メリットになります。

それではポートフォリオを作成する際に見ておきたいポイントをご紹介していきます。

可能であれば数字的な根拠や実績を掲載

ポートフォリオに載せる実績は、クライアントの許可が必要になります。

もし許可が降りたのであれば、実際にどのくらい数字が伸びたかなど、視覚的にわかりやすい実績を掲載すると良いでしょう。

数字を記載することにより、見た人がどのくらいの実力があるのかを感覚的にも分かりやすくなるでしょう。

案件の「どの」領域を担当したのかを明確にする

案件によっては、多数の人の手が加わったことで完成した案件もあることでしょう。

そこで、どの領域を担当したのかを明確にすることにより、クライアントも具体的に把握しやすくなります。

案件ごとに、どのくらい関わったのかを明確化してポートフォリオに記載しましょう。

「誰と」案件に取り組んだのか・巻き込んだのか明確にする

同じ制作領域であっても、1人で行ったのか、チームを組んで行ったのかで変わってきます。

もし1人で全部行った場合であれば、スキルの幅をアピールする事ができます。

チームで制作した場合であれば、ディレクターのポジションも任せられるというアピールもできます。

1人で行ったとしても、チームで行ったとしても十分にアピールができますので、どのような過程で案件に取り組んだのかを明確にして書きましょう。

「どのように」案件に取り組んだのか明確にする

1つの案件でも、クライアントに頼まれたのか、それとも自ら改修を提案して取り組んだのかでは変わってきます。

もし、ご自身の提案で取り組んだ案件がありましたら、どのような背景で案件に取り組んだのかを明確にすることにより、見る視点が他の人と違うことのアピールができるでしょう。

フリーランスエンジニアがポートフォリオを作成する際の注意点

ポートフォリオを作成する上での注意点を知っておかないと、場合によってはトラブルに巻き込まれる可能性も出てきます。

どのような注意点があるのかをご紹介していきますので、確認してみてください。

掲載したい実績や作品を公開して問題ないかクライアントに確認

これまで参加してきた案件や実績のすべてを、クライアントが著作権として持っています。

いくら大きな仕事を受けたとしても、その案件をクライアント側が公開していない場合もあります。

そのため、実績などをポートフォリオに許可なしでは載せることができません。

知らずに載せてしまうと、契約違反や著作権違反などで訴えられる場合があります。

トラブルに発展しない為に、事前にクライアントへ許可を取るようにしましょう。

見る人に配慮した内容にする

ポートフォリオは自分のために作るものではなく、他の人に見せるものです。

そのため、相手の立場に立ってポートフォリオを作るように心がけましょう。

例えば「見やすい文字の大きさや配色で作られているか」や「情報量が多すぎではないか」などです。

この後、おすすめするポートフォリオをご紹介していきます。

参考にして作ってみてください。

定期的な更新を心がける

ポートフォリオが完成したら、終わりにしてはいけません。

ポートフォリオは、作った後も更新していく必要があります。

なぜなら、案件を受けていく限りはスキルも向上していき、変化していくからです。

また更新がされていないと、活動していないのかとクライアントが勘違いしてしまう場合があります。

取れていたはずだった仕事を逃さないためにも、定期的にポートフォリオを更新していきましょう。

フリーランスエンジニアが参考にしたいポートフォリオ

フリーランスエンジニアが手がけたポートフォリオがサイト上で公開されています。

そこで、ここでは7名のポートフォリオをご紹介していきます。

どれも個性があるポートフォリオになりますので、参考にしてみてください。

Takeshi Oide

現在、カナダ在住のTakeshi Oideさん。

フリーランスで、フロントエンドエンジニアとして活躍されています。

動きのあるポートフォリオで、洗練されたデザインが印象的です。

アプリ開発やホームページ作成などの実績がわかりやすく紹介されています。

Takeshi Oideさんのポートフォリオ

MASAYUKI DAIJIMA

テクニカルディレクターや、デザイナー、フロントエンドなど色々な肩書きがあるMASAYUKI DAIJIMAさん。

国外でのデジタル広告賞の受賞が多く、現在フリーランスとして東京をベースに国外でも活動されています。

音楽も組み合わさったスタイリッシュなポートフォリオが印象的です。

MASAYUKI DAIJIMAさんのポートフォリオ

Hoda’s Portfolio

エンジニアのHondaさん。

可愛らしいアイコンのサイトが印象的で、温かみのあるポートフォリオです。

プロフィールも年代ごとに書かれており、参考にしやすいでしょう。

Hoda’s Portfolioさんのポートフォリオ

Takumi Hasegawa

グラフィック技術を得意としている開発者であり、テクニカルディレクターです。

3Dの動きのあるグラフィック技術が特徴的なポートフォリオ。

このポートフォリオだけで、インタラクティブデザイナーとしての強みがあることがわかるでしょう。

Takumi Hasegawaさんのポートフォリオ

Yoichi Kobayashi

プログラミングに関する技術を独学で取得した開発者のYoichi Kobayashiさん。

燃えるガイコツがインパクトのあり、個性が感じられるポートフォリオです。

スクロールするたびに旗が燃えていく演出もコンセプトが感じられます。

Yoichi Kobayashiさんのポートフォリオ

YUTO TAKAHASHI

有名なアパレル企業のECサイトを担当していたWEBデザイナー。

今では、グラフィックデザイナーやフロントエンドエンジニアなどたくさんの肩書きを持っています。

デザイン性とエンジニアスキルが兼ね備えているポートフォリオになっており、ご自身のアピールできるポイントをふんだんに演出しているのが印象的です。

YUTO TAKAHASHIさんのポートフォリオ

Kuroda Manato

カナダを拠点としているWEB開発者でありWEBデザイナー。

場面により切り替わるポートフォリオが印象的で、とても可愛らしいポートフォリオです。

Kuroda Manatoさんのポートフォリオ

ポートフォリオを作成したらエンジニア案件に強いフリーランスエージェントに登録しよう

それではここからはエンジニアの案件に強いエージェントをご紹介していきます。

エージェントを複数利用することで精神的な余裕も生まれるため、気になるエージェントがあればチェックしてみましょう。

ITプロパートナーズ

最大の特徴は週2日から稼働できる案件を多数掲載していることです。リモートワークなども含めてより柔軟な働き方を実現したい方におすすめです。

エンド直の案件がたくさんあるため高単価案件が多く、週2〜3日の稼働でも十分な報酬を得られます。

また最新トレンドの案件もあるため新しい技術に触れたい方にも向いています。

Midworks

Web系の案件を多数保有しておりWeb系に強いエージェントです。報酬保障や民間保険料の半額負担など福利厚生面が手厚く、独立したての方にも安心です。

目先の案件のことだけでなく今後のキャリアの相談などにも乗ってくれるため、将来的なキャリアパスに悩んでいる方にもおすすめです。

テックビズフリーランス

独立経験のある専属コンサルタントによるサポートを受けることができるため、これから独立を考えている方やフリーランスになりたての方に特におすすめのエージェントです。

税務関連のサポートなども無料で受けられる他、平日夜遅くの時間や土日などでも対応可能なため忙しい方にも便利です。

また都心だけでなく全国の優良案件を多数保有しているため、地方にお住まいの方やリモートで稼働したい方にもおすすめです。

フリーランスポート(Freelance Port)

案件紹介だけでなく、フリーランスエンジニアのブランディングやコミュニティへの参加など総合的なプロデュースのサポートを受けられることが特徴です。

フリーランス・顧客企業共に審査性で需要と共有バランスを適正に調整しているため成果を出せれば再指名などの継続受注も発生します。

フリーランスとして今後働く幅を広げたい方におすすめのエージェントです。

TechStock

2次請けよりも深い案件は基本的にないため、高単価・高報酬案件を多数掲載しています。

17年間の実績があるため他社にはない非公開案件も多くあり、独立直後のサポート体制も充実しています。

また他エージェントと比べて最大の特徴として、報酬が月末締め翌15日払いに対応していることが挙げられます。

報酬の支払いサイトが短いため、報酬を比較的すぐに受け取れることができます。

エージェントを使わないという手もある

エージェントを活用してマージンを取られたくないという方は、自分で営業する、SNSを活用するなど方法は考えられます。
以下の記事も併せてご覧ください。

まとめ

フリーランスエンジニアがポートフォリオを作るべき理由と手順をご紹介してきました。

ポートフォリオは自分を売り出すための資料になります。

初めてポートフォリオを作る場合は、いくつか参考にしたいポートフォリオを見つけるとよいでしょう。

  1. ポートフォリオは自分のスキルの証明になる
  2. たくさんのポートフォリオを見て参考にすると良い
  3. 他者との差別化を図るように心がける
SNSシェア
新規会員登録エージェントとの初面談1社につきAmazonギフト券3,000円分全員にプレゼント!

あわせて読みたい関連記事


おすすめ&新着求人・案件


各種SNSで情報を
発信中フリーランスで働くエンジニアに役立つ情報を発信しています。
フリーランス求人・案件の選び方や注意点、単価を上げるコツなどをエンジニアスタイルの編集部が発信しています。
フォロー・友達に追加していただき最新の情報をGETしてください。