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

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

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

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

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

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

WEBデザイナーになりたい！
そんなあなたへ

未経験からWEBデザインを学び、制作会社へ転職や副業で成功し収入を2倍にした田中さん。30代からスキルを磨き、卒業後1ヶ月で夢を実現しました。新しいキャリアを求めるあなたへ、成功の秘訣を詳しく紹介します！

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

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

ポートフォリオとは、自分で制作したデザイン作品をまとめた「作品集」のことです。

WEBデザイナーとしての就職・転職活動をおこなう際、多くの企業やクライアントからポートフォリオの提出が求められます。

以下は、WEBデザイナーのポートフォリオに掲載される代表的な制作物の一例です。

他にも、スマートフォン向けのUI設計や、SNS用画像など、実際の業務に近いアウトプットが含まれることが多くなっています。ポートフォリオは、単にスキルを「見せる」だけでなく、どのような意図でデザインしたか、どう工夫したかまでを伝える重要なツールです。

デザインの質はもちろん、「思考プロセス」や「ターゲットへの配慮」なども評価されます。実力主義なWEBデザイン業界では、自分のスキルや実績を正しく伝えられるポートフォリオが合否を左右するといっても過言ではありません。

闇雲に制作を始めるのではなく、含めるべき項目や意図的な構成をおさえて、戦略的に作ることが大切です。

WEBデザイナーにポートフォリオが必要な5つの理由

WEBデザイナーとして仕事をしたいと思ったとき、「ポートフォリオってやっぱり必要なのかな？」と迷う方も多いはずです。

特に未経験から挑戦する場合は、何をどこまで用意すればいいのか不安になりますよね。

本章では、WEBデザイナーにとってポートフォリオが求められる5つの理由を解説します。

ポートフォリオは、作品を見せるためだけの資料ではありません。

なぜポートフォリオが重要なのかが分かれば、これからの準備にも自信を持って取り組めるようになりますよ。

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

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

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

例えば、FigmaやPhotoshopなどのツールを使用して作ったバナーやWEBサイトを掲載すれば、自分の表現力や操作スキルを視覚的に証明できます。

特に未経験者にとっては、「本当に作れるのか？」という相手の不安を払拭する有効な手段になります。

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

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

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

また、自分の価値観や制作スタンスを盛り込むことで、「この人にお願いしたい」と思ってもらえる確率が上がります。

他と違う“らしさ”を明確に打ち出せることが、採用における重要な武器になります。

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

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

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

加えて、制作の意図やターゲット層の考慮点を丁寧に記載しておくことで、「思考力のあるデザイナー」として高評価を得られる可能性も高まります。

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

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

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

「なぜこの配色にしたのか」「どのような課題に対してこの構成にしたのか」と自問できると、自分自身の思考のクセや強みを可視化するきっかけになります。結果として、自己理解が深まり、自信を持ってデザインに向き合えるようにもなります。

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

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

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

例えば、レスポンシブ対応やダークモード、アニメーションを取り入れたUI設計など、現在の業界標準に沿った表現を盛り込むことで、最新トレンドへの理解と対応力を示すことができます。

こうした要素は、実務を意識した視点を持っていることの証明にもなり、即戦力としての期待感を高める効果があります。

ポートフォリオに含めるべき要素と注意点

ポートフォリオを作るときに「何を載せたらいいのか分からない……」と悩む方はとても多いです。

本章では、WEBデザイナーとしての魅力がしっかり伝わるように、必ず入れておきたい項目と、それぞれの注意点を解説していきます。紹介する要素は以下の5つです。

これらを押さえておくことで、ポートフォリオが“ただの作品集”ではなく、「仕事につながる営業ツール」として機能するようになりますよ。

要素1：プロフィール｜人柄と熱意を伝える

プロフィールは、ただの経歴紹介ではありません。あなたの「人となり」や「熱意」が伝わることで、面接前から印象づけられるとても重要なパートです。

プロフィールに記載しておきたい主な情報は以下のとおりです。

中でも、自己PR欄はかなり大切です。単なるスキルの羅列ではなく、どういった姿勢で仕事に向き合ってきたか、これからどのようなデザイナーを目指したいかといった「ストーリー性」を含めて書くことで、読み手の心に残りやすくなります。

最近ではSNSやブログの発信内容までチェックされることも多く、実際にSNSを見て人柄を評価し、採用を決めた企業の話もあります。

あわせて読みたい

【例文付き】WEBデザイナーの自己PRの書き方を徹底解説 WEBデザイナーの転職活動で必須の自己PR。 「どのような内容を書けばいいのかわからない」「デザイン未経験でアピールできることがない」 と手が動かずに悩んでいる方も…

要素2：習得スキル｜できることを具体的に示す

ポートフォリオに載せるスキル情報は、「何となくできること」ではなく、具体的な内容で書くのがコツです。

例えば、「Photoshop使用可」ではなく、「Photoshopを使ってSNS用バナーやチラシを制作」と記載することで、スキルの使いどころがイメージしやすくなります。以下のような項目を、箇条書きなどで整理しておくと読みやすく、説得力がアップします。

未経験でも、「課題でこういうスキルを使った」「架空案件でこういう目的に使った」など、実際の使用経験に結びつけて記載すると、信頼度がぐっと上がります。

要素3：作品紹介｜思考プロセスとセットで魅せる

ポートフォリオで一番の主役になるのが「作品」です。でも、ただ画像を並べるだけでは、相手には響きません。

重要なのは、制作した背景・目的・ターゲット・意図といった「思考の流れ」までしっかり言語化することです。以下のような内容を1作品ごとにまとめると、見やすく分かりやすい構成になります。

このような情報をセットで載せることで、「ただ作れる」だけでなく、「目的を理解して提案できるデザイナー」として評価されやすくなります。

特に未経験者こそ、1つ1つの作品に込めた背景や学びを丁寧に伝えることが差別化のカギになりますよ。

要素4：使用ツール・制作環境｜再現性を伝える

「どのようなツールを使って、どうやって制作したか？」は、採用担当者が非常に注目しているポイントです。

作品ページに掲載する際は、以下のような情報を簡潔に明記しておきましょう。

なぜこれらが大事かというと、「再現性の高さ」が伝わるからです。

例えば、クライアントが「Figmaを使える人が欲しい」と思っていた場合、ツールが一致するだけで安心感につながることがあります。

同じ制作物でも、使った道具やプロセスがしっかり記されていると、プロジェクトにそのまま加わってもらえるイメージが湧きやすくなるんです。

要素5：お問い合わせ・稼働条件｜仕事の依頼窓口を整える

ポートフォリオは「見てもらって終わり」ではありません。

見た相手に「この人に仕事をお願いしてみよう」と思ってもらってこそ、価値があります。

そのためには、お問い合わせフォームや連絡先を、わかりやすく・使いやすい形で掲載しておくことがとても大切です。おすすめは、以下のような情報を記載・整備しておくことです。

メールアドレスをただ書くだけでなく、専用フォームを設置することで「丁寧な姿勢」が伝わり、依頼のハードルも下げることができます。

また、制作実績と合わせて稼働条件が明記されていると、クライアント側も具体的な相談をしやすくなりますよ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ポートフォリオ制作で押さえておきたいテクニック

本章では、WEBデザイナーがポートフォリオを制作する際に意識しておきたいテクニックを解説します。「なんとなく並べただけ」「とりあえず作った」では、せっかくのスキルや思いが伝わりません。

ポートフォリオは“ただ見せる”のではなく、“伝わるように設計する”ことで、その価値が格段に高まります。具体的には、以下6つのポイントを押さえることで、完成度の高いポートフォリオに仕上がります。

これらのポイントを実践すれば、採用担当者やクライアントに「この人と一緒に働きたい」と思ってもらえるような説得力のあるポートフォリオになりますよ。

テクニック1：一貫したコンセプトで世界観を統一する

ポートフォリオ全体に一貫したコンセプトを持たせることで、あなたの世界観やブランディング力が伝わります。例えば、色使い、フォント、デザインテイストを統一すると「この人は細部まで意識している」と印象づけることができます。

また、掲載する作品のジャンルやターゲット層に一貫性を持たせることも効果的です。

美容サロンやカフェのデザインを得意としているなら、女性向けのやわらかい色合いや洗練されたレイアウトを意識すると、見る人に「このジャンルに強そう」と印象づけることができます。

さらに、プレゼンテーションの視点を持つことも重要です。面接では「どのようなターゲットに向けて、どのような目的で制作したのか」「どのようなこだわりがあるのか」を一貫したストーリーで伝える力が求められます。

このような姿勢は、実務でもクライアントとのコミュニケーションで非常に役立ちますよ。

テクニック2：作品の掲載順・配置で印象をコントロールする

ポートフォリオに作品を掲載する際は、「見せ方」も実力のうちです。最も自信のある作品を最初に配置したり、バナー → LP → Webサイトと難易度や規模順に並べると、相手に「成長や実力の幅」を効果的に伝えられます。

また、画面の上部ほど目に入りやすいため、アピールしたいスキルやジャンルの作品を冒頭に配置するのが基本です。

このとき、作品の数は5〜10点を目安にして、ジャンルが偏らないようバランスをとると、実践力の高さが伝わります。

加えて、各作品に付ける解説も忘れずに。制作の背景や課題、工夫点を記載すると、単なる「画像の羅列」ではない、思考を伴った作品集になります。

テクニック3：アピールポイントは目立つ位置に置く

あなたの「強み」がどこにあるかを、ポートフォリオの中でしっかり主張することが大切です。例えば、アニメーションが得意なら、その動きがわかるデモリンクを上位に配置。

マーケティングが強みなら、ユーザー導線やCTA設計の工夫点を強調しましょう。ポートフォリオ全体の構成も「見せたい順」で組み立てると、強みが自然と目に入るようになります。

自分にとって当たり前のスキルも、他の人から見れば魅力的なアピールポイントになることが多いです。また、プロフィールや作品の紹介文にも“自分の得意分野”がひと目でわかるように書くと効果的です。

実際の選考現場では、書類に目を通す時間はごくわずか。第一印象で「この人、いいかも」と思わせるためにも、アピールポイントは戦略的に配置しましょう。

テクニック4：顔写真やプロフィールで信頼感を与える

ポートフォリオに顔写真やプロフィール情報をしっかり掲載することで、「この人に頼んでも大丈夫そう」と相手に安心感を与えることができます。

特にWEB上でやりとりが完結する仕事では、実際に会うことなく採用や発注を判断されるケースも多いため、信頼性のある情報提示が欠かせません。

顔写真は、プロっぽい雰囲気である必要はありませんが、清潔感や誠実さが伝わるものを選びましょう。無理に堅くならなくても、自分らしさを出すことのほうが大切です。

また、プロフィール文には「どのような価値観で仕事に向き合っているのか」や「どういったスタイルで働きたいか」など、仕事観をにじませるひと言があるとより印象的になります。

これに加えて、SNSや個人ブログなどのリンクもあると、普段の活動や学習の様子が伝わり、採用担当者が人物像をイメージしやすくなります。

採用の判断材料は、デザインのクオリティだけではありません。「人となり」が見えることで信頼感が増し、選ばれやすくなるのです。

テクニック5：定期更新で最新スキル・案件を反映し続ける

ポートフォリオは作って終わりではなく、完成後も継続的に手を加えていく“育てるコンテンツ”です。

最初は納得のいく仕上がりだったとしても、時間が経つとスキルや感覚がアップデートされ、「もっと良くできるかも」と思える部分が必ず出てきます。そんなときは、デザインや内容をブラッシュアップしていきましょう。更新ポイントとしては、次のような項目があります。

こういったアップデートを繰り返すことで、「常に改善できる人」という良い印象を持たれます。さらに、プロのデザイナーや知り合いからフィードバックをもらい、それをもとに改善していく姿勢も好印象を残すポイントです。

実務でも、納品後の修正や運用更新の対応は求められます。ポートフォリオを通じて、そうした姿勢やスキルを自然に伝えていきましょう。

テクニック6：フィードバックを求めて改善につなげる

完成したポートフォリオは、自分では「よくできた」と思っていても、他人から見た印象とは異なることがよくあります。特に未経験者の場合、自分の強みや魅力に自分で気付けていないことも少なくありません。

そこで重要なのが、知り合いや先輩WEBデザイナーにポートフォリオを見てもらい、率直なフィードバックを受け取ることです。

プロの視点からアドバイスをもらえば、デザインや構成だけでなく、伝え方の工夫点にも気付けます。また、可能であれば企業の採用担当者や現役ディレクターなど、実際に選考経験のある人に見てもらうとより効果的です。

恥ずかしがらずに、完成前の段階でも積極的にフィードバックをもらう習慣をつけることで、“伝わるポートフォリオ”に仕上がっていきますよ。

未経験からWEBデザイナーに転職した方のポートフォリオ

本章では、未経験からWEBデザイナーに転職に成功した方のポートフォリオ実例を紹介します。

「実務経験がないからポートフォリオに載せる作品がない」と悩んでいる方でも、見せ方や工夫次第で企業に“伝わる”ポートフォリオを作ることは可能です。

今回ご紹介するのは、以下のお2人。

ここからは、そんな2人の具体的な工夫や成果を紹介します。

転職成功事例1：スクールで磨いたスキルを“実践型ポートフォリオ”で証明

未経験からWEBデザイナーを目指し、デザスクの入門編を修了した「みなちゃん」は、たった1ヵ月でデザイン職5社から内定を獲得しました。ポートフォリオに盛り込んだのは、以下のような作品と工夫です。

ポートフォリオだけでなく、職務経歴書の作成にも細部まで気を配っていたのが印象的です。事務職時代の業務についても、「どのような業務を、どのように工夫して行っていたか」を一つひとつ丁寧に書き出し、日々の仕事に真剣に取り組んできた姿勢をアピールしていました。

内容はもちろん、文章の構成にもこだわり、誠実で責任感のある人柄が伝わるよう工夫されていたのが特徴です。

さらに、面接対策にも力を入れており、応募先の企業サイトを事前にしっかり読み込んで、その会社がどのような人物を求めているかを自分なりに分析。

そのうえで、話し方や受け答えのトーン、使う言葉も企業ごとに変えるなど、相手に合わせた準備を徹底して行っていました。「この会社に入りたい」という熱意が、自然と伝わるような受け答えを心がけていたそうです。

転職成功事例2：作品順を変えて“伝わる”ポートフォリオに仕上げた工夫

未経験からWEBデザイナーを目指し、デザスクの入門編を修了した「おりちゃん」は、応募企業に合わせてポートフォリオの順番や見せ方を工夫することで、選考通過率を大幅にアップさせました。

企業ごとの業種や雰囲気を丁寧にリサーチし、「この会社にはこのデザインが刺さるかも」と考えながら、構成や順番を戦略的に変更。

相手目線で最適なポートフォリオを都度調整する姿勢が、高評価につながりました。例えば、次のような工夫を実践していました。

また、ポートフォリオの見た目にも気を配り、「作品集」ではなく“自分を売り込む提案資料”として表紙やレイアウトを調整。

応募先のトーンに合ったデザインに仕上げることで、デザイン力だけでなく事前準備の丁寧さや柔軟な対応力もアピールできました。

こうした工夫の結果、「即戦力として活躍できそう」「しっかり準備ができていて信頼できる」といった高評価を獲得し、実務未経験ながら内定に結びつけたのです。

「自分が何を見せたいか」だけでなく、「相手が何を見たいか」にフォーカスした姿勢が、転職成功のカギとなりました。

あわせて読みたい

4月にスクール受講➔7月にはWEBディレクター！？入門編卒業でもディレクターになれた転職活動の秘訣を詳… 今回のインタビューは転職の成功事例です。転職の成功のインタビューはなかなかさせてもらえないので貴重ですよ！ しかも入門編卒業の時点で転職活動されて、内定を5社…

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

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

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

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

ポートフォリオ例1：UNDERLINE

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

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

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

ポートフォリオ例2：S5Studio

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

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

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

ポートフォリオ例3：KATOSHUN.com

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

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

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

ポートフォリオ例4：NAOKI FUKUSHIMA

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

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

ポートフォリオ例5：Gokagn（ゴカン）

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

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

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

ポートフォリオ例6：平尾 誠

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

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

ポートフォリオ例7：maima.me

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

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

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

ポートフォリオ例8：Mana

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

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

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

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

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

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

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

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

役立つサイト1：WordPress

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

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

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

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

役立つサイト2：Portfoliobox

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

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

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

役立つサイト3：Ameba Owned

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

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

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

役立つサイト4：Wix

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

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

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

役立つサイト5：STUDIO

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

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

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

役立つサイト6：Jimdo

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

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

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

役立つサイト7：BRIK PORTFOLIO

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

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

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

役立つサイト8：Adobe Portfolio

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

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

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

役立つサイト9：Salon.io

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

あわせて読みたい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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