未経験Webデザイナーのポートフォリオは、きれいな作品を並べるだけでは完成しません。応募先や依頼主が知りたいのは、何を任せられるか、誰の課題をどう考えたか、どこまで自分が担当したかです。作品ごとに目的・制作過程・判断・改善を説明できる形にします。
本記事のスクール比較導線は、独学で不足しやすい支援を確認するためのものです。広告提携の有無で比較対象の掲載順や評価は変えていません。
- ポートフォリオは「作品集」ではなく、仕事を任せる判断資料
- 就職・副業・フリーランスで、見せる順番を変える
- ポートフォリオに載せる基本構成
- 未経験で実績がない場合は、自主制作を「架空案件」として作る
- 掲載作品は数ではなく、応募先との関連性で選ぶ
- 1作品は「課題 → 判断 → 制作 → 確認」のケーススタディにする
- 作成方法はPDF・簡易公開・ノーコード・自作から選ぶ
- ポートフォリオを完成させる8ステップ
- 参考作品は、見た目ではなく「伝え方」を観察する
- 公開前に、著作権・機密・個人情報を確認する
- よくある失敗は、見た目より「判断できないこと」
- 公開・提出前の20項目チェックリスト
- 提出後も、応募先と成長に合わせて更新する
- 独学で足りない3つの支援と、スクール比較へ進む基準
- よくある質問
ポートフォリオは「作品集」ではなく、仕事を任せる判断資料
ポートフォリオの役割は、作品を見せることだけではありません。見る側が、募集職種や依頼内容と照らして「この人はどの工程を担当できるか」「考え方を説明できるか」「仕事としてやり取りできそうか」を短時間で確認するための資料です。
そのため、完成画像だけでなく、対象者、課題、目的、担当範囲、制作過程、デザイン上の判断、修正内容を添えます。実案件で成果が確認できる場合は根拠と掲載許可を確認して記載し、確認できない数値は載せません。
- 応募先に近い作品が先に見える
- 担当範囲と使用ツールが分かる
- 見た目を選んだ理由が言葉になっている
- 修正前後から改善の姿勢が見える
- PC・スマホで迷わず閲覧できる
- 作品画像だけで目的が分からない
- チーム制作なのに全て自作に見える
- 応募職種と関係の薄い作品が多い
- 架空案件と実案件の区別がない
- リンク切れや文字切れが残っている
就職・副業・フリーランスで、見せる順番を変える
最初に「誰に見せるか」を決めます。同じ作品でも、制作会社の採用担当者と、店舗サイトを依頼したい事業者では確認したいことが違います。1つのポートフォリオを使う場合も、応募先に合わせて先頭の作品と自己紹介文を調整します。
| 目的 | 先に伝えること | 作品で示すこと | 最後の行動 |
|---|---|---|---|
| 就職・転職 | 希望職種、学習・制作経験、チームで生かせる強み | 応募先に近い制作物、考え方、担当範囲、フィードバック後の改善 | 応募書類に記載したURLから閲覧。連絡先は採用窓口に合わせる |
| 副業案件 | 対応できる制作物、納期の考え方、やり取りできる時間帯 | 依頼内容の整理、成果物、修正対応、使用素材・納品範囲 | 相談フォームや指定の提案先へ進める |
| フリーランス | 得意領域、提供範囲、依頼から納品までの流れ | 課題への提案、事業理解、制作プロセス、公開後の対応範囲 | 問い合わせ、相談予約、メールなど一本化した窓口へ進める |
「幅広くできます」と書くより、最初は「小規模サービスのLPデザイン」「採用サイトの情報設計」「バナーと広告LPの一貫したビジュアル」など、応募先に合わせて任せられる範囲を具体化します。
ポートフォリオに載せる基本構成
基本構成は、見る側が「何ができる人か」をつかみ、作品の詳細を確認し、必要なら連絡できる順にします。個性的な演出より、必要な情報へ迷わず着けることを優先します。
| セクション | 載せる内容 | 避けたい状態 |
|---|---|---|
| 最初の画面 | 名前または活動名、希望職種・得意領域、代表作品への導線 | 抽象的なコピーだけで、何ができるか分からない |
| 作品一覧 | 作品名、種類、対象、担当範囲、詳細へのリンク | 画像だけが並び、違いと優先順位が分からない |
| ケーススタディ | 課題、対象者、目的、役割、過程、判断、成果・学び | 完成画像だけ、または長い説明だけで成果物が見えない |
| プロフィール | 経歴、現在の目標、仕事に生かせる経験、制作で大切にすること | 個人情報を必要以上に公開する |
| スキル・ツール | できる作業と習熟の範囲。デザイン、実装、CMS等を分ける | ツール名だけを並べ、何を作れるか分からない |
| 連絡・提出情報 | 用途に合う連絡先、応募書類、SNS等。リンクの目的を明記 | 連絡先がない、または複数窓口が競合する |
未経験で実績がない場合は、自主制作を「架空案件」として作る
実案件がなくても、ポートフォリオは作れます。重要なのは、実在の依頼に見せかけることではなく、想定する課題と対象者を決め、自分で判断して完成させることです。
例: 「地域の焼き菓子店が予約ケーキの相談を増やす1ページ」。対象者、商品、必要情報、行動を決め、ワイヤーから制作します。架空案件であることを作品冒頭に書きます。
例: 学習記録を見つけやすくするWebページや、地域イベントの非公式案内UI。実在組織の公式制作物と誤認されない名称・表示にします。
現行サイトを勝手に「悪い」と断定せず、自分が置いた利用者像と目的に基づく学習用提案と明記します。ロゴ、写真、文章の使用条件を確認します。
知人の活動や小さな団体を手伝う場合も、公開可否、掲載できる画像・数値・名称、自分の担当範囲を事前に確認します。無料制作でも実績公開の権利が自動で得られるとは考えません。
成果を作らない: 架空案件に「売上が増えた」「問い合わせが2倍になった」といった実在しない結果を付けません。代わりに、設計時に置いた目標、実施した確認、第三者レビューで直した点、次に検証したいことを書きます。
掲載作品は数ではなく、応募先との関連性で選ぶ
作品数に共通の正解はありません。多く載せても、応募先と関係の薄い作品や説明できない作品が続くと、強みがぼやけます。初版では候補を表で評価し、最も関連性が高い作品から公開します。
| 候補作品 | 応募先との関連性 | 示せる強み | 説明できる過程 | 公開上の問題 | 判断 |
|---|---|---|---|---|---|
| サービスLP | 高 / 中 / 低 | 情報設計、視線誘導、CTA | 要件、ワイヤー、PC・スマホ、修正 | 素材の権利、架空表記 | 先頭 / 掲載 / 保留 |
| コーポレートサイト | 高 / 中 / 低 | 信頼情報の整理、複数ページ | サイトマップ、部品設計、実装 | 社名・ロゴ、公開許可 | 先頭 / 掲載 / 保留 |
| バナーシリーズ | 高 / 中 / 低 | 文字、配色、展開力 | 媒体別サイズ、比較案、選定理由 | 写真・フォントの利用条件 | 先頭 / 掲載 / 保留 |
Layer Miraiの実務上の目安は、まず代表作品を1件ケーススタディとして完成させ、応募先に近い別種類の作品を追加する進め方です。最初から件数を満たすために弱い作品を公開せず、説明と品質を整えたものから増やします。
1作品は「課題 → 判断 → 制作 → 確認」のケーススタディにする
ケーススタディは、デザインの裏側にある思考を伝えるページです。長い作文にせず、完成物と判断が対応する順に置きます。面接や商談で説明できない内容は、公開前に書き直します。
架空案件の作品例
課題: 商品の魅力は伝わるが、受取日や注文方法が分かりにくい想定。示せる力: 情報の優先順位、写真と文字の扱い、CTA、PC・スマホ設計。確認: 初見の人が相談までの条件を説明できるか。
課題: 複数講座の対象者と日時を比較しにくい想定。示せる力: カードUI、絞り込みの考え方、フォーム導線、アクセシビリティ。確認: 希望条件の講座を見つけ、申込前の注意を読めるか。
作成方法はPDF・簡易公開・ノーコード・自作から選ぶ
ポートフォリオを作るために、全員がHTML/CSSを書く必要はありません。応募先がデザインカンプやPDFを重視するのか、公開サイトそのものの実装力を見たいのかで選びます。まず内容を完成させ、作成手段を学ぶこと自体が目的にならないようにします。
| 形式 | 向いている人 | 強み | 注意点 |
|---|---|---|---|
| 応募先ごとに順番を変えたい。添付・持参形式を指定されている | 見せる順番を固定しやすく、オフラインでも確認できる | 容量、文字の小ささ、リンク、更新後の差し替えを確認する | |
| Notion等の簡易公開 | まず内容を早く共有したい。ケーススタディ中心 | 文章・画像を更新しやすい。Notionは公式ヘルプ上、Web公開とnotion.siteドメインを利用できる | レイアウトの自由度と公開範囲を確認。機密資料を誤って公開しない |
| Canva | テンプレートからPDFや共有資料を作りたい | Canva公式では、ポートフォリオ用テンプレートとPDF等での共有を案内している | テンプレートの文章・画像を差し替えるだけで終わらず、自分の情報構造に直す |
| Studio・Wix等 | コードを書かずにWebサイトとして見せたい | デザインと公開を一つの環境で進めやすい。レスポンシブやフォームを作りやすい | 無料公開URL、広告表示、独自ドメイン、パスワード、料金の条件は公開前に公式で確認する |
| HTML/CSSで自作 | サイト制作・コーディングも担当したい | ポートフォリオ本体で実装、レスポンシブ、アクセシビリティを示せる | 内容より実装に時間を使いすぎない。表示崩れ、速度、フォーム、保守も自分で確認する |
Studio公式ヘルプではFreeプランを含む全プランでStudioサブドメイン公開が可能と案内されています。独自ドメインやパスワード等の条件はStudio公式料金表で確認します。Notion公式ヘルプでは公開ページとnotion.siteドメインの管理方法を確認できます。
HTML/CSSで作る場合、GitHub Pages公式ドキュメントは、リポジトリ内のHTML、CSS、JavaScriptから静的サイトを公開できると説明しています。公開リポジトリを使う場合は、ソースコードやファイルに機密情報を含めないようにします。
ポートフォリオを完成させる8ステップ
先にツールを開くのではなく、提出先と作品の要件から決めます。完成後の第三者確認と修正までを制作工程に含めます。
参考作品は、見た目ではなく「伝え方」を観察する
ギャラリーサイトや事例記事は、配色を真似するためではなく、見る側が作品と人物を理解する順番を調べるために使います。気に入った画面を保存するだけでなく、次の観点をメモします。
- 最初の画面で、職種・得意領域・代表作品が分かるか
- 作品一覧の違いを、画像以外の言葉でも説明しているか
- 各作品で、課題・役割・過程・判断が見えるか
- 担当範囲と共同制作者のクレジットが明確か
- PCとスマホで、情報の順番が保たれているか
- 問い合わせや応募先が、自然な位置にあるか
国内事例はWeb Design Clipのポートフォリオ一覧やSANKOU!のポートフォリオサイト一覧、UI・ケーススタディの見せ方はFigma公式のポートフォリオ事例から探せます。複数サイトから要素を観察し、作品やレイアウトをそのまま複製しません。
公開前に、著作権・機密・個人情報を確認する
公開できる作品と、制作に関わった作品は同じではありません。クライアントや勤務先の制作物は、担当したから自由に公開できるとは考えず、契約、社内規定、公開許可、第三者の権利を確認します。許可が取れない場合は、非公開提出の可否を相談するか、別の自主制作を使います。
| 確認対象 | 確認すること | 安全な代替 |
|---|---|---|
| 実案件 | 実績公開の許可、公開できる画面・数値・名称、公開時期、担当範囲 | 許可がない内容は載せず、同じスキルを示す自主制作を作る |
| 写真・イラスト・文章 | 自作か、利用規約・ライセンス・クレジット条件を満たすか | 自作素材、利用条件が明確な素材、ダミーとして作った内容へ置き換える |
| ロゴ・ブランド | 公式制作物と誤認させないか、利用許可があるか | 架空ブランドを作り、架空案件と明記する |
| 個人情報 | 氏名、住所、電話、メール、顧客情報、管理画面等が写っていないか | 必要な情報だけ残し、ダミーに差し替える。画像の隠し忘れも確認する |
| 共同制作 | 自分の担当範囲、他の制作者、使用した既存部品 | 「担当: 情報設計・PC版デザイン」のように範囲を明記する |
文化庁「著作権テキスト 令和7年度版」は、著作物の利用には原則として権利者の了解が必要で、法律上の例外があるという基本を説明しています。ポートフォリオ公開が例外に当たると自己判断せず、素材の規約と権利者・依頼主の許可を確認します。
よくある失敗は、見た目より「判断できないこと」
公開・提出前の20項目チェックリスト
チェックは自分だけでなく、第三者にもURLを開いてもらいます。説明を加えずに見てもらうと、情報の不足と導線の迷いを見つけやすくなります。
- 希望職種・得意領域が最初の画面で分かる
- 応募先に近い代表作品が先に見える
- 作品ごとに実案件・課題・自主制作・架空案件を区別した
- 担当範囲と共同制作者を明記した
- 対象者、課題、目的を説明した
- ワイヤーや検討過程と完成物が対応している
- デザイン上の判断を自分の言葉で説明した
- 実在しない成果や評価を書いていない
- 使えるツールではなく、できる作業を書いた
- 実績公開の許可と契約条件を確認した
- 画像・文章・フォント等の利用条件を確認した
- 個人情報・顧客情報・管理情報が写っていない
- 全てのリンクとボタンが正しい場所へ進む
- 別の端末・ブラウザーでも公開URLを開ける
- スマホで文字・画像・表が切れない
- 画像が重すぎず、読み込み中も内容が分かる
- 画像の内容を補う代替テキストがある
- 文字の大きさ・色・操作が読み取りやすい
- 連絡先または指定の応募方法が分かる
- 応募先へ送るURL・PDFが最終版になっている
提出後も、応募先と成長に合わせて更新する
応募時は、本文やメールにURLを置くだけでなく「最も見てほしい作品」「自分の担当範囲」「応募職種との関係」を1〜2文で添えます。PDFを指定された場合は、ファイル名に氏名・職種・更新日を含め、容量とリンクを確認します。
公開後は、新しい作品を足すだけでなく、古い作品を入れ替えます。更新のきっかけは、応募先が変わったとき、担当できる範囲が増えたとき、第三者の指摘を反映したときです。更新日だけを変えず、何を改善したかを自分の制作記録に残します。
独学で足りない3つの支援と、スクール比較へ進む基準
独学でも作品は作れますが、自分では気づけない弱点を指摘するレビュー、修正を繰り返すフィードバック、応募先に合わせる就職支援は不足しやすい部分です。すべてをスクールで補う必要はありません。知人の現役デザイナー、勉強会、キャリア相談などで代替できるなら、独学を続けられます。
| 判断項目 | 独学を続けてよい状態 | スクール比較へ進むサイン | 比較・相談で確認すること |
|---|---|---|---|
| 第三者レビュー | 応募先に近い実務経験者へ、説明なしで作品を見てもらえる | 自分の好みだけで良し悪しを判断し、直す優先順位が決まらない | 誰が講評するか、個別か集団か、作品全体と応募先別の両方を見てもらえるか |
| 継続フィードバック | 指摘を受け、再提出し、修正理由を説明する工程を繰り返せる | 同じ弱点が残る、質問先がない、初稿から先へ進めない | 添削回数、再提出、質問方法、回答時間、受講終了後も相談できるか |
| 就職・案件支援 | 求人票から必要作品を読み取り、書類・面接・提案先に合わせて並べ替えられる | 目指す職種が曖昧で、何を載せるか、どこへ応募するか決められない | ポートフォリオ添削、求人紹介の条件、書類・面接支援、卒業後の利用期限 |
判断の目安：3項目を自力または外部の協力者で補えるなら独学を継続できます。1項目でも補う相手や方法が決まらず、制作や応募が止まっているなら、料金だけでなく支援範囲をそろえてスクールを比較してください。
ポートフォリオを完成させるためにスクールを使うなら、添削回数、再提出、卒業制作、公開条件、キャリア支援まで比較します。候補校を決める前に、自分が補いたい支援と学習形式をそろえて確認してください。
Webデザインスクール比較を見るスクールの選び方を確認するよくある質問
未経験でもポートフォリオは必要ですか？
就職・転職や案件提案で制作力を伝えるには、用意する価値があります。実案件がなくても、自主制作や架空案件で、対象者・目的・担当範囲・制作過程・改善を説明できます。募集要項で提出形式が指定されている場合は、その条件を優先します。
作品は何点載せればよいですか？
共通の正解はありません。まず応募先との関連性が高く、目的・担当範囲・判断を説明できる代表作品を完成させます。そのうえで、別の制作物や強みを示せる作品を追加します。件数を満たすために弱い作品を残すより、関連性と説明の質を優先します。
実績がない場合、架空案件だけでも大丈夫ですか？
最初のポートフォリオは架空案件でも作れます。「架空案件」と明記し、依頼文、対象者、目的、制約を自分で定め、完成物と改善過程まで残します。実案件のような成果数値や利用者コメントは作りません。
WebサイトとPDFはどちらがよいですか？
応募先の指定と目指す職種で決めます。WebサイトはURL共有と更新に向き、サイト自体でレスポンシブや実装力も示せます。PDFは提出先ごとに順番を調整しやすく、添付や面接時の閲覧に向きます。必要ならWeb版を正本にし、要点をPDFにまとめます。
ポートフォリオを作るのにHTML/CSSは必要ですか？
必須ではありません。デザイン職で画面設計やケーススタディを見せるなら、ノーコードやPDFでも作れます。Webサイト制作・コーディングも担当したい場合は、自作HTML/CSSが実装力の証明になります。応募先が求める担当範囲で決めます。
テンプレートを使ってもよいですか？
使えます。ただし、色や写真を差し替えるだけでは、自分の情報設計や判断が伝わりません。応募先、代表作品、ケーススタディの量に合わせて構成を変え、使用条件も確認します。他者のポートフォリオをそのまま再現しないでください。
クライアント案件を載せてもよいですか？
契約、勤務先・依頼主の規定、公開許可を確認します。公開済みサイトでも、管理画面、非公開資料、顧客情報、成果数値を自由に転載できるとは限りません。許可がない場合は掲載せず、同じ力を示す自主制作へ置き換えます。
第三者には何を見てもらえばよいですか？
説明する前にURLを渡し、「何ができる人に見えるか」「どの作品が代表に見えるか」「担当範囲は分かるか」「連絡先まで迷わず着けるか」を確認してもらいます。現役デザイナーには作品の判断、非デザイナーには読みやすさと導線を見てもらえます。