未経験のポートフォリオの作り方｜作品選び・構成・提出前の確認まで

未経験のポートフォリオは、応募する仕事に近い作品と、その作品を自分がどう作ったかをまとめます。企業の提出指定があれば、それに合わせてください。実務の受注経験がなくても、自主制作や学習課題として、制作意図と担当範囲を説明できます。

作り始める前に求人票を開き、業務内容、必要なスキル、提出物、提出形式を確認します。デザイン画が求められているのか、動くWebサイトやアプリが必要なのかで、準備するものは違います。応募先の指定が不明なら、採用窓口や紹介会社へ確認してください。

この記事で扱うのは、応募時に提出する作品集です。以下の構成や課題は編集部からの作成案で、全企業に共通する採用基準ではありません。

作ったものをすべて並べる前に、応募する業務と関係があるかを確認します。Adobeの公式ガイドも、今後取り組みたい分野に沿って作品を選び、量を増やすことより内容を絞ることを勧めています。

作品がない場合は、自分が不便に感じた場面から小さな課題を設定します。たとえば「初めて来店する人が、料金と所要時間を見て予約へ進める美容室のページ」「買い物メモを登録・編集できるアプリ」「地域の教室を想定した告知案」などです。いずれも課題例であり、実在する依頼や成果があったようには書きません。

対象者、困っていること、作る範囲、完成を確かめる方法を先に決めると、制作後の説明に使えます。途中の案や修正理由も残してください。作品数を埋めるために説明できない成果物を追加するより、応募先に見せたい作品の不足を直します。

作品一覧では、タイトル、制作したもの、担当範囲がひと目で分かるようにします。詳細ページやPDFには、完成品を示してから制作の背景を説明します。長い自己紹介の後ろに作品を隠さず、目次やリンクからすぐ開ける構成にしてください。

以下の項目を下書きに使えます。書けない欄があれば、実際に行っていないのか、記録が残っていないのかを確認します。測定していない成果は空欄を埋めようとせず、未測定であることと今後確かめる内容を記載します。

厚生労働省のjob tagでは、Webデザイナーの仕事として、サイトの目的を整理し、画面や機能を設計して、動作と使いやすさを確認する流れが紹介されています。応募作品でも、完成画像に加えて、対象者や構成を決めた理由を説明すると、自分が考えた部分を伝えられます。

たとえば自主制作の予約ページなら、誰が予約する想定か、料金や所要時間をどこで確認できるか、予約ボタンまでどう進むかを説明します。スマホとPCの両方を作った場合は、単に画面を縮めたのか、情報の順序や操作方法を変えたのかも示してください。

初期案と修正後の画面を並べる場合は、「ボタンを目立たせた」だけで終えず、どの情報に迷ったため、何をどこへ移したのかを書きます。利用者による確認をしていないなら、使いやすさが改善したと断定せず、設計意図として説明します。コーディングも担当した場合は、その範囲と公開URLを添えます。

開発職向けには、何ができるアプリなのかを最初に示し、実際に試せるURLや操作動画へ案内します。公開リポジトリを提出する場合は、説明文のREADMEに、目的、主要機能、使用技術、起動方法、操作手順、自分の実装範囲をまとめてください。応募先からソースコードの指定がある場合は、その形式を優先します。

機能紹介は、使用した言語やサービスの一覧だけで終えません。たとえば登録・編集・削除を作ったなら、入力が空のときや通信に失敗したときにどうなるか、どの動作を確認したかも書きます。難しかった点は、発生した問題、調べたこと、変更内容、残る課題の順に説明します。

教材を使った場合は、教材が用意した部分と自分が追加・変更した部分を分けます。ログインが必要なデモには個人情報を含まないテストデータを用意し、閲覧方法を応募先へ伝えます。公開リポジトリに実際のパスワードやAPIキーを置かず、設定項目は値を伏せた見本で説明してください。

マーケティングの作品は、広告案、記事企画、アクセス分析、SNS運用など、応募する仕事に合わせて選びます。どの資料を調べ、何を課題と考え、どの施策を提案したかが追える形にまとめてください。公開情報で調べた場合は、資料名、URL、確認日を添えます。

実施していない企画は「自主提案」と書き、想定読者、提案の根拠、制作物、確認したい指標を示します。たとえば教室の告知案なら、誰に届けたいか、どの案内を載せるか、申込みまで何を確認してもらうかを説明します。閲覧数や申込率を予測した場合も、実測値と混ぜないでください。

自分で運用した媒体があるなら、測定期間、対象、集計方法と数値の意味を記載します。数値が変わった前後で投稿数や広告費も変えていれば、その条件も書きます。結果の理由を特定できないときは、自分の施策だけの効果として言い切らないことが大切です。

共同制作では、チームの成果物全体を見せたうえで、自分が作った画面や機能を具体的に示します。デザインは自分、写真は提供素材、実装は別の人、といった区分が分かると、面接でも担当した仕事について説明できます。

生成AIを使った場合も、使用箇所、自分で確認・修正した内容、説明できる範囲を整理します。たとえば文章の下書き、画像の生成、コードの補助などを分けて書きます。出力をそのまま使って動作や内容を確かめていない部分は、確認済みとして扱わないでください。応募先に利用方針がある場合は、その指定に合わせます。

他の作品を参考にした場合は、参考URLと自分の作品との関係を記録します。教材の模写は学習課題と表示し、独自の提案や受注制作に見せないようにします。自分が考えた部分を伝えられないと感じたら、装飾を追加する前に、目的や構成を自分で見直した過程を残してください。

Webサイトやアプリは公開URLで動作を見せられます。PDFは、応募フォームでファイルを求められる場合や、制作の背景を順番に説明したい場合に使えます。どちらを選ぶか迷ったら、先に応募先の指定を確認します。Web上の作品と説明用PDFを併用する場合は、リンク先と内容をそろえてください。

作品集そのものを自作する必要があるかも、応募する業務次第です。既存の公開サービスやテンプレートを使う場合は、外枠の制作と掲載作品を区別します。トップ画面には作品一覧、簡潔なプロフィール、提出先が使える連絡方法を置き、作品へ戻れる案内をそろえます。

Adobeのガイドは、作品が見やすい簡潔なデザインと、分かりやすい移動経路を勧めています。大きな演出や自動再生を足す前に、作品を開けるか、説明を読めるかを確認してください。PDFは指定された容量に収め、文字の選択やリンクが使えるか、スマホでも拡大しすぎず読めるかを確かめます。

制作者の画面では見えていても、応募先には閲覧権限がないことがあります。ログアウトしたブラウザや別の端末でURLを開き、スマホとPCの表示、画像、リンク、動画、入力操作を確認します。期間限定の公開URLや共有リンクを使う場合は、有効期限も確認してください。

作品に使った写真、フォント、テンプレート、ソースコードなどは、掲載方法が配布元の利用条件や依頼元の約束に合っているかを確かめます。社内資料、顧客情報、非公開の数値を掲載するときは、先に公開の許可を確認します。許可が取れないものは公開せず、自分で用意したサンプルで説明します。

検索で見つけた画像や他社のサイト画面を、出典を書いたから使えると自己判断しないでください。公開範囲や掲載可否に迷う場合は、権利者・依頼元・利用サービスの案内を確認します。

職務経歴書には作品集のURLを載せ、応募する仕事と関係がある作品名、自分の担当を短く添えます。QRコードを使う場合も、文字のURLやクリックできるリンクを併記すると、PCで書類を読む人も開けます。

面接では、目的、担当、判断したこと、確認した結果、残る課題の順に説明できるようにします。すべての画面を一から案内するのではなく、求人で求められる仕事との関係が分かる作品から見せます。相手に聞かれたら、制作途中の案やコード、調査資料まで説明できる状態にしてください。

まだ実務経験がないことは、そのまま伝えて構いません。前職で担当した調整、期限管理、顧客対応などと、今回の制作で使った行動がつながるなら、具体的な場面を添えます。応募書類に書く経験と作品集の説明が食い違わないよう、提出前に一緒に読み直します。