
ポートフォリオサイトのデザイン参考集
デザイナーのポートフォリオサイトを作るときの参考に。Web上の優れたポートフォリオデザインの事例を集めました。
デザインのヒントになるテーマ別コレクションをまとめています。Muzliに日々届く新しい作品から選び、常に更新しています。
最終更新:


Personal Portfolio Website

My New Portfolio Website

Artist Portfolio website by Heed Collective

Rajib Kabir: Free Portfolio Website Template by Pixcut Studio LLC

Kai Voss- Portfolio/ Agency Website

I Built My Portfolio Website with Claude — Here’s How!

Portfolio Website for Dustin Kroft, Freelance Brand Strategist

Auraz: Responsive Portfolio Website Template by Pixcut Studio LLC

Personal Portfolio Website · UIUX Designer

Porteix: Responsive Portfolio Website Template by Pixcut Studio LLC

Vidaro: Free Portfolio Website Template by Pixcut Studio LLC
ここにあるのは、Muzliで見られるもののわずか1%です。
続きは新しいタブで。開くたびに、参考になる新しいデザインが届きます。無料です。
Muzliを無料で追加
Web Designer Personal Portfolio Website

Frank Codina – Personal Brand Portfolio Website

Oasis One — Free Portfolio Website Template for Framer

weRENDER - Portfolio Website Template for Framer

Pixelonix: Responsive Portfolio Website Template by Pixcut Studio LLC

RK Abir: Free Portfolio Website Template by Pixcut Studio LLC

Next-Gen Personal Portfolio Website Design

Portfix: Free Portfolio Website Template by Template Munk

Covix: Responsive Portfolio Website Template by Pixcut Studio LLC

DENZAR: Responsive Portfolio Website Template by Pixcut Studio LLC

Cinetik: Free Portfolio Website Template by Pixcut Studio LLC

TD_Tomas: Free Portfolio Website Template by Tom D
ここにあるのは、Muzliで見られるもののわずか1%です。
続きは新しいタブで。開くたびに、参考になる新しいデザインが届きます。無料です。
Muzliを無料で追加
Creative Agency & Personal Portfolio Website

Creatiq: Responsive Portfolio Website Template by Pixcut Studio LLC

Maliux - Portfolio Website

Website portfolio for an artist

Retro desktop as portfolio website

Personal Portfolio Website UI Design

Portafolia: Free Portfolio Website Template

Hatuan - Designer: Free Portfolio Website Template

Omid Kaveh Rad - Portfolio Website

Creative Portfolio Website Design for UI/UX Designer

PERSONAL PORTFOLIO WEBSITE | Cas*+

Aurez: Responsive Portfolio Website Template by Pixcut Studio LLC
ここにあるのは、Muzliで見られるもののわずか1%です。
続きは新しいタブで。開くたびに、参考になる新しいデザインが届きます。無料です。
Muzliを無料で追加
CROTOX: Responsive Portfolio Website Template by Shuvo Ahmed

TD_Auniron: Free Portfolio Website Template by Tom D

PhotoFrame: Free Portfolio Website Template by Manmeet Singh

ARON Pro Architecture Portfolio Website by DiverseKit

Botiflay: Portfolio Website Template by Pixieno Studio

Portrixe: Free Portfolio Website Template by Pixcut Studio LLC — Framer Marketplace

Boldex: Free Portfolio Website Template

278&STUDIO: Free Portfolio Website Template by Emon

Agentika : Free Portfolio Website Template by Arman Chowdhury Nijum

ADRIA VALE: Responsive Portfolio Website Template by Pixcut Studio LLC — Framer Marketplace

KORVEX: Responsive Portfolio Website Template by Pixcut Studio LLC — Framer Marketplace

Craftix Studio – Creative Agency Website Design
ここにあるのは、Muzliで見られるもののわずか1%です。
続きは新しいタブで。開くたびに、参考になる新しいデザインが届きます。無料です。
Muzliを無料で追加
Porfolio for Product Design: Free Portfolio Website Template by madebyMal

Constantine: Responsive Portfolio Website Template by Emon

Orbito - Digital Design Agency Website Design

Unfold - Creative Agency & Portfolio Website Template

Cherry Phan - Personal Portfolio Website

Web Design & Webflow Development · Artist Portfolio

Claude Design = Premium Portfolio Websites (In Minutes)

Unfold - Creative Agency & Portfolio Website Template

Illustrator Portfolio Website Hero Section | Personal Brand

Al Refatul Islam - Product Designer

Offset354: Responsive Portfolio Website Template by Emon

Sequence One: Responsive Portfolio Website Template by SUJAL MAKKAR — Framer Marketplace
ここにあるのは、Muzliで見られるもののわずか1%です。
続きは新しいタブで。開くたびに、参考になる新しいデザインが届きます。無料です。
Muzliを無料で追加
Sequence One: Responsive Portfolio Website Template by SUJAL MAKKAR — Framer Marketplace
Muzliをブラウザに追加すると、毎日更新される数千点のデザイン事例をいつでも見られます。世界中の90万人以上のデザイナーが、新しいタブを開くたびにデザインの参考を見つけています。
ブラウザにMuzliを追加仕事につながるポートフォリオサイトの作り方は?
ポートフォリオサイトの目的ははっきりしています。依頼を検討しているクライアントや採用担当者に、連絡してもらうことです。多くのデザイナーが手を抜きがちなのが、ケーススタディの構成です。サムネイルとタイトルはクリックを生みますが、相手を納得させるのはケーススタディの中身です。効果的なケーススタディは、プロセスの前に課題と成果を示します。「コンバージョンを34%改善しました」と伝えてから作品を見せるほうが、「これをデザインしました」とワイヤーフレームを並べるよりも説得力があります。
ポートフォリオのトップページで大切なこと
トップページでは、信頼をすぐに得る必要があります。自分は何者か、どんな仕事をしているかを伝え、自信のあるプロジェクトを3〜6点見せましょう。作品の一覧は、時系列よりも画像の質と仕事の幅を優先して並べましょう。プロフィール写真つきの短い自己紹介は、ロゴを並べるよりも早く信頼につながります。連絡先には、トップページからすぐにたどり着けるようにしておきます。
ケーススタディの構成のコツ
ケーススタディは4つの要素で組み立てます。課題と制約、自分が担当した範囲、デザイン上の主な判断とその理由、そして測定できる成果です。ワイヤーフレームや試作、テストの記録といったプロセスの画像と、完成した画面を交互に見せると読みやすくなります。短すぎる作品紹介や長すぎる説明よりも、要点を押さえて画像でテンポよく見せるほうが伝わります。スマートフォンで読まれることも多いので、モバイルでの読みやすさも確認しましょう。