ポートフォリオのリンクは、落ち着いた環境で見られるとは限りません。採用担当者が移動中にスマートフォンで開くこともあります。制作会社の担当者が候補者を比較しながら見ることもあります。クライアントがメールで転送された URL だけを頼りに確認することもあります。
そのリンクに求められることは単純です。作品をすぐ確認できることです。
デザイナー、フロントエンド開発者、写真家、ライター、モーションデザイナー、学生、フリーランス、小規模な制作チームにとって、多くの場合は静的なポートフォリオサイトで十分です。ケーススタディ、大きな画像、ライブデモ、プロトタイプ、実装メモ、ソースコード、動画、問い合わせ導線を、サーバーを運用せずに公開できます。難しいのはホスティングそのものではありません。正しいフォルダを公開し、表示を軽く保ち、仕事用として違和感のない URL に置くことです。
ポートフォリオホスティングで解決したいこと
ポートフォリオは作品集であると同時に、実力を確認するための場所です。
| 必要なこと | 実務上の意味 |
|---|---|
| 自分の見せ方を管理する | 外部プロフィールだけに頼らず、独自ドメインで公開する。 |
| 制作実績を深く見せる | 背景、担当範囲、制約、判断、結果、証拠を整理する。 |
| 画像とメディアをきれいに扱う | SNS のフィード形式に押し込まず、必要なサイズと文脈で表示する。 |
| 実物を確認できる | プロトタイプ、静的デモ、小さな Web アプリ、ドキュメント、コードへつなぐ。 |
| 限定共有できる | 公開前や守秘性のある案件を、必要に応じてパスワード付きで共有する。 |
| 更新ミスから戻れる | 書き出し、画像パス、プロジェクトページが壊れたときに差し替えやロールバックができる。 |
良い公開方法は、最初は簡単に始められ、必要になったら本格的な仕事用サイトへ育てられるものです。
静的サイトか、サイトビルダーか
ポートフォリオサービスやサイトビルダーは便利です。発見されやすさやテンプレート編集には強みがあります。ただし、サイト自体の設計や動きまで評価対象になる場合は、独立した静的サイトのほうが向いています。
| 選択肢 | 向いている用途 | 注意点 |
|---|---|---|
| ポートフォリオサービス | 作品投稿、コミュニティ、短時間での掲載 | 構造、ブランド表現、URL、インタラクションの自由度が限られる。 |
| サイトビルダー | ノーコード編集、テンプレート、素早いページ作成 | 月額費用、書き出し制限、プラットフォーム依存が残ることがある。 |
| 静的ポートフォリオ | 独自デザイン、静的書き出し、コード作品、インタラクティブなデモ | ファイル、画像、公開手順を自分で管理する必要がある。 |
UI デザイナーにとって、ポートフォリオそのものがインターフェースのサンプルになります。フロントエンド開発者にとっては、実装力のデモになります。制作会社にとっては、最初に見られるブランド接点です。その場合、どこかのサービス内プロフィールに見えるより、自分で管理しているサイトに見えるほうが自然です。
よく使うツールから何を公開するか
一番多い失敗は、公開すべきフォルダを間違えることです。
| ツール / スタック | 通常公開するもの | アップロード前の確認 |
|---|---|---|
| HTML/CSS/JS | index.html を含むフォルダ | 画像、フォント、スクリプト、各作品ページを含める。 |
| Framer export | 書き出した静的フォルダ | アセットパスとレスポンシブ表示を確認する。 |
| Webflow export | 書き出したサイトフォルダ | カスタムコードとフォームの挙動を確認する。 |
| Vite | npm run build 後の dist | ネストしたルートがある場合は base path を確認する。 |
| React static build | build またはフレームワークの出力 | クライアント側ルーティングとアセットパスを確認する。 |
| Next static export | out | 静的書き出しできるルートだけに使う。 |
| Astro / Eleventy / Hugo / Jekyll | 生成された出力フォルダ | ホスト側でビルドしないならソースをアップロードしない。 |
Cloudflare Pages は、ビルド済みアセットを直接アップロードする Direct Upload を案内しています。これはポートフォリオと相性が良い考え方です。完成した書き出しフォルダから始まるサイトは多く、最初から CI を組む必要がないからです。
ホームよりケーススタディページが信頼を作る
トップページは印象を作ります。信頼を作るのは各プロジェクトページです。
| 問い | 見る側が知りたい理由 |
|---|---|
| 何の課題だったか | 依頼内容、対象ユーザー、制約を短時間で理解したい。 |
| 自分の担当範囲は何か | チーム制作の中で何を担ったのかを知りたい。 |
| どんな判断をしたか | 見た目が整っているほど、意思決定の説明が重要になる。 |
| 公開後に何が変わったか | 数値、コメント、Before/After、学びがあると信頼しやすい。 |
| どこで確認できるか | デモ、プロトタイプ、動画、GitHub、詳しい記事へ進みたい。 |
すべての作品ページを同じ長さにする必要はありません。小さな CSS 実験なら短い説明とデモで十分です。プロダクトのリデザインなら、背景から結果まで書いたケーススタディが必要です。守秘性のある案件なら、公開用の要約と限定共有リンクを分けたほうが安全です。
メディアを重くしすぎない
ポートフォリオは、作品が良くてもページが重いだけで離脱されます。
公開前に確認したいこと:
- レイアウトで実際に使うサイズに合わせて画像を書き出す。
- ワークフローに合う範囲で新しい画像形式を使う。
- 動画を圧縮し、大きな背景動画の自動再生を避ける。
- 長いギャラリーは lazy-load する。
- 高解像度の元データは、必要な場所だけで提供する。
- 大きなモニターだけでなく、スマートフォンと普通の回線で確認する。
公開後はアクセス解析が役に立ちます。重要なケーススタディにアクセスはあるのにすぐ離脱されるなら、作品の質ではなく、構成、画像の重さ、モバイル表示が原因かもしれません。
本気で使うなら独自ドメインに置く
プレビュー URL は初回確認には便利です。ただ、採用、営業、案件獲得で使うポートフォリオは、基本的に自分で管理できるドメインに置くほうが扱いやすくなります。
| パターン | 例 |
|---|---|
| 名前 | alexchen.dev, maria.design |
| スタジオ名 | northline.studio |
| 職種寄り | productdesigner.name, frontend.dev |
| サブドメイン | work.example.com, portfolio.example.com |
独自ドメインは見た目だけの問題ではありません。履歴書、SNS、名刺、メール署名で使い回しやすく、将来ツールを変えても URL を維持しやすくなります。Google はプロフィールページの構造化データも案内しており、サイト上の個人や組織の情報を検索エンジンに伝える助けになります。順位を上げる裏技ではありませんが、ポートフォリオを正式な Web 資産として扱う理由にはなります。
公開前の仕事は守る
ポートフォリオには、クライアント名、未公開画面、社内指標、提案資料、チーム制作、NDA 対象のスクリーンショットが混ざることがあります。
| 作品の種類 | より安全な出し方 |
|---|---|
| 公開済みの実績 | 画像とリンク付きの公開ケーススタディ。 |
| 掲載許可はあるが制限付き | 公開用の要約と、詳細のパスワード保護。 |
| NDA または未公開案件 | 情報を伏せたページ、または限定レビューリンクのみ。 |
| チーム制作 | 自分の役割と共同制作者の扱いを明記する。 |
| 数値情報 | 正確な数字が出せない場合は範囲や定性的な表現にする。 |
パスワード保護は法務確認の代わりではありません。あくまで共有範囲を絞るための実務的なレイヤーです。契約上センシティブな仕事は、公開前に許可を取るべきです。
ポートフォリオの解析で見るべきこと
アクセス解析は、細かい数字を眺めるためではなく、判断するために使います。
| 知りたいこと | 見る指標 |
|---|---|
| そもそも開かれているか | 訪問数、訪問者、国、参照元。 |
| どの作品が見られているか | 上位ページとプロジェクト別のパス。 |
| 採用や営業の導線が効いているか | LinkedIn、メール、求人媒体、独自ドメインからの参照元。 |
| サイトが重すぎないか | 転送量、デバイス、ブラウザ、モバイル比率。 |
| 新しい版で壊れていないか | 重要ページの急な落ち込み、繰り返し発生する 404。 |
履歴書 PDF、LinkedIn 投稿、メール、案件応募で URL を分けるなら UTM を付けておくと、どこから見られたのかを後で判断しやすくなります。
DeployPages が合う場面
DeployPages は、ポートフォリオが静的サイトまたは静的エクスポートで、ブラウザから管理しやすく公開したい場合に向いています。
HTML フォルダ、ZIP、Framer export、静的ビルド、小さなライブデモ、PDF のケーススタディ素材、フルのポートフォリオサイトをブラウザからアップロードできます。成長したプロジェクトでは、同じサイトに 独自ドメイン、アクセス解析、パスワード保護、ロールバック、CLI デプロイ を追加できます。
ポートフォリオから始めるなら portfolio hosting を使えます。履歴書ページから始める場合は resume hosting も参考になります。HTML フォルダをそのまま公開するなら HTML deployment guide が最短です。
公開前チェックリスト
ポートフォリオのリンクを広く共有する前に:
- トップページと主要な作品ページをすべて開く。
- ヒーロー、ギャラリー、キャプション、プロジェクトカードのモバイル表示を確認する。
- 画像、動画、PDF、不要な書き出しファイルを圧縮する。
localhost、ローカルファイルパス、仮テキスト、仮の案件名を消す。- 連絡先への導線を明確にする。
- 仕事用に使うなら独自ドメインを設定する。
- センシティブな作品は伏せるか、パスワード付きにする。
- デモ、コード、プロトタイプ、外部メディアへのリンクを確認する。
- 大きなリニューアル前にはロールバックできる状態にしておく。
ポートフォリオは大きければ良いわけではありません。見やすく、速く、役割が正直に書かれていて、覚えやすい URL にあることが大事です。