WEBデザイナーのポートフォリオ作品例｜実案件・課題作品の見せ方

WEBデザイナーのポートフォリオには、希望する仕事に近い作品を選び、制作目的や担当範囲、工夫が伝わる説明を添えることが大切です。

私自身、WEBライターの仕事に加えて記事内の画像制作も請け負えるよう、デザインスクールで学びました。

しかし、当時はバナーやWEBサイトの制作経験がスクール課題のみ。知人のSNS画像も無償で制作していたため、有償案件の実績がなく、

「課題や自主制作の作品を載せてもいいの？」
「何を載せれば自分のスキルが伝わるの？」

と悩んだ経験があります。

そこで本記事では、実際の公開作品に加え、日本デザインスクール卒業生のポートフォリオや、こちらのポートフォリオ解説動画を参考に、以下のポイントを解説します。

実際の作品例を参考にしながら、まずは手元の作品を整理し、自分の強みを伝えられるものを選んでみましょう。

WEBデザインのポートフォリオ作品例4選

ポートフォリオでは、完成した作品を見せるだけでなく、どのような目的で、何を考えてデザインしたのかを伝えることが大切です。

ここでは、実際に公開されている4つの作品を、異なる視点から紹介します。

制作目的に合わせたデザインの工夫や担当工程の伝え方を見ると、自分のポートフォリオに何を載せ、どう説明すればよいかを考えるヒントになります。

それぞれの作品例から、取り入れたいポイントを探してみましょう。

バナーの作品例｜制作条件と情報の優先順位を伝える

バナーのポートフォリオでは、完成画像に加え、情報の配置や装飾にどのような意図があるのかを示しましょう。

そうすることで、見た目だけではわからない制作時の判断も読み手に伝わります。

実際に、以下の広告バナーを例として見てみましょう。

こちらは、MooT designに掲載されている、SNSの口コミ投稿のような親しみやすさを意識した広告コンペの応募作品です。

数字を最初に目に入る位置に配置し、読み手の関心を引いたうえで、「土台美容液」という商品名、さらに「炭酸泡の美容液」「6つの肌悩みにアプローチ」という特徴へと視線が向かうように情報を整理しています。

この作品で目を引くのは、美容液の質感を表現した文字のあしらいです。

細かな表現では、「とろ〜り、じゅわ〜」という文字の配置に動きをつけ、白い光沢を描き足して美容液の質感を表現しています。

この作品から学べるのは、「何を一番目立たせ、次に何を読んでもらうか」を決めてから、写真・文字・装飾を配置することです。

こうした細部の工夫も、制作条件と結び付けて紹介することで、依頼に対してどのように考え、形にしたのかを伝える材料になります。

LPの作品例｜行動につなげる構成と修正理由を伝える

LPの作品紹介では、ユーザーにどんな行動を取ってほしいのか、そのために構成をどう工夫したのかを明確にすることが重要です。

こちらは、スクール課題で提供された要件書とワイヤーフレームをもとに、コワーキングスペースのLP（ランディングページ）を自主制作しています。

このLPでは、ファーストビューにアプリのダウンロードボタンを配置しています。

すでに施設に興味がある訪問者なら、ページを最後まで読まなくても、すぐ次の行動に進めるためです。

一方、ページを読み進めてから利用を検討する人に向けては、アプリのダウンロードを強調する専用CTAセクションも追加しています。

施設の魅力を理解した後に、わざわざページの先頭へ戻らなくても行動できる構成です。

さらに、アプリを探す際の目印になるアイコンを自作し、PCでサイトを見ている人がスマホでダウンロードしやすいようQRコードを掲載しています。

閲覧する端末と実際に操作する端末の違いまで考えている点も参考になります。

支給された構成をそのまま使うのではなく、目的に合わせて何を追加・変更したのか。その判断過程まで紹介できると、自分の設計力を示すポートフォリオになります。

採用サイトの作品例｜想定読者とデザインの関係を伝える

採用サイトのポートフォリオで押さえたいのは、想定する応募者に合わせて、配色や書体を選んだ理由を説明することです。

デザインの方向性を決めた根拠がわかると、作品への理解も深まります。

MooT designに掲載されている以下の採用サイトは、要件書をもとに自主制作したスクールの課題作品です。

応募者の人物像を想定し、情報設計からデザイン、実装まで手がけています。

その考え方を具体的に示しているのが、配色や書体の方針をまとめたスタイルガイドです。

この作品では、「やさしさでつつむ。」というコンセプトを、サイト全体の見た目にも反映しています。

具体的には、前向きな印象を持ってもらうために明るいオレンジ色をメインカラーに採用。さらに、働く人や赤ちゃんの成長を連想させる植物の緑色をアクセントとして取り入れています。

色を選んだ理由が、企業のテーマと結び付いているのが特徴です。

また、丸みのあるフォントや曲線的な写真の切り抜き、ドットの装飾で、優しさや親しみやすさを表現しています。

完成作品に加えて、スタイルガイドや装飾の工夫も紹介する。そうすることで、デザインの方針をどのように細部まで落とし込んだのかが見えてきます。

ここで参考にしたいのは、単に「温かみのあるデザインにした」と書くのではなく、「前向きさを伝えるためにオレンジを選び、優しさを表現するために丸みのある書体や装飾を使った」と、意図と表現をセットで説明することです。

実案件の作品例｜依頼に対して担当した工程を伝える

実案件のポートフォリオでは、完成したデザインとともに、自分が担当した工程を明記しましょう。

依頼する側が、どのような業務を任せられるのか判断する材料になります。

UNDERLINEの作品一覧には、ナレーションや声優、司会などで活動する寺田早輪子氏のWEBサイトが掲載されています。

完成サイトでは、人物写真と「声で想いを伝える。」というコピーが、仕事の特徴を端的に伝えています。

さらに、ボイスサンプル・実績・プロフィール・お問い合わせへ移動でき、仕事内容を知ってから依頼を検討する流れになっています。

この事例の特徴は、作品の見た目だけでなく、制作元が企画からデザイン、HTML・CSS、WordPress構築まで一貫して担当したと明記していることです。

ポートフォリオでも「WEBサイトを作りました」で終えず、「ページ構成の検討、デザイン、コーディング、WordPressへの組み込みを担当」と書けば、依頼者は任せられる仕事を具体的に判断できます。

ポートフォリオに載せる作品の選び方

ポートフォリオに載せる作品は、次の3つを基準に選びましょう。

大切なのは、作品数よりも、自分ができることを相手に伝えることです。

まずは手元の作品を3つの基準で整理し、自分の強みや希望する仕事に合った作品を選んでいきましょう。

希望する仕事に近い作品を先に見せる

ポートフォリオは、「どんな仕事を任せてほしいか」が伝わる順番に作品を並べることが大切です。

例えば、バナー制作の仕事に応募するなら、最初にバナー作品を見せた方が、対応できる業務をイメージしてもらいやすくなります。

まずは、目指す仕事に合わせて、どのような作品を優先すればよいのか確認しましょう。

さらに、応募先の業界に合わせて作品を選ぶこともポイントです。

私の場合は、WEBライティングと画像制作を組み合わせた仕事を希望するため、記事内画像やSNS用画像が強みを示す材料になります。

作品をすべて載せるのではなく、応募先が求めるスキルやデザインの方向性に合うものを優先しましょう。

作品数だけで決めず、説明できる強みで絞る

ポートフォリオでは、作品数を増やすことよりも、自分の強みを伝えられる作品を選ぶことが重要です。

例えば、私の場合はWEBライティングとデザインを組み合わせた、次のようなスキルが強みになります。

こうした強みは、画像を何枚も並べるだけでは十分に伝わりません。

作品ごとに担当した内容や工夫を説明し、「どのような仕事に対応できるのか」まで伝えることを意識しましょう。

なお、応募先から掲載数の指定がある場合は、その条件を優先してください。

実案件・課題・共同制作の条件を明記する

作品を紹介するときは、実案件・スクール課題・自主制作などの制作条件と、自分の担当範囲を正確に伝えましょう。

特に気を付けたいのが、実在する企業名を使った課題作品です。

こちらの作品は、企業名がタイトルに入っていますが、紹介文にはスクール課題として自主制作したことが明記されています。

また、共同制作の場合も、自分が担当した部分を区別することが大切です。

例えば、以下のように記載するとわかりやすくなります。

支給された素材やテンプレートを使った場合も、その範囲を明記しておくと、自分の技術や工夫が伝わりやすくなります。

作品の制作意図と改善点を説明する方法

ポートフォリオでは、完成作品だけでなく、制作時に何を考え、どう工夫したのかを伝えることが重要です。

大切なのは、見た目のよさだけでなく、作品に込めた「考え方」を伝えること。

ここからは、実際のポートフォリオを通して、制作意図の伝え方や修正前後の見せ方を具体的に解説します。自分の考えや工夫が伝わる作品紹介に活かしていきましょう。

目的・担当・工夫・制作過程・改善点を文章につなぐ

ポートフォリオの説明文は、「誰に向けて、何を目指し、どんな課題をどう解決したか」の順にまとめましょう。

制作意図を伝える際は、次の5つを意識すると説明しやすくなります。

そのうえで、次のように曖昧な表現を具体的に書き換えると、制作意図がより伝わりやすくなります。

自分の担当範囲も明記し、修正前後の資料があれば、試行錯誤した過程も紹介しましょう。

実際の見せ方として参考になるのが、日本デザインスクールの卒業生かなちゃんのポートフォリオです。

さまざまなテイストのデザインを並べて掲載することで、どのようなデザインにも対応できるというスキルをアピールできます。

バナーの部分では、それぞれ制作目的やデザインの工夫を説明しています。

さらに、スクールの課題で作成した居酒屋のWEBサイトでは制作範囲、整体院のLPでは各セクションの役割まで紹介しています。

加えて、志望する会社の制作物を意識し、紙媒体のリーフレットも自主制作。コンセプトやターゲット、デザインの工夫を具体的に記載しています。

作品とその説明をセットで見せることで、完成までの考え方や自分が発揮できるスキルを伝えられます。

変更前後がある作品は、変更点と理由を対応させる

ポートフォリオに修正前後の資料を載せる場合は、変更した箇所とその理由をセットで説明しましょう。

完成画像だけでは伝わりにくい、制作過程での工夫や判断をアピールできます。

実際に、MooT designに掲載されているコワーキングスペースの自主制作LP（ランディングページ）を例として見てみましょう。

こちらでは、支給されたワイヤーフレームを見直し、6つのセクションを追加しています。

アプリのダウンロードボタンや最新情報、施設の魅力を伝える紹介欄など、利用者の関心や行動を考えて構成を変更していることが「追加セクション」としてわかりやすく説明されていますね。

さらに、施設の雰囲気を伝える紹介欄や、アプリのダウンロードを促すCTAセクションも追加されています。

自分の作品でも、修正前後を比較し、どのような目的で変更したのかを具体的に示すのがポイントです。

なお、改善効果を測定していない場合は成果を断定せず、今後の確認事項として整理しましょう。

卒業生はどのような作品をポートフォリオに使った？

ポートフォリオにどんな作品を載せるか迷ったら、実際の応募で使われた作品を参考にするのもひとつの方法です。

ここでは、日本デザインスクールの卒業生2人のインタビューをもとに、スクールの課題作品や過去の制作物をどのように活用したのか紹介します。

自分の経験や制作した作品と照らし合わせながら、掲載する作品を考えてみましょう。

まみちゃん｜受講中のバナーとホームページを応募に使った

スクールで制作した課題作品も、仕事に応募する際のアピール材料になります。

日本デザインスクール卒業生のまみちゃんは、受講中に制作したバナーやホームページをポートフォリオにまとめ、自己紹介とともに応募先へ提出しました。

作品の大半はスクールの課題で制作したもので、バナーを2点ほど追加して仕上げたそうです。

作品ごとに「ABOUT」として、配色や文字の配置など、デザインの工夫を説明している点も特徴です。

その後、応募先で試しの画像制作を経て採用につながったと話しています。

完成作品だけでなく、工夫した点まで紹介する見せ方は、ぜひ参考にしたいポイントです。

日本デザインスクール卒業生「まみちゃん」のインタビュー記事は、こちらからご確認ください。

あわせて読みたい

1日1~2時間のWEBデザイン副業で月20万達成！4人の子どもを育てながら収入アップに成功した秘訣とは？ こんにちは！日本デザインブログ担当の谷川です。 今回はゼロイチWEBデザインスクール（通称：デザスク）を卒業し、WEBデザイナーとして活躍している「まみちゃん」への…

みなちゃん｜課題作品と前職の制作物を組み合わせた

スクールの課題作品と、実際の仕事で制作した作品を組み合わせる方法もあります。

日本デザインスクール卒業生のみなちゃんは、入門編の課題に加え、前職で携わったWEBサイトやアイコン、SNS関連のデザインをポートフォリオに並べて掲載し、転職活動に活用しました。

実際に仕事で受注した案件も、しっかりとポートフォリオに掲載しています。

みなちゃんは、前職で総務と並行してデザイン業務にも携わっていましたが、ポートフォリオの中心はスクールの課題作品です。

実案件だからと優先するのではなく、自信を持って紹介できる作品を選ぶことも大切です。

まずはスクールの課題や過去の制作物を振り返り、自分の強みを伝えられる作品がないか探してみましょう。

日本デザインスクール卒業生「みなちゃん」のインタビューの全文をまとめた記事は、こちらからご確認いただけます。

あわせて読みたい

【未経験から転職】入門編だけで内定5社！WEBディレクター月給40万円を掴んだ転職活動の全て 「未経験からWEBデザイナーに転職って、本当にできるの？」 不安に思いますよね。実務経験がない、ポートフォリオも自信がない、そもそも採用してもらえるのか…。 でも…

ポートフォリオを公開する前の作品チェック表

ポートフォリオを公開する前に、自分のスキルや強みが伝わる内容になっているか、作品の掲載に問題がないかを確認しましょう。

せっかくよい作品を載せても、担当範囲がわからなかったり、画像が見づらかったりすると、魅力が十分に伝わりません。

以下のチェック表を使って、ひとつずつ確認してみてください。

また、チェックするなかで「掲載できる作品が足りない」と感じる方もいるかもしれません。

私も本業がWEBライターのため、デザイン作品が少ないことに悩みました。

そこで、スクールの課題や自主制作に加え、知人のSNS用画像を無償で引き受けるなどして、掲載できる作品を増やしました。

作品が足りない場合は、希望する仕事に合う作品を新たに制作するのもひとつの方法です。

ただし、知人からの依頼であっても、公開前には掲載許可や素材の利用条件を確認しましょう。

最後は仕事を依頼する側の目線で見直し、自分の強みが伝わるポートフォリオに仕上げてください。

ポートフォリオを仕上げて公開準備を進めよう

掲載する作品を選び、公開前のチェックも終えたら、自分のスキルや強みが応募先に伝わるポートフォリオに仕上げましょう。

完成に向けて、取り組みたいことは次の3つです。

ポートフォリオを作るための具体的な手順は、以下の記事でも解説しています。

あわせて読みたい

WEBデザイナーのポートフォリオの作り方｜内定を獲得した作品例を公開！ WEBデザイナーとして、スキルをアピールすること。それは、多くのチャンスを掴むのに重要なことです。そして、ポートフォリオサイトは、そのアピールにとても役立ちます。

また、作品が足りない方は、日本デザインの卒業制作紹介も参考にしてみてください。

こうした作品を参考に、希望する仕事に近い課題や自主制作に挑戦するのもよいでしょう。

一方、「作品は作れるけれど、完成度に自信がない」という方には、プロから添削を受ける方法もおすすめです。

例えば、先ほどご紹介した卒業生のみなちゃんも、日本デザインスクールの講師による添削を受け、バナーを修正しています。

【Before】みなちゃんのバナー・添削前

【After】みなちゃんのバナー・添削後

この事例では、主に以下の4つのポイントが修正されています。

このように、細かな部分を見直すことで、情報の伝わりやすさやデザイン全体の印象が変わります。

ポートフォリオでも、修正前後の画像を並べ、どこを変更したのかだけでなく、なぜ変更したのか、見え方がどう変わったのかまで説明すると、制作意図や改善の過程が伝わりやすくなります。

自分では気づきにくい改善点も、第三者の意見を取り入れることで見つけられるケースも少なくありません。

日本デザインスクールでは、課題制作と講師による添削を通してデザインを学べます。作品づくりに不安がある方は、学習内容やサポート体制を確認してみてください。

ポートフォリオの作品例に関するよくある質問

最後に、ポートフォリオの準備でよくある5つの質問にお答えします。

提出形式や作品の公開範囲など、応募前に確認しておきたいポイントを押さえておきましょう。