「ポートフォリオを作りたいけど、何から始めればいいかわからない」「デザインの知識がなくて不安」と感じている方はいませんか？そのような悩みを持つ方におすすめなのが、Figmaのポートフォリオテンプレートを活用することです。
Figmaを使えば、デザインの知識が少なくても、洗練されたポートフォリオを作成できます。この記事では、Figmaでポートフォリオを作成するメリットから、今すぐ使える厳選テンプレート5選、そして具体的な作り方までを徹底的に解説。Webデザイナーを目指す方はもちろん、ポートフォリオのクオリティを高めたい方も、ぜひ最後までチェックしてください。
Figmaでポートフォリオを作るメリットとは？
FigmaはWeb上で動くデザインツールで、ポートフォリオ制作にも適したツールです。無料で使え、複数人での同時編集やコメント機能によるフィードバックも簡単。スピーディーにプロ品質のデザインが実現できるだけでなく、公開・共有もURL一つで完結します。
また、テンプレートを使えば、レイアウトや配色などのデザイン面で迷わず作品の魅力を最大限に伝えることが可能。Webデザイナーやクリエイティブ職を目指す方にとって、業界標準ツールでポートフォリオを構築できる点も大きなアドバンテージとなるでしょう。
「Figmaの使い方を基礎から学びたい」「ポートフォリオにプロからアドバイスが欲しい」という方には、女性向けキャリアスクールSHElikes（シーライクス）がおすすめ。SHElikesで受けられるレッスンやサポートについては以下の記事で詳しく紹介していますので、興味のある方はチェックしてみてください。
ポートフォリオ用おすすめFigmaテンプレート5選
Figmaには多数のポートフォリオテンプレートが公開されています。ここでは特にデザイン性と使いやすさを重視して、優秀なテンプレートを5つ厳選して紹介します。
- Personal Portfolio Website Template
- Portfolio UI – Web & Mobile
- Folio 2020 • Product Design Portfolio Template
- Portfolio Template
- Notion Portfolio kit for UI/UX designers
それぞれ異なる特徴を持つため、あなたの作品ジャンルや好みに合わせて選択してください。
【無料】Personal Portfolio Website Template
Personal Portfolio Website Templateは、シンプルながらもポップなデザインが特徴のテンプレートです。使用されている色数が少ないため、配色を変えることで比較的簡単にオリジナリティを出せます。
特に初めてポートフォリオを作成する人にとって、扱いやすくカスタマイズの自由度が高いのが魅力です。
【無料】Portfolio UI – Web & Mobile
Portfolio UI – Web & Mobileは、デザイナーと開発者向けのポートフォリオテンプレートです。Webとモバイル両方の表示に最適化されたUIセットが揃っており、簡単にレスポンシブ対応のポートフォリオが製作可能。
ブログのテンプレートもあり、開発者はブログ形式で技術的な深掘りや制作過程を詳細に伝えることもできます。
【無料】Folio 2020 • Product Design Portfolio Template
Folio 2020 • Product Design Portfolio Templateは、プロダクトデザイナー向けポートフォリオですが、ユーザーの課題解決までのフローや成果を可視化して伝えたい方におすすめです。プロジェクトの背景、課題解決までのプロセス、そして成果といった、作品のストーリーを詳細に伝えられる構成になっています。
特に、思考プロセスを重視する企業にアピールしたい方におすすめのテンプレートです。スライド形式になっているため、印刷して面接の場で提示したい場合にも適しています。
【無料】Portfolio Template
Portfolio Templateは、クリエイティブな職種全般に対応できる汎用性の高さが魅力です。プロジェクト紹介だけでなく、自己紹介やスキル説明のセクションも揃っており、このテンプレートを編集するだけで、ポートフォリオが完成するのが魅力。
スマートフォン用のデザインも用意されており、レスポンシブデザインのポートフォリオが作成できます。
【無料】Notion Portfolio kit for UI/UX designers
Notion Portfolio kit for UI/UX designersは、Notionでポートフォリオを作成する際のカバーイメージやサムネイル画像がセットになったテンプレートです。ライターやエンジニアなど、非デザイナーの方がWebサイト形式のポートフォリオを作りたい場合のもおすすめ。
Notionのテンプレートも用意されているため、合わせて利用するのもよいでしょう。
Figmaでテンプレートを使ったポートフォリオの作り方
Figmaのテンプレートを活用すれば、初心者でもプロフェッショナルなポートフォリオを簡単に作ることができます。
ここでは、具体的な6つのステップを紹介します。
1.テンプレートを選びインポートする
まず、Figmaコミュニティから自分の目的に合ったテンプレートを選択します。テンプレートのプレビューを確認し、デザインスタイルや機能が要件に合致するかを検討してください。
ボタンをワンクリックで、自分のFigmaアカウントにテンプレートを複製できます。無料のものも多いため、気になったものがあれば複製して編集を試してみるのもおすすめです。
2.コンテンツを編集する
次に、テンプレートのテキストや画像などのコンテンツを自分のものに差し替えます。タイトル、自己紹介、連絡先など、基本情報を入力していきましょう。テンプレートによっては、ダミーテキストや画像が入っているので、これらを自分の情報に置き換えます。
この段階で、使用するフォントや文字サイズ、行間なども調整して読みやすさを追求しましょう。
3.作品をポートフォリオに配置する
自分の作品をポートフォリオに配置します。テンプレートの作品部分に、自分の制作物をアップロードしましょう。作品ごとにプロジェクトの概要、役割、制作期間、苦労した点などを簡潔にまとめるのがポイントです。
見る人が一目であなたのスキルや思考プロセスを理解できるよう、工夫して記載しましょう。
4.デザインをカスタマイズする
配色・フォント・アイコンを自分らしく調整することで、ポートフォリオに個性が生まれます。テンプレートのままでも整っていますが、他人と差をつけるにはカスタマイズが重要です。
配色の変更や、アイコン、写真などを追加して、より魅力的なデザインにしていきましょう。Figmaのプラグインを使えば、作業効率を大幅にアップさせることができます。
5.プレビューでチェックする
完成したポートフォリオは、必ずプレビュー機能を使って確認しましょう。パソコン、タブレット、スマートフォンなど、さまざまなデバイスでの表示をチェックすることが大切です。
特に、レスポンシブデザインのテンプレートを使っている場合は、各画面サイズでのレイアウト崩れがないかをしっかり確認してください。
6.公開・共有する
ポートフォリオが完成したら、いよいよ公開・共有です。Figmaでは、公開リンクを発行することで、簡単にポートフォリオをWeb上で公開できます。リンクをSNSや応募先の企業に送ることで、多くの人にあなたの作品を見てもらうことも可能です。
Figmaでポートフォリオを作るならSHElikesで学ぼう！
独学でのポートフォリオ制作は、時に行き詰まってしまうこともあるでしょう。そのような時は、プロの力を借りるのも一つの手です。女性向けキャリアスクールSHElikesでは、ポートフォリオ制作を強力にサポートしています。
プロのアドバイスを受けながらポートフォリオ制作ができる
SHElikesでは、45以上の職種スキルが定額で学び放題。Webデザインの基礎からFigmaの使い方まで、専門性の高いスキルを体系的に学べます。現役のクリエイターが講師を務めるレッスンで、現場で通用する実践的なスキルが学べます。
ポートフォリオ制作の過程で、デザインのフィードバックや、キャリアに関する相談もできるため、より質の高いポートフォリオを完成させることが可能。SHElikes受講生の作品を以下の記事で紹介していますので、ぜひチェックしてみてください。
SHElikes受講生のポートフォリオ作品例
ここでは、実際にSHElikes受講生が作ったポートフォリオの作品例を紹介します。
KOTOさん｜Webデザイナー
KOTOさんのポートフォリオは写真を使用したキービジュアルや、自身のデザインに関する想いが伝わるメッセージが印象的。サービス内容が制作物ごとにまとめられており、依頼者は得たい情報をスムーズに得ることができます。
豊富な実績は、Webサイト・バナーなどカテゴリごとに分類されており、ポートフォリオ全体が閲覧者を配慮した設計になっている点が、参考にしたいポイントです。
KOTOさんのポートフォリオはこちら
楓子さん｜デザイナー
楓子さんのポートフォリオは「デザインにも栄養を」という、デザインに対する想いが込められたコピーが印象的。飲食業界で９年間働いてきたという楓子さんのパーソナリティが伝わります。
作品紹介のページでは、制作に関して意識した点やデザインの意図などが記載されており「丁寧な仕事をしてくれそう」という安心感が湧きます。
楓子さんのポートフォリオはこちら
Figmaテンプレートを活用して高品質なポートフォリオを作ろう！
この記事では、Figmaでポートフォリオを作成するメリットから、おすすめのテンプレート、そして具体的な作成手順までを詳しく解説しました。Figmaのテンプレートを使えば、デザインスキルに自信がない方でも、手軽にプロ並みのポートフォリオを作ることができます。
もし一人でポートフォリオを制作するのが不安なら、女性向けキャリアスクールSHElikesがおすすめ。SHElikesは「Webデザインコース」「Figmaコース」など45以上の職種スキルが定額で学び放題。
ポートフォリオ作成に特化したレッスンやイベントで、魅力的なポートフォリオ作りもサポートしています。無料体験レッスンを開催していますので、興味のある方は参加してみてください。
