転職成功した実例も公開！現役Webデザイナーによるポートフォリオの作り方

株式会社ノックデザインでWebデザイナーをしている酒井と申します。
私は2023年8月に入社し、この度勤続1年目を迎えました！
そこで、新人を卒業する節目として、自身のポートフォリオについて振り返りながら、ポートフォリオの作り方についてお話します。

Webデザイナーに転職するにあたって、ポートフォリオ制作は必須となる非常に重要なステップです。しかし、未経験者にとっては何から始めればいいのか分からないことが多いかと思います。実際に私も、最初は何をどの順番で進めるべきか、どうやって自分のスキルや経験を効果的にアピールすればいいのかなど、たくさんの課題に直面しました。

そこで今回は、Webデザイナーへの転職を成功させた私が、ポートフォリオ制作の基本と、他の応募者と差をつけるためのポイントについて、具体的にご紹介します。
※私は未経験からフリーランスとして働いていた期間がありますので、完全未経験者ではありませんでした。その点だけご了承いただきますようお願いいたします。

ポートフォリオ制作の基本

ポートフォリオとは

ポートフォリオとは、クリエイティブ職に応募する際、自分の実績やスキルをアピールするための作品集のことです。企業はこのポートフォリオを見ることで、あなたがどれだけのスキルを持っているかを判断します。そのため、クリエイティブ職への転職活動において、ポートフォリオ制作が採用の鍵を握っていると言っても過言ではありません。

特にWebデザイナーとしての転職を考えている場合、ポートフォリオはあなたのデザインセンス、技術力、そしてクリエイティブな思考を示す最も重要なタッチポイントです。ポートフォリオがしっかりと作り込まれていれば、それだけで採用担当者に強い印象を与えることができます。逆に、ポートフォリオが不十分であれば、どれほど素晴らしい履歴書を持っていても、その価値を伝えることが難しくなります。

また、ポートフォリオに載せる作品は、送る相手によって内容を考える必要があります。なぜなら、相手によって採用したい人物像が異なるからです。例えば、Webデザイナー職に応募するのであれば、実際に制作したWebサイトを載せることはマストです。また、応募する企業が重視しているマインドセットやデザインの傾向を意識して、ポートフォリオの構成やデザインを調整することも重要です。求人に応募する前に、ポートフォリオに載せた作品が相手に刺さりそうかどうかを見直すことが成功の鍵となります。

ポートフォリオに必要な項目

ポートフォリオには様々な項目を含めることができますが、基本的に押さえておきたい内容を紹介します。

今回はWebデザイナーとして企業に就職を目指す方向けにまとめます。

①プロフィール

まずは自己紹介から整理しましょう。
ただし、ここで言うプロフィールとは、自分の好きな食べ物や趣味といった個人的な情報ではなく、就職活動を目的として企業が知りたいと思う情報を中心に載せるのが良いでしょう。

• 顔写真：清潔感があり、この人にデザインを頼みたい！と思わせる印象の写真を選びましょう。

• 名前：フルネームを記載し、振り仮名も付けておくと親切です。

• 職務経歴：これまでの経歴を簡潔にまとめます。特に関連する職務経験があれば詳細に記載しましょう。

• 資格：持っている資格があれば記載します。Webデザイナーに関連する資格があれば強いアピールポイントになります。

• 使用可能ツール：Photoshop、Illustrator、Figmaなど、自分が扱えるデザインツールやプログラミング言語を記載します。5段階評価などで熟練度を示す方法もありますが、客観的に判断しづらいので個人的には載せなくても良いかと思います。作品ごとに使用したツールを記載すると、採用担当者に伝わりやすいと思います。

• 将来像やデザインに対するポリシー：自分が今後どのようなデザイナーになりたいか、デザインに対するこだわりや理念などを記載します。企業が求める人物像に近い内容であると、共感を得やすくなります。

結論として、プロフィール欄では、自分がどんな人物であり、どういったスキルセットを持っているかを簡潔に伝えられると効果的です。また、企業とのマッチングを図るにあたって、将来像やデザインにおけるポリシーを記載することも有効です。これにより、採用担当者にあなたがチームに貢献できることを印象付けることができます。

②作品紹介

ポートフォリオの中でも特に重要な部分がこの作品紹介です。
ここに載せる作品が採用評価に深く関わってくるため、自信作を厳選して掲載することをお勧めします！

• 作品タイトル：作品ごとにタイトルを付け、何の作品であるかを一目でわかるようにします。

• 作品画像：作品のビジュアルが一目でわかる画像を載せます。実際に使用したイメージが伝わるように、モックアップ（PCやスマホなど、実際の画面にデザインを当てはめた画像）で作成するのも効果的です。

• 制作期間：各作品の制作にどのくらいの時間がかかったかを記載します。実際にどれくらいの時間がかかったのか、技術力を図るために採用担当者が知りたい情報のひとつとなります。およその時間でも良いので記載しておくと親切です。

• 作品のURL：公開されているWebサイトであれば、そのURLも記載しておくと、採用担当者が実際にアクセスして確認することができます。

• 作品の概要説明：各作品のコンセプト、制作の背景、どのような課題に取り組んだのかなど、詳細に説明します。特に、自分が担当した範囲や役割を明確にすることで、どの部分にどの程度の貢献をしたのかが伝わりやすくなります。

• 作品のアピールポイント：作品の中で特に見せたいポイントや工夫した点、独自のアイデアなどを具体的に説明します。採用担当者が「この人はどのように考えてデザインを行ったのか」という視点で評価できるため、この部分をしっかりと記載しましょう。

• 使用ツール：その作品制作に使用したツールやソフトウェアを記載します。例えば、Photoshopでどのような意図で加工を行ったのか、Illustratorでどのような背景があって図案を作成したのか、具体的にコンセプトも交えて記載すると良いでしょう。

作品の数は、少なすぎても多すぎても相手にとって良い印象を与えません。少なすぎるとやる気が感じられず、多すぎると見る側に負担をかける可能性があります。一般的には、10作品前後が最適なボリュームです。また、作品数を増やすことにこだわるよりも、各作品の質を高めることに集中する方が効果的です。質の高い作品を選んで、自分の強みをしっかりとアピールしましょう。

さらに、作品について制作意図やこだわりポイントを記載すると、尚好印象を与えられます。例えば、デザインの背景にある依頼内容や、具体的なデザインプロセス、クライアントからのフィードバックをどのように反映させたのかなどを詳しく説明することで、あなたのクリエイティブな思考力が伝わります。

③連絡先やSNS

ポートフォリオには、最低限の連絡先情報を記載しておくことが大切です。特に、メールアドレスは必ず記載し、採用担当者がすぐに連絡を取れるようにしておきましょう。その他にも、自分が運営しているSNSアカウント（例：X、Instagramなど）のリンクを載せておくことも有効です。

SNSアカウントは、あなたの普段の活動や、日頃どのような作品を作っているのか、さらに深く知ってもらうための手段として活用できます。特に、SNSでのアウトプットに力を入れている場合、作品に対する反響なども含めてアピールすることで、好印象を与えるチャンスなので忘れず載せておきましょう！

また、もしポートフォリオがフリーランスの営業目的で作成されている場合は、お問い合わせフォームを設置しておくと便利です。クライアントがすぐに連絡を取れるようにしておくことで、ビジネスチャンスを逃さずに済みます。逆に、就職活動のためのポートフォリオであれば、連絡先の記載に留めてシンプルにまとめても問題ありません。

ポートフォリオ制作の流れ

ポートフォリオサイトも基本的には一般的なWebサイト制作と同じ流れで作成しますが、特に重要なステップを以下にまとめました。

①目的・目標の整理

ポートフォリオサイトを作成する際、一番最初に明確にしておくべきことは「目的」です。何のためにポートフォリオを作るのか、誰に見せるのか、この目的がはっきりしていないと、制作の過程で迷いが生じやすくなります。

例えば、フリーランスとして営業するためのポートフォリオと、求人に応募するためのポートフォリオでは、目指すゴールが大きく異なります。フリーランスの場合、クライアントに対してどのようなサービスを提供できるか、どのような価値を提供できるかを明確に示す必要があります。一方で、就職活動用のポートフォリオでは、企業が求めるスキルセットや、チームの一員としてどのように貢献できるかを強調することが求められます。

このように、目的に応じたゴールを設定することで、ポートフォリオ制作がブレずに進められます。特に、自分の強みや得意分野をどうアピールするかを明確にすることが、効果的なポートフォリオ作りの第一歩となります。

②載せる作品の選定

駆け出しのころは、ポートフォリオに載せられる作品が少ないことで悩む方も多いかと思います。しかし、作品紹介こそがポートフォリオの最重要部分です。ポートフォリオを通じて自分のスキルやセンスをしっかりとアピールするためには、質の高い作品を選定することが必要です。

作品が少ないと感じる場合は、自主制作のプロジェクトや過去の課題作品でも構いません。重要なのは、各作品が自分のスキルやデザイン力をしっかりと伝えているかどうかです。また、ポートフォリオに載せる作品は、クオリティを重視して選びましょう。数にこだわるよりも、見る人に「この人なら信頼できる」と思わせるような作品を厳選することがポイントです。

作品が少ないと感じる場合、空いた時間を活用して新しい作品を作ることも考えましょう。例えば、自分が興味のあるテーマで架空のプロジェクトを作り、それをポートフォリオに加えることで、作品の数と質を同時に高めることができます。

大変ですが、日頃からしっかり自主制作を行うことで乗り越えましょう！

③ワイヤーフレームの作成

ここまで準備して、いよいよ制作に取り掛かります。
ワイヤーフレームとは、サイトの骨格やレイアウトを決定するための設計図のようなものです。これを作ることで、サイトの全体像を把握しやすくなり、完成形をイメージしながら制作を進めることができます。

ワイヤーフレームを作成する際には、以下のポイントを押さえると効果的です。

• 目的に合わせた構成：どの順番で情報を見せると効果的か、ターゲットとなる企業やクライアントの立場に立って考えましょう。

• 見せたいポイントの優先順位：特に強調したい作品や、重要な情報は目立つ場所に配置します。

• ユーザビリティの向上：訪問者が迷わずに情報を得られるよう、シンプルで直感的なナビゲーションを心がけましょう。

④デザインの作成

いよいよメインとなる工程です。
ここが一番楽しいという方も多いのではないでしょうか！

ここでは、視覚的に魅力的で、かつ伝えたい内容をしっかりと伝えるデザインを作り上げることが求められます。

ポートフォリオサイトにおいては実績が主役となるため、主役を引き立たせるシンプルな額縁を作っていくイメージで私は進めました！色使いやフォント選びなど、細部にまでこだわることで、プロフェッショナルな印象を与えることができます。また、デザインのトーンやスタイルに統一感やルールを持たせて調整することで、一貫性のあるポートフォリオを作り上げることができます。

デザインを作成する際には、以下の点を押さえると効果的です。

• 統一感：ポートフォリオ全体に一貫したデザインスタイルを持たせることで、プロフェッショナルな印象を与えます。

• 可読性：テキストのフォントサイズや行間、配色に注意し、情報が読みやすいようにします。

• レスポンシブデザイン：様々なデバイスでの閲覧に対応するため、レスポンシブデザインを取り入れることが重要です。

この段階で多くの時間と労力を費やすことになりますが、ここでの努力が最終的な成果に大きく影響しますので、頑張ってくださいね！

⑤実装

デザインが完成したら、次は実際にサイトを構築する実装の段階に移ります。
コーディングに自信がない方は、ノーコードツールを活用するのも一つの手です。例えば、私は「STUDIO」というサービスを利用して、コーディングの知識が少なくてもレスポンシブも考慮したポートフォリオサイトを作成することができました！

実装時には、以下の点も押さえると効果的です。

• レスポンシブ対応：スマートフォンやタブレットでも快適に閲覧できるように、レスポンシブデザインをしっかりと実装しましょう。

• パフォーマンス最適化：画像を圧縮するなど軽量化し、サイトの読み込み速度を高速に保つことが重要です。

• ブラウザテスト：主要なブラウザで正常に表示されるかどうかを確認し、互換性に問題がないかチェックします。

実装が完了したら、細部を確認しながら最終的な調整を行います。この段階でしっかりとテストを行い、すべての機能が正常に動作することを確認しましょう。

⑥公開

ついにポートフォリオが完成しました！
ここまで作り切るのは正直かなり大変で、時間も労力もかかります。もし完成することができたら、きっと大きな自信につながると思います。今の自分にできる精いっぱいを尽くして、ぜひ最後まで完成させることを目指してみてください！

公開する際には、以下の点も押さえるとさらに効果的です。

• ドメインとホスティング：独自ドメインを取得し、信頼性のあるホスティングサービスを利用することで、プロフェッショナルな印象を強化します。

• SEO対策：検索エンジンでの露出を高めるために、基本的なSEO対策を行いましょう。例えば、メタタグの設定やキーワードの最適化が挙げられます。なお、パスワードをかけて特定の相手にだけ共有する場合などは考慮しなくても問題ありません。

• SNSでの共有：公開後は、SNSやビジネスプラットフォームで積極的にシェアし、自分のポートフォリオを広めてみてください！

公開後は、定期的にポートフォリオを更新し、新しい作品やスキルを追加していくとさらに好印象です。ポートフォリオはあなたの成長を示すツールでもありますので、常に最新の情報を反映させるよう心がけましょう。

差をつけるポイント

知り合いに一度見てもらう

ポートフォリオを完成させたら、企業に応募する前に、可能であれば知り合いに見てもらうことをお勧めします。自分だけだとどうしても視野が狭くなりがちで、見落としや改善点に気づかないことがあります。そのため、客観的なアドバイスをもらいながら、何度も改善を重ねることが重要です。

私も実際に知り合いにフィードバックをお願いし、いただいた意見をもとに細かい部分を何度も修正しました。特に、採用担当者がどのような点に注目するかを意識しながら、ポートフォリオをブラッシュアップしていきました。よりクオリティを上げるために、ぜひお試しください！

ほかの人と被らない内容を心がける

これがなかなか難しいポイントですが、私が制作する際に最も気を付けたことです。
採用担当者は、一日に何十件も応募の連絡を受けます。そのため、他の応募者と似たような構成やデザインのポートフォリオだと、なかなか印象に残りにくいものです。

そこで、あなた自身の個性や経験を最大限に活かした内容を心がけましょう。例えば、他の応募者にはない独自の視点やスキルをアピールしたり、自分が得意とするデザインスタイルやテクニックを強調することで、差別化を図ります。

私の場合、得意なイラストをポートフォリオに取り入れることで、他の応募者とは異なるアプローチを行いました。また、デザインの表現はシンプルでありながらも、見せたいポイントがしっかり伝わるよう工夫しました。結果として、採用担当者に刺さり、無事採用されることができました！

転職を成功させた実例

実際に私が作成したポートフォリオがこちらです。

今振り返ると拙いところもありますが、自分の得意なイラストを使用した個性的なビジュアルに仕上がっていると感じます。また、Webサイトの作成だけではなく、ロゴの作成など細やかなところも注力して作成しました。

最重要となってくる実績については、最も時間をかけたポイントです。
魅力的に感じるサムネイルの追求や、制作背景の概要を文章で細かくまとめ直したり、見ごたえのある内容を目指しました。

名前の由来に着目したブランドコンセプト

今後も継続して使いたくなる愛着のあるコンセプトを打ち出すため、「万梨子」という名前の由来に着目して考えることにしました。幼少期に母が教えてくれた名前の由来が印象深く、「たくさんの実りある子＝数えきれないほどの豊かな成果を収める人に成長してほしい」といった願いが込められているそうでした。この言葉には私自身思い入れもあり、ブランドコンセプトとして選びました。

そのブランドコンセプトから展開させることで、ロゴやキービジュアルが印象的なWebサイトに仕上がったと思います。

遊び心のある演出

ファーストビューではスクロールを促すアニメーションを追加したり、その下のAboutセクションでは梨のイラストがパカッと開くホバーアニメーションも実装しています。

また、使用した矢印アイコンも一般的なものではなく、少し形にこだわってオリジナルで作成していることで、アクセントとして作用するようにしています。

【2026年5月1日追記】
ポートフォリオが古くなって恥ずかしくなったため、URLは閉じさせていただきました！また次回アップデートした際は紹介します。

まとめ

今回は、Webデザイナーへの転職を目指す方に向けて、ポートフォリオ制作の基本と差をつけるポイントについて詳しくご紹介しました。未経験からポートフォリオを作り上げるのは大変ですが、この過程を通じて得られるスキルや経験は、今後のキャリアにおいて大きな財産となるでしょう。

本記事を通じて、少しでもポートフォリオ制作のヒントになれたら幸いです。そして、ぜひこの記事を参考に挑戦してみてください。あなたの転職が成功することを応援しています！

また、弊社では人員拡大を目指して、今後は100名規模の組織にしていきたいと考えています。そこで、Webデザイナーとして一緒に働くメンバーを大募集しています！

弊社の特徴としては、単にビジュアルが良いだけではなく、戦略部分に重きをおいたワークフローで成果に繋がるWebサイトを制作することを重要としています。ヒアリングに加えて、詳細な分析を行い、「いつ」「どこで」「誰に」「何を」「なぜ」「どのように」を明確にし、成果に繋がるWebサイトを目指して制作しています。

新しいことにも楽しみながら挑戦できる柔軟なマインドをお持ちの方だと、社風に合いそうだと個人的に感じます。主体的に行動し裁量をもって働きたい方はぜひ、ノックデザインへのご応募お待ちしております！

▼採用情報はこちら
https://www.wantedly.com/companies/nock_design