【未経験者必見】採用されるWEBデザイナーのポートフォリオの作り方と事例を紹介
SNSで憧れてWEBデザインを学び始めたものの「ポートフォリオURL（必須）」という応募条件に戸惑った経験はありませんか。
何から始めていいのか分からず、「作り方がわからない」と感じている方が多いでしょう。
結論、正しいステップを踏めば、未経験でも採用につながるポートフォリオを作ることはできます。
そこで、この記事では「載せる作品がない」「何を載せればいいか分からない」と悩む方に向けて、未経験からでも採用担当者の目に留まるポートフォリオを作るための手順や構成のコツを実例とともに解説します。
- ポートフォリオに絶対に含めるべき必須要素
- 未経験から始めるポートフォリオ制作の5ステップ
- 実際に転職を成功させたポートフォリオの実例
- 「一緒に働きたい」と思わせるポートフォリオの共通点
また、WEBCOACHではこれまで10,000人以上の未経験者にWEBデザイナーの目指し方を提案してきた経験から、多くの人が使えるWEBデザイナーロードマップを開発しました。
ぜひ活用して、WEBデザイナーへの道を目指してください！
そもそもWEBデザイナーのポートフォリオとは？
ポートフォリオとは、自分のスキルや制作した作品を集めたもので、WEBデザイナーにとっては非常に重要な役割を果たします。
特に案件獲得には必ず必要であり、採用担当者やクライアントに対して自分の実力をアピールする唯一の方法です。
初心者WEBデザイナーにとって、ツテや経験が少ない中で自身の魅力を効果的に表現するために、ポートフォリオは不可欠です。
魅力的なポートフォリオを作成することで、企業やクライアントに対して良い印象を与え、案件を獲得するチャンスが増えます。
ポートフォリオには、プロフィール、習得しているスキル、実際の作品、仕事に対する思い、連絡先が含まれることが重要です。
これらの要素をしっかりと抑え、効果的に表現することが案件に繋がるポイントとなります。
次の章では、未経験者にこそポートフォリオが重要な3つの理由と紙のポートフォリオも用意すべきかどうかについて解説します。
未経験者にこそポートフォリオが重要な3つの理由
未経験者にこそポートフォリオが重要な理由は以下の3つです。
- 熱意と本気度の証明になる
- スキルが可視化できる
- ポテンシャルを提示できる
仕事終わりや休日の貴重な時間を使い、学習して作り上げたポートフォリオは、何より雄弁にあなたの熱意を物語ります。
「WEBデザイナーになりたい」という言葉だけでなく、「そのためにこれだけの行動を起こした」という事実で本気度を示せる、唯一無二のツールです。
次に、ポートフォリオはスキルの可視化としてアピールできます。
履歴書に「Photoshopが使えます」と書くだけでは、どのレベルで使えるのか伝わりません。
しかし、実際にPhotoshopで作ったバナーが1枚あれば、スキルレベルは一目瞭然で、自分のスキルを客観的な事実として提示できます。
最後に、ポテンシャルの提示としてもポートフォリオは重要な役割を担います。
作品の最終的なクオリティだけでなく、そこに至るまでの課題解決のプロセスや学習意欲を示すことで、「この人は入社後も自走して成長してくれそうだ」と採用担当者に未来を期待させらるでしょう。
紙のポートフォリオも用意すべき？
結論として、WEBデザイナーを目指すなら、まずはオンラインのポートフォリオサイト作りに全力を注ぐべきです。
WEB業界では、応募時にURLを送るのが一般的であり、採用担当者もパソコンのブラウザーで閲覧することを前提としています。
サイト形式であれば、動きのあるデザインを見せたり、コーディングスキルを証明したりすることも可能です。
「紙かWebか」で悩む時間をなくし、まずはWebポートフォリを完成させることに集中しましょう。
ただし、面接時に手元で見せたい場合や、補足資料として使いたい場合に備え、「ポートフォリオサイトをPDF化して保存したもの」を用意しておくとより安心です。
現役WEBデザイナー直伝！ポートフォリオに必須の要素
ここでは、ポートフォリオサイトに必ず入れるべき5つの必須要素を解説します。
構成で迷わないよう、チェックリストとしてご活用ください。
- プロフィール｜人柄と熱意を伝える
- 習得スキル｜できることを具体的に示す
- 実績（作品）｜思考プロセスとセットで紹介
- お問い合わせフォーム｜仕事の依頼窓口
- 稼働条件・お仕事のスタイル｜ミスマッチを防ぐ
プロフィール｜人柄と熱意を伝える
プロフィールは、単なる経歴の羅列ではなく「あなたという人間」を採用担当者に伝え、興味を持ってもらうための重要なページです。
「事務職の経験しかない」と感じるかもしれませんが、事務経験で培った次のようなスキルは、WEBデザイナーの仕事に直接活かせます。
- 顧客対応能力：お客さまの要望を正確にヒアリングする力
- 丁寧な資料作成スキル：分かりやすく、ロジカルな情報設計力
- スケジュール管理能力：納期から逆算してタスクを管理する力
これらの経験を「WEBデザイナーとしてどう活かせるか」という視点でアピールしましょう。
また、清潔感のある顔写真を載せることで、信頼感や安心感が格段にアップし、「一緒に働きたい」と思ってもらいやすくなります。
習得スキル｜できることを具体的に示す
「何ができるか」を採用担当者が一目で理解できるよう、スキルは具体的に記載することが重要です。
- 良い例：Photoshop｜Web用バナー作成、写真のレタッチ、カンプ作成が可能
- 悪い例：Photoshop, Illustrator
このように、ツール名だけでなく「そのツールで何ができるか」まで具体的に書きましょう。
また、スキルは「デザインツール」「コーディングツール」「使用CMS」によってカテゴリを分けて記載するとよりわかりやすく伝わります。
実績（作品）｜思考プロセスとセットで紹介
実績はポートフォリオの心臓部です。
「架空サイトを載せても意味がないのでは」という不安を感じるかもしれませんが、全くそんなことはありません。
採用担当者が最も知りたいのは、作品そのものの美しさ以上に「なぜこのデザインにしたのか」というあなたの思考プロセス（デザインの意図）です。
作品ごとに、以下の項目をセットで紹介しましょう。
| 項目 | 説明 |
|---|---|
| 作品のURL or 画像 | 作品が確認できる場所を示す。 |
| 担当範囲 | デザイン、コーディング、企画など、どこまで自分で行ったかを明記。 |
| 制作期間 | どれくらいの時間で制作したかの目安を記載。 |
| デザインの意図 | 「誰の・どんな課題を・どう解決するために・このデザインにしたか」を説明。 |
| こだわった点 | 配色、フォント、レイアウトなど、工夫したポイントを具体的に記述。 |
| 使用ツール | Figma, Photoshop, HTML/CSSなど、制作に使用したツールを記載。 |
お問い合わせフォーム｜仕事の依頼窓口
ポートフォリオは転職活動のためだけでなく、将来的には副業やフリーランスとして仕事を得るための大切な営業ツールにもなります。
ポートフォリオを見て「この人に仕事をお願いしたい」と思った企業や個人が、すぐに連絡できる窓口を用意しておくことは重要です。
Googleフォームの埋め込みや、WordPressのプラグイン（Contact Form 7など）を使えば、専門的な知識がなくても比較的簡単に設置できます。
稼働条件・お仕事のスタイル｜ミスマッチを防ぐ
転職後「こんなはずじゃなかった」というミスマッチを防ぎ、自分に合った働き方を実現するために、稼働条件や仕事のスタイルを明記しておきましょう。
- 希望する働き方：正社員、業務委託 など
- 稼働可能時間：例：平日9:00〜18:00
- 希望する業務内容：例：事業会社のインハウスデザイナーとして、サービス成長に貢献したい
- 時給や報酬の目安：（任意）記載しておくと、条件に合う企業から声がかかりやすくなる可能性があります。
これらの情報を事前に示しておくことで、企業側も自社の条件と照らし合わせやすくなり、質の高いオファーにつながる可能性が高まります。
未経験WEBデザイナーのポートフォリオの作り方
ここからは、具体的な行動に移せるように、ポートフォリオサイトをゼロから完成させるまでの5つのステップを解説します。
- 誰に何を伝えたいのか目的を明確にする
- ポートフォリオの掲載先を決める【形式別メリット・デメリット】
- 掲載用の作品制作・まとめる
- ポートフォリオを制作する
- 公開して継続的に更新する
誰に何を伝えたいのか目的を明確にする
いきなり作り始めるのではなく、まずはポートフォリオの設計図を描くことが最も重要です。
- 誰に（ターゲット）：どんな企業に自分をアピールしたいか？（例：Web制作会社、事業会社、スタートアップなど）
- 何を伝えて（ゴール）：自分のどんな強みやスキルを一番伝えたいか？（例：丁寧な情報設計力、ユーザー視点のデザイン力など）
- どうなってほしいか（目的）：ポートフォリオを見た人にどうしてほしいか？（例：面接に呼んでほしい、仕事の依頼をしてほしいなど）
ターゲットによって、アピールすべき内容は変わります。
例えば、制作会社ならデザインの表現の幅広さ、事業会社ならサービスの課題を理解し改善する提案力が評価される傾向にあります。
ポートフォリオの掲載先を決める【形式別メリット・デメリット】
ポートフォリオを公開する形式はいくつかあり、それぞれにメリット・デメリットが存在します。自分のスキルレベルや目的に合わせて最適なものを選びましょう。
| 掲載形式 | メリット | デメリット |
|---|---|---|
| 自作サイト | ・デザインの自由度が高い ・コーディングスキルをアピールできる ・ドメインで個性を出せる | ・制作に時間とスキルが必要 ・サーバー・ドメイン代がかかる |
| note | ・無料で手軽に始められる ・文章で思考プロセスを伝えやすい ・スキやコメントで反応が見える | ・デザインの自由度が低い ・他の記事に埋もれやすい ・コーディングスキルは示せない |
| スライド（Googleスライド等） | ・無料で作成可能 ・資料作成能力をアピールできる ・構成を整理しやすい | ・Webサイトとしての体裁ではない ・URLが長くなりがち ・動きのあるデザインは見せられない |
WEBデザイナーを目指すのであれば、学習したスキルを証明できる「自作サイト」が最もおすすめです。
最近では、コーディング不要でWebサイトを制作できる「STUDIO」のようなノーコードツールも人気で、デザインに集中したい人には良い選択肢となるでしょう。
掲載用の作品制作・まとめる
ポートフォリオの核となる作品を準備します。
「載せるものがない」と悩む人は、まず質の高い作品を3〜5点作ることを目標にしましょう。
量より質が重要です。
- 架空のお店のWebサイト（カフェ、美容室、雑貨店など）
- 自分の好きなサービスやブランドのサイトリニューアル案
- キャンペーン用のLP（ランディングページ）
- Webバナー広告（同じテーマでサイズ違いを複数作成）
作品を作る際は、必ず「なぜこのデザインにしたのか」という思考プロセスを言語化し、メモしておくことを強くおすすめします。
ポートフォリオを制作する
Step1〜3で準備した材料を基に、実際にポートフォリオサイトを構築していきます。
Step2で決めた掲載先（自作サイト、noteなど）で制作を進めましょう。
デザインのレイアウトや構成で迷ったら、他のデザイナーのポートフォリオを参考にするのが近道です。Pinterestや、優れたサイトを集めたギャラリーサイト（SANKOU!、Parts.など）でたくさんの事例を見て、まずは良いと思ったデザインの「型」を真似することから始めてみましょう。
公開して継続的に更新する
ここまできたら、ポートフォリオを公開しましょう。
「100%完璧な状態」を目指すと、いつまでも公開できなくなってしまいます。
60〜70%程度の完成度でも、まずは勇気を出して公開してみることが重要です。
公開しない限り、誰からもフィードバックをもらうことはできません。
ポートフォリオは一度作って終わりではなく、あなたの成長と共に育てていく「資産」です。
新しい作品ができたり、スキルが向上したりしたら、定期的にアップデートしていきましょう。
SNSのプロフィールにURLを載せたり、知人に見てもらって感想を聞いたりするのもおすすめです。
未経験からWEBデザイナーへの転職を成功させたポートフォリオの実例を紹介！
まずはイメージを構築するためにも実際のポートフォリオを見てみると良いでしょう。
これらのポートフォリオはWEBCOACHの受講生の制作物でして、どれも初めてから半年程度で制作されたものです。
非常に質の高いものになっていますので参考にしてください！
吉田智子さん
ポートフォリオ：https://t0m1h0y7h0n3.wixsite.com/grafelia-design
吉田さん育児と接客業の両立がきついと思ってWebデザインを勉強しました！
WEBCOACHは暖かいスクールで、信頼できるコーチに教えてもらって自分でポートフォリオサイトまで作れるようになりました！
吉野結依さん
ポートフォリオ：https://y1993wc.wixsite.com/yportfolio
吉野さん務めていた会社が業務量が多くて、子供ができたので転職しました。
マンツーマンとオンラインに惹かれてWEBCOACHに入りましたが自分のペースで学習できたのがよかったです。
ポートフォリオも専属コーチにコツとか教えてもらって作りました！
より多くのポートフォリオをこちらの記事で紹介しているので、合わせてご覧ください。
採用担当者の目に留まる！ポートフォリオの共通点3選
数多くのポートフォリオを見ている採用担当者の心に響くポートフォリオには、いくつかの共通点があります。
ここでは、特に重要な3つのポイントを解説します。
- 課題解決能力が「ストーリー」で示されている
- 自身の「強み」と「やりたいこと」が明確に伝わる
- 「一緒に働きたい」と思わせる人柄や学習意欲が見える
課題解決能力が「ストーリー」で示されている
ただ綺麗なだけのデザインは、残念ながら採用担当者には響きません。
重要なのは、「このデザインによって、誰のどんな課題を解決しようとしたのか？」という背景です。
「このサイトのターゲットが抱える〇〇という課題に対し、私は△△というデザイン的アプローチで解決を試みました。その理由は…」
このように、自分の作品を「課題解決の物語」として語れるようにしましょう。
これができると、単なる作業者ではなく「自ら考えて提案できるデザイナー」として評価されます。
自身の「強み」と「やりたいこと」が明確に伝わる
「何でもできます」というアピールは、残念ながら「何も専門性がない」という印象を与えかねません。
あなたの事務職経験のような、自分ならではの経験とWebデザインを結びつけ「私の強みは、丁寧なコミュニケーションで課題を整理し、分かりやすくデザインに落とし込むことです」のように、自分の「強み」を断言することが重要です。
さらに、「将来的には、この強みを活かして〇〇のようなデザインで貴社に貢献したい」という「やりたいこと（Will）」を明確に打ち出すことで、採用担当者はあなたが自社で活躍する姿を具体的にイメージできます。
「一緒に働きたい」と思わせる人柄や学習意欲が見える
スキルが同程度の候補者が複数いた場合、最終的な決め手は「この人と一緒に働きたいか」という「人柄」になることが少なくありません。
ポートフォリオ全体から伝わる丁寧な言葉遣いや分かりやすい文章、デザインプロセスから見える誠実さなどが、あなたの人柄を伝えます。
また、ブログで学習記録を発信する、読んだデザイン書をリストアップするなど、継続的な学習意欲を示すことで「入社後も成長し続けてくれる人材だ」というポジティブな印象を与えられます。
現役デザイナーもやっているポートフォリオ作成時のテクニック
ここでは、あなたのポートフォリオをさらに一段階レベルアップさせるための、具体的なテクニックを6つ紹介します。
- 作品の並び順を工夫する
- 掲載する作品数は10前後にする
- 自分の強みは目立つ場所に配置する
- コーディングスキルがあれば積極的に記載する
- プロフィール写真を入れると信頼感を与えられる
- 作りっぱなしにせず定期的にアップデートする
作品の並び順を工夫する
採用担当者は多くのポートフォリオを短時間で確認します。
そのため、最初の印象が極めて重要です。
最も自信のある作品（ベストワーク）を最初に配置しましょう。
次にアピールしたいスキルが分かる作品、というように戦略的に並べるのがおすすめです。
「自信のある順」が基本ルールだと覚えておいてください。
掲載する作品数は10前後にする
経験者の場合は10点前後が目安ですが、未経験者の場合は「量より質」が絶対的なルールです。
質の低いものを数多く並べるより、思考プロセスをしっかり書いた質の高い作品が3〜5点あれば十分です。
無理に数を揃えようとせず、一つひとつの作品説明を充実させることに注力しましょう。
自分の強みは目立つ場所に配置する
プロフィール欄やサイトのファーストビュー（最初に表示される画面）など、最初に目に入る場所に、自分が最も伝えたい強みを簡潔なキャッチコピーとして配置しましょう。
例えば、「丁寧なコミュニケーションで課題を解決します」のような一文です。
これにより、採用担当者に「この人は〇〇な人だ」という第一印象を効果的に植え付けられます。
コーディングスキルがあれば積極的に記載する
デザインだけでなくコーディングもできる人材は、市場価値が高い傾向にあります。
ポートフォリオを自分でコーディングして制作した場合は、その旨をサイトのフッター（最下部）などに明記しましょう。
GitHubのアカウントがあれば、URLを記載することを強くおすすめします。
プロフィール写真を入れると信頼感を与えられる
必須ではありませんが、顔が見えることで採用担当者は安心感を覚え、親近感を持ちやすくなります。
証明写真のように硬いものではなく、清潔感があり、人柄が伝わるような、少し笑顔の自然な写真がベストです。
載せることでプラスに働くことが多いテクニックです。
作りっぱなしにせず定期的にアップデートする
ポートフォリオは、あなたの成長と共に育てていく「資産」です。
新しいスキルを学んだらスキル欄を更新し、新しい作品ができたら追加（同時に、過去の質の低い作品は削除）することで、常に最新の状態を保ちましょう。
最終更新日が新しいと、学習を継続している熱心な人材であることの証明にもなります。
基礎的なWEBデザインから実践的な内容を学ぶなら
ここまで、未経験から採用されるポートフォリオの作り方を解説してきました。
とはいえ、 「記事を読んでも、自分の場合はどんな作品を作ればいいの？」 「どういうステップで進めればいいの？」など、不安は尽きないはずです。
そんなあなたには、正しいステップでWEBデザイナーへの道を歩むためのロードマップが欠かせません！
WEBCOACHが累計10,000人以上のWEBデザイナー志望者に提案してきたデータを元に開発したロードマップをぜひご活用ください！
WEBCOACHの口コミや評判についてはこちらの記事がおすすめです。
よくある質問（Q&A）
未経験からWebデザイナーのポートフォリオを作成しようとしている人から多く寄せられる質問を紹介します。
以下に、特に多い質問をいくつか挙げます。
- ポートフォリオなしでもWebデザイナーになれる？
- ポートフォリオ作成におすすめのWebデザインスクールの選び方は？
- ポートフォリオに資格の記載は必要？
- 完成したポートフォリオはどこで公開する？
これらはよく寄せられる質問の一部です。
ポートフォリオ作成には他にも多くの疑問があるかと思います。
その場合は、直接カウンセリング等で相談することをお勧めします。
最後に、カウンセリングを受けることで、具体的なアドバイスやサポートが得られ、より効果的なポートフォリオを作成することができます。
ポートフォリオなしでもwebデザイナーになれる？
結論から言うと、ポートフォリオなしで参加できる案件も存在しますが、おすすめしません。
Webデザイナーとしての案件はさまざまなものがありますが、全くの未経験でも参加できるようなポートフォリオなしの案件は、報酬があまり良くなかったり、今後のWebデザイナーとしてのキャリアに役立つものが少ないことが多いです。
また、Webデザイナーとして転職する場合や正式な案件の場合、基本的にポートフォリオは必須です。
ポートフォリオがないまま自分の実力や実績を口頭だけで説明するのは難しく、採用側からは消極的と判断されてしまうこともあります。
Web制作会社やクライアントは、具体的な作品を見てデザイナーのスキルやセンスを評価するため、ポートフォリオは非常に重要な役割を果たします。
特に応募の際にポートフォリオを提出することは、自分の強みやクリエイティブなアイデアを直接アピールする機会です。
これがないと、自分の実力を正確に伝えるのは難しくなります。
そのため、しっかりとしたポートフォリオを作成し、応募の際に提出することを強くおすすめします。
ポートフォリオを作成することで、想定されるクライアントや雇用主に対して、自分のスキルやデザインスタイルを明確に示すことができ、信頼性を高めることができます。
ポートフォリオなしでもWebデザイナーになることは可能ですが、キャリアの発展を考えると、ポートフォリオを作成することが不可欠です。
ポートフォリオ作成におすすめのWebデザインスクールの選び方は？
ポートフォリオを作成するのにおすすめのWebデザインスクールの選び方のポイントを紹介します。それぞれの理由についても解説します。
- 案件提供があること
実際の案件を通じて学べるスクールは、自身のスキルを実践的に活用する機会が多いです。これにより、現実の課題に対処する力を養い、ポートフォリオに強みとなる実績を追加できます - 実際にプロのWebデザイナーに学べること
プロのWebデザイナーから直接学ぶことで、最新のデザイン技術やトレンドを学習できます。
スクールによっては卒業生がそのまま講師になるケースもあるので注意が必要ですが、現役のプロからの指導は貴重な経験となります - アウトプット重視のスクールであること
学んだ知識を活用して実際に作品を作成する機会が多いスクールは、ポートフォリオの作成に最適です。
アウトプットを重視することで、自分のデザインスキルを磨き、具体的な成果をポートフォリオに反映させることができます。
多くのカリキュラムを提供するスクールがありますが、未経験からポートフォリオを作成することに着目するなら、上記の三つのポイントを抑えることが重要です。
これにより、実践的なスキルと豊富な作品を持つポートフォリオを作成できます。
未経験からWebデザイナーを目指すために必要なスクールの選び方やおすすめのスクールを紹介する記事もぜひ参考にしてみてください。
スクールの設計やバナー作成、Webデザインの課題に取り組むことで、自身のスキルを高めることができます。
ポートフォリオに資格の記載は必要？
ポートフォリオに資格の記載は必ずしも必須ではありませんが、あることでクライアントの信頼につなげることができます。
資格はあなたの知識やスキルを証明するものであり、特に初心者にとっては安心材料となります。
ただし、それよりも実際の作品や実績でアピールするほうが案件にはつながりやすいでしょう。
実際の作品や実績を通じて、自分のスキルを具体的に示すことができれば、クライアントに対して強いアピールとなります。
Webデザインの分野では、視覚的な成果物が重要視されるため、資格以上に具体的な成果物が求められることが多いです。
例えば、完成したWebサイトやデザインプロジェクトをポートフォリオに掲載することで、自分の能力を直接的に示すことができます。
一方、WebデザインやITに関する資格は初心者でも習得しやすいものも多くあります。
資格を取得することで、基礎的な知識やスキルを身につけることができ、自信を持ってクライアントにアピールできます。
不安な方は、以下の記事を参考にしてみてください。
資格はポートフォリオを補完する要素として有効ですが、実際の作品や実績を充実させることが最も重要です。
資格と実績の両方をバランスよく活用し、クライアントに対して自分の強みを最大限にアピールしましょう。
紙のポートフォリオって必要？
最近では面接がオンラインで行われることがほとんどであるため、webポートフォリオだけで十分です。
しかし、紙のポートフォリオが必要と言われた場合には、webポートフォリオのPDFを印刷して対応しましょう。
ポートフォリオの作品数はどれくらいがいい？
ポートフォリオに載せる作品数は、少なくとも10個、目安として20個程度が理想です。
クライアントに多様なスキルや経験をアピールするためには、一定数の作品が必要です。
具体的にどのような作品を載せるべきかについては、以下の記事を参考にしてください。
ポートフォリオに著作権は関係ある？
案件や前職で作った作品の著作権は、自分に属していない場合があります。
個人でポートフォリオに利用する場合にはほとんど問題はありませんが、著作権を気にする場合は自主制作の作品を利用しましょう。
著作権に関して詳しく知りたい方は、以下の記事を読んでみてください。
この記事を書いた人
関連記事
-
絵が下手なWEBデザイナーに聞いた、絵心やセンスがなくてもデザイナーでいれる理由 -
【口コミ調査】デジハクの評判は？向いている人と向いていない人も紹介
-
【口コミ調査】ぬるま湯デザイン塾は怪しい？評判や費用を解説します！
-
【レビュー】フェリカテクニカルアカデミー評判が好印象！向いている人や他スクールとも比較します
-
WEBデザイナーは底辺ではない！現役デザイナーが考える底辺と言われる理由と実態
-
【モデルケース】WEBCOACHのカリキュラムを解説！実際の学習スケジュールも紹介
-
【回答例付き】未経験WEBデザイナーの面接で聞かれる質問20選｜キャリアプランや服装も解説
-
未経験からのWEBデザイン独学本にはこの一冊！忙しい人でも希望の再就職を叶える学習方法も紹介！
