Webデザイナー未経験は何から始める？独学でもいい？まず着手すべきこと

Webデザイナー未経験者が最初に始めるべきなのは、ズバリ、Figma操作とHTML/CSSの基礎学習です。3〜6ヶ月で応募段階に到達するには、最初の30日で「時間確保・学習環境・基礎学習」の3つを揃え、そこから模写・オリジナル制作・ポートフォリオへ進む5STEPロードマップが最短ルートになります。

弊社のキャリアアドバイザーも、事務職や販売職からWebデザイナーを目指す20代の方から「何から始めればいいか分からない」「スクールに30万円払うべきか」というご相談を受けることがあります。重要なのは、いきなり有料スクールに申し込むのではなく、まず1週間の無料教材で学習継続力を試すことです。

この記事では、「何から始めればいいのか？」と悩むWebデザイナー未経験が最初に着手すべき5STEPロードマップ、学習前に揃える3つの土台、独学とスクールの5軸比較、30日・60日・90日ごとのマイルストーンまで解説します。

Webデザイナー未経験は何から始める？結論と最初の30日ロードマップ

以下は、Webデザイナー未経験者で何から始めればいいかわからない方の全体像と最初の一歩です。結論から言うと、最短ルートは以下の5STEPで進みます。

• STEP1｜Figma操作：無料の公式チュートリアルとYouTubeで基本操作を1週間で習得
• STEP2｜HTML/CSSの基礎：ProgateやドットインストールでWebサイトの構造と装飾を学ぶ
• STEP3｜デザインの模写：好きなサイトを3本模写して余白・配色・タイポグラフィを観察する
• STEP4｜オリジナル制作：架空クライアントを設定して3本のオリジナルサイトを作る
• STEP5｜ポートフォリオと応募：作品6本を並べたポートフォリオサイトを公開し、応募に進む

最初の30日はSTEP1〜STEP2に集中します。ここで「毎日30分でも手を動かせるか」を確認できれば、以降のSTEPも継続できる見通しが立ちます。逆に最初の1週間で挫折しそうなら、学習方法を変えるか、始めるタイミングを考え直しましょう。

学習を始める前に揃えたい3つの土台｜時間・環境・目標

STEP1から始める前に、「時間・環境・目標」の3つの土台を揃えるのが挫折を防ぐコツです。この土台があるかないかで、続けられる確率が変わります。

週11時間の学習時間を確保する

まず1週間、スマホのスクリーンタイムを確認してSNSやYouTubeに使っている時間を可視化します。そのうち平日1時間・休日3時間の合計週11時間を学習に振り替えれば、6ヶ月で300時間の学習が積み上がります。「時間がない」ではなく「時間の使い方を書き換える」から始めましょう。

PC・Figmaアカウント・教材リンクを揃える

最低限必要なのはWindows/MacのPC、Figma無料アカウント、Progateとドットインストールのブックマークです。iPadやスマホだけでは実務レベルの学習は困難です。中古PCなら5〜10万円で揃うため、機材投資を惜しまないほうが結果的に早いです。

3ヶ月後にどうなっていたいかを1文で書く

「3ヶ月後にどうなっていたいか」を1文で書き出すと、日々の学習の迷いが減ります。「3ヶ月後にポートフォリオを完成させて求人応募を始めている」「6ヶ月後に制作会社に内定」など、期限と達成状態のセットで書きます。ノートやスマホのメモに書いて毎日見返しましょう。

Webデザイナー未経験者の学習5STEP｜Figma・HTML・CSS・ポートフォリオ・応募

土台が揃ったら、以下の5STEPを3〜6ヶ月かけて順番に進めます。各STEPで到達目標が明確になっていると、途中で挫折しにくくなります。

• STEP1｜Figma操作：無料の公式チュートリアルとYouTubeで基本操作を1週間で習得
• STEP2｜HTML/CSSの基礎：ProgateやドットインストールでWebサイトの構造と装飾を学ぶ
• STEP3｜デザインの模写：好きなサイトを3本模写して余白・配色・タイポグラフィを観察する
• STEP4｜オリジナル制作：架空クライアントを設定して3本のオリジナルサイトを作る
• STEP5｜ポートフォリオと応募：作品6本を並べたポートフォリオサイトを公開し、応募に進む

Webデザイナー未経験者は独学とスクール｜どちらから始めるか？

「独学かスクールか」で迷ったら、以下を比較してみてください。両者は排他ではなく、1週間の独学で継続力を試してからスクールに申し込む選び方も可能です。

費用は独学0〜3万円、スクール30〜80万円

費用面では独学が圧倒的に安くProgate月1,078円・書籍3,000〜5,000円で始められます。スクールは30〜80万円が中心で、内訳は講師サポート・就職支援・カリキュラム。費用対効果は「学習継続力があるか」で変わるため、まず1週間の独学で継続力を確かめてから判断するのが安全です。

学習ペースは自由か固定か

独学は自分のペースで進められる自由さがあり、仕事や育児と並行しやすい反面、締切がない分だらけやすいです。スクールはカリキュラムが固定されるため強制力が働きやすく、忙しい方でも決まった時間に学習が回り始めます。

質問できる相手の有無

独学ではX(旧Twitter)や勉強コミュニティで質問できますが、1回1回の質問に返答が来るまで時間がかかります。スクールは講師にその場で聞けるため、詰まる時間が短いのがメリットです。「詰まったら止まってしまう」タイプの方はスクール向きです。

挫折しにくさは環境次第

独学の挫折率はおおむね80%以上と言われています。スクールは受講料と締切があるため続きやすい設計ですが、それでも3割程度は途中離脱します。過去に独学が続かなかった経験がある方は、スクール活用を検討する価値があります。

就職サポートの有無

独学は求人検索・応募・面接対策すべて自分で行う必要があります。スクールは受講後のポートフォリオ添削・求人紹介・面接対策がセットのプランもあり、就職までのサポートが組み込まれています。就職サポートを重視する方はスクールの就職支援プランを比較しましょう。

Webデザイナー未経験者の30日・60日・90日目のマイルストーン

学習は毎日の積み重ねですが、30日ごとに到達目標を設定すると停滞感を防げます。以下のマイルストーンを毎月末にチェックしてください。

30日目｜Figmaで1ページの模写が1本完成

最初の30日で、Figma操作を身につけ、簡単なWebページの模写を1本完成させるのが目標です。1週間でFigma、3週間でHTML/CSSの基礎、月末に模写1本の順番で進めば無理なく到達できます。この段階でSNSに完成報告を投稿するとモチベーションが続きます。

60日目｜模写3本＋オリジナル1本が完成

2ヶ月目は模写を2本追加し、オリジナル作品を1本作るのが目標です。オリジナル制作では「架空のカフェのLPを作る」など、想定ターゲットと目的を最初に決めてから手を動かします。1本目のオリジナルは時間がかかりますが、以降のスピードが上がります。

90日目｜ポートフォリオ6本＋公開サイトが完成

3ヶ月目には模写3本＋オリジナル3本の計6本と、それを並べたポートフォリオサイトを完成させます。公開サイトはStudioやVercelなど無料で始められるサービスで問題ありません。ここまで到達すれば、求人応募を始められる状態です。

学習の挫折を防ぐ3つの工夫

未経験学習の挫折率は独学で80%以上とされます。最初の30日で挫折しないための工夫を3つ紹介します。

工夫1｜完成物を先に決めてから学ぶ

「HTML/CSSを学ぶ」ではなく「1週間後に自己紹介サイトを作る」のようにゴールを設定してから学ぶと、必要な知識だけを効率よく吸収できます。完成物ベースで学ぶほうが、教材を最初から順番に消化するより挫折しにくいです。

工夫2｜SNSで学習過程を発信する

X(旧Twitter)やInstagramで「今日学んだこと」「作った作品」を発信すると、応援してくれる人が現れます。同じ立場の学習者とも繋がれるため、孤独感が減ります。「発信のために学ぶ」というモチベーションも働きやすくなります。

工夫3｜1週間続かなかったら学習方法を変える

ProgateからYouTube、書籍から動画、独学からスクール、と1週間続かなかったら学習方法を切り替える柔軟性を持ちましょう。1つの方法に固執して挫折するより、合う方法を探すほうが結果として早く到達できます。3〜4種類の教材を試して自分に合うものを見つけてください。

Webデザイナーの学習開始と同時に動き出す3ステップ

学習だけに集中せず、「求人観察・SNSフォロー・エージェント登録」の3ステップを並行すると、就職までの導線が短くなります。

求人を週1で観察する

学習中でも、週1回30分だけ「未経験Webデザイナー」の求人票を眺める習慣をつけてください。求人票の求めるスキルを見て、いま足りないものを逆算できます。応募はまだ先でも、市場感覚が育ちます。

現役デザイナーをSNSでフォローする

Xで現役Webデザイナー30人程度をフォローし、日々の投稿を眺めましょう。仕事の内容・作品・使用ツール・挫折談まで含めて、業界のリアルな空気を感じられます。憧れの制作会社の代表もフォローしておくと、後の応募時にも役立ちます。

転職エージェントに面談登録する

ポートフォリオが3本溜まった段階で転職エージェントに面談登録して市況感を掴むのもおすすめです。応募段階でなくても相談だけでOKなエージェントが多いため、学習の方向性を第三者に確認できます。弊社の支援データでも、面談登録から内定までの平均リードタイムは3〜4ヶ月ほどです。

Webデザイナー志望の方の転職エージェントの選び方については以下の記事もあわせてご確認ください。

あわせて読みたい

webデザイナー向け転職エージェント｜未経験〜経験者別におすすめを紹介 この記事では、webデザイナー向けのおすすめ転職エージェントを紹介します。 webデザイナーへの転職活動でいちばん詰まりやすいのは、求人選びよりも前のポートフォリオ...

Webデザイナーへの転職相談は私たちノビルキャリアへ｜未経験OK

私たちノビルキャリアは、これまで10,000名以上の20代の転職を支援し、内定承諾者の平均年齢は24.7歳、支援者の約85%が20代という若手特化の転職エージェントです。学習開始前の相談から、ポートフォリオ添削、求人紹介まで一貫サポートします。

面談では、あなたの前職経験と生活状況に合わせて、独学かスクールか、どのスクールがマッチするか、どの求人タイプを目指すべきかまで一緒に見立てます。弊社の支援データでも、学習開始前から面談登録している方の方が、遠回りが少ない傾向があります。

項目	内容
サービス名	ノビルキャリア
対象	20代の未経験・第二新卒・フリーター・キャリアチェンジ希望者
支援実績	10,000名以上（内定承諾者の平均年齢24.7歳・支援者の約85%が20代）
Webデザイナー学習開始支援	独学かスクールかの見立て・目指す求人タイプの設定・学習ペースのレビュー
対応エリア	東京・大阪・神奈川・兵庫・京都・埼玉・愛知・千葉・広島など全国主要都市
利用料金	完全無料・登録3分・相談だけでもOK

Webデザイナー未経験者からキャリアアドバイザーによくある質問

Q1｜最初に買うべき教材は何ですか？

A：Progateの月額プラン（1,078円）とFigma無料アカウントから始めるのがコストパフォーマンス最高です。書籍は最初は不要で、慣れてきたら「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」などのベストセラーを追加します。

Q2｜PCは何を買えばいいですか？

A：中古のMacBook Air(M1・M2チップ)が7〜10万円で、Windowsノートなら5〜8万円で十分な性能が揃います。Figma・ブラウザ・エディタが快適に動けばOKです。iPadやスマホだけでは実務レベルの学習は難しいため、必ずPCを用意しましょう。

Q3｜働きながら学べますか？

A：平日1時間・休日3時間の学習を6ヶ月続ければ十分に応募段階に到達できます。退職してから学習開始すると生活費のプレッシャーが強くなるため、在職中に学習・ポートフォリオ・応募まで進めるのが安全です。焦らず土台から積み上げましょう。

Q4｜30代未経験でも今から始めて間に合いますか？

A：前職スキルとの掛け算があれば30代未経験でも道はあります。営業×デザイン、事務×コーディング、販売×EC制作など、既存経験を活かせるポジションを狙いましょう。20代よりハードルは上がりますが、事業会社インハウスや広告運用会社の求人が現実的な入口です。

Q5｜スクールに30万円は高すぎませんか？

A：「学習継続力があるか」を1週間の無料教材で確かめてから決めてください。継続力があるなら独学でOK、続きにくいならスクールの講師サポートが費用対効果に見合います。教育訓練給付金の対象コースもあるため、条件を確認して負担を減らす方法も検討してください。

まとめ｜Webデザイナー未経験者はまずFigmaと無料教材で1週間試すのが最初の一歩

Webデザイナー未経験が最初に始めるべきなのは、Figma操作とHTML/CSSの無料教材です。学習前に「時間・環境・目標」の3つの土台を揃え、5STEPで3〜6ヶ月かけて進めば、応募段階まで到達できます。

いきなり有料スクールに申し込むのではなく、最初の1週間で自分の継続力を確かめることが失敗しないコツです。学習と並行して求人観察・SNS・エージェント面談も進めれば、就職までの導線が短くなります。