最短ルートは「Notion or foriio」＋「作品はFigmaで管理」
「ポートフォリオを作りたいけど、Notion、foriio、Webサイト…結局どれが正解？」——Webデザイン学習が一通り進んだあと、多くの未経験者がここで手を止めがちです。
迷いを断ち切るなら、まずは公開場所をNotionかforiioで作り、作品の素材はFigmaで管理するのが王道です。いきなりWordPressでサイトを作ったり、凝ったデザインをコーディングして整える必要はありません。公開までの距離が最短になり、後から拡張もしやすいからです。
この記事では、採用・案件獲得の場面で見られやすいWebデザイン ポートフォリオの作り方を、foriio / Notion / Figmaの使い分けと、掲載順・作品説明テンプレ・PDF提出まで含めて手順化します。「作品数が少ない」「実績がない」という不安も、見せ方でカバーできる形に落とし込みます。
Webデザイン ポートフォリオで最初に満たすべき条件
ポートフォリオは“おしゃれな作品集”というより、相手が判断するための資料です。未経験者ほど、まずは次の条件を揃えるだけで評価が安定しやすくなります。
- すぐ見られる：URLが1つで開く／スマホでも見られる
- 何ができるかが一瞬で分かる：バナー/LP/サイトなど制作物の種類と得意領域
- 再現性が伝わる：意図・工夫・改善の痕跡がある（「考えて作っている」）
- 連絡できる：メールやフォーム、SNSなどの導線がある
- 更新できる：作品追加が簡単で、直しやすい
未経験だと「実案件がないから弱い」と感じやすいですが、見られているのは主に基礎ができているか／説明できるか／改善できるかです。作品数が少なくても、構成と説明が整っていれば十分勝負になります。
3つの役割分担：Figma＝素材、Notion/foriio＝公開
ツール選びで迷う原因は、全部を1つで完結させようとすることです。役割を分けると迷いが止まります。
- Figma：作品を整える・素材を管理する場所（サムネ、注釈、PDF用のフレームまで作る）
- Notion：最短で公開する場所（文章が書きやすく、構成も変えやすい）
- foriio：見栄えよく並べる場所（サムネ一覧が強い。入口として便利）
つまり、時間がないならNotionで公開→必要に応じてforiioも併用が現実的です。作品の本体（画像・注釈・PDF）はFigmaで作っておくと、どこに載せても品質が崩れません。
どれで作る？foriio / Notion / Figmaの選び方
Notionが向いている人（公開最速・説明が強い）
- 今週中に公開したい
- 作品数が少ない（1〜5件）
- 作品説明や改善の流れをしっかり書きたい
- ページの追加・修正を軽く回したい
Notionは「作って公開する」までが短いのが最大の強みです。掲載順の入れ替えも簡単なので、未経験の最初の一本に向いています。
foriioが向いている人（見栄え・入口に強い）
- 作品をサムネで一覧表示したい
- SNSや名刺代わりに見せたい
- 企業やクライアントに“ぱっと強い印象”を出したい
foriioはギャラリーとして強い一方、作品説明を長く自由に書く用途ではNotionが扱いやすい場合があります。おすすめはforiio＝入口、詳細＝Notion（またはFigma）の二段構えです。
補足（PDFまわりの注意）：foriioはプランや仕様変更によって、作品のPDF書き出し（ダウンロード）機能が有料プランで提供される場合があります。一方で、PDFファイルのアップロード自体はできるケースがあります。提出用PDFは、後で慌てないためにも元データのFigmaから直接PDF化するのが確実です。
Figmaだけで見せるのが向いている人（UI見せ特化）
- UI作品が中心で、画面遷移やコンポーネントも見せたい
- ワイヤー→UIなどプロセスを1ファイルで見せたい
- 外部サービスを増やしたくない
ただしFigma単体だと、初見の人には情報が散らばって見えることがあります。最短で伝えるなら、トップページ（自己紹介・連絡先・一覧）はNotion/foriioに置き、Figmaは素材置き場＋詳細にするのが無難です。
最短で公開する手順（おすすめ：Notionで公開→foriioで拡張）
ここからは、未経験者が迷わず公開まで進めるための実務手順です。順番通りにやれば、途中で止まりにくくなります。
ステップ1：掲載する作品を「3カテゴリ」に分ける
最初から大量に載せなくて大丈夫です。まずは手元の作品を次の3つに分類します。
- 主力（1〜2件）：一番自信があるLP/サイト、または改善を重ねた作品
- 基礎の幅（3〜10件）：バナーやUIパーツなど、量で見せられるもの
- 学習の証拠（任意）：模写→改善、Before/Afterなど成長が見えるもの
「何個載せればいいの？」と不安になりやすいですが、無理に数合わせで質の低い作品を並べるくらいなら、主力の1〜2作品を作り込んだ方が評価につながりやすいです。未経験の段階では、作品数よりも「意図が説明できるか」「改善できるか」の方が伝わります。
ステップ2：Figmaで“掲載用素材”を作る（ここが品質の8割）
差がつくのは作品そのものより見せ方の整えです。Figmaで次の素材を用意します。
- サムネ：一覧で見たときに内容が分かる1枚（作品名＋一言）
- 完成図：バナーは画像、LP/サイトは要点が見える範囲のキャプチャ
- 要点図：工夫ポイントを3つに絞って注釈（矢印＋短文）
- プロセス（任意）：ワイヤー→UI、改善前→改善後
- PDF用フレーム（任意）：A4比率で1〜3枚にまとめる
特におすすめは「工夫ポイント3つ」を1枚で見せることです。未経験でも“考えて作っている”ことが伝わり、読み手が判断しやすくなります。
ステップ3：Notionでページを作り、公開する
Notionは構成が命です。最短で通る型を用意します。
Notionポートフォリオのテンプレ構成（コピペでOK）
トップ（1ページ目）に置くもの
- 名前/肩書き：例）Webデザイン学習中（UI/LP）
- できること：バナー / LP / サイトデザイン（Figma）など
- 使用ツール：Figma（＋他ツールがあれば）
- 連絡先：メール、フォーム、SNS
- 主力作品へのリンク：一番上に固定
作品ページ（作品ごと）に書くこと
- 概要：何を誰に向けたデザインか（架空案件でもOK）
- 担当範囲：構成 / UI / 画像制作 など（正直に）
- 制作意図：狙ったゴール（申込/問い合わせ等）
- 工夫点3つ：配色、タイポ階層、CTA、余白ルールなど
- 制作プロセス：ワイヤー→UI、改善点
- 制作時間：目安でOK（盛らない）
このテンプレで統一すると、作品説明がブレず、読み手も比較しやすくなります。
Notionのスマホ表示で損しないコツ（超重要）
Notionはスマホでも見られますが、データベースのテーブルビュー（表）を作品一覧にすると、スマホで横幅が圧縮されて見づらくなることがあります。
- 作品一覧はギャラリービューにする（サムネが並んで見やすい）
- もしくは、トップに画像＋リンクをシンプルに貼る
- 説明文は長文を詰めず、まず要点→詳細の順で配置する
採用担当者や依頼者がスマホで流し見するケースもあるため、「スマホで見たときの読みやすさ」は最初に潰しておくと安心です。
掲載順の鉄則：いきなり「一番強い作品」から見せる
ポートフォリオの掲載順は基本的に強い順です。未経験者がやりがちな失敗は、時系列で並べてしまい、最初に弱い作品を見せてしまうことです。
- 1番目：LPまたはサイト（主力）
- 2番目：主力の別バージョン（改善案、別テイスト）またはサイト構成
- 3番目以降：バナー（シリーズでまとめる）
バナーは10枚を1件ずつ載せるより、「バナー10選（目的別）」のようにまとめると見やすく、ページも長くなりすぎません。
作品説明の書き方：未経験でも信頼が取れるテンプレ
作品説明は長文より“判断に必要な情報”が揃っていることが大切です。次の型で書くと、未経験でも説得力が出ます。
作品説明テンプレ（そのまま使える）
- 課題：誰が何に困っているか
- 目的：このデザインで達成したい行動（申込/問い合わせなど）
- 方針：どう見せて、どう動かすか（セクション設計/CTAなど）
- 工夫点：3つ（配色/タイポ/余白/UI）
- 改善：直した点、次に改善したい点（任意でもOK）
「工夫点」は、センスではなくルールで書くのがコツです。例：アクセントカラーはCTAだけに限定、見出し階層は3段、カードはコンポーネント化など。
PDF提出が必要なとき：Figma→PDFで“1作品1〜3枚”にまとめる
応募や営業先によっては、URLではなくPDF提出を求められることがあります。その場合は、分厚い資料よりも「読み切れる長さ」にまとめるのが親切です。
- 1枚目：作品名＋概要＋完成図（要点が見える範囲）
- 2枚目：工夫点3つ（注釈付き）＋使用ツール＋担当範囲
- 3枚目（任意）：プロセス（ワイヤー→UI、Before/After）
FigmaのフレームをA4比率で作っておくと、PDF化がスムーズです。LP全体の長いキャプチャは細かい文字が読めなくなることがあるので、PDFでは“要点が伝わる範囲”を優先しましょう。
補足：foriioは仕様変更が入ることがあり、作品のPDF書き出し（ダウンロード）機能が有料プランになる場合があります。提出用PDFは、いつでも確実に作れるようにFigmaから直接書き出す運用にしておくと安全です。
よくある失敗5選と回避策（ポートフォリオ編）
失敗1：自己紹介がなく、誰の作品か分からない
回避策は、トップに「できること・使用ツール・連絡先」を固定すること。作品より先に“依頼できる人か”が見られます。
失敗2：作品の意図が書かれておらず、評価しにくい
回避策は、作品ページに「目的」と「工夫点3つ」を必ず入れること。未経験でも判断材料が揃います。
失敗3：作品が時系列で並び、最初に弱い作品が来る
回避策は、強い順に並べること。主力は最上段に固定し、バナーはまとめて載せます。
失敗4：画像が小さくて読めない
回避策は、完成図だけでなく「要点図（注釈）」を作ること。細部は読めなくても、工夫が伝わります。
失敗5：リンクが散らばり、どこを見ればいいか分からない
回避策は、入口を1つにすること。foriioを入口にするなら詳細はNotionへ。Notionを入口にするなら、作品詳細でFigmaリンクを補助的に使います。
【特典】ポートフォリオを見てほしいときの依頼文テンプレ（SNS/メール）
公開したあとに止まりがちなのが「誰にどう送ればいいか」です。過度に売り込まず、相手が返信しやすい形にしておくと行動が楽になります。用途別にテンプレを置いておきます（自分の状況に合わせて調整してください）。
SNS（X/Instagram/LinkedIn）DMテンプレ
- はじめまして。Webデザインを学習中の〇〇と申します。
- ポートフォリオを作成したので、もし差し支えなければ改善点を1〜2点だけフィードバックいただけないでしょうか。
- URL：＜ポートフォリオURL＞
- 特に見ていただきたい点：＜例：LPの読みやすさ、CTAの見せ方＞
- お忙しいところ恐れ入りますが、よろしくお願いいたします。
応募・カジュアル面談のメール添付テンプレ（短め）
- 件名例：ポートフォリオ送付（Webデザイン／氏名）
- 本文：〇〇株式会社 ご担当者様
- お世話になっております。〇〇（氏名）です。
- ポートフォリオURLをお送りします。ご確認のほどお願いいたします。
- URL：＜ポートフォリオURL＞
- （PDF提出が必要な場合）PDF：＜添付＞
- どうぞよろしくお願いいたします。
案件相談（クラウドソーシング/紹介）向けテンプレ
- はじめまして。Webデザイン（Figma）でバナー/LP制作を中心に学習・制作している〇〇です。
- 制作物はポートフォリオにまとめています：＜URL＞
- 対応可能範囲：＜例：バナー、LPデザイン、簡単なサイト構成＞
- まずは要件を伺い、可能な範囲と進め方をご提案できればと思います。よろしくお願いいたします。
ポイントは、いきなり長文で熱量を出しすぎず、相手が返しやすい「見てほしい点」を添えることです。
【まとめ】自分に合うツールの組み合わせと、公開までの最短手順
Webデザイン ポートフォリオを最短で公開するなら、Notion or foriioで公開場所を作り、作品素材はFigmaで管理するのが動きやすい方法です。Notionは公開が速く、foriioは一覧の見栄えが強い。Figmaでサムネ・注釈・PDFまで作っておけば、どの場面でも困りにくくなります。
作品数が少ない不安があっても、無理に数合わせをせず、主力1〜2作品を作り込み、工夫点を説明できる状態にする方が評価されやすい傾向があります。掲載順は強い順、バナーはまとめて、作品説明はテンプレで統一。この型でまず公開まで持っていきましょう。
次にやること（3ステップ）
- ステップ1：主力作品を1つ決め、Figmaで「サムネ＋完成図＋工夫点3つ」の素材を作る
- ステップ2：Notionでトップページを作り、主力作品ページを1つ公開する（連絡先も必ず入れる）
- ステップ3：バナーは「目的別10選」にまとめ、掲載順を強い順に並べ替える（必要ならforiioも入口として追加）
