Webデザイナーとして活躍したいと考えている方のなかには、「デザインスキルのアピールの仕方がわからない」「魅力的なポートフォリオを作るためのコツが知りたい」など、疑問や悩みを抱えている方もいるでしょう。
そのような方に向けて、この記事ではWebデザイナーのポートフォリオの作品例や作り方、魅力的なポートフォリオにするためのコツ、おすすめのツールなどについて解説します。
Webデザイナーを目指すならポートフォリオを作ろう！
ポートフォリオとは、自分のスキルや実績を示すために作成する作品集のことです。Webデザイナーへの就職・転職の際や仕事に応募する際などには提出が必須の場合もあるため、Webデザイナーを目指すなら、まずはポートフォリオを作成しましょう。
未経験でWebデザイナーとしての実績がない場合は、自主制作のWebサイトやバナーなどを掲載する形でも問題ありません。自分のデザインスキルやコーディングスキル、得意分野などがアピールできる内容になるよう工夫しましょう。
載せる作品が少ないときは、以下の記事も参考にしてください。
＞＞ポートフォリオ作品がない未経験者はどうする？6つの解決策を紹介！
SHElikes受講生のポートフォリオ作品例
魅力的なポートフォリオを作成するためには、見本となる作品を参考にしながら自分らしさのアピールを織り交ぜていくことが大切です。ここでは次の5人の女性向けキャリアスクールSHElikes（シーライクス）受講生のポートフォリオ作品例を紹介します。
それぞれのポートフォリオのポイントを解説します。
まゆこさん｜Webデザイナー
まゆこさんのポートフォリオは、トップページに目を引くアニメーションが配置され、名前と顔写真が表示されます。顔写真があると、ポートフォリオの制作者の人物像が明確になり、信頼感の向上や親しみやすい印象を与えることにつながります。
また、お問い合わせから納品までのフローもわかりやすく記載されているため、実際に依頼した場合の流れがイメージしやすく、見る人に安心感を与えられるでしょう。
まゆこさんのポートフォリオはこちら
みやびんさん｜Webデザイナー
みやびんさんのポートフォリオは、トップページに名刺を差し出すイラストが配置されており、見る人に丁寧な印象を与える作り方が特徴的です。また、名刺に名前が大きく記されているため、名前も印象に残りやすいでしょう。全体的にシンプルですっきりとした配置で、対応可能な業務やコンセプト・方針、使用ツールなども見やすく整理されています。
制作実績の項目では、作品をクリックすると「情報設計について」「デザインについて」など、制作過程の詳細やこだわりが具体的に記載されており、思考プロセスもわかりやすく可視化されています。
みやびんさんのポートフォリオはこちら
meguさん｜LPデザイナー・Webデザイナー
meguさんのポートフォリオは、必要な情報が見やすく整理されており、シンプルですっきりとした印象を与えます。作品紹介ページは「Webサイト」「バナー」「フライヤー」「ロゴ」とジャンル別にわかりやすく整理されています。
実案件の実績があまりない状態でも、ジャンルごとに自主制作の作品を複数制作して掲載しているのも特徴的です。ターゲットや目的、デザインのポイントなどの詳細も記載し、思考プロセスをしっかりとアピールしています。
meguさんのポートフォリオはこちら
あかりさん｜Webデザイナー
あかりさんのポートフォリオは、目次が縦書きになっていたり、項目を章立てていたりと、まるで書籍を読んでいるような印象を与えます。Webデザイナーとしてのポリシーや制作への想いが丁寧に綴られており、人柄が伝わりやすいデザインが特徴的です。
プロフィールや自分の強みも具体的に詳しく記載されており、章が進むにつれてあかりさんの人柄が読み手にしっかりと伝わるように工夫されています。
あかりさんのポートフォリオはこちら
あゆみさん｜Webデザイナー
あゆみさんのポートフォリオは、トップページでポップなデザインのロゴを配置し、親しみやすい印象を与えています。制作実績のページは実案件と自主制作の作品を織り交ぜながら、Webサイト、バナー、DTPなどさまざまなジャンルの作品をバランスよく配置しています。
作品をクリックすると、制作過程の詳細が項目ごとに整理されて丁寧にまとめられているのが大きな特徴のひとつです。デザインコンセプトやデザインの工夫を画像を用いて具体的に解説しています。
あゆみさんのポートフォリオはこちら
ポートフォリオの基本構成と作り方
上記の作品例で紹介したとおり、ポートフォリオの形式は基本的に自由ではあるものの、基本構成や作り方に沿って作成していくと、必要な情報を無駄なく配置することができます。ポートフォリオの基本構成は、次の通りです。
それぞれの項目について解説します。
トップページ
ポートフォリオをサイト形式で作成する際は、トップページに肩書きや名前、キャッチコピーなどを配置しましょう。ポートフォリオを見る人にとって第一印象となる大事な要素であるため、デザインだけにこだわるのではなく、自分自身の魅力が伝わるように工夫することが大切です。
「何ができる人なのかがひと目で伝わる配置にする」「Webデザイナーとして大切にしているポリシーが伝わるようにする」など、自分自身の魅力が明確にアピールできるように工夫しましょう。
プロフィール
プロフィールには、名前や生年月日、顔写真やアイコン、経歴などの基本情報を記載します。自分の魅力をアピールするためには、基本情報をただ羅列するのではなく、人柄が伝わるように工夫することが大切です。どのような内容をどう伝えるかによって、Webデザイナーとしてのセンスやスキルをアピールすることにもつながります。
また、自己PRとしてデザインに対する思いやモットー、Webデザイナーとしてのこだわり、人柄が伝わるエピソードなども簡潔にまとめてもよいでしょう。
作品紹介
実際に制作したWebサイトやバナーなどを掲載し、それぞれの作品の要点やコンセプトを簡潔に説明します。制作目的や設定したターゲット、使用したツール、制作期間、こだわった部分など、いくつかの項目に分けてまとめるとわかりやすいでしょう。
画面の上部にある作品ほど目につきやすいため、自信のある作品から掲載するなど順番の工夫も必要です。また、チームで制作した作品の場合はその旨を記載し、自分が担当した範囲を明確に示しておきましょう。
SHElikes受講生のほたてさんは、未経験からWebデザイナーの内定を得た転職活動で、「目的やターゲットなどの説明文が制作物に添えてあったこと」を採用担当者から褒められたそうです。
スキル・対応領域
自身が保有しているスキルや対応領域を具体的に記載します。使用できるツールについては、「Photoshop」「Illustrator」「Figma」など具体的に記載し、それぞれの使用歴やどの程度活用できるかなどについても示しておきましょう。また、HTMLやCSS、レスポンシブ対応など、コーディング・プログラミングスキルについても記載します。
「LP作成」「バナー作成」など制作可能なジャンルや、「ワイヤーフレーム」「構成案の作成」「ヒアリング対応」など対応可能な業務範囲、Webデザイナーの関連資格なども箇条書きなどで整理してまとめると見やすくなります。
実績・プロジェクト詳細
過去に参加したプロジェクトや、コンテストやアワードなどでの受賞歴があれば、具体的に記載します。参加したプロジェクトについては、プロジェクトの内容や自身の役割、具体的な成果、学んだことなどをまとめます。具体的な作業内容や使用したツールなどについても記載するとよいでしょう。
受賞歴がある場合は、参加したコンテストやアワードの名称や参加部門、受賞名、受賞年、受賞した作品やプロジェクト名などを簡潔に記載します。
実績がまだない場合は、実績づくりの場を探すのもひとつの方法です。SHElikesでは、お仕事チャレンジ※1で企業のお仕事に挑戦できます。
※1：一定のスキルが身についた方に、お仕事に挑戦できる機会。
将来のビジョン
Webデザイナーとして目指す将来像と、将来像に近づくためにどのようなスキルを身につけたいか、どのようなキャリアを歩みたいかなどについて記載しましょう。将来のビジョンが明確にあることは、熱意や自己理解の深さをアピールすることにもつながります。
また、目指す方向性を示すことで、入社後・契約後の活躍を具体的にイメージしやすくなり、企業が求める人物像とマッチしているかの判断もしやすくなります。
魅力的なポートフォリオを作る4つのコツ
Webデザイナーとして魅力的なポートフォリオを作成するためには、次の4つの作り方のコツを意識することが大切です。
それぞれのコツについて解説します。
見やすいよう情報を整理する
ポートフォリオを作成する際には、伝えたい情報が相手にわかりやすく伝わるように意識することが重要です。自己満足にならないよう、デザイン性だけでなく見やすさにも十分に配慮して情報の配置を考えましょう。
たとえば、紹介する作品は難易度や規模順に配置したり、自信のあるものから順に配置したりするなど、相手にどのようにアピールしたいのかを考えて整理することが大切です。常に見る側の気持ちを考えながら情報を整理しましょう。
制作過程を伝える
仕上がった作品そのものだけでなく、制作過程の思考プロセスもスキルレベルを測るためには重要な要素のひとつです。制作過程を伝えることで、課題解決能力をはじめ、Webデザイナーとしてのスキルやセンス、そして人柄まで総合的にアピールすることにつながります。
課題に対してどのようなアプローチで解決しようとしたのかを言語化し、制作の意図や工夫した点、成果などを具体的に記載するようにしましょう。
自分らしさや強みをアピールする
ポートフォリオは、作品を紹介するだけでなく、自分らしさや強みをアピールするツールであることを忘れないようにしましょう。ただ作品を羅列するのではなく、ほかの人に負けない自分の強みや個性が伝わるように工夫することが大切です。
自分の強みが伝わる具体的なエピソードや受賞歴などがあれば、必ず記載しましょう。また、自分の個性やこだわりを表現できるような色使いやフォント、レイアウトなどを工夫し、一貫した世界観を表現できるとよいでしょう。
フィードバックをもらい改善を重ねる
ポートフォリオは一度作成したら終わりではなく、定期的に更新し、最新の作品やスキルを追加することが大切です。その際、第三者からフィードバックをもらって改善を重ねることで、より質の高いポートフォリオに仕上がっていきます。
複数人に見てもらい、さまざまな視点からフィードバックをもらうのがおすすめ。できれば先輩Webデザイナーや企業の採用担当者、ディレクターなど、さまざまな立場の人に見てもらって専門的な意見をもらえると、より効果的です。
SHElikesのレギュラープランでは、プロによる課題の添削※2や、デザインの相談を24時間受け付けるチャンネル※3も使えます。
※2：その他提出書類やキャリア面談への参加等の条件がございます。詳しくは体験レッスンにてご確認ください。
※3：デザインTA相談チャンネルの質問投稿は24時間可能です。回答についてはお時間いただく場合もございます。
ポートフォリオ作成におすすめのツール
Webデザイナーのポートフォリオ作成におすすめのツールは、次の4つです。
それぞれのツールについて解説します。
Portfoliobox
Portfolioboxは、クリエイター向けのポートフォリオサイトを簡単に作成できるツールです。テンプレートが豊富に揃っており、コーディング不要で直感的な操作でポートフォリオを作成できます。レスポンシブ対応で、どのデバイスでも見やすいデザインのサイトが作成可能です。
無料プランでも8ページ・40画像まで使用できるため、手軽に始められます。有料プランでは、より多くのストレージ容量や高度な機能が利用可能です。
foriio
foriioはクリエイター向けのポートフォリオ作成ツールで、「1分でつくれるあなたのポートフォリオ」をテーマに、誰でも簡単にポートフォリオが作成できる機能が備わっています。PSDやPDF、AI、TIFFなど多様なファイル形式に対応しており、さまざまな形式の作品を簡単にまとめることが可能です。
基本的な機能が使用できる無料プランに加えて、カスタムドメインや詳しいアクセス解析機能などが使用可能な有料プランもあります。
WordPress
WordPressは、ブログやWebサイトを簡単に作成・管理できるCMSです。カスタマイズ機能が充実しているため、無料版でもポートフォリオの作成が可能です。テーマやプラグインなどの機能を利用してよりクオリティの高いポートフォリオを作成したい場合には、有料版を利用してもよいでしょう。
自社のWebサービスにWordPressを利用する企業も多いため、ポートフォリオを作成すればWordPressでのWebサイトの作り方が身についていることのアピールにもなります。
STUDIO
STUDIOは、コーディング不要でWebサイトを制作できるツールです。テンプレートをもとに、ドラッグ＆ドロップなどの簡単な操作だけで細かい書体やアニメーションにもこだわったポートフォリオが制作できます。
基本機能が使用できる無料プランに加えて、必要な機能に応じて5つの有料プランがあります。
作品の見せ方を工夫して、スカウトや仕事につなげたSHElikes受講生の事例
作品をただ並べるだけでなく、実績の書き方や世界観の伝え方を工夫したことで、声がかかるようになった受講生の例を見ていきましょう。
ここでは、Webデザイナーとして仕事につなげた3人を紹介します。
お仕事チャレンジの実績をまとめ、企業からのスカウトでフリーランスになったSAKIさん
バンドマンから営業事務を経て、フリーランスのWebデザイナーになったSHElikes受講生のSAKIさん。2021年2月に入会し、Photoshop・Illustrator・FigmaなどでWebデザインを学びました。
お仕事チャレンジ※1の実績をポートフォリオにまとめて副業向けの求人サイトに登録すると、1週間ほどで企業からスカウトが届きます。目に留まったのは、大手企業のバナー制作の実績だったそうです。
その後、副業開始から6ヶ月目に長期の仕事が決まり、会社員からフリーランスになりました。
自分のデザインの世界観を言葉にしてポートフォリオを作り、在宅のWebデザイナーになったさおりさん
貿易事務を退職して専業主婦になったあと、在宅のフリーランスWebデザイナーになったSHElikes受講生のさおりさん。2022年2月に入会し、さまざまなコースを受けたうえで、いちばん楽しいと思えたデザインを選びました。
最初は実績不足でなかなか仕事に結びつかず、コミュニティの運営に参加してイベントのバナーや資料のデザインを担当。それをポートフォリオに加えたことで、仕事を受けられるようになりました。
ブランディングコースの学びを生かして、実現したいデザインの世界観も言葉に。その思いに共感したクライアントから、依頼が続くようになったそうです。
フィードバックを受けながらポートフォリオを整え、卒業1ヶ月後に初案件を受注したなべりなさん
インサイドセールスとして働きながら、副業でWebデザイナーとしても活動するSHElikes受講生のなべりなさん。2024年9月にSHElikes PRO デザイナー※4を受講し始め、2025年1月に卒業しました。
入会前は自分の表現に自信が持てず、実案件に進めずにいたそうです。受講中は実践課題の提出を重ね、週1回のもくもく会で講師や仲間からフィードバックを受けました。
卒業から1ヶ月後には、フリーランスのプラットフォーム経由で初案件を受注。コースの卒業生であることや、整えたポートフォリオが信頼につながったそうです。
※4：SHElikes入会後に追加で利用するコースです。受講当時の名称は「SHElikes MULTI CREATOR COURSE Designer」で、2025年5月に現在の名称に変わりました。
魅力的なポートフォリオが作れるようになるSHElikesとは？
女性向けキャリアスクールSHElikesでは、「Webデザインコース」や「Illustratorコース」などWebデザインに関連するコースをはじめ、50以上の職種スキルが定額で学び放題となっています。
Webデザインの基礎だけでなく、ポートフォリオ作成におすすめのツールについても「WordPressコース」や「STUDIOコース」で基本操作を学べます。とくにSTUDIOコースでは、用意されているテンプレートを使ってオリジナルのポートフォリオサイトの作り方も学べるので、魅力的なポートフォリオを作ってWebデザイナーとして活躍したいと思っている方におすすめです。
載せたい作品によって、身につけたいスキルも変わります。作品のジャンル別に、主なコースをまとめました。
| ポートフォリオに載せたい作品 | コース | コースで作れるもの・身につくこと |
|---|---|---|
| Webサイト | Webサイト制作 デザインコース | 要件定義・ワイヤーフレーム・デザインカンプの作成 |
| バナー | Photoshopコース | Photoshopを使ったオリジナルバナーの制作 |
| LP（ランディングページ） | LPデザイン実践コース | Figmaを使い、クライアントの要望のヒアリングからデザインカンプ作成までの流れを体験 |
| ロゴ | ロゴ・CIコース | ロゴ制作のプロセス、イメージを具体的な形にするスキル |
| フライヤーなどの印刷物 | グラフィックデザインコース | Illustratorを使ったグラフィックデザインと印刷入稿 |
ポートフォリオを作成して自分のスキルや強みをアピールしよう
ポートフォリオは、自分のスキルや強みをアピールするためのツールです。自分らしさが伝わるように情報を整理したり、制作過程の詳細を記載したりするなど工夫し、第三者にフィードバックをもらいながらポートフォリオの完成度を高めていきましょう。
魅力的なポートフォリオを作成してWebデザイナーとして活躍したい方には、Webデザインの基礎やポートフォリオの作り方が学べるSHElikesがおすすめです。興味のある方は、ぜひ無料体験レッスンに参加してみてください。
