Webデザイナーへの転職ロードマップ【未経験・社会人向け】採用側が評価するステップを逆算して解説


何から始めればいいかわからない…

転職まで何ヶ月かかるの?
AKIゴール(採用される状態)から逆算するのが一番の近道です。何を準備すれば内定につながるのか、採用担当として実際に面接してきた立場から整理しますね。
「Webデザイナーになりたいけど、何から手をつければいいのかわからない」という気持ち、正直わかります。
学習方法を調べると情報が多すぎて、かえって迷う。スクールに入るべきか独学でいいのかも判断できない。そんな状態でとまっている方を、面接の場でも何人も見てきました。
採用に携わってきた5年のあいだに、転職希望者の面接も何十人と担当してきました。この記事では、その経験をもとに、「採用される状態」から逆算したロードマップを整理します。
学習の最短ルートよりも、転職活動で評価されるマイルストーンを中心に設計しています。
Webデザイナー転職ロードマップ全体像:6〜10ヶ月で何を準備するか
まず全体のスケジュール感を把握しておきましょう。
未経験からの転職は、準備から内定まで平均6〜10ヶ月かかるケースが多いです。ただし、これは「学習完了まで待ってから転職活動」をするパターン。採用担当として感じるのは、「完璧を目指して時間をかけすぎた」ケースは意外と採用されにくいという現実があります。
理由は後述しますが、まずはロードマップ全体をつかんでおきましょう。
| フェーズ | 期間の目安 | 主なやること | 採用担当が見るポイント |
|---|---|---|---|
| STEP 1 土台作り |
0〜2ヶ月 | HTML/CSS基礎・Figma基礎 | 「自走できるか」の素地 |
| STEP 2 ポートフォリオ制作 |
2〜5ヶ月 | 架空案件2〜3本制作・フィードバック修正 | 実力の証明+成長意欲 |
| STEP 3 転職活動 |
5〜8ヶ月目以降 | 応募・書類・面接・条件交渉 | 志望動機・現場適性 |
| STEP 4 内定〜入社準備 |
内定後1〜2ヶ月 | 入社準備・現職退職手続き | — |
注意:スクールに通う場合、カリキュラム期間(3〜6ヶ月)がSTEP1〜2に重なります。独学の場合は自分でペースを管理する必要があります。
AKI面接で「まだ勉強中で…」と言いながらも、ポートフォリオの完成度が高い人は普通に採用されます。逆に「2年間独学しました」でも見せるものがない人は難しい。期間より中身です。
STEP 1:土台作り(0〜2ヶ月)— 「ツールを触れる状態」を作る
何を学ぶか:HTML/CSS・Figmaの3本柱
土台フェーズで押さえるのは3つだけです。
✅ 土台で習得する3つのスキル
- HTML/CSS の基礎(コーディングの読み書き)
- Figma の基本操作(デザインカンプの作成・閲覧)
- Webデザインの基礎知識(フォント・余白・配色の考え方)
Figmaは2023年以降、現場のデファクトスタンダードになっています。PhotoshopやIllustratorよりも先に触るべきツールです。
AKI採用を担当していたころの実感として、「PhotoshopよりFigmaに慣れている」候補者は評価しやすかったです。現場がFigmaに移行しているので、その傾向はいまも続いていると思います。
どこで学ぶか:無料リソースで十分スタートできる
土台フェーズは無料リソースで十分です。
- Progate(HTML/CSS・JavaScript):ブラウザで完結・コード実行確認できる
- ドットインストール:短い動画で体系的に学べる
- YouTube(「Figma 使い方 初心者」):最新UIに対応したチュートリアルが豊富
スクールを検討している場合は、ここで無料カウンセリングや体験授業を受けておくのがおすすめです。入学後のカリキュラムとの重複を事前に確認できます。
STEP 2:ポートフォリオ制作(2〜5ヶ月)— 採用担当が実際に見ているもの
ポートフォリオは「完成度」より「思考過程」を見ている
採用担当として面接してきて、ポートフォリオについて一番感じること。それは「完成度が高い作品を1本だけ持ってくる人」より、「3本の作品にそれぞれ制作意図がある人」のほうが採用しやすいということです。
なぜかというと、実務では「なぜこのデザインにしたか」を説明する場面が必ず来るからです。「きれいに作ったけど、なぜそうしたか説明できない」状態では現場で使えないと判断せざるを得ません。
AKI「このサイトのターゲットは30代の会社員なので、余白を広めにとってフォントを読みやすいサイズにしました」——このくらい言えれば十分です。難しいことは要りません。
採用側が評価するポートフォリオの条件
💡 採用担当が見る5つのポイント
- 制作意図が語れるか
- コーディングが動いているか(架空でも可)
- 複数のジャンルがあるか
- フィードバックを受けて修正したか
- スマートフォン表示が崩れていないか
「架空の案件でいいのか」という質問をよくされます。答えはYESです。実際に私が採用してきた人の多くが、架空のWebサイト・ランディングページ・バナー広告などを組み合わせてポートフォリオを作っていました。
ただし、「好きなものを作りました」だけではなく、ターゲット・目的・制作意図をセットで説明できるようにしておくことが重要です。
ポートフォリオサイト自体もコーディングで作る
作品をまとめる「ポートフォリオサイト」も、できればHTML/CSSでコーディングして作ることをおすすめします。
理由は単純で、「ポートフォリオサイト自体がコーディングの実績」になるからです。WordPressやSTUDIOで作ったものも悪くはありませんが、採用担当の目には「コーディングできる人」とは映りにくい。
ポートフォリオサイト自体の作り方・公開手順については、Webデザイナーのポートフォリオサイトの作り方|WordPressで公開する手順を採用担当が解説にまとめています。サーバー契約からWordPress設置・公開チェックまでを解説しています。
STEP 3:転職活動(5ヶ月目以降)— 「まだ準備中」は長くて3ヶ月まで
転職活動を始めるタイミング
「もう少し勉強してから…」という気持ちはわかります。ただ、採用担当として正直に言うと、「学習が完全に終わってから転職活動する」という考え方は、結果的に遠回りになることが多いです。
ポートフォリオが2本以上あり、説明できる状態になったら転職活動を始めてかまいません。その後も学習しながら並行して活動するのが現実的です。
応募書類で気をつけること
💡 職務経歴書で押さえる3点
- なぜWebデザイナーに転職するか(具体的な理由)
- 前職の経験でWebデザインに活かせること
- 学習の進捗と完成したポートフォリオ数
前職がまったく異業種でも問題ありません。「ユーザーと話してきた営業経験がUIの改善アイデアに活かせる」「事務で培ったドキュメント整理力が情報設計に役立つ」など、関係性を自分で整理して言語化できれば、それが差別化になります。

未経験なのに書くことが見当たらない…
AKI「転職理由が弱い」よりも「なぜWebデザイナーでないといけないのか」が曖昧なほうが採用で詰まります。学歴・前職は関係ない。動機の解像度を上げることに集中してください。
面接で聞かれること(未経験者向け)
面接でよく聞かれる質問を整理しておきます。
STEP 4:スクール vs 独学、どちらのルートで進めるか
ロードマップを進める「手段」の選び方
STEP1〜3を進める手段として、スクールと独学のどちらが合っているかは人によって変わります。一律に「スクールがいい」「独学で十分」とは言えない。
ただ、判断軸は整理できます。
✅ スクールが向いている人
- 転職期限が決まっている(半年以内に転職したい)
- 独学で挫折した経験がある
- ポートフォリオのフィードバックをもらえる環境がない
- 転職支援・求人紹介までセットで使いたい
⚠️ 独学のほうが合っている人
- 費用が厳しい(30〜50万円が難しい)
- すでに学習リズムが作れていて、ひとりで進められている
- 転職より副業・フリーランスが目的(スクール経由の転職支援が使えないケースがある)
スクールを選ぶ場合は、「転職支援の手厚さ」「ポートフォリオのフィードバック体制」「卒業後の求人紹介の実績」を軸に比較することをおすすめします。

📌 関連記事:ロードマップの最終段階、自分の作品をWebで公開するにはレンタルサーバーが必要です。最初の1台を目的別に選べる比較はこちら → ポートフォリオ用レンタルサーバー比較【2026年】ConoHa WING・ロリポップなど4社を採用担当目線で正直に選んだ
📌 関連記事:作業環境・PC周りを整えるなら → Webデザイナーのデスクツアー2026|MacBook Air+Dell 4Kで組んだリアルな作業環境を全部見せます
📌 関連記事:Webデザイナーになるための勉強時間はどれくらい? — 勉強時間の目安を知りたい方はこちら
よくある質問
まとめ:「採用される状態」から逆算して動く
AKIロードマップを知ることより、最初の一歩を踏み出すことのほうが大事です。今振り返ると、私が最初に転職を考えたとき、まず無料のプログラミングサービスでHTMLを触ってみたことが起点でした。大したことじゃないように思えて、あれが確実に次につながっていた。
📝 転職ロードマップのポイント
- STEP1(土台):HTML/CSS・Figmaの3本柱を2ヶ月で習得
- STEP2(ポートフォリオ):2〜3本・制作意図が語れる状態を目指す
- STEP3(転職活動):ポートフォリオ2本できたら学習と並行してスタート
- スクール vs 独学:転職期限・学習環境・費用で判断。一律の正解はない
- 採用担当が見るのは「期間」より「ポートフォリオの説明力」
「完璧に準備してから動く」より、「動きながら準備する」ほうが転職は早く決まります。
まず小さく始めるとしたら、無料の学習サービスでHTMLを1時間触ってみるか、気になるスクールの無料カウンセリングを1件予約してみる——そのくらいのことから始めれば十分です。


ディスカッション
コメント一覧
まだ、コメントがありません
新着記事
インハウスデザイナーはつまらない?事業会社の中で起きていること
社内デザイナー、思ってたより地味かも… これ、私の力不足なのかな… AKI その ...Webデザイナーのキーボードはどう選ぶ?現役が使う1台と基準
キーボードを買い替えたいけど、種類が多すぎて何を基準に選べばいいのか分からない… ...未経験Webデザイナーの書類選考|通過する人としない人の差
応募してもエントリーの返事すら来ない…どこがダメなのか分からない。 未経験だから ...リスキリング補助金はいつまで?申請の流れと教育訓練給付金との違い
リスキリング補助金って、教育訓練給付金と何が違うんだろう… 最大70%戻るって見 ...教育訓練給付金の申請手順|ハローワークで実際にやることを時系列で解説
給付金が使えるらしいけど、何から手をつければいいのか分からない… 申し込んでから ...「スクール卒」と「独学」、採用担当は本当はどう見ているか
独学で勉強してるけど、スクール卒の人に負けるんじゃないかと不安… 逆に、お金を払 ...エージェント経由と直接応募、採用側の扱いはどう違うか|受ける側の本音
エージェント経由だと採用されにくいって聞いたんだけど、本当…? 自分で直接応募し ...WordPressブログはポートフォリオになる?採用担当の正直な答え
ブログを書いてるんだけど、これって転職で評価されるのかな… 作品を作る時間をブロ ...デイトラとWEBCOACH、どっちを選ぶ?採用担当が目的別に正直比較
デイトラとWEBCOACH、最後の2つで決めきれない… 料金もサポートも全然違う ...Webデザイナーの面接で採用担当が必ず聞く5つの質問|その狙いと答え方
もうすぐ面接なんだけど、何を聞かれるか分からなくて不安… 模範解答を暗記しても、 ...Webデザインスクールで後悔した人の7パターン|採用担当が面接で聞いた実話
スクール、高い買い物だから…入って後悔したらどうしよう。 「意味なかった」って口 ...MySTARの評判は?リスキリング補助金で実質いくらか採用担当が検証
MySTARって最近できたスクールみたいだけど、実際どうなんだろう…。 補助金で ...WEBCOACHの料金は高い?6ヶ月47万・12ヶ月64万の内訳を採用担当が検証
WEBCOACH、よさそうだけど…47万って、正直高くない? この金額を払って、 ...HerTech(旧WeRuby)の評判は?女性向けWebスクールを採用担当が検証
HerTech、女性向けでよさそう。でも「怪しい」って検索候補に出てきて不安で… ...女性向けWebデザインスクール比較|ママ・在宅で選ぶなら採用担当が解説
子育てしながら在宅でWebデザインの仕事がしたい。でも女性向けのスクールって、ど ...カテゴリー