Webデザイナーのポートフォリオの作り方｜未経験から案件につなげる構成と作品例

「Webデザインの学習が進んできた。でも、実績がない自分はポートフォリオに何を載せればいいのだろう……」

そう悩んで、制作物が増えるまで応募を先延ばしにしていませんか？結論から言うと、実務未経験でもWebデザイナーのポートフォリオは作れます。

ただし、練習としての制作物を並べるだけでは不十分です。なぜならクライアントが知りたいのは、見た目の制作物だけではないからです。

• こちらの目的を理解して制作できるか
• どこまで任せられるのか
• 目的の達成に貢献できるのか

このように実際に依頼しても問題がないかを判断できる材料が求められています。

デザインは、見た目を飾るためだけではなく、目的を達成するための手段です。だからこそ、ポートフォリオでは制作物自体よりも、「誰に何を伝えるために、なぜこの表現を選んだのか」が重要になります。

この記事では、未経験Webデザイナーが押さえておきたい次の内容を紹介します。

1. 制作物の言語化
2. ポートフォリオの構成要素
3. 架空の制作物の作り方
4. 公開前の注意点

まずは一つの作品を、クライアントが判断できる形に整えていきましょう。

Webデザイナーのポートフォリオで使える言語化の例

作品説明に必要な6項目

作品を掲載するときは、次の6項目を整理すると、制作意図や対応範囲が伝わりやすくなります。

1. 前提条件：制作物の前提となる条件の詳細
2. 目的：制作物によって何を達成したいのか
3. 想定読者：誰に向けて制作したのか
4. 担当範囲：構成、デザイン、コピー、実装など、どこを担当したのか
5. 判断理由：なぜその構成や表現を選んだのか
6. 改善点：振り返って改善できる点や、次回に生かしたい点

依頼者や採用担当者が、制作の前提とあなたの考え方を判断できる内容にすることが重要です。以下に3つの具体例を記載します。

1. オンライン講座の広告バナーの例

ポートフォリオでの言語化例

目的：無料オンライン説明会への申し込みにつなげることを目的に制作しました。

想定読者：仕事や家事と両立しながら、Webデザインを学びたい30〜40代女性を想定しています。Instagramを短時間で閲覧するユーザーにも、講座の内容が伝わることを重視しました。

担当範囲：掲載情報の整理、コピーの優先順位づけ、バナーデザインを担当しました。

判断理由：「未経験でも参加できること」と「平日夜に開催されること」を最初に確認できる構成にしました。

講座名と参加条件を大きく表示することで、自分が参加できる説明会かどうかを短時間で判断できるようにしています。申し込み期限とCTAは下部にまとめ、講座内容を理解した後に、自然に申し込みへ進める視線の流れを設計しました。

改善点：実際に広告を配信する場合は、キャッチコピーやCTAの表現を複数用意し、クリック率や申し込み率を比較しながら改善します。

2. 化粧品のランディングページの例

ポートフォリオでの言語化例

目的：敏感肌向け保湿美容液の特徴や使用条件を分かりやすく伝え、初回限定セットの購入につなげることを目的に制作しました。

想定読者：肌への刺激や成分に不安があり、化粧品選びに慎重な30〜50代女性を想定しています。
Instagram広告や検索広告から流入し、商品について詳しく知らない状態でページを見るユーザーも対象としました。

担当範囲：ページ全体の構成、ワイヤーフレーム、情報の優先順位づけ、LPデザインを担当しました。

判断理由：敏感肌向け商品では、デザインの華やかさよりも、「自分の肌に使えるか」という不安の解消が購入判断に影響すると考えました。そのため、ファーストビューでは価格だけを強調せず、商品の対象者と特徴を先に提示しています。

その後に、使用感、成分、使い方、返品条件の順で情報を配置し、ユーザーの疑問を一つずつ解消しながら購入へ進める構成にしました。

改善点：実際に公開する場合は、ユーザーが離脱しやすい箇所やCTAのクリック状況を確認し、情報の順序や訴求内容を改善します。

また、成分や使用感に関するユーザーの疑問が多い場合は、FAQや利用者の声を追加することも検討します。

3. ECサイトの商品画像の例

ポートフォリオでの言語化例

目的
コードレス掃除機の特徴を短時間で理解してもらい、購入候補として検討してもらうことを目的に制作しました。

想定読者
育児や家事で忙しく、掃除にかかる時間や負担を減らしたい子育て世帯を想定しています。

楽天市場の商品ページをスマートフォンで閲覧し、複数の商品を比較しているユーザーも対象としました。

担当範囲
商品画像全体の構成、掲載する情報の整理、コピー作成、デザイン、商品画像の加工を担当しました。

判断理由
商品の機能をすべて同じ強さで見せるのではなく、子育て世帯が日常的に感じやすい「掃除機を出すのが面倒」という負担に焦点を絞りました。

1枚目では、軽量で手軽に使える点を中心に訴求し、商品を使用するメリットが直感的に伝わる構成にしています。

改善点
実際の販売ページでは、各画像の閲覧状況や購入者からの質問を確認し、説明が不足している情報を追加します。

また、競合商品との比較で重視されやすい重量や使用時間については、数値だけでなく、使用場面が伝わる表現へ改善することも検討します。

未経験Webデザイナーのポートフォリオに必要な4つの構成要素

1. ファーストビュー

ファーストビューは、ユーザーが最初に目にするセクションです。ユーザーはここで、次のような情報を短時間で確認します。

• 誰に向けたサイトなのか
• どのようなサービスを提供しているのか
• どのようなコンセプトがあるのか

これらを短時間で伝え、続きを読むか、離脱するかの判断を助けます。そのため、魅力的な写真や装飾だけでなく、サービス内容や強み、得られるメリット、次に取ってほしい行動を明確に示す必要があります。

• キャッチコピー
• 補足文
• CTA
• ビジュアルの優先順位

これらを整理し、ユーザーが迷わず内容を理解できる設計にすることが大切です。

2. プロフィールと対応できる仕事

冒頭には、氏名または屋号、希望する仕事、対応できる範囲、使用ツール、連絡方法を簡潔に載せます。対応できる範囲は、次のように具体的に書きましょう。

1. Web画像制作
2. スライド制作
3. LPデザイン
4. HPデザイン
5. Webサイト実装

コーディングを担当していない場合は、「デザインのみ」と明記します。また、未経験の場合は、自主制作と実案件を区別し、自分が担当した範囲を正直に示しておきましょう。

3. 狙う仕事に合う作品

掲載する作品は、多ければよいわけではありません。応募したい仕事や、依頼されたい内容に近い作品を優先します。

× 名刺やイラストだけが並んでいるパターン
バナー案件へ応募するのに、相手はWeb広告の制作を任せられるか判断しづらい
↓
○ 実務を想定して制作していることが伝わるパターン
バナーの目的、サイズ、掲載場所、訴求の優先順位まで説明された作品があれば、制作を任せられるか判断しやすい

最初は、「誰に見せるポートフォリオなのか」を一つに絞りましょう。

4. 問い合わせ導線

作品を見た後、どのように連絡すればよいか分かるようにします。問い合わせフォームや連絡先は、見つけやすい位置に置きましょう。

入力する項目は、最低限でも以下を掲載します。

• お問い合わせ内容
• 氏名
• 連絡先
• お問い合わせ詳細

実績ゼロから掲載作品を作る3ステップ

ステップ1｜狙う仕事を一つ決める

最初に、挑戦したい仕事を一つ選びます。クラウドソーシングや求人情報で実際の募集を見ると、

• 求められるサイズ
• 業種
• 納期
• 使用ツール

などを把握できます。ただし、募集内容をそのまま転載したり、応募用素材を別の目的で使ったりせず、練習用の条件は自分で作り直します。

ステップ2｜架空案件の前提条件を決める

業種、商品、想定読者、目的、掲載場所、サイズ、必須情報を設定します。「カフェのサイト」のようなテーマだけで終わらせず、「誰に何をしてほしいのか」まで決めることが重要です。

掲載時の注意
「架空案件」「自主制作」と明記し、実在企業の依頼で制作したように見ないように注意しましょう。企業ロゴ、商品画像、写真、文章などを使用するときは、それぞれの利用条件を確認します。

ステップ3｜第三者の指摘を受けて改善する

一人で作っていると、時間をかけた部分ほど客観的に見づらくなります。家族や友人、または想定読者に近い人、目的に沿ってデザインを確認できる人へ意見を求めましょう。

• 何の案内かがすぐに理解できましたか？
• 一番先に目に入った情報は何ですか？
• 次に何をすればよいか分かりましたか？
• 読みにくい、迷う、意味が分からない箇所はありますか？

可能であれば、すでに実績のあるWebデザイナーからフィードバックをもらい、改善に生かすとより効果的です。

Webサイト・PDFの選び方と公開前チェック

Webデザイナーのポートフォリオには、Webサイトで公開する方法と、PDFにまとめる方法があります。どちらが正解というわけではなく、提出先と見せ方に合わせて選びます。

Webサイトのメリットとは？
URLで共有しやすく、ブラウザ上での見え方や操作性も確認してもらえます。

公開後は、スマートフォン、タブレット、パソコンなど、異なる画面サイズで表示を確認しましょう。あわせて、主要なブラウザで文字や画像が崩れていないか、リンクが正常に動くかも確認してください。

PDFのメリットとは？
応募フォームでファイル添付を求められる場合や、面談中に決まった順序で見せたい場合に向いています。文字が小さすぎないか、ファイル容量が提出条件を超えていないか、記載したURLが開くかを確認しましょう。

迷ったときは、まず応募先の指定を確認します。指定がなければWeb版を基本にし、必要に応じて要点をまとめたPDFを用意する方法もあります。

公開前には、次の項目を確認します。

1. 冒頭を見て、希望する仕事と対応範囲が分かる
2. 各作品に「目的・想定読者・担当範囲・判断理由・改善点」がある
3. 自主制作と実案件を明確に区別している
4. 共同制作では自分の担当範囲を示している
5. 画像、文章、ロゴなどの利用条件を確認している
6. 受託制作物は契約を確認し、必要な掲載許可を得ている
7. 問い合わせ方法が分かる
8. スマートフォンとパソコンで表示を確認した
9. リンク切れや誤字がない

避けるべきこと
1、架空案件を実績のように見せること
2、担当していない部分まで自分の成果に見せること
3、許可なく受託制作物を載せること

まとめ｜最初の1作品を「判断できる形」にする

Webデザイナーのポートフォリオで大切なのは、作品数や派手さではありません。依頼者や採用担当者が、何を任せられるのか、目的を理解して考えられるのかを判断できることです。

制作物の言語化すべきこと
1、前提条件
2、目的
3、想定読者
4、担当範囲
5、判断理由
6、改善点

自分の作品は、見慣れるほど課題に気づきにくくなります。「なんとなく良い」ではなく、目的に沿って良し悪しを判断できるようになりたい方は、LINE登録後にご案内する5日間チャレンジも活用してください。

参考にした情報源

• 厚生労働省 職業情報提供サイト job tag「Webデザイナー（Web制作会社）」
• Adobe Creative Cloud「ポートフォリオwebサイトの作成方法」
• Adobe Blog「効果的なポートフォリオを構築して洗練させるステップ」
• 文化庁「誰でもできる著作権契約マニュアル」