Webデザイナーのポートフォリオ作り方｜未経験の作品例 | デザインワーク準備室

未経験Webデザイナーのポートフォリオは、作品数を競うカタログではありません。採用担当者や依頼者が「何を考え、どこまで担当し、どう進められる人か」を短時間で判断する資料です。

見た目のよい画像だけでなく、目的、対象、担当範囲、制作期間、工夫、改善点を説明してください。自主制作、模写、スクール課題、実案件を正しく分け、権利と秘密保持を確認してから公開します。

ポートフォリオの役割

厚生労働省の職業情報では、Webデザイナーは依頼者の要望を聞き、構成やデザインを検討し、制作・確認・修正を進めます。ポートフォリオは、ツール操作だけでなく、この思考と進行を説明する役割があります。

採用側が見たいのは、募集業務に近い基礎力、担当範囲、再現性、チームでの進め方です。依頼者が見たいのは、自分の課題を理解してくれるか、期限と範囲を守れるか、連絡できるかです。

「おしゃれ」「かわいい」といった感想だけでなく、誰のどんな行動を助けるために、その情報順や色、余白にしたかを言葉にします。

必要なページ構成

プロフィール

名前または活動名、対応領域、得意な対象、稼働可能時間、連絡方法を簡潔に書きます。長い自分史より、今どの仕事を依頼できるかを先に示します。

顔写真は必須ではありません。載せる場合は公開範囲と個人情報を考えます。住所、家族情報、勤務先等を必要以上に公開しないでください。

スキル

Figma、Photoshop、Illustrator、HTML・CSS、WordPressなどを列挙するだけでなく、各ツールで何を作れるかを示します。「Figma：LPのワイヤー・UI・プロトタイプ」「WordPress：既存テーマの固定ページ更新」のように担当範囲を書きます。

触ったことがあるツールと、納品まで使えるツールを同じ熟練度に見せないことも信頼につながります。

作品一覧

サムネイル、作品名、種類、想定顧客、担当範囲を一覧にします。応募先に近い順へ並べ、各作品の詳細ページへ進めるようにします。

公開作品は3〜5点から始められます。バナーだけを多数載せるより、バナー、LP、複数ページサイトなど、目指す仕事に必要な工程が見える構成にします。

問い合わせ

メールフォームまたは連絡先を置き、送信テストをします。返信目安、受付内容、営業連絡への方針を示すと、依頼者が連絡しやすくなります。

プライバシーポリシー、SSL、迷惑メール対策、フォームで収集する情報も確認してください。

1作品に書く内容

項目	書く内容	例
作品名	制作物と対象	地域美容室の予約LP・自主制作
目的	解決したい課題	スマホから予約方法を分かりやすくする
対象	想定ユーザー	近隣の20〜40代、新規来店者
担当	自分が行った範囲	調査、構成、デザイン、実装
ツール	実際に使ったもの	Figma、Photoshop、WordPress
期間	初稿から完成まで	企画2日、制作7日、修正2日
工夫	判断理由	料金・予約・地図を上部に配置
改善	検証後に直した点	ボタン文言と文字サイズを変更
掲載許可	公開可能な根拠	自主制作／顧客の書面許可あり

目的・ターゲット

「女性向け」だけでは広すぎます。利用場面、年代、悩み、端末、行動を仮定します。実案件で顧客から共有された調査資料を載せる場合は、公開許可を確認します。

担当範囲

テンプレートを使用した、講師の指示で修正した、実装は別担当だったなど、自分の範囲を正確に書きます。共同制作の成果を一人で作ったように見せないでください。

制作意図

配色やフォントの好みだけでなく、情報の優先順位、導線、アクセシビリティ、表示速度、スマートフォン対応など、目的へつながる判断を説明します。

制作期間

日数だけでなく、調査、構成、デザイン、実装、修正を分けると、依頼者が進め方を想像できます。学習時間と実務の納期を同じように見せないことも大切です。

未経験者の作品テーマ

実案件がなくても、自主制作で考え方は示せます。

• 地域店舗の予約・問い合わせLP
• 子育てサービスの説明ページ
• 小規模ECの商品詳細・購入導線
• イベント告知のバナーとLP
• 既存サイトの改善提案と再設計
• 架空企業の採用ページ
• WordPressの更新しやすい小規模サイト

実在企業を題材にする場合は、公式案件と誤認されない表記を入れ、ロゴ、写真、文章を無断使用しないようにします。架空の名称と自作・利用許諾済み素材を使うほうが安全な場合があります。

Find me!やデイトラ等の公式ページでは、学習中の制作や実績掲載可能な練習素材に関する案内があります。ただし、教材や素材ごとに公開条件は異なります。「スクール課題だから自由に載せられる」と考えず、受講規約と講師へ確認してください。

模写・課題・架空案件の表記

模写

模写はレイアウトや実装の練習ですが、元作品のデザイン、画像、文章、ロゴには権利があります。原則として公開用の実績にせず、必要があれば権利者の条件と許可を確認します。「非公式の学習目的」と書けば無断公開が常に許されるわけではありません。

スクール課題

「○○スクール課題／指示書に基づく制作」と明記し、自分で決めた部分、講師のフィードバック、修正内容を書きます。教材の指示書や有料素材そのものは載せないでください。

架空案件

「自主制作・架空案件」と目立つ位置へ書きます。実在の店舗から依頼されたような推薦文、数値実績、顧客名を作らないでください。仮説に基づく改善なら「想定」「仮説」と明記します。

実案件

顧客名、公開URL、制作画面、成果数字を載せる前に、書面で掲載許可を取ります。代理店や制作会社の下請けでは、最終顧客だけでなく契約先の許可も必要な場合があります。

著作権・秘密保持で載せられないもの

文化庁は、他人の著作物を利用する際には著作権者の了解が必要になる場合があると案内しています。ポートフォリオでも例外とは限りません。

次の内容は公開前に権利・契約を確認します。

• 顧客や第三者が作ったロゴ、写真、文章、イラスト
• 有料素材、フォント、テンプレートの再配布に当たる表示
• 公開前の商品、価格、顧客情報、アクセス解析
• NDAや業務委託契約で秘密とされた資料
• 管理画面、個人情報、社内コメントが写るスクリーンショット
• 共同制作者の成果物と氏名

許可が取れない作品は、ロゴ・数値を伏せた説明だけにする、公開せず面談時に許可範囲で提示する、同じ課題を架空案件として作り直す方法があります。判断に迷う場合は、権利者や専門窓口へ確認してください。

採用向けと案件獲得向けの違い

観点	採用向け	案件獲得向け
最初に見せる	応募職種に近い作品	顧客業種・課題に近い作品
強調すること	基礎、役割、学び方、チーム	課題理解、進行、範囲、連絡
スキル	募集要件との一致	依頼できる成果物
作品説明	制作過程と判断	顧客目的と納品範囲
問い合わせ	採用担当が確認しやすい連絡先	相談内容、予算・納期の入口

1つのサイトでも、応募先別のPDFや入口ページを作れます。すべての仕事へ同じ作品順で送らないでください。

公開前チェック

• 応募先に近い3作品が最初に見える
• 各作品に目的、対象、担当、期間、工夫がある
• 模写、課題、架空、実案件を区別した
• チーム制作の自分の範囲を明記した
• 顧客と契約先から実績掲載許可を得た
• 素材・フォント・テンプレートの公開条件を確認した
• 秘密情報、個人情報、管理画面が写っていない
• スマートフォン表示、速度、リンクを確認した
• 問い合わせの送受信テストをした
• 誤字、日付、古いスキル表示を更新した

案件支援を使って最初の掲載可能な制作物を作りたい場合は、「スクールの案件保証・案件紹介」で審査、報酬、期限、掲載許可まで比較してください。

よくある質問

未経験は何作品必要ですか？

一律の正解はありません。まず応募先に近い3作品を深く説明し、不足する制作種類を追加します。

スクール課題を載せてもよいですか？

学校と素材の利用条件によります。課題であることを明記し、指示書、有料素材、講師や他受講生の成果を無断公開しないでください。

実案件のURLを載せてもよいですか？

公開サイトでも、自分の実績として掲載できるとは限りません。顧客、契約先、共同制作者との契約と許可を確認します。

ポートフォリオはWordPressで作るべきですか？

必須ではありません。目指す仕事がWordPress制作なら、自分で構築・更新できる証明になります。まず読みやすさ、表示速度、更新性を優先します。

まとめ：3作品を深く説明できる形にする

未経験Webデザイナーのポートフォリオは、作品数より、目的、対象、担当、判断、改善を説明できることが重要です。応募先に近い3作品から始めてください。

模写、課題、架空、実案件を正しく区別し、権利・秘密保持・掲載許可を確認します。安全に公開できる作品が整ったら「Webデザイン案件の獲得方法」や「ホームページ制作の営業方法」へ進みましょう。