Webデザイナー未経験者のポートフォリオ制作例!制作方法やポイントも紹介

Webデザイナー未経験者のポートフォリオ制作例!制作方法やポイントも紹介

未経験からwebデザイナーを目指すなら、ポートフォリオの作成が必要です。ポートフォリオは、実務経験がなくても自分のスキルやデザインセンスを証明できる強力な武器になるからです。

作品の見せ方や作り方を工夫すれば、採用担当者にあなたのデザイナーとしての可能性を伝えることができます。この記事では、実際のポートフォリオ作品例やポートフォリオの作り方のポイントをわかりやすく解説します。

Webデザイナー未経験こそポートフォリオに力をいれよう

未経験でWebデザイナーを目指すなら、ポートフォリオがあなたの強みを伝える大事な手段になります。書類や面接だけではスキルや思考を十分に示せないケースが多いため、実際の作品を提示することが大切です。

得意分野や制作の際の工夫を整理してわかりやすく表現すれば、あなたの強みを明確にアピールできるので、転職や案件獲得の際に役立ちます。「デザインスキルに自身がない」「ポートフォリオを一人で作れるか不安」という方には、女性向けキャリアスクールSHElikes(シーライクス)がおすすめ。

SHElikesは45以上の職種スキルが定額で学び放題。ポートフォリオ作りを学べるコースがあるだけでなく、プロの講師からアドバイスを得られる機会もあります。そのほかSHElikesの魅力については以下の記事でも詳しく紹介しているので、ぜひチェックしてください。

あわせて読みたい
「Webデザイナーになりたい…」だったらSHElikesを使ってみよう!【受講生のポートフォ…SHElikesには、未経験からWebデザイナーとして転職した受講生が多数在籍しています。 プロの講師からフィードバックがもらえる環…

Webデザイナー未経験者のポートフォリオに含めるべき内容

まずは、ポートフォリオに含めるべき内容を紹介します。

それぞれ記載の際のポイントも解説しますので、チェックしてみてください。

プロフィール・自己PR

ポートフォリオには、あなたの人柄や価値観が伝わるプロフィールを必ず記載しましょう。学んできたことや挑戦してきたエピソード、将来どう成長していきたいのかなどを簡潔にまとめるのがおすすめです。

また、自分の強みやデザインへの意欲、Webデザイナーとしての目標を伝えると、前向きな姿勢が伝わります。ポートフォリオは転職活動や営業活動に使用するツールのため、相手に「一緒に働きたい」と思わせる自己PRを意識することが大切です。

あわせて読みたい
ポートフォリオの自己紹介はどう作成する?魅力が伝わるプロフィールの書き方
ポートフォリオの自己紹介はどう作成する?魅力が伝わるプロフィールの書き方就職・転職活動を行う際に、ポートフォリオの提示を求められるケースがあります。ポートフォリオは今までの実績や作品を紹介するものですが、…

自身の作品

自主制作や学習段階で政策した課題作品など、完成度の高い作品を積極的に掲載してください。実務未経験でも、成果物を示すことでスキルを客観的に証明できるからです。

さらに、複数の作品をまとめる場合はジャンル別に整理し、見やすいレイアウトを意識しましょう。これまで学び実践してきたことをポートフォリオで表現し、自信を持ってアピールするのが大切です。

デザインの意図や工夫したポイント

ポートフォリオに掲載する作品には、必ずデザインの意図や工夫した点を明記しましょう。制作の背景を説明することで、論理的に考え課題解決ができるデザイナーであることをアピールできるからです。

たとえば、ターゲット層や利用シーンを想定したUI/UX面での配慮などを具体的に書くと、評価されやすくなります。さらに、自分がデザインを通して届けたい価値観や想いを言語化することで、オリジナリティのあるポートフォリオに仕上がります。

使用可能ツール・スキル

使用できるツールやスキルを詳しく書きましょう。具体的に記載することで、即戦力として働けるイメージを持ってもらいやすくなるからです。PhotoshopやIllustratorの基本スキルはもちろん、HTMLやCSS、CMSの知識があれば具体的に記載します。

ポートフォリオ作成を通して自分のスキルを整理する作業は、自己理解を深めるきっかけにもなるでしょう。

SHElikes受講生のポートフォリオ作品例

未経験からWebデザイナーを目指す方は、ポートフォリオを作成する際、ほかの人の作品を参考にするのがおすすめです。そこで、女性向けキャリアスクールSHElikes受講生のポートフォリオ作品例を紹介します。

各ポートフォリオの参考になるポイントを解説しますので、ぜひ参考にしてください。

まゆこさん|Webデザイナー

まゆこさんのポートフォリオは、世界観に一貫性があるのが魅力。配色やフォント選び、余白の使い方、動きにまで統一感があり、見た人に洗練された印象を与えています。

作品集である「works」を閲覧すると、WebサイトやLPの制作、バナー、紙媒体の作品まで幅広い実績があることが一目でわかります。

まゆこさんのポートフォリオはこちら

みやびんさん|Webデザイナー

みやびんさんのポートフォリオは、ユーザー目線を意識したサイト構成が特徴です。トップページでの自己紹介やサービス内容は端的でわかりやすく、採用担当者が必要な情報にすぐアクセスできる導線設計となっている点は参考にしたいポイントです。

作品紹介には、制作の背景や制作期間なども丁寧にまとめられており、制作プロセスの一つ一つを丁寧に進めている姿勢が伝わります。結果だけでなく「どんな思考で取り組んだか」を見せる工夫は、参考にしてみるとよいでしょう。

みやびんさんのポートフォリオはこちら

meguさん|LPデザイナー・Webデザイナー

meguさんのポートフォリオは、トップページのシンプルな設計とわかりやすい構成が魅力です。制作実績や対応できるスキルなどの重要な情報に、すぐアクセスできる導線が整えられています。

また、お問い合わせフォームへのリンクが目立つ位置に配置されているのも、真似したいポイント。未経験の方にとっても、必要な情報をきちんと届けるサイト設計のお手本になるでしょう。

meguさんのポートフォリオはちら

あかりさん|Webデザイナー

あかりさんのポートフォリオは、自分のキャリアの歩みや挑戦してきた背景を丁寧に文章化しており、デザインにかける想いを強く伝えられている点が魅力的。

デザインの説明にとどまらず、「どのようにクライアントに寄り添ったか」まで具体的に描写しており、人柄や誠実さがにじみ出ています。成果物の紹介だけでは伝わらない「信頼感」を抱かせるポートフォリオ作成の参考になります。

あかりさんのポートフォリオはこちら

あゆみさん|Webデザイナー

あゆみさんのポートフォリオは、ビビッドなカラーを効果的に活用しているのが印象的です。配色があゆみんさんのキャラクターをしっかりと伝え、どのようなデザインが得意なのかを直感的にイメージさせてくれています。

各作品でも、どのような意図でデザインしたかや、ペルソナ設計といったデザイン制作に付随する成果物も提示されており、「成果につながるデザイン」を追求する姿勢が伝わります。

あゆみさんのポートフォリオはこちら

あわせて読みたい
スクール受講生のポートフォリオ作品例!作り方や印象に残すためのコツも解説
スクール受講生のポートフォリオ作品例!作り方や印象に残すためのコツも解説デザイナーや Web制作者などクリエイターを目指す方にとって、ポートフォリオは自分のスキルや作品を効果的に紹介する重要な存在です。し…
あわせて読みたい
Webデザイナーのポートフォリオ作品例を紹介!作り方のポイントも解説
Webデザイナーのポートフォリオ作品例を紹介!作り方のポイントも解説Webデザイナーとして活躍したいと考えている方のなかには、「デザインスキルのアピールの仕方がわからない」「魅力的なポートフォリオを作…

ポートフォリオで「差」をつけるためのポイント

未経験からWebデザイナーを目指すなら、以下を参考にポートフォリオで差をつけましょう。

作品をまとめる際に意識すべき点を詳しく解説します。

見てもらう相手を意識する

ポートフォリオは「誰に見てもらうか」を意識して作成しましょう。採用担当者やクライアントは、限られた時間でポートフォリオを確認するため、相手が知りたいことが端的に伝わることが重要です。

具体的には、自分の強みを生かした作品を目立つ箇所に配置したり、自己紹介やスキルセットを簡潔にまとめるといった工夫が大切。相手目線の意識を持つことが、選ばれるポートフォリオづくりには重要です。

制作プロセスを伝える

ポートフォリオには、作品を載せるだけでなく、制作の背景やプロセスを添えることが大切です。完成品だけではあなたの考えや課題解決力が伝わりにくいからです。

たとえば「どのような目的で作り、どのような課題をどう解決したか」を文章で記載しましょう。さらに、試行錯誤した点や学びも含めて紹介すれば、人柄や努力も伝えられます。

学習意欲・成長可能性をアピールする

実務未経験の方にとって、成長意欲を見せることはとても大事です。理由としては、企業は未経験者にはポテンシャルや今後の伸びしろを期待しているケースが多いからです。

具体的には「どのようなスキルを習得したいか」「次に挑戦したいこと」など、未来のビジョンをポートフォリオに盛り込むとよいでしょう。前向きな姿勢をしっかり伝え、未経験でも採用したいと思ってもらえる工夫をしましょう。

あわせて読みたい
Webデザイナーのポートフォリオ作成ガイド!スクール受講生・卒業生の作品例も紹介
Webデザイナーのポートフォリオ作成ガイド!スクール受講生・卒業生の作品例も紹介Webデザイナーに欠かせないのが、自分のスキルや強みをアピールできるポートフォリオです。しかし、「ポートフォリオってどうやって作れば…

未経験からポートフォリオを制作する6ステップ

未経験からWebデザイナーを目指す際のポートフォリオ制作を6つのステップで紹介します。

  1. Webデザインを学ぶ
  2. 目標とコンセプトを明確にする
  3. 掲載作品を準備する
  4. 各作品の制作意図・工夫ポイントを言語化する
  5. ポートフォリオサイトを作成する
  6. フィードバックを得て改善する

これからポートフォリオを作成しようと考えている方は、ぜひ参考にしてください。

1.Webデザインを学ぶ

最初のステップはWebデザインを体系的に学ぶことです。デザインの原則や配色、タイポグラフィの知識を身につけるだけでなく、HTMLやCSSなどを用いたコーディングも理解しておくとアピールポイントになります。

Webサイトのデザインからコーディングまでを一貫して担当デザイナーは、活躍できる場面が多くなるためです。まずは土台を固め、表現の幅を広げていきましょう。

2.目標とコンセプトを明確にする

ポートフォリオを作る前に、目標とコンセプトを設定しましょう。目的が曖昧なままでは見せたい強みや方向性が伝わりにくいからです。たとえば「未経験でも実務で活躍できることを示す」「女性向けの柔らかいデザインを得意とすることを伝える」など、ゴールを明確に定めることで掲載する作品選びにも一貫性が生まれます。

軸を決めることが差別化の第一歩になります。

3.掲載作品を準備する

つぎに、ポートフォリオに掲載する作品を選定します。課題で制作した作品や自主制作作品で問題ありませんが、サイト・バナー・SNS投稿など作品にバリエーションを持たせると、対応範囲の広さやスキルの高さをアピールできます。

作品数を増やすだけでなく、質にもこだわりましょう。見た人に「この人に任せたい」と思わせる仕上がりの作品を掲載するのが大切です。

4.各作品の制作意図・工夫ポイントを言語化する

作品の制作意図や工夫した点を言葉にして記載することも重要です。完成品だけでは思考力や課題解決力が伝わりにくいからです。

たとえば「設定したペルソナに合わせた配色やフォントにした」「ターゲットがどのような状況で利用するかを想定しUIの使いやすさを検討した」など、具体的に書き添えることで説得力が増します。

あわせて読みたい
ポートフォリオの作品説明文の具体例と書き方を解説!スクール受講生の作品例も紹介
ポートフォリオの作品説明文の具体例と書き方を解説!スクール受講生の作品例も紹介ポートフォリオは、クリエイターにとって自身の能力や実績をアピールするうえで欠かせないツールです。特に、作品説明文は、採用担当者やクラ…

5.ポートフォリオサイトを作成する

その後、準備した作品をまとめるポートフォリオサイトを制作します。見る人が求める情報が取得しやすいサイト構成を意識しましょう。さらに、スマホでも見やすいようレスポンシブ対応も忘れないようにしましょう。

Webサイトとしての完成度を高めることが、Webデザイナーとしてのスキルのアピールにもなります。

6.フィードバックを得て改善する

最後に大切なのは、客観的な視点からのフィードバックを受けることです。たとえば、スクールの講師や同じくWebデザイナーを目指す仲間から意見をもらうと、より的確なアドバイスが得られるでしょう。

指摘を反映して修正を繰り返すことで、完成度の高いポートフォリオになります。

Webデザイナー未経験者のポートフォリオ制作でよくある質問

未経験からWebデザイナーを目指す方がポートフォリオを作成するうえで抱きやすいよくある質問をQ&A形式でまとめました。

それぞれ詳しく解説します。

実績がないからポートフォリオが作れないときはどうする?

実務の実績がない場合は、スクールの課題で制作した作品や自身の趣味として制作した作品、架空のプロジェクトを想定した作品などを掲載しましょう。制作の目的や工夫を詳しく説明すれば、思考力や成長意欲を伝えることができす。

あわせて読みたい
ポートフォリオ作品がない未経験者はどうする?6つの解決策を紹介!
ポートフォリオ作品がない未経験者はどうする?6つの解決策を紹介!「ポートフォリオを作りたいけど掲載する作品がない……」「実務未経験で作品数が少ない」といった理由から、就職・転職活動に不安を抱える方…

ポートフォリオのレベルが低い場合どうすればいい?

ポートフォリオのレベルに不安があるなら、第三者からフィードバックをもらい改善してみましょう。現役デザイナーや講師に添削を依頼してみるのがおすすめです。また、実務未経験の場合は、ポートフォリオに掲載する作品は数ではなく質を重視するのがおすすめです。

たくさん作品を掲載したいと考えるあまり、レベルの低い作品を掲載すると、自身のスキルアピールには逆効果になってしまいます。まずはある程度の時間をかけて、自信作を作るのがおすすめです。

あわせて読みたい
ポートフォリオのレベルが低いと感じた時の改善方法!制作で意識すべきポイントも解説
ポートフォリオのレベルが低いと感じた時の改善方法!制作で意識すべきポイントも解説「ポートフォリオを準備したものの、レベルが低いのでは?」と不安を抱えている方も多いのではないでしょうか。実務未経験の場合、作品のクオ…

どのくらいの作品数が必要?

ポートフォリオに必要な作品数は、10〜15点を目安にすることがおすすめです。理由は、多すぎると自身の自信作に目を留めてもらえない可能性があり、少なすぎるとスキルをアピールしにくいからです。

ジャンルやテイストを幅広く取り入れつつ、自分の強みを伝えられる内容を厳選しましょう。さらに、各作品に制作意図や工夫を丁寧に説明すれば、より信頼感を与えられます。

ポートフォリオ制作に悩む未経験者にはSHElikesがおすすめ

未経験からWebデザイナーを目指す方にとって、ポートフォリオの制作は大きなハードルに感じるものです。そのような方には、女性向けキャリアスクールのSHElikes(シーライクス)がおすすめ。

SHElikesなら、45以上の職種スキルが定額で学び放題。ポートフォリオ制作を基本から学べるコースやイベントもあり、クオリティの高いポートフォリオを作るスキルが学べます。さらに、課題や添削があるコースもあり、ポートフォリオに載せる作品を制作する機会も豊富です。

以下の記事では、SHElikes受講生がどのようなスキルを学びどのような作品を制作できるようになったかを紹介していますので、あわせてチェックしてみてください。

あわせて読みたい
これ、未経験の私が4ヶ月で作ったんです✨

未経験でも魅力的なポートフォリオを作れる!SHElikesで自信をつけよう

未経験からwebデザイナーを目指す方も、工夫次第で魅力的なポートフォリオを作成できます。スクールの課題で制作した作品や自主制作の作品でもスキルを伝える十分な材料になるからです。

ポートフォリオとしてまとめる際は、自分の強みやデザインの意図を丁寧にまとめ、相手にわかりやすく伝える工夫をしましょう。その後は、添削やアドバイスを受けて改善を重ねる姿勢が大切です。

もし一人でポートフォリオ制作を進めるのが不安なら、女性向けキャリアスクールSHElikesがおすすめ。SHElikesでは45以上の職種スキルを学ぶことができ、学習の方向性や課題の制作でつまずいたときには質問できる環境も整っているため安心です。

無料体験レッスンを開催しているので、気になる方はぜひ参加してみてください。

あわせて読みたい
未経験でもできる魅力的なポートフォリオの作り方!記載したい5つの要素や事例も紹介
未経験でもできる魅力的なポートフォリオの作り方!記載したい5つの要素や事例も紹介就職・転職活動や業務委託案件の応募など、さまざまな場面で必要になる「ポートフォリオ」。特に未経験から挑戦する場合、「どんな構成にすれ…

ABOUT ME
ライター 伊藤 七
千葉大学卒業後、地方へ移住し、新卒でフリーランスのWebライターに。キャリアスクールを運営するベンチャー企業でマーケティング業務に携わった後、理想の生き方・働き方を探求するためにフリーランスとして活動を再開。本づくりやエッセイ・小説の執筆、日記の習慣など「書くこと」が好き。1994年生まれ。
エディター wami
企業でプロジェクトマネージャーとして働きながら、副業ライターとして活動中|ECサイトディレクター⇒UXデザイナー⇒プロジェクトマネージャー|主にIT系・Webマーケティング系・転職系の記事を執筆

※ 掲載している情報は記事更新時点のものです。