PR|無料レッスン20本を受け取る

WebデザイナーのFigmaポートフォリオは5構成で案件獲得

◆ ◆ ◆

Home › フリーランスの仕事術 › WebデザイナーのFigmaポート...

FREELANCE CAREER GUIDE
フリーランスの仕事術
WebデザイナーのFigmaポートフォリオは5構成で案件獲得
フリ転。

Figmaを使ったWebデザイナーのポートフォリオは、5つの基本構成を整えることで、制作実績が少なくても案件獲得につながります。Figma Communityの無料テンプレートを起点に、ケーススタディ形式で実績を見せる方法を解説します。

▼ 2問・30秒の診断で、あなたに合う働き方をチェック

目次

この記事でわかること

この記事に関連するツール

提案書テンプレート

実績を提案書の形にまとめられます

FigmaポートフォリオはCommunity無料テンプレートで10分以内に開始できます。実績3件からでも問い合わせが来る5構成の設計方法を具体的に解説します。公開方法(Figmaリンク・PDF・Web)の選び方と、案件転換率を高める5つの仕組みをまとめて習得できます。

30秒診断全2問・あなたに合う働き方のタイプが分かります

Q1. 今のデザインの仕事で、一番近い悩みは?

この記事の結論

FigmaでWebデザイナーのポートフォリオを作る際、完成画像を並べるだけでは依頼につながりません。制作プロセスと成果を伝えるケーススタディ形式で見せることが最優先です。Figma Communityの無料テンプレートを複製し、トップページ・プロフィール・制作実績・サービス・問い合わせの5構成を整えれば、実績3件からでも依頼につながるポートフォリオになります。公開前に共有リンクの権限設定とクライアントワークの公開許可を必ず確認してください。

今日やるべき1つ

Figma Communityで「portfolio」と検索し、フリーランサー向けテンプレートを1つ複製してファイルを作成してください(所要時間:10分)。

状況別ショートカット

状況読むべきセクション所要時間
テンプレートの選び方から知りたいFigmaポートフォリオはCommunity無料テンプレートで3ステップ選定5分
ポートフォリオの基本構成を知りたいフリーランスPofoは5構成で依頼を引き寄せる7分
作品の見せ方・ケーススタディの書き方を知りたいケーススタディ形式で完成画像より3倍伝わる8分
自分の状況に合った対応を知りたいFigmaポートフォリオの公開方法を3分で診断3分
公開方法(リンク・PDF・Web)を比較したい公開方法はFigmaリンク・PDF・Webの3択5分
実践的なノウハウをまとめて知りたいFigmaポートフォリオは5つの仕組みで案件獲得10分

FigmaポートフォリオはCommunity無料テンプレートで3ステップ選定

Figmaでポートフォリオを一から作ろうとすると、レイアウト設計に時間がかかりすぎて、肝心の作品整理が後回しになります。Figma Communityには、フリーランサーやWebデザイナー向けの無料テンプレートが多数公開されており、3つのステップで自分に合ったテンプレートを選べます。

テンプレート検索は3つのキーワードで絞り込む

Figma Communityの検索欄で「portfolio」「freelancer portfolio」「web design portfolio」の3キーワードを順に試してください。フィルターで「Free」を選ぶと無料テンプレートに絞り込めます。検索結果には、プロフィール・作品ギャラリー・ケーススタディ・問い合わせページを備えたテンプレートが多数表示されます。ゼロからデザインを考える必要はなく、既存の構成を自分の案件獲得目的に合わせて編集するだけで機能するポートフォリオが完成します。

選定基準は「構成の完成度」と「ライセンス確認」の2点

テンプレートの選定は2点で判断します。第一に構成の完成度として、プロフィール・実績・サービス・問い合わせの4ページ以上がそろっているか確認します。第二にライセンスとして、テンプレートのページ下部またはファイルの説明欄に「Commercial use: OK」または「CC0」の記載があるか確認します。商用利用の可否はテンプレートごとに異なるため、記載がない場合は作者に確認するか、別のテンプレートを選んでください。

Freelancer Portfolio(Figma Community)は、フリーランサー向けに設計されたミニマルなレイアウトが特徴で、コード化しやすい構成になっています。Product Design Portfolio(Figma Community)は、初心者がポートフォリオの構成や見せ方を学ぶ出発点として公開されており、改変・学習利用を前提としています。いずれも複製してすぐに編集を始められます。

テンプレートの複製と初期設定は15分で完了する

選んだテンプレートの画面右上にある「Duplicate」ボタンを押すと、自分のFigmaアカウントにファイルが複製されます。複製後は、ファイル名を「ポートフォリオ_自分の名前_v1」のように整理し、各ページ名を「Top・Profile・Works・Service・Contact」に変更します。不要なページは右クリックで削除し、レイヤーパネルも「Header・Hero・Section・Footer」と命名しておくと、後から編集しやすくなります。この初期設定を15分で済ませることで、以降の編集作業が格段にスムーズになります。フリーランスがFigmaでポートフォリオをまとめる方法も合わせて参照すると、ファイル設計の全体像が把握できます。

CHECK

▶ 今すぐやること: Figma Communityで「freelancer portfolio」と検索し、Free・商用利用可のテンプレートを1つ複製する(10分)

Q: Figmaの無料テンプレートは商用利用できますか?

A: テンプレートによって異なります。ファイルの説明欄やCommunityページのライセンス表記を確認し、「Commercial use OK」または「CC0」の記載があるものを選んでください。記載がない場合は作者への確認が必要です。

Q: Figma CommunityのテンプレートはFigma無料プランで使えますか?

A: はい、無料プランでもテンプレートの複製・編集は可能です。ただし、無料プランではページ数に制限があるため、ポートフォリオのページ数が多い場合はプロプランの検討も選択肢になります。

フリーランスPofoは5構成で依頼を引き寄せる

フリーランスとして案件獲得を目的とするポートフォリオに必要な情報は、一般的な「作品集」とは異なります。クライアントが依頼前に確認したいのは「この人に頼んで大丈夫か」という不安を解消する情報です。その不安を5つの構成で解消することで、問い合わせ数が増えます。

トップページは3秒で伝わるキャッチコピーと代表作1点

トップページに訪れたクライアントが最初に見るのは、あなたが「何をする人か」と「どんな実績があるか」の2点です。キャッチコピーは「LP・コーポレートサイトのWebデザイン専門|フリーランスデザイナー◯◯」のように、対象領域と立場を20文字以内で明示します。代表作は最も自信のある1点を大きく表示し、クリックでケーススタディページに遷移する設計にします。冒頭で専門領域が伝わらないと、クライアントはすぐに別のデザイナーのページに移動してしまうため、トップページでの情報の絞り込みは最優先事項です。

プロフィールは得意分野・使用ツール・対応範囲の3要素で構成する

クライアントが知りたいのは依頼可能な業務の範囲です。プロフィールには、得意分野(例:LPデザイン・コーポレートサイト)、使用ツール(Figma・Adobe XD・Illustratorなど)、対応可能な業務範囲(デザインのみ・コーディングまで・ディレクションまで)の3要素を具体的に記載します。納期の目安(例:LP1枚:約5〜7営業日)と料金の目安(例:LP:5万円〜)を併記すると、依頼前の問い合わせハードルが下がります。

制作実績は3〜5件に絞り、各実績にケーススタディを添える

実績は多ければよいというものではありません。3〜5件に絞り、各実績にプロジェクトの目的・課題・担当範囲・使用ツール・制作期間・成果の6項目を記載するケーススタディ形式にすることで、仕事の進め方が伝わります。ケーススタディ形式は「考え方を持ったデザイナー」という印象を与えます。制作実績が少ない場合は、自主制作や架空案件を「セルフプロジェクト」として掲載することも有効です。その際、「クライアントワーク」と「セルフプロジェクト」の区別を明記してください。フリーランスの仕事につながるポートフォリオの作り方では、実績・価格・著作権の記載ポイントをより詳しく解説しています。

サービスページは料金・納期・依頼フローを一覧で示す

サービスページでは、提供するサービスの種類(例:LPデザイン・バナー制作・コーポレートサイト)、料金目安、納期目安、依頼から納品までのフローをまとめて掲載します。個別見積もりの場合も「LP:5万円〜、バナー:1万円〜」のように下限価格を示すことで、予算感が合わないクライアントからの問い合わせを減らし、商談効率が上がります。

問い合わせ導線はページ3箇所に設置する

トップページ・制作実績ページ・サービスページの3箇所に問い合わせボタンまたはメールリンクを設置します。Figmaで作成したポートフォリオにフォームを埋め込む場合はGoogleフォームのリンクで代用でき、実装コストなしで問い合わせを受け付けられます。SNSリンク(X・Instagram・LinkedIn)も併記すると、依頼前にデザイナーの人となりを確認できる経路が増えます。

CHECK

▶ 今すぐやること: プロフィールページに得意分野・使用ツール・対応範囲・料金目安の4項目を記入する(20分)

Q: 実績が1〜2件しかない場合はどうすればよいですか?

A: 自主制作や架空案件を「セルフプロジェクト」として掲載できます。クライアントワークと区別して明記することで、誠実さが伝わります。3件以上になるまでは、既存の実績を詳細なケーススタディ形式で掲載することで情報量を補えます。

Q: 料金を公開すると安く見られませんか?

A: 料金目安を公開することで、予算が合わないクライアントからの問い合わせが減り、商談の質が上がります。「〜から」の形式で下限のみ示すことで、高単価案件への対応も伝えられます。

ケーススタディ形式で完成画像より3倍伝わる

作品画像を並べるだけのポートフォリオと、ケーススタディ形式のポートフォリオでは、クライアントへの伝わり方が大きく異なります。クライアントが実際に判断したいのは「このデザイナーはどう考え、どう解決するか」という思考プロセスです。完成画像だけではその能力は伝わりません。

ケーススタディの6項目を必ず記載する

各プロジェクトのケーススタディには、6項目を記載します。まず「制作目的」として、クライアントが解決したかった課題を1〜2文で記載します。次に「担当範囲」として、ワイヤーフレーム・ビジュアルデザイン・コーディング・ディレクションのうち何を担当したかを明示します。「使用ツール」はFigma・Illustrator・Photoshopなどを「Figmaでプロトタイプを作成し、実装確認にZeplinを使用」のように文脈で記載します。「制作期間」は「約2週間(プランニング3日・デザイン7日・修正4日)」のように内訳を示します。「制作プロセス」は、初稿・修正・最終稿のスクリーンショットを時系列で並べると思考の流れが伝わります。最後に「成果」として、コンバージョン率・問い合わせ数・クライアントからのフィードバックなど、定量・定性を問わず記載します。この6項目が揃うことで、クライアントは仕事の進め方を把握できます。

完成画像はMockupに配置して実物感を出す

Figmaでは、スマートフォンやPCの画面にデザインをはめ込む「Mockup(モックアップ)」を簡単に作成できます。Community内で「device mockup」と検索すると無料のモックアップファイルが見つかります。LPデザインならPCとスマートフォンの両方に配置し、バナーなら実際の掲載面(ウェブサイトのヘッダーなど)に配置することで、完成物の用途が一目で伝わります。実物の使用シーンが想像しやすくなり、クライアントの判断を助けます。フリーランスポートフォリオ改善で案件獲得率を高める方法では、実績の見せ方についてさらに詳しく解説しています。

クライアントワークの公開は事前確認を必須とする

クライアントから受注した制作物をポートフォリオに掲載する場合、契約書や秘密保持契約(NDA)の内容を確認し、公開の許可を得ることが必要です。クライアント名・ロゴ・画面キャプチャの公開可否は案件ごとに異なるため、納品後に「ポートフォリオへの掲載許可」をメールで確認する文面を用意しておくとスムーズです。公開許可が取れない場合は、企業名を伏せて「ECサイトのLP制作」のように業種とプロジェクト種別のみ記載する匿名化の形式で掲載できます。無許可での掲載は守秘義務違反になる場合があり、信頼を損なうリスクがあります。

Product Design Portfolio – Figma Communityは、初心者が出発点として利用できるよう公開されたポートフォリオ例で、学習や改変の参考にできる構成になっています。

CHECK

▶ 今すぐやること: 掲載予定の実績1件について、制作目的・担当範囲・使用ツール・制作期間・成果の5項目をFigmaのテキストボックスに書き出す(15分)

Q: 成果数値がない場合、ケーススタディに何を書けばよいですか?

A: 数値がない場合は、クライアントからのフィードバックコメント(許可を得たもの)や、「修正回数1回で承認」「初稿から2日で納品」などの制作プロセスに関する具体的な事実を記載します。制作プロセスの明確さ自体がクライアントへの信頼につながります。

Q: 自主制作をケーススタディ形式で掲載してもよいですか?

A: はい、有効です。「セルフプロジェクト」と明記し、「課題として設定したこと」「解決策として選んだデザインアプローチ」「結果として得た学び」の3点を記載することで、思考プロセスを見せられます。

デザインの仕事で単価を上げたい方へ

Webデザインの学び方をLINEで受け取る

LINEで無料で届くもの

  • 20本Webデザインの無料レッスン
  • 全工程Photoshopの解説動画
  • 4本限定のPDF・動画
無料レッスン20本を受け取る

登録1分・情報収集だけでもOK・セミナー参加は自由

タップするとLINEの友だち追加画面が開きます

LINE登録のよくある質問
お金はかかりますか?
LINEの登録と、届くレッスン・動画・PDFは無料です。
どんな連絡が来ますか?
レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
やめたいときは?
LINEでブロックすれば、それ以上は届きません。

PR提供: 日本デザインスクール(デザスク)

Figmaポートフォリオの公開方法を3分で診断

公開方法は状況によって最適解が異なります。3つの質問で自分に合った方法を判断できます。

Q1: ポートフォリオの用途はクライアントへの提案・商談時の確認用ですか? Yesの場合はQ2へ進みます。転職活動・求人応募の場合はQ3へ進みます。

Q2: 相手がFigmaを使っているか不明ですか? はい(Figmaを使っていない可能性がある)の場合はResult A(PDF書き出しを使用)です。いいえ(相手もFigmaユーザー)の場合はResult B(Figma共有リンクを使用)です。

Q3: 継続的な案件獲得を目指していますか? はいの場合はResult C(ポートフォリオサイトを作成)です。いいえ(一時的な用途)の場合はResult D(Figma共有リンクを使用)です。

Result A: PDF書き出し(クライアント提案・商談用)

FigmaのExport機能でPDFを書き出し、メール添付または共有ドライブで送付します。ファイル名は「ポートフォリオ_田中太郎_20261104.pdf」のように日付入りで管理し、メール送付前にファイルサイズが10MB以内であることを確認します(所要時間:30分)。

Result B: Figma共有リンク(Figmaユーザー向け)

FigmaのShareボタンから「Can view」権限で共有リンクを発行します。「Can edit」権限では相手がファイルを編集できてしまうため、必ず「Can view」に設定します。共有前にプライベートな作業ファイルが混在していないかページ構成を確認します(所要時間:5分)。

Result C: ポートフォリオサイト(継続的な案件獲得用)

FigmaでデザインしたポートフォリオをHTMLコーディングで実装するか、PortfolioBox・Cargo・Squarespaceなどのポートフォリオ向けCMSを使用します。独自ドメインを取得する場合は、お名前.comやムームードメインで年間1,500円程度で取得できます。検索エンジンからの流入を見込む場合はサイト化が最も有効です(所要時間:初期設定2〜4時間)。2週間で完成するポートフォリオサイト作り方も参考になります。

Result D: Figma共有リンク(一時的な用途)

Result Bと同じ手順でリンクを発行します。一時的な用途が終わったらリンクを無効化してファイルを非公開に戻します(所要時間:5分)。

CHECK

▶ 今すぐやること: Figmaの共有リンクを発行し、権限が「Can view」になっていることを確認する(5分)

Q: Figmaの共有リンクで独自ドメインは使えますか?

A: Figma標準の共有リンクには独自ドメインは使えません。独自ドメインでポートフォリオを公開したい場合は、Figmaのデザインをコーディングして別途Webサイトとして公開するか、PortfolioBoxなどのCMSを使用します。

Q: FigmaのPDF書き出しの品質は印刷にも対応していますか?

A: Figmaは画面表示向けの72dpiがデフォルトです。印刷用途が必要な場合は書き出し時に解像度を2〜3xに設定すると品質が向上します。印刷専用途ならAdobe IllustratorやInDesignの使用を検討してください。

公開方法はFigmaリンク・PDF・Webの3択

Figmaでポートフォリオを作成した後、どの形式で公開するかによって運用の手間とクライアントへの見え方が変わります。3つの公開方法をそれぞれの向いているケースと合わせて比較します。

Figma共有リンクは5分で発行できる最速の方法

Figma共有リンクは、ファイルを開いた状態でShareボタンを押すだけで発行できます。クライアントがリンクをクリックするとブラウザ上でデザインが表示され、インタラクティブなプロトタイプも確認できます。ただし、閲覧にFigmaのアカウントが必要な場合があること、URLが長くてクライアントに不審がられる場合があることがデメリットです。商談前の第一印象を大切にしたい場合はFigma共有リンクよりPDFまたはサイトを使用してください。Figma共有方法の詳細では権限設定の具体的な手順を解説しています。

PDFは30分で作成できるオフライン対応の汎用形式

FigmaのExport機能(File → Export Frames to PDF)を使うと、ポートフォリオ全ページをPDF1ファイルに書き出せます。PDFはFigmaを知らないクライアントにも送りやすく、メール添付・印刷・オフライン閲覧に対応しています。デメリットは、プロトタイプのアニメーションやリンクが機能しないこと、ファイルサイズが大きくなりやすいことです。画像は事前にJPEG書き出しで圧縮しておくと、PDFのファイルサイズを10MB以下に抑えやすくなります。

Webサイト化は初期2〜4時間の投資で継続的な集客につながる

FigmaのデザインをWebサイトとして公開するには、コーディングによる実装かCMS(PortfolioBox・Cargo・Squarespaceなど)を使う2つの方法があります。Webデザイナーがコーディングスキルをあわせてアピールしたい場合はHTML/CSS実装が有効で、スピードを優先する場合はCMSが選択肢になります。サイト化のメリットは、Googleからの検索流入が期待できること、URLが短くてクライアントに渡しやすいことです。デメリットは、初期構築に2〜4時間かかること、CMS利用料(月額1,000〜3,000円程度)が発生することです。

公開方法向いているケース作成時間費用
Figma共有リンクFigmaユーザー向け・プロトタイプ確認5分無料
PDFクライアント提案・商談用・メール添付30分無料
Webサイト(CMS)継続的な案件獲得・検索流入2〜4時間月額1,000〜3,000円
Webサイト(コーディング)スキルアピール・カスタマイズ重視10〜20時間ドメイン代のみ(年約1,500円)

CHECK

▶ 今すぐやること: 自分の用途(商談用・継続獲得用)を決め、上の表から公開方法を1つ選んで実行計画を立てる(5分)

Q: Webサイト化する場合、FigmaとCMSを連携できますか?

A: 直接の連携機能は2026年時点では限定的です。FigmaのデザインをエクスポートしてCMSにアップロードするか、Figmaのプラグイン(例:Figma to HTML系プラグイン)を使ってコードを生成する方法が一般的です。

Q: ポートフォリオはスマートフォンでも見やすくすべきですか?

A: はい。Figmaのプレビュー機能(Presentモード)でPCとスマートフォンの表示を確認できます。Webデザイナーの場合はレスポンシブ対応自体がスキルのアピールになります。

Figmaポートフォリオは5つの仕組みで案件獲得

ポートフォリオを作っても案件につながらない場合、問題は「見た目」ではなく「情報の設計」にあることがほとんどです。フリーランスとしての案件獲得に効くのは「依頼を促す設計」です。5つの仕組みを実装することで、ポートフォリオの問い合わせ転換率を高められます。

ハック1: ファーストビューに専門領域と実績件数を明記して依頼判断を最速化

【対象】: ポートフォリオを公開してから2週間以上経っても問い合わせが来ないWebデザイナー

【手順】: 現在のトップページのキャッチコピーを見直し、「LP・コーポレートサイト専門Webデザイナー|実績◯件」の形式に変更します(5分)。次に、代表作1件を最初の画面に大きく配置し、すぐにケーススタディページに遷移するリンクを設定します(10分)。最後に、問い合わせボタンをトップページのファーストビュー内に設置します(5分)。

【ポイントと理由】: 「専門領域と連絡先が一画面で確認できる設計」でクライアントの判断が早まります。クライアントがポートフォリオを見る平均時間は30〜90秒とされており、スクロールなしで専門領域・実績数・問い合わせ先が揃っていないと、判断前に離脱される可能性が高いためです。

【注意点】: キャッチコピーに「なんでもできます」という汎用表現は入れないでください。専門領域を絞った方が、適した案件のクライアントから連絡が来る確率が上がります。

ハック2: ケーススタディに「制作前後の比較」を追加して思考力を可視化

【対象】: 完成画像は掲載しているが「他のデザイナーと差がつかない」と感じているWebデザイナー

【手順】: 掲載実績の中から1件選び、制作前の状態(クライアントの既存デザインやワイヤーフレーム)と制作後の完成デザインを横並びで表示するFigmaフレームを作成します(20分)。次に、「変更した理由」をテキストで3点記載します(15分)。最後に、このケーススタディページへのリンクをトップページのサムネイルに設定します(5分)。

【ポイントと理由】: 制作前後の比較は、デザイナーの改善提案力を直接示す証拠になります。クライアントが発注を決める最大の判断基準は「このデザイナーは課題を理解して解決できるか」という点であり、完成画像だけではその能力は伝わりません。制作前後の比較があることで、「単なる作業者」ではなく「課題解決者」として認識されます。

【注意点】: 制作前のデザインがクライアントの既存物である場合、公開前に許可を取ることが必須です。許可が取れない場合は、ワイヤーフレームから最終デザインへの変化を見せる形式にしてください。

ハック3: テンプレートをブランドカラー3色で統一して差別化する

【対象】: テンプレートを使っているが「他のポートフォリオと似て見える」と感じているWebデザイナー

【手順】: Figmaのカラースタイルパネル(右クリック → Edit style)を開き、テンプレートのデフォルトカラーを自分のブランドカラー3色(プライマリ・アクセント・テキスト)に置き換えます(15分)。次に、フォントをGoogleフォントまたはAdobe Fontsから1〜2種類に統一します(10分)。最後に、テンプレートのサンプル画像をすべて自分の実績画像に置き換えます(30分)。ブランドカラーの選定に迷う場合はWebデザイン配色は3色70-25-5%で決まるが参考になります。

【ポイントと理由】: テンプレートの構造(レイアウト・余白・フォントサイズ比率)はプロのデザイナーが設計したものなので変更不要です。ブランドカラー3色とフォント統一のみで、他のデザイナーのポートフォリオとの差別化には十分です。構造まで大きく変えると、テンプレートが持つ「見やすさ」が失われるリスクがあります。

【注意点】: カラーは3色以内に収めてください。4色以上を使用すると、デザインがまとまりを失い、クライアントに「色遣いが苦手なデザイナー」という印象を与える逆効果になります。

ハック4: 公開前チェックを7項目のリストで漏れなく実行

【対象】: ポートフォリオを公開したが、後から誤字や権限設定ミスに気づいたことがあるWebデザイナー

【手順】: Figmaのコメント機能を使い、各ページに「チェック済み」コメントを付けながら以下の7項目を確認します(30分)。確認する内容は、誤字脱字、リンクの動作確認(全リンクをクリック)、共有権限の確認(Can viewになっているか)、クライアントワークの公開許可確認、個人情報の有無確認(電話番号・住所が不要な場合は非掲載)、ファイルサイズの確認(PDFの場合は10MB以下)、スマートフォン表示の確認(Figmaのプレビューでモバイルサイズを確認)の7点です。

【ポイントと理由】: 「公開前のチェックリストを固定化する」ことで、精神的コストが低く、ミスが減ります。「Can edit権限で共有してしまった」「クライアント名が無許可で掲載されていた」というトラブルは、いずれもリスト確認で防げます。チェックリストをFigmaのページとして1枚保存しておくと、ポートフォリオを更新するたびに使い回せます。

【注意点】: 7項目を一度に確認しようとせず、ページ単位で順番に確認してください。一気に確認しようとすると見落としが発生しやすくなります。

ハック5: 更新サイクルを3ヶ月ごとに設定して常に最新実績を見せる

【対象】: ポートフォリオを作って満足し、その後更新していないWebデザイナー

【手順】: Googleカレンダーに「ポートフォリオ更新日」を3ヶ月ごとに繰り返しスケジュールとして設定します(5分)。更新日には、直近3ヶ月の実績から1件を選んでケーススタディを追加し、最も古い実績1件を非表示またはアーカイブします(45分)。最後に、PDFを再書き出しし、共有リンクを最新状態に更新します(10分)。フリーランスのWebデザイナーの仕事内容や独立に必要なステップでは、継続的な案件獲得の仕組みづくりについても詳しく解説しています。

【ポイントと理由】: ポートフォリオに掲載されている実績が1年以上前のものである場合、クライアントは「今も同じスキルで動いているか」という不安を持ちます。3ヶ月ごとの更新により、常に直近の実績が表示され、スキルの継続性が伝わります。更新のたびに既存クライアントへの近況報告メールと合わせて送ることで、リピート案件のきっかけにもなります。

【注意点】: 古い実績をすべて削除しないでください。Figmaのページ機能を使い、非表示ページとしてアーカイブしておけば、必要になったときに再掲載できます。

CHECK

▶ 今すぐやること: ハック4の7項目チェックリストを新規Figmaページとして作成し、現在のポートフォリオを今すぐチェックする(30分)

Q: ポートフォリオの更新頻度はどのくらいが適切ですか?

A: フリーランスのWebデザイナーの場合、3ヶ月ごとを目安に最新実績を1件追加・古い実績を1件入れ替えるサイクルが運用しやすいです。案件が多い時期は半年、少ない時期は2ヶ月ごとに変えるなど、自分の受注ペースに合わせて調整してください。

FigmaポートフォリオはCommunity・5構成・更新で案件獲得し続ける

FigmaポートフォリオはCommunity無料テンプレートを複製し、5構成とケーススタディ形式で整えることで、実績3件からでもクライアントへの依頼につながる状態を作れます。公開方法はFigma共有リンク・PDF・Webサイトの3択から用途に応じて選び、公開前は7項目のチェックリストで確認してください。3ヶ月ごとの更新サイクルを設定することで、ポートフォリオは継続的な案件獲得の仕組みとして機能し続けます。

今日テンプレートを1つ複製するだけで、ポートフォリオ作成の8割は完了します。作り込みすぎるよりも、まず3件の実績をケーススタディ形式で公開することが、最初の問い合わせにつながる最短ルートです。

状況次の一歩所要時間
まだFigmaファイルを作っていないFigma Communityで「freelancer portfolio」と検索し、テンプレートを複製する10分
テンプレートはあるが作品を整理していない実績1件のケーススタディ6項目を書き出す15分
ポートフォリオはあるが公開していない7項目チェックリストを実行してFigma共有リンクを発行する30分
公開済みだが問い合わせが来ないファーストビューにキャッチコピーと問い合わせボタンを設置する20分
定期的な更新ができていないGoogleカレンダーに3ヶ月ごとの更新スケジュールを設定する5分

Webデザイナー ポートフォリオ Figmaに関するよくある質問

Q: Figmaで作ったポートフォリオを実際のWebサイトとして公開する方法は?

A: FigmaのデザインをHTML/CSSでコーディングして公開するか、PortfolioBox・Cargo・Squarespaceなどのポートフォリオ向けCMSを使用します。コーディングなしで公開したい場合はCMSが最速で、初期設定2〜4時間・月額1,000〜3,000円で運用できます。独自ドメインはお名前.comやムームードメインで年間1,500円程度で取得できます。

Q: Figmaのポートフォリオテンプレートは商用利用できますか?

A: テンプレートによって異なります。Figma Communityのテンプレートページで、ライセンス表記(CC0・Commercial use OKなど)を確認してください。記載がない場合は作者への確認が必要です。商用利用可能なテンプレートを選んだ上で、自分の実績・プロフィール・カラーに置き換えて使用してください。

Q: 制作実績が少ない場合、架空案件や自主制作を掲載してもよいですか?

A: はい、有効です。「セルフプロジェクト」と明記し、クライアントワークと区別した上で掲載してください。課題設定・解決アプローチ・制作プロセスを記載することで、実案件と同様に思考プロセスを見せられます。誠実に「セルフプロジェクト」と明記することで、むしろ信頼感につながります。

【出典・参照元】

Figma Community – Webデザイン向けポートフォリオテンプレート一覧

Freelancer Portfolio – Figma Community(フリーランサー向けポートフォリオ公開ファイル)

Product Design Portfolio – Figma Community(プロダクトデザインポートフォリオ公開ファイル)

Portfolio Website Examples – Figma Resource Library

デザインの仕事で単価を上げたい方へ

Webデザインの学び方をLINEで受け取る

LINEで無料で届くもの

  • 20本Webデザインの無料レッスン
  • 全工程Photoshopの解説動画
  • 4本限定のPDF・動画
無料レッスン20本を受け取る

登録1分・情報収集だけでもOK・セミナー参加は自由

タップするとLINEの友だち追加画面が開きます

LINE登録のよくある質問
お金はかかりますか?
LINEの登録と、届くレッスン・動画・PDFは無料です。
どんな連絡が来ますか?
レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
やめたいときは?
LINEでブロックすれば、それ以上は届きません。

PR提供: 日本デザインスクール(デザスク)

フリ転編集部 jpndesft
フリーランス専門メディア「フリ転。」編集部。独立・案件獲得・税務など、フリーランスが直面する課題をわかりやすく解説することを使命としています。

フリーランスデザイナーのためのキャリア・案件・税務情報をお届けしています

お問い合わせ →

人気キーワード

フリーランスの案件・単価を調べる

フリーランス求人を探す週1〜2日・リモートOKの案件を毎日自動収集職種別の単価相場を見る48職種の月額単価を実データから集計実務ツールを使う見積・請求書・税金計算など51種を無料で

カテゴリから記事を探す

フリーランスの独立術フリーランスの資金術フリーランス職種図鑑