リファレンス Web
Webポートフォリオの作り方
応募ではPDFのポートフォリオを求められることが多い一方で、Webのポートフォリオがあると、動きのある作品や更新した実績を見せやすくなります。PDFとWebの使い分け、作り方の選び方、公開の範囲、URLの渡し方をまとめました。
PDFとWebの使い分け
| くらべること | Web | |
|---|---|---|
| 送りやすさ | ファイルを添付・アップロードするだけ | URLを伝えるだけ。重さを気にしなくてよい |
| 見る環境 | どの環境でも同じ見た目 | スマートフォンでの見え方も整える必要がある |
| 更新 | 作り直して送り直す | いつでも直せる（送ったあとに変わる点に注意） |
| 動き・動画 | 載せられない（URLやQRコードで案内） | そのまま見せられる |
| 見せる相手 | 送った相手だけ | 公開の範囲を決める必要がある |
応募にはPDFを基本にし、Webは補足として添えるのが無難です。応募先の指定があれば、それに従います。UI/UX・Web・映像など、動きや操作で見せたい職種では、Webやプロトタイプの URL があると伝わりやすくなります。
作り方の選び方
| 作り方 | よいところ | 気をつけること |
|---|---|---|
| ポートフォリオ用の投稿サービス | 作品を投稿するだけで一覧ができる。デザイナー同士で見つけてもらいやすい | 見た目の自由度は低い。各サービスの利用規約を確かめる |
| ノーコードのサイト作成サービス | テンプレートを選んで、画像と文章を入れるだけ | 月額費用がかかるものが多い。独自のURLは別料金のことも |
| 自分でコーディング | 見た目も動きも自由。Webデザイナー・エンジニアは技術を見せられる | 時間がかかる。表示の速さ・スマートフォン対応も自分で |
| このサービスのポートフォリオ管理（公開リンク） | PDFをそのまま、パスワードや期限つきのリンクで見せられる | 会員登録が必要。Webサイトというより、PDFを見せるためのリンク |
ページの構成
- トップ名前・職種と、代表作を3点ほど。最初の画面で、何が作れる人か分かるように。
- 作品の一覧カテゴリ（Web・パッケージなど）で分け、見たい作品にすぐ進めるように。
- 作品のページPDFと同じ項目（何の案件か・担当・期間・課題と成果）を、画像のあとに短く。
- プロフィール職種・経験年数・得意なこと・使えるソフト。
- 連絡先メールアドレスか、問い合わせの方法。
説明の文章は、作品説明の下書きツール で下書きできます。
公開の範囲
| 範囲 | 向いている使い方 |
|---|---|
| だれでも見られる（一般公開） | 自主制作や、公開の許可を得た作品だけで作るとき |
| URLを知っている人だけ（限定公開） | 応募先にだけ見せたいとき。検索に出ない設定にする |
| パスワードつき | NDAの範囲内で、限られた相手にだけ見せたいとき。パスワードは別に伝える |
社名を出せない仕事は、限定公開でも、載せてよい範囲を超えないようにします（NDA作品の見せ方ガイド）。
公開前の確認
- スマートフォンで見て、文字が読め、画像が切れていない。
- 画像を軽くしてあり、表示が遅くない。
- リンク切れがない。動画・プロトタイプのリンクも開ける。
- PDFと内容（作品・期間・担当）がそろっている。
- 古い作品や、公開の許可が切れた作品が残っていない。
まとめ
- 応募の基本はPDFにし、Webは補足として添えるか
- 作り方と公開の範囲を、作品の公開の許可に合わせて選んだか
- スマートフォンでの見え方・表示の速さ・リンクを確かめたか
- PDFの表紙とメールに URL を入れたか
Webに載せる作品も、まずはPDFでAIポートフォリオチェックを使い、説明が伝わるか確かめてみてください。
PDFの形から整えるなら、ポートフォリオテンプレート も利用できます。