転職活動の書類選考を通過したあと、ポートフォリオのURLを採用担当者に送ったことがある。HTMLで自作したページだったが、スマホで開くとレイアウトが崩れていた。あとから知ったのだが、担当者はスマホで確認していたらしい。その経験があってからNotionでポートフォリオを作り直した。
更新がラクになったのはもちろんだが、一番変わったのは「送ることへの心理的ハードルが下がった」ことだった。Notionならリンクひとつ渡せばいい。デバイスを選ばないし、修正したその瞬間に相手の画面にも反映される。
この記事では、Notionを使ったポートフォリオの作り方を、2026年4月時点のUIに合わせて解説する。旧バージョンの手順が散見されるなか、Notion Sitesアップデート後の正確な公開手順と、独自ドメインの費用比較も含めてまとめた。
この記事でわかること
- Notionポートフォリオの具体的な作成手順（2026年最新UI対応）
- Web公開・独自ドメイン設定の費用と難易度の比較
- 職種別の構成サンプル（デザイナー・エンジニア・マーケター・動画編集者）
- 採用担当者が実際に確認しているポイント
- ありがちな失敗と解決策
※Notionを活用するためのテンプレートについて、仕組みから実践方法までまとめました。すぐに活用できるテンプレート情報も満載です。
▶ Notion活用テンプレート完全ガイド｜仕組み化の実践術
- Notionポートフォリオが選ばれる理由——2026年に改めて整理する
- 作り始める前に決める3つのこと
- 【図解対応】Notionポートフォリオの作り方——ステップ完全版
- Web公開と独自ドメイン——費用・難易度比較【2026年最新】
- 職種別ポートフォリオ構成サンプル
- 採用担当者・クライアントが実際に見ているポイント
- よくある失敗と解決策
- FAQ
- まとめ——今日からNotionポートフォリオを作り始める理由
Notionポートフォリオが選ばれる理由——2026年に改めて整理する
HTML・WordPressより圧倒的にラクな理由
ポートフォリオを作ろうと思ったとき、最初にWordPressやHTMLを検討する人は多い。しかしHTMLは「公開するたびにFTPでアップロードが必要」、WordPressは「プラグイン管理・サーバー費用・セキュリティ対応」が重くのしかかる。
Notionはその両方の手間がない。ページを編集したその瞬間に公開サイトへ反映される。サーバーもFTPも要らない。更新の心理的ハードルが下がることで、ポートフォリオを「生きたドキュメント」として維持できるようになる。
2026年時点のNotionポートフォリオの3つの強み
① コーディング知識ゼロで作れる
Notionはブロックエディタ形式で動く。テキストを打ち込み、画像を貼り、見出しを設定する——それだけでページが完成する。デザインの知識がなくても、構造的に整ったポートフォリオが作れる。
② 自動でスマホ対応される
Notionで作ったページはスマートフォンからでも自動的に読みやすく表示される。採用担当者がスマホで確認するケースは少なくない。レスポンシブ対応のためにCSSを書く必要がない点は大きなアドバンテージだ。
③ AIコンテンツが氾濫する2026年に「人間らしさ」を出しやすい
ChatGPTで生成されたポートフォリオ文章が乱立するようになった2026年において、制作プロセスの手書きメモ画像やビフォーアフター比較など「生々しい素材」をNotionは気軽に貼り込める。ツールの特性として、「作り込みすぎない素直なレイアウト」が逆に人間らしさを醸し出す。
Notionポートフォリオに向いている人・向いていない人
向いている人
- 転職活動・フリーランス案件獲得でポートフォリオURLを使いたい人
- コーディングに自信がない人
- 頻繁に実績を追加・更新したい人
- 費用を最小限に抑えたい人
向いていない人
- 凝ったアニメーションや独自デザインにこだわりたい人（→STUDIOやFigmaが向いている）
- ECサイトやお問い合わせフォームなど動的機能が必要な人（→WordPressが向いている）
- SEOで検索上位を狙い込みたい人（→独自ドメイン＋Notion公式カスタムドメインアドオンの活用が必要）
作り始める前に決める3つのこと
手を動かす前にこの3点を決めておくと、作成中に迷いにくくなる。
① 誰に見せるポートフォリオか
転職の書類選考で使う場合と、フリーランス案件を受注する際に使う場合では、見せ方が変わる。採用担当者への提出なら「わかりやすさ」「再現性」を重視した構成が有効だ。クライアントへの提案なら「実績の具体性」「単価帯のヒント」を前面に出した構成が刺さる。
② 掲載する実績は3〜5点に絞る
全実績を詰め込もうとすると、見る側が疲弊する。「これで決まった」と思える作品を3〜5点厳選して丁寧に解説するほうが、量を並べるより圧倒的に印象が残る。完成品の画像だけでなく、制作背景・課題・解決アプローチを必ず添える。
③ URL設計を先に決める
Notionの無料プランでは「notion.site」ドメインが使用される。フリープランでもxxx.notion.siteのxxx部分を1つカスタマイズできる。たとえばyamada-taro.notion.siteのような形にしておくと、名刺やメールに記載しやすい。
【図解対応】Notionポートフォリオの作り方——ステップ完全版
STEP 1：ページを新規作成する
Notionにログイン後、左サイドバーの「新しいページ」をクリックする。ページタイトルには「Portfolio」や自分の名前を入力しておく。
カバー画像とアイコンを設定する
ページタイトルの上にカーソルを合わせると「カバーを追加」「アイコンを追加」のボタンが現れる。カバー画像はUnsplashから選ぶか、自分で用意した画像をアップロードできる。アイコンには顔写真か職種を表す絵文字を設定すると、URLを送ったとき相手のブラウザタブでも視認しやすくなる。
ページ幅をフルワイドにする
ページ右上の「…（その他）」→「フルワイドに設定」をオンにする。これだけで、デフォルトの狭い表示から横幅いっぱいのレイアウトに変わり、情報密度が上がって見栄えが良くなる。
STEP 2：基本構成をブロックで組む
Notionのブロックは「/（スラッシュ）」を入力するとコマンドパレットが開く。以下のブロックを使って骨格を作る。
使う主なブロック
| ブロック | 使い方 | コマンド |
|---|---|---|
| 見出し1 | セクションの大タイトル | /h1 |
| 見出し2 | サブセクション | /h2 |
| 箇条書き | スキル・実績の列挙 | /bullet |
| 画像 | 作品画像・プロフィール写真 | /image |
| 呼び出し（コールアウト） | 連絡先・重要情報の強調 | /callout |
| 区切り線 | セクション間の視覚的分割 | /divider |
| 2カラム | プロフィール写真＋テキストの横並び | コラムドラッグ |
プロフィールセクションの作り方
「/h2」で「About」という見出しを作る。その下に「/image」で顔写真を配置し、右隣にテキストブロックを配置して自己紹介文を書く。横並びにするには、画像ブロックの右端をドラッグしてテキストブロックと2カラムにする。
スキルセクションの作り方
「/h2」で「Skills」を作り、その下に「/table」でテーブルを挿入する。列に「スキル名」「レベル（★～★★★★★）」「使用期間・実績」を設定すると整理しやすい。箇条書きで並べるよりテーブル形式のほうが採用担当者に一覧で見てもらいやすい。
STEP 3：作品をギャラリービューで見せる
ここがNotionポートフォリオの一番の見せ場だ。データベースのギャラリービューを使うと、作品サムネイルが並ぶ、一目でプロっぽいレイアウトができる。
ギャラリービューの作成手順
- 「/database」と入力して「データベース（インライン）」を選択
- 初期設定はテーブル表示になっているので、左上のビュー名（「テーブル」と表示されている箇所）をクリック
- 「＋ ビューを追加」→「ギャラリー」を選択
- プロパティに「作品名（タイトル）」「カテゴリ（セレクト）」「使用ツール（マルチセレクト）」「制作年（セレクト）」を追加
各作品ページで書くこと
ギャラリーの各カードをクリックすると、個別ページが開く。ここに以下を書く。
- 課題：この作品で解決しようとした問題・背景
- アプローチ：どう考えてどう作ったか（制作プロセス画像があると強力）
- 成果：数値があれば記載（PV・コンバージョン率・工数削減時間など）
- 振り返り：今やり直すなら変えること（正直さがE-E-A-T的に効く）
カバー画像の設定
各作品ページの上部「カバーを追加」から作品画像を設定する。ギャラリービューのサムネイルとしてこの画像が使われるため、目を引くビジュアルを選ぶ。横長（16:9）が見栄えしやすい。
STEP 4：Web公開する——Notion Sites（2026年対応）
ここが旧情報の記事と差が出るポイントだ。2024年6月のNotionアップデートにより、公開設定の画面が「Notion Sites（ノーションサイト）」として刷新された。
公開手順（2026年最新）
- ページ右上の「共有」ボタンをクリック（右上の「Share」ボタン）
- 「サイトを公開」タブを選択（旧UIの「Publish to web」から変更）
- 「サイトを公開する」のトグルをオンにする
- 「notion.site URLをカスタマイズ」から、公開URLの
xxx部分を設定できる（フリープランでも1つ設定可能） - 「検索エンジンのインデックス作成」——検索エンジンに拾ってほしい場合はオンにする（デフォルトはオフ）
- URLをコピーして相手に送る
よくある公開設定のミス
「公開したつもりが相手から"開けない"と言われた」というのはよく聞く失敗だ。原因のほとんどは「公開したページのURLを使っていない」か「トグルをオンにし忘れた」のどちらかだ。公開後は、ブラウザのシークレットモード（プライベートモード）で自分のURLにアクセスして確認する習慣をつけると防げる。
Web公開と独自ドメイン——費用・難易度比較【2026年最新】
独自ドメインを使うかどうかは、ポートフォリオの使い方次第だ。「採用担当者やクライアントにURLを送る」だけならnotion.siteドメインで十分機能する。名刺やLinkedInプロフィールに載せる・SEOで検索されたい、という場合は独自ドメインの検討が現実的になる。
| 方法 | 費用（月額目安） | 難易度 | 特徴 |
|---|---|---|---|
| Notion無料公開（notion.site） | 無料 | ★☆☆☆☆ | URLのxxx部分を1つカスタム可（フリープランでも可） |
| Notion公式カスタムドメインアドオン | 月$8〜$10＋有料プラン代 | ★★☆☆☆ | 有料プラン必須。最も安定・公式サポートあり |
| Wraptas（国産サービス） | 月額980円〜 | ★★☆☆☆ | 日本語サポート、カスタムCSS対応 |
| Super.so（海外サービス） | 月$12〜 | ★★★☆☆ | デザイン機能が豊富、英語UI |
| Cloudflare + Fruition | ドメイン代のみ（技術知識要） | ★★★★☆ | 無料化可能だが設定が複雑 |
2026年時点の最新料金（Notion公式）
Notionの公式カスタムドメインアドオンは、有料プランのワークスペースオーナーが利用でき、月払いの場合は月額$10、年払いの場合は月額$8となっている。なお、ドメインをNotionが販売するわけではないため、あらかじめお名前.comやXserverなどでドメインを取得しておく必要がある。
フリープランのまま使うときのURL最適化
フリープランでもyourname.notion.siteのような形でURLをカスタマイズできる。ページ右上の「共有」→「notion.site URLをカスタマイズ」から設定する。yamadataroやtaro-designのように、名前や職種を組み合わせた文字列を設定すると覚えてもらいやすい。
職種別ポートフォリオ構成サンプル
「何を載せればいいかわからない」という声が最も多い。職種によって見せるべき情報が異なるため、構成サンプルを職種別に整理した。
デザイナー（UI/UX・グラフィック）向け構成
優先して見せるべき情報
- 完成ビジュアル（最低でも3点のメイン作品）
- ビフォーアフター比較（リデザインの場合）
- Figmaプロトタイプへのリンク（触ってもらえる体験）
- 制作プロセス（スケッチ・ワイヤーフレーム・試行錯誤の痕跡）
構成例
H2：About（プロフィール写真 + 2〜3行の自己紹介）
H2：Works（ギャラリービュー）
└ 各作品ページ：課題 → アプローチ → 完成物 → 成果
H2：Skills（Figma / Illustrator / Photoshop + HTML/CSSなど）
H2：Career（職歴・所属）
H2：Contact（メール + Behance + Dribbbleリンク）
デザイナーのポートフォリオで最もよく見られるのは、「Works」ページの各作品詳細だ。ここで「どう考えてどう解決したか」を書けていると、面接官が「この人はどんな仕事をするか」を具体的にイメージできる。完成品の画像だけを並べている人は多いが、それだけでは差がつかない。
エンジニア（Web・アプリ開発）向け構成
優先して見せるべき情報
- 使用技術スタックの一覧（言語・フレームワーク・クラウド）
- GitHubリポジトリへのリンク
- デモURL（動くものを見せる）
- 技術的な工夫・こだわりポイントの言語化
構成例
H2：About（専門分野・得意領域を3行で）
H2：Technical Skills（テーブル形式：技術名・経験年数・実務実績）
H2：Projects（ギャラリービュー）
└ 各作品ページ：技術スタック → 実装上の工夫 → GitHub/デモリンク
H2：Articles（Qiita・Zenn記事 / 技術ブログリンク）
H2：Career
H2：Links（GitHub / X / Zenn / Qiita）
エンジニアの場合、「GitHubのURLを貼っただけ」のポートフォリオが多い。採用担当はコードを深く読む時間がないため、「このプロジェクトで何を学んだか」を100字前後で書くだけで印象が大きく変わる。
マーケター・ライター向け構成
優先して見せるべき情報
- KPIの改善数値（前後比較・ベンチマーク比）
- 担当した媒体・チャネルの一覧
- 書いた記事・制作物のサンプルリンク
- 使えるツール（GA4 / SEMrush / Meta広告管理画面など）
構成例
H2：Profile（マーケティング手法への考え方）
H2：Campaign Results（成果一覧テーブル：施策名・KPI・改善率）
H2：Writing Samples（記事リンク一覧）
H2：Tools & Skills
H2：Certifications（Google Analytics認定 / Meta認定 etc.）
H2：Contact
マーケターは「数値で語る」ことが最大の武器になる。しかし「個人情報・機密情報に当たらないか」の確認は必須だ。クライアント名・具体的な商品名は伏せたうえで、改善率などの数値は積極的に提示してよい。
動画編集者・クリエイター向け構成
優先して見せるべき情報
- 実績動画（YouTube限定公開URLをNotion内に埋め込む）
- 対応ジャンル（YouTube広告 / 採用動画 / 結婚式 etc.）
- 稼働条件（週◯時間 / リモート可 / 即納日数）
- 使用ソフト・PCスペック
動画編集者のポートフォリオでは、採用担当が確認している4項目として「実績動画（ジャンル分け）」「稼働条件（リソース）」「使用ソフトとPCスペック」「料金表（目安）」が挙げられている。これらを揃えていないポートフォリオは、担当者が判断できず見送られる可能性が高い。
採用担当者・クライアントが実際に見ているポイント
「何をアピールすればいいか」を考えるよりも、「相手が何を確認したいか」を先に理解するほうが効率的だ。
採用担当者が確認する3点
① 再現性はあるか
「この成果は偶然ではなく、再現できるプロセスの結果か」を採用担当者は確認している。そのため、完成品だけでなく「なぜこのアプローチを選んだか」の意思決定プロセスを書くことが重要だ。
② 一緒に働けるイメージが持てるか
文章の書き方・情報の整理の仕方・更新頻度——これらすべてが仕事への姿勢を映す鏡として読まれている。ポートフォリオの「体裁の丁寧さ」は、実際の仕事の丁寧さとして受け取られることが多い。
③ 成長しているか
新しい実績が追加されているか、スキルが更新されているかを見ている採用担当者は少なくない。Notionポートフォリオの強みは「いつでも更新できる」点にある。応募前に1件でも新しい実績を追加することを習慣にしたい。
フリーランス案件でクライアントが確認するポイント
- 自分が依頼したい種類の実績があるか（ジャンル・業種・媒体の一致）
- 連絡方法・稼働条件・料金感がすぐわかるか
- URLを送られてきたときに3秒で「何者か」がわかるか
クライアントはポートフォリオを長時間読まない。ファーストビュー（スクロールせずに見える部分）に「自分は何者で何ができるか」を凝縮しておくことが、案件受注率を左右する。
よくある失敗と解決策
失敗①：公開設定が正しく反映されていない
症状： 「URLを送ったら"ページが見つかりません"と言われた」
原因と解決策： 公開トグルをオンにしたつもりでオフのままになっていたケースが多い。公開後は必ずブラウザのシークレットモードで自分のURLにアクセスして確認する。Notionにログインした状態では自分のページは常に見えるため、正常に公開されているかの判断ができない。
失敗②：画像が重くてページの読み込みが遅い
症状： 作品画像を貼ったらページが重くなった
解決策： Notionの無料プランでは1ファイルあたり5MBの制限がある。作品画像は事前に圧縮する。TinyPNG（Web上で無料使用可）かSqueeze（Mac向け）を使い、JPEGなら70〜80%品質、PNGはTinyPNGで圧縮してからアップロードする。横幅は1200〜1920pxあれば十分だ。
動画を見せたい場合は、動画をYouTubeに限定公開でアップロードし、そのURLをNotionのページに貼り付ける。「動画を埋め込む」を選択すると、ページ内で再生できる形式で表示される。
失敗③：情報を詰め込みすぎてどこを見ればいいかわからない
症状： 「ポートフォリオを見たが、何が強みかわからなかった」と言われた
解決策： 掲載する作品は最大5点までに絞る。「数を見せる」より「深く見せる」ほうが記憶に残る。また、ページの冒頭に「私は◯◯が得意なデザイナーです」「◯◯のエンジニアです」と一言で書くと、相手が理解する時間が大幅に短縮される。
失敗④：更新を止めてしまう
症状： 半年前に作ったまま、古い実績しか載っていない
解決策： 「新しいプロジェクトが終わったらすぐに追加する」ルールを設ける。Notionのモバイルアプリからも編集できるため、移動中に数行メモしておくだけでも記録が積み上がる。まとめてきれいに書くより、「まず書いて後で整える」サイクルのほうが継続しやすい。
失敗⑤：ギャラリービューのサムネイルが表示されない
症状： データベースのギャラリービューにしたが、画像が表示されない
解決策： ギャラリービューのサムネイルは、各作品ページの「カバー画像」を参照している。各カードをクリックしてページを開き、上部の「カバーを追加」から画像を設定することで解決する。またはギャラリーの設定から「カバー画像」→「ページ内の画像」を選ぶと、ページ内に貼られた最初の画像がサムネイルとして使われる。
FAQ
Q. Notionポートフォリオは無料で作れますか？
作れる。Notionのフリープランでもポートフォリオ作成・公開に必要な機能はすべて利用できる。独自ドメインを使いたい場合は有料プランと追加アドオンが必要になるが、yourname.notion.site形式のURLはフリープランでも1つカスタマイズできる。
Q. スマホで見たときのレイアウトは確認できますか？
できる。NotionはPCで編集してもスマホ表示は自動で最適化される。実際にスマホからURLにアクセスして確認するのが最も確実だ。PCで見ると問題なくても、スマホで見ると画像が小さく見えたり表が横スクロールになったりすることがあるため、送る前に必ず確認する。
Q. Notionポートフォリオにお問い合わせフォームは設置できますか？
Notion単体では問い合わせフォームの設置はできない。代替手段として、Googleフォームを作成してNotionページに埋め込む方法が使える。または連絡先セクションにメールアドレスをコールアウトブロックで目立たせる、SNSのDMリンクを貼るなどで対応できる。
Q. 複数の職種のポートフォリオを一つのページにまとめていいですか？
まとめると焦点がぼやけてしまいやすい。「デザイン実績」「ライティング実績」を別のNotion Siteとして作成し、トップページから振り分けるか、応募先・案件ごとにURLを使い分けるほうが効果的だ。Notionなら複数ページを作っても費用は変わらない。
Q. 独自ドメインは絶対必要ですか？
必須ではない。名前.notion.siteのURLでも採用担当者やクライアントに送る分には問題なく機能する。名刺・LinkedInプロフィール・個人ブランディングを強化したい、検索エンジンから集客したいという場合に独自ドメインが有効になる。
Q. Notionポートフォリオを作ったあと、どうやって広める？
まずはX（旧Twitter）・LinkedIn・Wantedlyのプロフィールにリンクを貼ることが基本だ。その後、転職エージェントや求人サイトの応募フォームの「ポートフォリオURL」欄に入力する。フリーランスなら、クラウドワークスやランサーズのプロフィールにも必ず記載しておく。
まとめ——今日からNotionポートフォリオを作り始める理由
Notionポートフォリオの作成は、「完璧に仕上げてから公開する」必要はない。まずプロフィールと代表作1〜2点を載せてURLを発行し、実績が増えるたびに追加していけばいい。更新のたびに新しいURLを発行しなくていいのがNotionの最大の強みだ。
最低限スタートに必要な時間の目安
- アカウント作成・ページ作成：5〜10分
- プロフィール・スキルセクション：30〜60分
- 作品3点の詳細入力：60〜120分
- 公開設定・URL設定：5〜10分
合計2〜3時間で、採用担当者やクライアントに送れる水準のポートフォリオは完成する。あとは使いながら育てていけばいい。
2026年のポートフォリオ選びにおいて、Notionはコストと機能のバランスが最も優れた選択肢のひとつだ。まず「今の自分」をそのまま載せることから始めてみてほしい。
※この記事は、仕事と暮らしを劇的に変える「【中級編】Notion活用・テンプレート完全ガイド」の連載コンテンツです。
💡 さらに仕事と暮らしを効率化する 本記事で紹介した設定だけでなく、Notionをフル活用して「人生の仕組み」を構築したい方は、こちらの記事
➔ すぐに使える実戦向けテンプレートもまとめて公開しています。
💡これからNotionを始めるなら まずはNotionアカウントの作成から進めましょう。
💡Notionの使い方・トラブルへの対処 困ったことがあればこちらの使い方・トラブルについての完全ガイドが役に立ちます。
