WEBデザイナーのポートフォリオの作り方｜参考サイトも紹介

WEBデザイナーになりたい人が就職・転職活動をおこなうと、多くの場合ポートフォリオの提出を求められます。

しかし初めてポートフォリオを作る場合、具体的な手順や含める必須項目などわからないですよね。

そこで本記事では、WEBデザイナーのポートフォリオ作りで必要なことを詳しくまとめました。

まだポートフォリオがない人でも、本記事で紹介する具体的な手順や役立つサイトを参考にしながら制作が可能です。

ぜひ、スキルや実績を十分にアピールした最高のポートフォリオを制作してください。

自分のデザインに自信が持てない方へ！

「デザインに自信が持てない…」「クライアントからの評価がイマイチ…」そんな悩みを抱えるあなたへ。

デザインスキルをしっかり身につけることで、単に自信を持てるだけでなく、収入やキャリアの可能性も大きく広がります！

私たち日本デザインスクールでは、基礎から応用までを丁寧に学び、即戦力として活躍できるデザイナーを多数輩出しています。実際に、受講中に137万円もの案件を獲得した成功事例も！「スキルを磨くことでこんなにも変わるのか」と驚きの声をいただいています。

以下の記事では、デザインスキルを磨いて自信をつけ、収入を大幅にアップさせた方のストーリーを詳しくご紹介しています。

「自分もこんな風に成長したい！」と思ったら、ぜひチェックしてみてください！

インタビュー記事を読んでみる

ポートフォリオとは作品集のこと

ポートフォリオとは自分で作った作品集のことで、WEBデザイナーの就職・転職活動中に相手先の企業から提出を求められます。

以下は、WEBデザイナーのポートフォリオで使える制作物の例です。

実力主義なWEBデザイン業界では、自分のスキルや実績をアピールできるポートフォリオは重要です。

ポートフォリオの仕上がり次第で採用が左右されるため、闇雲に制作するのではなく含めるべき項目やポイントをおさえて進めましょう。

ポートフォリオはなぜ必要？

WEBデザイナーにとってポートフォリオは、採用担当者やクライアントに自身のスキルや経験を視覚的に伝えるための重要なツールです。ポートフォリオが必要な理由を具体的に見ていきましょう。

理由①自分のスキルや実績を証明するため

WEBデザイナーは、デザインツールやコーディングスキルを駆使して、具体的な成果物を生み出す職種です。履歴書や職務経歴書だけでは、これらのスキルを十分に伝えきれません。

しかし、ポートフォリオに制作実績を載せることで、採用担当者やクライアントに「どのようなデザインを作れるのか」「どの程度のスキルがあるのか」をアピールすることができます。

理由②他者との差別化を図るため

WEBデザイナーの採用では、多くの応募者の中から選ばれる必要があります。ポートフォリオを作り込むことで、自分のデザインスタイルや独自性をアピールでき、他の候補者との差別化を図ることが可能です

たとえば、同じテーマのデザインであっても、使う色やレイアウト、コンセプトの練り方までをポートフォリオで表現することができると、自身の強みを伝えることができるポートフォリオになります。

理由③クライアントとのコミュニケーションを円滑にするため

ポートフォリオは、デザイナーとクライアント、または採用担当者との「共通言語」のようなものです。面接や提案の場では、ポートフォリオを用いて自身のデザインプロセスや成果物を説明することで、相手とのコミュニケーションを円滑に進められます。

たとえば、クライアント側としてもこれから発注する予定のデザインを、あなたの過去の成果物からイメージすることができるようになります。また、具体的な事例を基に話を展開できるため、信頼感を与える効果もあります。

理由④自己分析と成長のためのツールとして

ポートフォリオを作成する過程は、自身のスキルや経験を振り返る良い機会でもあります。どの作品を掲載するか選ぶ中で、得意分野や改善点を明確にでき、今後のスキルアップの指針が見えてきます。

また、公開後に他者の意見を取り入れることで、さらに完成度を高めることも可能です。ポートフォリオはクライアントへのアピールだけでなく、自身の成長の振り返りとして捉えることも重要です。

理由⑤WEB業界でのトレンドに対応するため

WEB業界は、トレンドの変化が早い業界です。最新のデザイン手法や技術を取り入れたポートフォリオを作ることで、自分がそのトレンドを理解し、実践できるデザイナーであることを示せます。

採用担当者やクライアントに「この人は時代に合ったスキルを持っている」と感じてもらえます。

WEBデザイナーのポートフォリオ作り方

ここからは、WEBデザイナーの具体的なポートフォリオの作り方を以下3つの手順で解説します。実務経験がない場合を想定していますが、経験者でも応用できる手順です。

ポートフォリオ用の架空サイトを作るのではなく、過去に制作した作品をポートフォリオサイトに掲載します。弊社が運営するWEBデザインスクールの卒業生は、この手順で制作されたポートフォリオで採用を獲得する人も多いです。

ここではポートフォリオ制作の全体像を把握するために、各手順を簡単に解説します。

ステップ1：ポートフォリオサイトを用意する

まずは過去の作品を掲載するための場所を用意します。無料のポートフォリオサイトが便利です。

制作物をアップロードするだけで完成するfoliio（フォリオ）なら、1分でポートフォリオが作れることを売りにしています。

Adobeが運営するBehanceも、完成品をアップロードするだけで実績が公開できて簡単です。会員登録の手間はほとんどかからず、foliioはGoogleやAppleアカウントも使えるため2〜3分で完了します。

WEBデザイナーの転職・就職活動を始める前の段階で早めに用意しておきましょう。

ステップ2：プロフィールを記載する

ポートフォリオサイトの準備ができたらプロフィールを記載しましょう。プロフィールは作品とともに必ずチェックされ、これまでの経歴や人柄の確認が目的です。

ステップ2で用意したポートフォリオサイトにはプロフィールを記載する専用ページやフォーマットが用意されていることがあります。最高のプロフィール作成に役立ててください。

プロフィールに記載する内容は、ポートフォリオに含める必須項目とポイントの章で詳しく解説しています。

ステップ3：作品と解説を記載する

ポートフォリオ作成の最後に、作品と解説の記載をおこないます。

過去に制作した作品が複数ある場合、自信のある順番に掲載するとよいです。上にある作品ほど目につきやすいため、掲載順を工夫しましょう。

作品解説の記載は、ひとめで概要がわかるように箇条書きが好ましいです。記載すべきことは、次の章で詳しく解説します。

ステップ4：制作物の要点やコンセプトを説明

制作物を掲載する際は、要点やコンセプトを簡潔に説明することが重要です。まず、プロジェクトの目的や背景を簡単に述べましょう。例として「ターゲット層に向けたECサイトデザイン」や「ブランドイメージ刷新のロゴ制作」などが挙げられます。

次に、自分の役割や使用したツールを記載します。特にチームプロジェクトの場合、自分が担当した部分（UI設計、アイコン制作など）を明確にすることで評価されやすくなります。

最後に、成果や工夫したポイントを補足しましょう。「ミニマルデザインで視認性を向上」「コンバージョン率がXX％向上」など、具体的なデータや工夫を記載すると説得力が高まります。

デザインスキルのレベルを上げたい方へ！

「デザインに自信が持てない…」「クライアントからの評価がイマイチ…」そんな悩みを抱えるあなたへ。

デザインスキルをしっかり身につけることで、単に自信を持てるだけでなく、収入やキャリアの可能性も大きく広がります！

私たち日本デザインスクールでは、基礎から応用までを丁寧に学び、即戦力として活躍できるデザイナーを多数輩出しています。実際に、受講中に137万円もの案件を獲得した成功事例も！「スキルを磨くことでこんなにも変わるのか」と驚きの声をいただいています。

以下の記事では、デザインスキルを磨いて自信をつけ、収入を大幅にアップさせた方のストーリーを詳しくご紹介しています。

「自分もこんな風に成長したい！」と思ったら、ぜひチェックしてみてください！

インタビュー記事を読んでみる

ポートフォリオに含める必須項目とポイント

ここからは、ポートフォリオに含める必須項目を解説します。応募先企業に提出する際、制作したWEBページを見せるだけでは不十分です。

自分のスキルや実績をアピールするチャンスなので、以下の必須項目を準備してください。

ひとつずつ詳しく解説します。

【プロフィール】自己PRを含める

ポートフォリオに含めるプロフィールには、自己PRも含めてください。年齢や住所などの個人情報だけでは伝わらない長所や得意なこと、持っているWEBデザインスキルなどをアピールできます。

自己PRを含めたプロフィール

ほかにも、人柄をアピールできるポジティブなエピソードを添えると印象よくまとまります。

最近の採用活動では、SNSやブログでの発信活動にも注目する企業が増えています。自分の人となりをダイレクトにアピールする材料として活用しましょう。

私もWEBライターとして発信しているSNSとブログをポートフォリオとして提示したところ、複数の企業から採用内定を得た経験があります。

また、外部ライターの募集活動をおこなったときは、SNSでの発信の様子を参考にしたことがあり人柄を考慮して採用を決定しました。

もしSNSアカウントがない場合は、今から準備しておくことをおすすめします。

【作品紹介】ターゲットや使用ツールなどをまとめる

作品紹介では、制作した架空のWEBページやバナーなどの詳細を掲載しましょう。その際は以下のポイントごとにまとめるとわかりやすいです。

特にコンセプトやこだわりは、他の候補者との差別化になるため必ずアピールしましょう。ただし長々と解説する必要はなく、見えやすいことを重視し短くまとめることが重要です。

マーケティングの知見があれば、コンセプトやこだわりのところに取り入れた施策にまつわることを盛り込みましょう。

【お問い合わせ】お問い合わせフォームを入れ込む

最後にお問い合わせフォームを入れ込みましょう。

ポートフォリオを一般公開してる場合、作品に興味を持って直接依頼が入る場合があるからです。

私が運営している個人ブログにも、商品の紹介依頼やWEBライターの執筆依頼が送られることがあります。

文章で記載するのではなく、お問い合わせフォームを埋め込んでください。

上記はWordPressのフォーム設置機能を使った場合に表示される、お問い合わせページです。プラグインという拡張機能を入れるだけで、WEBデザインの知識がなくても簡単に作れます。

名前と問い合わせ内容を入力するだけなので、ユーザーが使いやすくとても便利です。お問い合わせフォームの設置は、ユーザーファーストな姿勢をアピールできる材料にもなります。

WEBデザイナーのポートフォリオ例

ここでは、具体的なイメージを膨らませるためにWEBデザイナーのポートフォリオ例が見れる8サイトを紹介します。

各サイトでテイストやページのレイアウトが異なり、自分好みのテイストや就職したい企業に合わせてシュミレーションすることも有効です。

優秀なWEBデザイナーの作品からインスピレーションを得て、ポートフォリオ制作時のヒントとして役立ててください。

UNDERLINE

UNDERLINEは、10年以上フリーランスWEBデザイナーとして活躍される徳田優一さんのポートフォリオサイトです。

トップページには、徳田さんがデザインを手がけた各WEBサイトのトップページがグリッドレイアウトで並んでいます。

徳田さんの顔写真が掲載されたヘッダー画像と、日常を切り取ったブログ記事が挿入されている点が特徴的です。

S5Studio

S5Studioは、アートディレクター田渕将吾さんのポートフォリオサイトです。ひと目見てわかるデザイン性の高さが特徴的で、アーティスティックな印象を持ちます。

すべてのページにアニメーションがほどこされていて、画像やテキストにまで異なる動きを乗せていることが特徴的です。

個性的な世界観の演出をアピールしたい人はぜひ参考にしてください。

KATOSHUN.com

WEBデザイナーの加藤俊司さんのポートフォリオサイトKATOSHUN.comでは、1ページをスクロールするだけで作品ポートフォリオとプロフィール、お問い合わせフォームをまとめて閲覧できます。

画面中心の画像は、スクロールの動きに合わせてアニメーションが設定されています。

見やすいポートフォリオのサイト設計と、効果的なアニメーションが融合された美しいデザインです。

NAOKI FUKUSHIMA

WEBデザイナーのフクシマナオキさんのポートフォリオサイトNAOKI FUKUSHIMAは、白を基調とした洗練されたデザインが印象的です。

各ポートフォリオの詳細ページでは最低費用の記載と制作した全ページが掲載されており、クライアント目線に立った構成になっています。

Gokagn（ゴカン）

元フリーランスWEBデザイナー兼カメラマンのTakaaki Satoさんが立ち上げた株式会社Gokagnのポートフォリオサイトです。黒をベースにしたシックな雰囲気ですが、ところどころ遊び心のあるアニメーションがほどこされ見るひとを飽きさせません。

ポートフォリオの一覧ページでは、それぞれのパソコンとスマートフォンでの表示をひと目でわかるように掲載されており、作品の魅せ方が非常に参考になります。

Takaaki Satoさんがフリーランス時代に制作したポートフォリオは、TAKAAKI SATOにも掲載中です。Gokagnとはひと味異なる雰囲気をぜひ確認してください。

平尾 誠

WEBデザインを軸にマーケティングやコンサルティング事業を提供する株式会社アルテガの代表平尾 誠さんのポートフォリオサイトです。トップページの動きが特徴的で、下ではなく左右にスワイプします。

ファーストビューの画面中心に大きくあらわれる「コードはデザインである」という文字列では、平尾誠さんのデザインポリシーが強調され、直後にポートフォリオが流れる仕組みです。いちどみたら忘れない大胆なデザインを体感してください。

maima.me

maima.meは、WEB・アートディレクター、デザイナーのMAI MAKITAさんのポートフォリオサイトです。

ポートフォリオ作品を中心に掲載し、プロフィールやその他の情報は極限までシンプルにまとめられています。

作品数が少ない場合は難しいレイアウトですが、将来的に作品を中心に魅せるポートフォリオサイトを作りたい場合はぜひ参考にしてください。

Mana

WEBデザイナーのManaさんは、業界では有名なブログWEBクリエイターボックスも運営しています。

ポートフォリオサイトは、Manaさんの好きなことや海外に住んでいた経験も紹介され親しみやすい雰囲気です。Manaさんのように、パーソナルな部分も含めたポートフォリオサイト制作をおこなうなら一度は見ておきたいです。

また、英語のページも用意されており、グローバルに活躍したい場合はぜひ参考にしてください。

WEBデザイナーがポートフォリオ制作で＋αやるべきこと

WEBデザイナー未経験者がポートフォリオ制作で、+αでやるべきことをまとめました。

WEBデザイナーのポートフォリオは改善を繰り返すことや、実際の面接対策をおこなうことが重要です。

特にはじめてのポートフォリオ制作の場合、、自己判断では不十分なケースが多くプロからのアドバイスを積極的に取り入れましょう。

ポートフォリオの提出後も改善を繰り返す

ポートフォリオを制作している際は完璧に思えても、しばらく時間が経つと改善点が見えます。

随時更新をしているポートフォリオは積極的な改善姿勢を示せるため、好印象を与えられます。ますます魅力的なポートフォリオに仕上げるつもりで改善を繰り返しましょう。

制作したポートフォリオをプロに添削してもらう

経験が浅い、もしくは実務経験がないWEBデザイナーでは気付かない問題点を、プロから添削してもらうことも有効です。

設定したターゲットに対して適切にアプローチできる作品か、理想とする形になっているかをプロ目線でアドバイスをもらいましょう。

具体的な修正点や改善点を把握できれば、ポートフォリオに反映できます。ポートフォリオには正解がないため、都度改善し競争力をあげることが大切です。

面接対策にプレゼンテーションの練習をする

制作したポートフォリオの魅力を十分に引き出す、プレゼンテーション力も磨きましょう。見ただけではわからない作品の詳細を、具体的にわかりやすく説明します。

以下の流れで話すとわかりやすいです。

実務上もWEBデザイナーはデザインだけではなく、クライアントに納得してもらうために制作の目的やこだわりを説明する場合があります。

今のうちからプレゼンテーション力を磨いて実務にも備えておきましょう。

WEBデザイナーのポートフォリオ制作に役立つサイト9選

WEBデザイナー初心者でも簡単にポートフォリオ作りができる制作サイトを9選紹介します。

各サイトの特徴を比較表で確認し、自分に合ったサイトを見つけてください。

ポートフォリオ制作サイト

※€1=161.70円（2024年10月3日時点）

WordPress

WordPressはCMSといい、プログラミング知識がなくても簡単にWEBサイトが作れます。

プラグインという拡張機能をインストールすれば、ユーザーフレンドリーかつ見た目の整ったWEBサイト制作が可能です。

WordPressには、テーマという外観をデザインするツールを入れられます。無料のものもあれば15,000円ほどのものもあり、ランニングコストは使用するテーマ次第です。

しかしテーマは買い切り型のものが多く、翌年以降は毎月2,000円程度でWEBサイトを持てます。

Portfoliobox

Portfolioboxは、100万件以上のWEBサイト制作実績があるWEB制作ツールです。月額1,114円と最もリーズナブルなプランでも画像は40枚まで使用可能で、8ページまで制作できます。

ポートフォリオを用意したいけど、なるべく料金をおさえて制作したい人におすすめです。ドメインは追加料金なしで無料で使えます。

Portfolioboxを使って制作されたWEBサイトが公開されているので、雰囲気やテイストが自分に合うか確認してみましょう。

Ameba Owned

Ameba Ownedは、アメーバブログを展開するサイバーエージェントが運営しています。

オリジナルのホームページやブログ、メディアが簡単に作れるようデザインテンプレートも豊富です。

InstagramやXとの連携ができるため、複数のSNSがひとつのサイトに表示できます。

Wix

Wixのデザインテンプレートは900種類以上と多く、手軽におしゃれで見た目のきれいなWEBサイトが作れます。

テンプレートはすべて無料ですが、テンプレートを使わないWEBサイト制作もできます。

専用モバイルアプリを使えば、手元でWEBサイトの確認ができて便利です。

STUDIO

STUDIOを使えば、コーディング知識がなくてもドラッグ&ドロップなどの簡単操作でWEBサイトを制作できます。

利用者数は50万人以上、公開中のWEBサイトは10万以上で実績もあります。

大手企業のECサイトや教育機関のWEBサイトなどで導入事例があり、日本有数の企業からも信頼があついです。

Jimdo

Jimdoにはカスタマイズ可能なテンプレートが約40種類あり、追加料金不要で利用できます。

Google Analyticsと統合しているため、SEO対策がしやすい点もメリットです。

専門知識がなくてもドラッグ&ドロップの簡単な操作で、見た目が美しいWEBサイトが作れます。

BRIK PORTFOLIO

BRIK PORTFOLIOはすべてのサービスが無料です。ユーザビリティの高いテンプレートが用意されており、簡単に洗練されたWEBページを作れます。

クリエイター向けの非公開求人を多数扱っており、プロのカウンセラーへ転職や就職相談が可能です。

登録したポートフォリオを見て企業からスカウトが届くこともあります。

Adobe Portfolio

IllustratorやPhotoshopなどのAdobe有料プランに加入しているなら、サービスの一部としてAdobePortfolioを利用できます。最安値のプランなら月額1,080円です。

高品質なフォントを提供するAdobe Fontsも利用できるため、より完成度の高いWEBページを制作できます。

世界中のWEBデザイナーが制作したポートフォリオ例が掲載されているので、自分の作品をイメージしやすいです。

Salon.io

※€1=161.70円（2024年10月3日時点）

Salon.ioは、無料プランでも3ページまでポートフォリオの作成が可能です。

できるだけ費用をおさえてポートフォリオの作成を体感したいなら、Salon.ioの無料プランをおすすめします。

無料プランでも広告表示がされないので、シンプルで利便性が高いWEBページのデザインが可能です。

WEBデザイナーのポートフォリオよくある質問

WEBデザイナーのポートフォリオ制作でよくある質問を6つまとめました。

実際のポートフォリオ制作に役立つ情報なので、ぜひ参考にしてください。

WEBデザイナーとして実務未経験の場合はどうしたらいい？

実務未経験でも、架空のプロジェクトを制作してスキルをアピールすることが重要です。たとえば、想定クライアントのWebサイトデザインやロゴリデザインを作成し、自分のデザイン力を示しましょう。また、スキル習得の過程や使用ツールをポートフォリオに記載することで、成長意欲をアピールできます。

さらに、友人や知人からの簡単なデザイン依頼を受けることで、小規模でも実績を積むのも有効です。未経験の段階では、作品を通じて学ぶ姿勢やポテンシャルを伝えることがポイントです。

ポートフォリオ制作に必要なツールやスキルは？

ポートフォリオ制作に必要なスキルは、以下の4点です。

まずはWEBデザイナーになるための基本的な知識とスキルをおさえて、早めに実践力を磨いてください。

実践力を磨きつつ、ポートフォリオ制作に着手すればスキルをブラッシュアップしながら進められます。

WEBデザイナーになるたの必須スキルは、以下の記事で詳細を確認してください。

あわせて読みたい

WEBデザイナーに必要なスキルを徹底解説！学ぶ方法も紹介 WEBデザイナーになるうえで必要なスキルがわからないという方も多いはず。そこで、今回はWEBデザイナーになるために必要なスキルをご紹介していきます。

紙のポートフォリオは必要？

紙のポートフォリオは、対面の面接や商談で有効なツールです。特にロゴデザインや印刷物の場合、質感や色味を直接伝えられる点が魅力です。

ただし、頻繁に更新しにくく、印刷コストがかかるため、オンラインポートフォリオをメインに活用しつつ、紙のポートフォリオは補助的に準備するのがおすすめです。状況に応じて使い分けることで、より効果的にアピールできます。

ポートフォリオとして提出する作品数は何個がいい？

ポートフォリオとして提出する作品数は、ひとつでも大丈夫です。

数が多いだけで一つひとつのクオリティが低いポートフォリオを提出するより、ベストな作品をひとつ提出するほうが好印象を持たれます。

面接官が見ているのは、多くの作品を作れるかではなく質の高い作品を作れるかです。

少々時間がかかっても、最高のひとつを制作することをおすすめします。

ポートフォリオの形式でおすすめなのは？

基本的にWEBデザイナーのポートフォリオ形式はWEBサイトかPDF型の2つです。

参考のためにそれぞれの特徴を載せておきます。

WEBサイト型とPDF型のポートフォリオ

採用の判断にコーディングスキルが必要な企業からは、WEBサイト型のポートフォリオの提出を求められます。そのような企業へ就職を希望する場合は、WEBサイト型のポートフォリオを用意しましょう。

ちなみに当社に応募されたポートフォリオの形式はWEBサイトやPDF以外に、InstagramやPinterestなどの画像投稿SNSを活用する人もいます。

また、紙のポートフォリオも準備しておくと安心です。対面での面接の場合、インターネット環境の不具合などの突発的なトラブルにも対応できます。

チラシや広告などの紙媒体の制作スキルもアピールできて一石二鳥です。

ポートフォリオ制作期間の目安は？

ポートフォリオの制作期間は、人にもよりますが1〜2ヵ月を目安にしましょう。

ポートフォリオ制作専用のコースを用意しているWEBデザインスクールもあり、期間は1〜3ヵ月のところが多いです。

転職を考えている場合は、WEBデザインの基礎スキルを身につけながら早めにポートフォリオ制作の準備をしてください。

まとめ

本記事では、WEBデザイナー初心者がポートフォリオを制作するために必要なことを紹介しました。

ポートフォリオを作るには、基本的なWEBデザインの知識やツールの操作スキルがあれば十分です。

制作後も知識とスキルのブラッシュアップを怠らずポートフォリオに随時反映し、より魅力的な作品に仕上げましょう。

本記事で紹介したポートフォリオ例と制作に役立つサイトを参考に、最高の作品を制作し転職・就職活動に役立ててください。