フリーランスのポートフォリオ作成方法｜エンジニアやデザイナーの見本あり | レバテックフリーランス

フリーランスのポートフォリオに載せるべき5つの項目

ポートフォリオの目的とは、クライアントに自分のスキルや実績を伝えることで、目的達成のために5つの項目が必要です。それぞれ具体的に解説するので、実力と魅力が伝わるポートフォリオを作成しましょう。

プロフィール

ポートフォリオには自己紹介ツールの役割もあるので、プロフィールを載せます。プロフィールに載せる内容は以下のとおりです。

• 顔写真
• 氏名
• 生年月日、年齢
• 経歴
• 出身地、活動拠点
• 主なスキル
• メールアドレス、SNSアカウント
• 自己紹介文

顔写真を撮るときは、スーツでなくても清潔感のある服装を心がけましょう。クライアントがどのような印象を持つかわからないので、ラフすぎる格好は避けるのが無難です。

自己紹介文は長すぎず短すぎない文章量でまとめます。200字前後が目安です。仕事への向き合い方や自己PRを書くといいでしょう。

知られたくない情報があれば無理に書かなくても構いませんが、情報量が多いほどクライアントからの信頼度は高まります。可能なら記載するのが望ましいです。

過去の実績・作品

過去の実績（作品）がフリーランスのポートフォリオの内容の中心となります。作品の画像とともに、以下の要素を盛り込みましょう。

• 作品URL
• 案件またはクライアントの名称
• 公開した年月日
• 制作日数
• 案件の規模
• 担当した作業
• 使用した技術やツール
• 説明文、工夫したポイント
• 成果を示す具体的な数字

実績数が多い方は、自信がある作品を10点ほどピックアップして掲載します。作品を厳選し、クライアントに知ってほしいスキルを的確にアピールしてください。

スキル

ポートフォリオには保有スキルも言語化して載せます。Webデザイナーなら、PhotoshopやIllustratorなどの使用可能なツールをあげます。コーディングができるならHTMLやCSSなどの言語名を書きましょう。

スキルの習熟度はレーダーチャートなどで示すとわかりやすいです。星印の数で表現してもいいでしょう。クライアントがスキルレベルを直感的に把握できるよう工夫してください。

サービス内容と料金

サービス内容と料金もポートフォリオに書くと親切です。Webデザイナーのサービス内容なら、コーポレートサイト制作やECサイト制作、LP制作などになるでしょう。各サービス内容の横には金額を書きます。

料金を決めるのが難しいときは、同業者が提示する価格を参考にするのもひとつの手です。時給ベースでどれくらいの収入があればよいか、から考えるのもよいでしょう。

希望に合う案件を紹介してもらう

ポートフォリオを作るときの流れを3ステップで解説

ポートフォリオを作るときの流れを3ステップで解説します。とりあえず過去の作品を載せるのではなく、自分をどのように見せたいかを意識して作ることが大切です。

まずは目的を明確にする

まず最初に、ポートフォリオを作成する目的を明確にします。どのようなスキルをアピールしたいのか、誰に見てもらいたいのかを考えることが重要です。また商談する相手の特徴が異なる場合は、商談相手ごとに構成や見せる作品を変えることも検討するとよいでしょう。

作品の選定と整理をする

次に、ポートフォリオに掲載する作品を選定します。自分の強みや特長を反映した作品を選ぶようにしましょう。

選んだ作品は、視覚的に魅力的に見えるように整理し、説明文を添えます。制作の背景や意図がわかるような説明文にすることがポイントです。

ポートフォリオを構築する

最後に、選定した作品を基にポートフォリオを構築します。見やすく、魅力的な構成にするために、ポートフォリオのデザインやレイアウトにも注意を払いましょう。

一から自分で考えるのは大変なので、ツールを利用したり、他の人のポートフォリオを参考にするのがおすすめです。

希望に合う案件を紹介してもらう

フリーランスのポートフォリオ作成に役立つツール

フリーランスのポートフォリオ作成に役立つツールを6つ紹介しますWebサイト形式のポートフォリオを作る際はぜひチェックしてください。

WordPress

WordPressは世界的に人気があるWebサイト構築サービスです。テンプレートの豊富さ、デザインの自由度の高さが魅力だといえます。

文章や見出しをブロック単位で編集する「ブロックエディタ」機能がWordPressの特徴です。移動やコピーが簡単で、プログラミングができない人も直感的に操作できるでしょう。

Jimdo

Jimdoはデザイン性を追求した美しいビジュアルが魅力のサービスです。AIの質問に答えるだけで構築できる機能があり、デザインに詳しくない人も簡単にクオリティの高いポートフォリオが作れます。

FacebookやInstagramと連携できるのもメリットです。各アカウントに接続して画像を取得すれば、ポートフォリオ作成がより効率的になります。

Notion

Notionは、自由度の高いカスタマイズが可能なノートアプリですが、ポートフォリオの作成にも活用できます。ブロック単位でテキストや画像、リンクを組み合わせられるため、デザインの知識がなくても見やすいポートフォリオを作成できます。

また、共有リンクを発行すればクライアントに簡単に見てもらうことができ、常に最新の情報を更新しやすい点も魅力です。

Wix

Wixは、ドラッグ＆ドロップで直感的にウェブサイトを作成できるツールで、フリーランスポートフォリオの作成にも適しています。

豊富なテンプレートが用意されており、プログラミングの知識がなくても洗練されたデザインのページを作成できます。また、独自ドメインの設定やSEO対策機能もあり、より多くのクライアントにアピールしやすくなる点が強みです。

strikingly

strikinglyは数分で高クオリティのWebサイトが作れるサービスです。コーディングやデザインのスキルが不要な上、コストも抑えられるのが魅力です。

作成ガイドでは画面の内容に沿った解説が出てくるので、初心者でもスムーズにポートフォリオが作れるでしょう。テンプレートの多くは1ページ完結型ですので、作業負担が軽いのもメリットです。

Salon.io

Salon.ioは、ドラッグ＆ドロップで簡単にポートフォリオが作れるサービスです。コーディングスキルがなくても自由なレイアウトを楽しめます。HTMLやCSSの追加、Youtube動画の表示も可能です。

Salon.ioは無料プランでも広告が表示されません。自分の作品やデザインを全面に出せるのがメリットです。

希望に合う案件を紹介してもらう

参考にしたい現役フリーランスのポートフォリオ5選

実績の載せ方の参考になるポートフォリオサイトを5つ紹介します。いずれもフリーランスとして活躍中の方のサイトです。作品やスキルのアピールの仕方などを参考にしてください。

Hoda's Portfolio

Hoda's Portfolioは、エンジニアのHoda氏が手がけたWebサイトやWebアプリを掲載するポートフォリオです。実績が画像つきでコンパクトにまとめられており、スキルセットも色つきのレーダーチャートわかります。

弱点と今後のスキルアップ方針に言及しているのもポイントです。「現時点で対応可能な作業」と「今後の目標」が明確に伝わります。実績やスキルの紹介方法はもちろん、向上心のアピールの仕方も初心者の参考になるでしょう。

Manato Kuroda

Manato Kurodaは、バンクーバーで活動するWeb開発者・Manato Kuroda氏のポートフォリオです。スクロールで変わる背景色やグラフィック、アニメーションなどが特色で、デザイン性と機能性のあるサイトになっています。

クライアントにサイトを見せるだけで、多彩なスキルと豊かな感性をアピールできるのが魅力のポートフォリオです。わかりやすさだけに留まらない、スキルの効果的な魅せ方を学べます。

UNDERLINE

UNDERLINEはWeb制作のディレクションやデザイン、コーディングを手がける徳田優一氏のポートフォリオです。スクロールしてすぐに目に入るServiceでサービス内容を説明しているので、「何ができる人なのか」が明確です。

全体の色調・構成はシンプルにしつつ、「本人の写真」と「吹き出しメッセージ」で個性を表現しているのも特徴の一つ。クライアントに人柄を伝え、信頼感を与えるポートフォリオを作るのに参考になります。

TAKAYA OHTA

TAKAYA OHTAは、アートディレクターでデザイナーのタカヤ・オオタ氏のポートフォリオです。サイトにアクセスするとすぐに実績が目に入るわかりやすい構成になっています。

実績をクリックすると背景デザインが変化し、スキルのアピールにもなっています。クリック先には豊富な作品画像とともに、細やかな制作意図が記されているのがポイントです。シンプルさを追求しつつ、制作への熱意を伝えたい場合に参考になるでしょう。

Mouf Design

Mouf Designは、WebサイトやゲームのUIデザインを手がける勘村洋和氏のポートフォリオです。鮮やかな背景デザイン、ファーストビューの動きのあるタイトル文字など、遊び心あるサイトになっています。

実績はタイトルのすぐ下で確認可能です。各画像をクリックすると詳細が表示され、作品のテイストが把握できるようになっています。実績をわかりやすく提示しつつ、個性や華やかさを表現したいときに参考になるでしょう。

希望に合う案件を紹介してもらう

ポートフォリオ作成時に気をつけること

フリーランスのポートフォリオ作成で気をつけるべき事柄を見ていきましょう。クライアント目線に立ち、作品の権利を守る姿勢が大切になります。注意点を把握し、問題がないかよく見直した上でクライアントに提出してください。

クライアント目線に立った工夫をする

ポートフォリオはクライアントに見てもらうものですので、相手の目線に立った工夫が必要です。以下のような点に気を配ってください。

• 配色や文字サイズ
• 作品の配置
• 説明文の質と量
• コードの綺麗さ

デザイン性も大切ですが、配色や文字サイズは見やすさ重視で選びましょう。作品配置はテイストごとに分類したり、時系列で並べたりするのがコツです。

作品説明は一文をできるだけ短くするなど、平易な文章を心がけます。文字数は200字～300字ほどを目安にするといいでしょう。Webサイトならコードの綺麗さも追求できれば望ましいです。

過去のクライアントに作品の掲載許可をとる

ポートフォリオに作品を載せるときは、過去のクライアントに許可をとります。契約内容やクライアントの方針によっては、他所での公開が禁止になるケースもあるからです。

フリーランス案件で制作した作品の権利は、基本的にクライアントにあると認識しましょう。許可をとらないとトラブルになる恐れがあるので、掲載するときは過去のクライアントに必ず連絡してください。

フリー素材は規約に則った使い方をする

ポートフォリオにフリー素材を使う際は、規約を細部まで確認してください。フリー素材は無料で使えますが、著作権を放棄しているわけではありません。規約によってはポートフォリオへの利用が難しい場合もあるので要注意です。

人物や企業ロゴが写っている写真素材は、肖像権・商標権を侵害してしまう恐れもあります。規約をよく読むのはもちろん、権利に関する法律の概要も学んだ上でフリー素材を使いましょう。

希望に合う案件を紹介してもらう

ポートフォリオをより魅力的にする5つのポイント

フリーランスのポートフォリオを魅力的にするポイントを5つ紹介します。スキルを最大限に活かしたり、数字で貢献度をアピールしたりするのがコツです。「この人に仕事を任せてみたい」と思ってもらえるポートフォリオを目指しましょう。

手を抜かず、スキルを最大限に活かして作る

ポートフォリオは手抜きせず、真剣に作りましょう。Webデザインやプログラミングができる人は、スキルを最大限に活かすようにします。JavaScriptが使えるなら、動的なポートフォリオサイトを作るなどです。

ポートフォリオはフリーランスにとって名刺代わりになるツールです。クライアントからすれば、名刺代わりのポートフォリオで手を抜く人に仕事を任せたいとは思わないでしょう。今あるスキルをフル活用して作る姿勢が大切です。

PV数など具体的な数字を入れて貢献度をアピールする

事業への貢献度をアピールするために、成果が端的にわかる数字を書きます。以下が数字の例です。

• アクセス数
• クリック数
• ダウンロード数
• PV数
• コンバージョン率

成果物の効果を客観的にアピールするのに「具体的な数字」は有効な手段となります。ポートフォリオを見たクライアントも案件で出た成果をイメージしやすくなるでしょう。

実績は担当した作業の範囲まで細かく記載

実績のアピールでは、担当した作業の範囲を書くのがポイントです。Webサイト制作の案件で担当したのがデザインのみなら、デザインのみと記載しましょう。担当範囲が書かれていないと、クライアントは全工程に対応できるのだと勘違いしてしまいます。

商談をじっくりとすれば齟齬は起きないでしょう。ただ、あらかじめポートフォリオに対応可能な作業を書いておく方が親切です。

公開後も更新やメンテナンスを欠かさない

ポートフォリオは定期的な更新やメンテナンスが欠かせません。活動していれば実績は増え、スキルも上がっていくからです。活動拠点が途中で変わるケースもあります。

長い間更新していないと「活動を休止している」と勘違いされる可能性もあります。ポートフォリオはフリーランスにとって重要な営業・集客ツールですので、内容はアップデートし続けましょう。

セルフブランディングで他の人と差別化する

セルフブランディングで他のフリーランスと差別化を図るのもコツです。他の人のポートフォリオを参照し、自分にしかない強みやアピールポイントを見つけて記載してください。セルフブランディングが上手くいけば多くの受注につながります。

自分の強みがわからないときは、フリーランスエージェントを利用するのも手です。レバテックフリーランスでは、市場価値の判定やキャリア相談を受けつけています。強みを効果的にアピールするポートフォリオ作りの助けになります。

希望に合う案件を紹介してもらう

未経験・実績が少ないときの対処法

載せられる実績が少ない場合にも対処法はあります。案件の実績だけでなく、スクールの課題作品や趣味で作ったものも掲載可能です。10点に満たないときは以下の方法で実績を作ります。

• コンペに応募する
• クラウドソーシングで案件を得る
• 知人に声をかけて依頼を受ける

多様な手段で作品数を増やし、クライアントにアピールできる実績を充実させましょう。

また、ブログやSNSを活用して、自身の知識や考えを発信することも有効です。ポートフォリオと組み合わせることで、クライアントに信頼感を持ってもらいやすくなります。

希望に合う案件を紹介してもらう

フリーランスのポートフォリオに関するよくある質問

フリーランスのポートフォリオに関するよくある質問をまとめました。メリットや必要になる職種について回答しています。ポートフォリオの重要性を再確認してください。

Q.ポートフォリオを作成するメリットは何ですか?

自分のスキルや実績を客観的にアピールできるのがポートフォリオのメリットです。Webサイト形式のポートフォリオを一般公開すれば、集客につながる場合もあります。提出を求めるクライアントも多いので、作っておいて損はないでしょう。

Q.ポートフォリオが必要になる職種は?

ポートフォリオはグラフィックデザイナーやフォトグラファーといった職種で必要になります。クリエイティブな業界で働く人に求められる傾向が強いようです。エンジニアもスキルの客観的証明のために必要になるケースがあります。

Q.ポートフォリオと職務経歴書の違いは?

職務経歴書はこれまでの経験や身につけたスキルをまとめた書類です。ポートフォリオもスキルをアピールする役割がありますが、UI/UXやコードの読みやすさなど視覚的要素が重視されます。また、ポートフォリオではオリジナリティも大事になります。

※本記事は2025年2月時点の情報を基に執筆しております。

最後に

簡単４ステップ！スキルや経験年数をポチポチ選ぶだけで、あなたのフリーランスとしての単価相場を算出します！

希望に合う案件を紹介してもらう