Webデザイナーになるには？未経験から目指す7ステップ

本記事は、転職・退職に関する一般的な情報提供を目的として作成しています。特定の求人の紹介やあっせん、職業紹介を行うものではなく、各サービスの内容をもとに情報を整理しています。

Webデザイナーになるために、特定の学歴や資格は必須ではありません。大切なのは、目指す仕事に合ったスキルを身につけ、それを作品で示すことです。

ただし、必要なスキルの範囲は、就職・副業・フリーランスのどれを目指すか次第です。本記事では、仕事内容と必要スキルを整理したうえで、未経験から目指す7ステップを紹介します。

後半では、独学・学校・職業訓練・スクールの違いや、期間と費用、ポートフォリオの作り方も解説します。年齢や未経験であることに不安がある方も、確認すべき条件と進め方を順に整理してみてください。

先に学習サービスも見たい方は、女性向けオンラインスクールSHElikesの無料体験レッスンでWebデザインの学習内容を確認できます。

※レッスンの内容は変わる可能性があります

Webデザイナーを目指すうえで、資格や学歴は入口の条件ではありません。見られやすいのはデザインの基礎力と作品です。

入職にあたって、特定の学歴や資格は求められていません。一方で、デザインの基礎知識と技術は必要です。

未経験者の応募では、業務に合う作品をまとめたポートフォリオが判断材料になる場合があります。

関連資格の「ウェブデザイン技能検定」は国家検定です。合格すると「ウェブデザイン技能士」を名乗れる名称独占資格で、資格がないとできない業務はありません。

応募条件は求人ごとに異なるため、必ず確認しましょう。

Webデザイナーは、企業や学校、官公庁などのWebサイトの企画・デザインを行う職業です。ただし担当範囲は会社や案件で大きく異なるため、職種名だけでなく、担う工程や仕事の得方まで確認しましょう。

Webデザイナーの仕事の中心はデザインですが、実際は要件確認から公開後の改善まで幅広い工程に関わります。依頼主との打ち合わせ、画面の仮案づくり、素材の作成、公開後のメンテナンスなども業務に含まれます。

小規模なサイトでは一人ですべてを担うこともあり、大規模なサイトでは分業して制作します。求人票では、コーディングや進行管理まで含むかを確認しましょう。

似た職種との違いは、主に「何のために、何を作るか」にあります。以下は一般的な整理です。

実際の現場では役割が重なることもあります。職種名だけで判断せず、業務内容と応募条件を見て学ぶ範囲を決めましょう。

主な勤務先は、Webサイトの制作会社や、一般企業のWebサイト関連部門などです。同じ職種でも、勤務先によって経験の積み方が変わります。

会社の規模や事業内容でも業務は変わります。求人票で求められる制作物と、自分の作品の相性を確かめておきましょう。

働き方は、自由度だけでなく、経験を積む機会や管理の負担もあわせて比べましょう。正社員のほか、派遣社員やフリーランスとして働く場合もあります。

未経験のうちは、関連職や社内の小さな制作、範囲を絞った副業で経験を積み、段階的に働き方を広げていけます。

必要なスキルの優先順位は、目指す職場や案件によって変わります。まずはデザインの基礎から始め、作品づくりに必要な範囲へ順に広げていきましょう。

デザインの基礎は、センスではなく原則として学べます。代表的なのは、近接・整列・反復・対比の4原則のほか、余白、視線誘導、配色、文字組み、画像の選び方などです。

たとえば、ボタンと説明文を近づけて置くと、両者がひとまとまりの情報だと伝わります。

到達目安は、「なぜこの配置や色にしたのか」を目的と読みやすさで説明できることです。 作品を作るたびに、使った原則を言葉にして残しておきましょう。

制作ツールは用途で使い分けます。よく使う道具としてFigmaやPhotoshop、Illustratorなどが挙げられます。

• Figma：Webサイトやアプリの画面設計やチームでの共同作業
• Photoshop：写真や画像の加工
• Illustrator：図形やロゴ、アイコンの作成

最初から全機能を覚える必要はありません。応募したい求人や作りたい作品で使うツールから優先すると、学習を進めやすくなります。

デザインを専任で担う場合でも、HTML・CSSの基礎は知っておくと役立ちます。画面幅に合わせるレスポンシブ対応や、ブラウザでの表示のされ方、CMSの仕組みも押さえておきたい知識です。

実装しやすいデザインを考えられ、実装担当への受け渡しも円滑になるためです。一方、実装まで担当する求人では、習得範囲が広がる点に注意しましょう。応募先の業務内容で必要な深さを見極めてください。

Webデザインでは、見た目だけでなく使いやすさの設計も求められます。閲覧者の動向を踏まえてサイトのコンセプトを決め、仮完成後に使いやすさを確認するのも仕事の一部です。

• 利用者の目的に合わせて、情報の優先順位を決めているか
• 目的のページまで迷わずたどり着ける導線か
• 操作がわかりやすく、端末ごとに表示が崩れないか
• 文字の大きさや色の差など、誰にとっても読みやすいか

作品では、こうした判断をどう反映したかも説明できるようにしましょう。

Webサイトは、集客や問い合わせなどの目的を達成するために作られます。サイトの目的や想定利用者、検索・広告からの流入、行動の指標、改善仮説の基本を知ると、デザインの判断に根拠を持たせやすくなります。

数値分析の専門家になる必要はなく、デザインを事業の目標と結び付ける力として身につけましょう。たとえば問い合わせを増やしたいサイトなら、ボタンの位置や文言をどう変えるかも、デザイナーが考える範囲に入ります。

技術に加えて求められるのが、関係者と仕事を進める力です。要望を聞いたら目的・対象・制約を整理し、意図を説明できると、認識のずれを防ぎやすくなります。

• 打ち合わせで「誰に」「何を」「いつまでに」を質問する
• 決まった内容を記録し、関係者と共有する
• 修正の範囲と期限を事前に合意する

性格の向き不向きより、こうした行動を習慣にできるかがポイントです。

学ぶ範囲や順番に迷う方は、SHElikesの無料体験レッスンで、Webデザインと周辺スキルの学習内容を確認してみてください。

※レッスンの内容は変わる可能性があります

ここからは、未経験からWebデザイナーを目指す手順を7段階で紹介します。教材を選ぶ前に、目指す働き方を決めるところから始めましょう。各ステップに完了の目安を置くと、学習だけが長引く状態を避けやすくなります。

最初に決めるのは、就職・副業・フリーランス・社内異動のどれを目指すかです。ここが決まらないと、学ぶ範囲も作る作品も定まりません。

仮決めでかまわないので、求人サイトや案件情報で気になる募集を3〜5件確認しましょう。必要スキル、提出を求められる成果物、経験の条件を書き出すと、学ぶ範囲を逆算できます。

完了の目安は、目指す働き方と、応募時に必要な条件を一覧にできた状態です。

次に、学習計画を数字で決めます。平日と休日に使える時間、いつまでに応募したいかという期限、その間に作る作品の本数を書き出しましょう。

教材を見る時間と、自分で手を動かす時間の比率も決めておきます。知識のインプットばかりが増えると、作品が残らないためです。

週に一度は進み具合を振り返り、予定に無理があれば、目的か学習範囲のどちらかを調整します。週単位の予定表ができたら、次のステップへ進みます。

作業環境は、目標とする作品と使うツールから逆算して選びます。デザインソフトの推奨動作環境、画面の広さ、保存容量、通信環境を確認しましょう。

高額な機材は、学習が進んで必要になった段階で検討すれば十分です。無料で試せる範囲や、学校・職業訓練の設備を使う方法もあります。

判断に迷うときは、使いたいソフトの公式サイトで必要な動作環境を確認し、手持ちの機器で足りるかを比べてください。

準備が整ったら、基礎から学びます。レイアウト・配色・文字組みといったデザインの基礎、Figmaや画像編集ソフトの操作、HTML・CSSの基礎が中心です。

おすすめは、学んだ項目ごとに短い課題を作ることです。バナー1枚、1画面分のデザイン、簡単なページの再現など、小さくても完成させると理解が定着します。

各項目を説明でき、手を動かして作れるようになったら、作品づくりへ進みましょう。

基礎を終えたら、練習から自分の作品づくりへ進みます。まず、良いと感じたサイトを見て、目的や情報の並べ方を分析しましょう。

次に、トレースや模写で表現の型をつかみます。ただし、模写は練習用と割り切り、公開する場合は権利の扱いに注意してください。

最後に、対象と目的を自分で設定したオリジナル作品に取り組みます。第三者に見てもらい、指摘とそれをどう直したかを記録しておくと、あとで説明しやすくなります。

応募や提案の材料になるのがポートフォリオです。作品を並べるだけでなく、応募先に合う作品を選び、目的・対象・課題・担当範囲・制作過程・工夫した点を添えます。

公開前には、スマートフォンでの表示、連絡先の記載、閲覧できる権限の設定も確認しましょう。公開の形式は、ポートフォリオサイト、PDF、共有リンクなどから、応募先の提出方法に合わせて選びます。

完了の目安は、応募先を想定して作品と説明文がそろった状態です。

最後は、実際に応募・提案して経験を積む段階です。入口は一つではありません。

未経験可の求人、運用や更新などの関連職、いまの職場の制作業務、インターン、範囲を限定した副業などから、目的に合うものを選びます。

求人や案件ごとに、見せる作品の順番と説明を調整しましょう。結果が出なかった場合は、求められた条件と自分の作品の差を洗い出し、学習計画に戻します。

学び方は大きく4つあります。費用の安さだけで選ばず、自分に足りない支援は何かという視点で比べると、迷いにくくなります。

※職業訓練はテキスト代などが自己負担です。費用や条件は各機関の公式情報で確認してください。

独学は、書籍・動画・公式教材・学習サービスを組み合わせて進める方法です。費用を抑えやすく、時間の使い方も自由に決められます。

一方で、学ぶ順番、わからないときの質問先、作品への客観的な評価、学習の継続は自分で補わなければなりません。

質問できる相手を見つける、制作物を見てもらう機会をつくるなど、足りない部分を補う手段を先に決めておくと進めやすくなります。

大学・専門学校は、基礎から体系的に学びやすい反面、学費と通学期間の負担が大きくなります。募集要項で、学費、期間、設備、就職支援の内容を確認しましょう。

職業訓練（ハロートレーニング）は、公共職業訓練と求職者支援訓練の総称です。受講料は原則無料で、テキスト代などは自己負担です。

申し込みはハローワークへの相談が前提で、コースの内容や募集時期は地域によって異なります。デザイン系のコースがあるかは、住んでいる地域の募集情報で確認してください。

オンラインスクールは、比較する項目を決めてから選ぶと判断しやすくなります。

• 学習範囲と受講できる期間
• 入会金を含めた総額と支払い方法
• 質問の回数や期限、課題の添削方法
• ポートフォリオ制作に使える支援
• 休会や解約の条件

無料相談や体験レッスンでは、自分の生活リズムで学習時間を確保できるか、支援をどう使うのかまで具体的に聞いておきましょう。

SHElikesのWebデザインコースと料金プランは、公式サイトで確認できます。

※レッスンの内容は変わる可能性があります

必要な期間と費用は、目標、いまの経験、週に使える時間、選ぶ学び方によって変わります。期間は月数で決めず、作品と応募準備が整った状態を基準に考えると、計画が現実的になります。

期間は、目標から逆算して見積もります。バナー制作だけを請け負う場合と、サイト一式を任される場合では、必要な範囲が違うためです。

基礎学習、オリジナル作品の制作、ポートフォリオの仕上げ、応募準備という4つの節目を置き、それぞれに必要な作業量を書き出しましょう。そのうえで、週に使える時間で割ると、おおよその期間が出ます。

予定より遅れている場合は、期間を延ばすか、作品の点数や学ぶ範囲を絞るかを早めに判断します。

費用は、受講料だけでなく、制作を始めてから応募するまでにかかる金額をまとめて確認します。

スクールを比べるときは、月額だけでなく、入会金とサービス利用料を合わせた受講料の総額で見てください。

費用を抑えたい場合は公的な制度も選択肢ですが、どの制度にも対象条件があります。

職業訓練は、ハローワークの窓口と公式の検索ページで最新のコースを確認しましょう。民間講座を対象にした補助制度も、対象者、申し込みの期限、修了後の条件などが決められています。

補助を受けられる前提で予算を組むと、条件を満たせなかったときに計画が崩れます。

SHElikesの料金も、まず通常の入会金とサービス利用料を確認し、補助制度は対象条件とあわせて調べましょう。

※詳細はサイトをご確認ください

ポートフォリオは、作品を並べるだけの資料ではありません。応募先に対して、自分の考え方と担当できる範囲を伝えるための資料です。ここでは、作品の選び方、付ける説明、権利と公開設定の順に解説します。

載せる作品は、応募先との相性で選びます。バナー、LP、Webサイト、既存サイトの改善提案などから、目指す職種の業務に近いものを優先しましょう。

選ぶときの基準は2つです。ひとつは幅で、課題の違う制作物を入れると対応できる範囲が伝わります。もうひとつは深さで、得意な領域は工程や検討の過程まで見せると力量が伝わります。

課題として作った作品と、実際の依頼で作った作品は区別して明記しましょう。実案件を載せる場合は、公開してよい範囲を依頼主に確認しましょう。

並び順にも気を配りましょう。応募先の業務に最も近い作品を先頭に置き、説明を読む前に「何ができる人か」が伝わる構成にします。

未経験のうちは、完成画像だけでは判断材料になりません。各作品に、考えた過程と担当範囲を書き添えましょう。

記載したい項目は次のとおりです。

• 目的と対象：誰の、どんな課題を解決する制作物か
• 要件と制約：納期、掲載する情報、使える素材
• 情報設計とデザインの意図：なぜその構成・配色・文字にしたか
• 使用ツールと制作期間
• 担当範囲：企画、デザイン、コーディングのどこを担ったか
• 指摘を受けて直した点

共同制作の作品では、自分が担当した工程を必ず明記します。改善の過程まで書くと、指摘を受け止めて直せる人だと伝わりやすくなります。

公開時は、権利と情報の扱いに注意します。模写やトレースを公開する際は、練習作品との明記だけで十分とは限りません。非商用でも権利を侵害する場合があるため、権利者の許諾や利用規約を確認しましょう。

実案件では、顧客名や社内の資料をそのまま載せないようにしましょう。掲載の可否がはっきりしない場合は公開を控え、依頼主や権利者に確認してください。匿名化・一部掲載・限定公開でも、契約や守秘義務に反する場合があります。有料素材も、利用規約で公開範囲を確認してください。

公開後の管理も忘れがちです。リンク切れ、スマートフォンでの表示崩れ、連絡先の記載、古い作品の入れ替えを定期的に見直しましょう。

学習と作品づくりが進んだら、仕事につなげる段階です。入口は就職だけではありません。関連職や社内の業務、副業から始める方法もあります。入口ごとに、求められる準備と経験の積み方が変わります。

未経験から目指す場合、求人は制作会社・広告会社・事業会社に加え、関連する業務まで広げて探すと選択肢が増えます。サイトの運用や更新、マーケティングの補助、社内の制作担当などです。

中途採用では、DTPデザイナーやプログラマーなどの関連職種のほか、IT業界や広告業界から転職する人もいます。入社後は写真や画像加工などの素材づくりから始め、経験を積んでページ全体のデザインへ広げていく流れがあります。

求人ごとに担当範囲が違うため、見せる作品と志望理由も合わせて調整しましょう。

副業や個人での受注は、対応できる範囲を明確にしてから始めます。得意な制作物を決め、引き受けない作業もはっきりさせておくと、やり取りが安定します。

着手前に、納期、修正の回数、成果物の形式、素材の準備、権利の扱い、支払いの条件を書面で合意しましょう。制作以外に、営業、契約、請求、記録といった作業も仕事のうちです。

未経験の段階では、責任の範囲を限定できる小さな案件から経験を積む方法が現実的です。

収入は、経験年数、雇用形態、地域、担当できる範囲によって差が出ます。公的な統計にある平均値も、こうした条件の違いを含んだ数字です。

収入を伸ばしたい場合は、制作の速さだけでなく、任せられる工程を広げることが要素になります。UI・UX、ディレクション、マーケティング、実装といった隣接領域は、その代表例です。

まずは目指す求人や案件の条件を確認し、そこで求められる範囲を満たすことから始めましょう。

向き不向きは、性格で決まるものではありません。日々の行動や、あとから身につけられる力で考えると判断しやすくなります。この章では、続けやすい人の特徴、苦手の補い方、環境の変化への向き合い方を整理します。

続けやすいのは、次のような行動を習慣にできる人です。

• 利用者の動きや、良いと感じたデザインを観察する
• 自分の判断を「なぜそうしたか」で言葉にできる
• 指摘を人格の否定と受け取らず、改善に変えられる
• 期限と品質のバランスを調整できる
• 新しい表現や技術を学び続けられる

絵の上手さは条件ではありません。目的に合わせて情報を整理し、その理由を説明できることのほうが、実務では重視されます。 

苦手があっても、役割の選び方と仕組みで補えます。修正のやり取りが負担なら、着手前に修正回数を決めておく方法があります。学習が続きにくいなら、締切を小さく分けて進捗を記録しましょう。

細部の確認が苦手な場合は、公開前のチェックリストを作ると抜けを減らせます。対話に不安があるなら、質問項目をあらかじめ用意しておくと落ち着いて進められます。

ただし、放置すると品質や信頼に影響する点は共通です。得意な領域を選ぶことと、苦手を仕組みで補うことを、どちらも進めていきましょう。

近年は、Webサイトを簡単に作れるツールが普及し、生成AIを使ったWebデザインとの競争も生まれています。そのため、顧客のニーズに合った質の高いデザインがより求められています。

一方で、目的の整理、情報設計、利用者の理解、品質の確認、関係者との合意には、人の判断が必要な場面が残ります。

新しい機能は取り入れつつ、作業の速さだけでなく、課題をどう解いたかを説明できる力を高めていきましょう。

独学でつまずきやすいのは、質問先がない、作品を客観的に評価してもらえない、学習を続けにくいという3点です。不安があるなら、支援のある環境も検討してみましょう。

学習サポートのある環境の一例が、女性向けオンラインスクールのSHElikesです。Webデザインのほかにも、複数の分野のスキルをオンラインで学べます。

料金は、入会金162,800円（税込）とサービス利用料を合わせた受講料です。レギュラープランは、転職を目指す人向けの年間プランです。サービス利用料は352,000円（税込・12カ月分）で、受講料は514,800円（税込）になります。スタンダードプランは、副業やフリーランスも視野に幅広く学びたい人向けで、サービス利用料は月額16,280円（税込）です。

レギュラープランは補助金の対象になる場合があります。

※料金は2026年9月現在。プラン内容・料金・補助制度の対象条件は変更される場合があります。
※詳細はサイトをご確認ください

独学や職業訓練、通学型の学校が合う人もいます。

質問や添削を受けながら学びたい方は、SHElikesの無料体験レッスンで、学習の進め方と支援の内容を確認してみてください。

※レッスンの内容は変わる可能性があります

Webデザイナーを目指す際に出てきやすい、期間・年齢・絵の上手さ・コーディングの4つの疑問に回答します。それぞれ、判断の基準と次に取る行動をあわせて示します。

まず、就職・副業・フリーランスのどれを目指すかを決め、求められるスキルと作品の水準を求人や案件で確認します。そのうえで学び方を費用と支援内容で比べ、7ステップに沿って制作と応募を進めましょう。

資格や年齢だけで判断する必要はありません。応募先の条件と、公的機関や各サービスの公式情報を確認しながら、最初の一週間にやることを一つ決めてみてください。求人を5件読む、作りたい作品を決める、といった小さな行動で十分です。

オンラインで学び、Webデザインと周辺のスキルをあわせて身につけたい方は、SHElikesも候補になります。

学習内容、支援の範囲、料金と利用条件を自分の目で確かめたい方は、無料体験レッスンを活用してみてください。

※レッスンの内容は変わる可能性があります