この記事にはプロモーションを含みます。
掲載しているスクールや講座の一部は広告です。
ただし紹介の順番や評価は、広告の有無で変えていません。
Webデザイナーを目指すときは、希望する仕事内容を決めてから、必要なスキルと学習方法を選びましょう。
この記事では、Web制作会社の視点で学ぶ順番とポートフォリオの準備を整理します。講座の紹介には広告を含みます。
- 1. Webデザイナーの仕事は、思われているより幅が広い
- 2. 採用する側が実際に見ているもの
- 3. 学ぶ順番
- 4. 独学とスクール、どちらを選ぶか
- 5. Adobe Creative Cloud をどうするか
- 6. どのくらいの期間がかかるか
- 7. 最初の仕事をどう取るか
- まとめ
1. Webデザイナーの仕事は、思われているより幅が広い
「Webデザイナー」という呼び名は、実際には複数の職種をまとめた言葉です。
求人票で同じ名前が使われていても、任される仕事はまったく違います。
| よくある呼び名 | 実際にやること | 求められる中心のスキル |
|---|---|---|
| Webデザイナー（制作会社） | サイトの情報構成や見た目を設計。実装まで担当するかは会社による | 情報設計とデザイン。実装を担う場合はHTML/CSS |
| Webデザイナー（事業会社） | 自社サイトやバナーの更新、LPの作成 | デザイン、運用改善、担当範囲に応じたCMS操作 |
| UIデザイナー | アプリやサービスの画面設計 | 情報設計とFigma |
| マークアップエンジニア | デザインをHTML/CSSに起こす | コーディングの正確さ |
| バナー・広告デザイナー | 広告の目的や掲載先に合わせて画像を制作・改善する | 情報の優先順位、画像編集、媒体ごとの仕様理解 |
最初にどれを目指すかを決めないまま学び始めると、学習の順番が定まりません。
制作会社の求人に応募したいのか、事業会社で自社サイトを触りたいのかで、必要なものが変わります。
2. 採用する側が実際に見ているもの
未経験者が制作スキルを伝えるとき、ポートフォリオは重要な判断材料です。
求められる作品や提出方法は応募先によって異なるため、募集要項も確認しましょう。
資格やスクール名だけでは、どのような制作ができるかは伝わりません。
作品とその説明を用意し、自分で担当した範囲や工夫を示しましょう。
作品を説明するときは、次の3点を確認しましょう。
・課題として与えられた条件を満たしているか
・なぜそのデザインにしたのかを説明できるか
・応募する仕事に合う形式で、成果物を確認できるか
実装も担当する求人なら、動作するサイトと、自分で書いた部分を示すと確認しやすくなります。独自ドメインの取得は必須ではありません。
デザイン中心の求人では、画面案やプロトタイプに、対象ユーザー、課題、設計理由、改善内容を添えましょう。応募先の指定に合わせて、PDFや閲覧リンクなどの提出形式を選びます。
3. 学ぶ順番
以下は学習の進め方の一例です。応募したい求人を数件読み、共通する制作物と必須スキルを書き出してから、学ぶ範囲を決めましょう。
- 目的と情報設計の基礎誰に何を伝え、どんな行動をしてもらう画面かを決めます。文字の読みやすさ、余白、配色、情報の優先順位を練習します。
- 希望職種に必要なツールと技術画面設計ならデザインツール、実装も担当するならHTML/CSSを学びます。Figma、画像編集ソフトなどは求人や制作物に合わせて選び、一度にすべて揃える必要はありません。
- 小さな課題で練習練習用に利用を認められた教材で、見出しやカードなどを再現し、余白や文字サイズの違いを比べます。模写をオリジナル作品として紹介しないようにします。
- 目的のあるオリジナル制作架空の依頼でも、対象ユーザー、必要な情報、制約を設定します。担当範囲と、判断した理由を残します。
- 確認と改善デザイン案は他の人に操作や読み取りを試してもらい、実装したサイトはスマートフォンでの表示、リンク、キーボード操作なども確認します。修正前後と理由を作品説明にまとめます。
例えば「架空のカフェの来店案内」なら、営業時間・場所・メニューへの導線を考え、スマートフォンの画面案を作ります。実装を目指す場合はHTML/CSSで組み、文字の拡大やリンク操作も試します。課題の設定例なので、実在店の制作実績として掲載しないでください。
模写と作品公開は分けて考える
既存サイトの画像・文章・コードなどを使う場合は、利用条件を確認します。個人の練習で扱ったものを、そのまま公開してよいとは限りません。文化庁の解説でも、模写などをネットで公開する場合は原則として許可が必要と案内しています。公開する作品には、自作素材や公開用途に使える素材を選び、必要なクレジットも表示しましょう。
ReactやVue、WordPressを学ぶ優先度は担当業務によって変わります。資格も応募条件や学習目的に合わせて検討し、作品制作と無理なく両立できる順番にします。
4. 独学とスクール、どちらを選ぶか
結論から言うと、独学で進められる人は独学で構いません。
まず無料教材で基礎を試し、理解しにくい部分や添削が必要な部分に費用を使う方法もあります。
スクールにお金を払う価値があるのは、次のどれかに当てはまる場合です。
- 学習予定を立て、進み具合を相談する相手がほしい
- 作ったものを評価してくれる相手がいない
- 転職の期限が決まっていて、遠回りする時間がない
- 必要なソフトの費用も含めて学習予算を比較したい（契約条件は後述）
逆に「独学だと就職できない」という理由でスクールを選ぶ必要はありません。
学習方法だけで採否が決まるわけではありません。募集要項に合うスキルと、その根拠になる作品を準備しましょう。
独学とスクールの選び方は別の記事にまとめています。
料金の幅が大きく、同じ「Webデザイン」でも学べる範囲がまったく違うので、先に自分がどの職種を目指すかを決めてから見てください。
5. Adobe Creative Cloud をどうするか
PhotoshopとIllustratorを使うなら、Adobe Creative Cloudの契約が必要です。
利用するアプリと契約期間に合わせて、Adobe公式のプランを比較してください。
講座とソフトを組み合わせた案内を見るときは、講座の受講対象とソフトの購入資格を分けて確認してください。Adobeのスクールパートナー案内には、2026年6月でコースに付属する製品の特別価格提供を終了し、一般社会人の受講生は学生・教職員向け個人版の購入対象にならない旨が掲載されています（2026年10月21日確認）。
一方で、デジハリ・オンラインスクールやアドバンスクールオンラインには、ライセンス付き講座の案内が掲載されています。学校側の掲載だけで自分が購入対象だと判断せず、対象者、製品名、適用される利用条件を申込先とAdobeに確認しましょう。確認できるまでは、通常の個人向けプランも含めて予算を考えます。
講座とソフトで別々に確認すること
- 希望する制作を学べるか。動画視聴、質問、課題添削の有無と期間
- 自分の在籍状況や居住地が対象になるか。個人・法人のどちらで利用できるか
- ソフトの利用期間、利用開始日、既存契約との関係、更新時の費用
- 支払総額、解約・返金条件、対象資格を確認する書類
例えばデジハリのAdobeマスター講座FAQには、動画視聴3か月、ソフト利用はコード登録から1年間、課題添削は2024年12月の改訂で終了と記載されています。ソフト付きの入門講座を、作品添削や就職支援まである講座と同じものとして比較しないようにしましょう。申込資格やライセンス条件は、上記の制度変更も含めて申込前に確認してください。
6. どのくらいの期間がかかるか
経験、目指す仕事、確保できる時間で変わるため、一律の月数では決められません。次の到達点を使って計画を立て、予定と実際にかかった時間を見直しましょう。
| 段階 | 次に進む前の確認 | 残す成果物 |
|---|---|---|
| 基礎練習 | 見本や手順をそのまま写すだけでなく、文字や配置を自分で変更できる | 小さな課題と変更理由 |
| オリジナル制作 | 目的と制約に合わせて作り、第三者の確認で見つかった問題を直せる | 画面案・試作品・修正記録 |
| 応募準備 | 募集要項に対応する作品があり、担当範囲と判断理由を説明できる | 提出用ポートフォリオと作品説明 |
使える時間に合わせて、1週間で取り組む課題を小さく区切りましょう。
教材を読む時間だけでなく、作品を作り、直す時間も予定に入れてください。
7. 最初の仕事をどう取るか
未経験から仕事につながる経路は、大きく3つです。
| 経路 | 向いている人 | 現実的なところ |
|---|---|---|
| 制作会社に就職 | 基礎から教わりたい／実務経験を積みたい | 未経験者の募集有無、担当業務、入社後の指導体制を確認する |
| 事業会社のWeb担当 | 腰を据えて1つのサイトを育てたい | デザイン以外の更新・分析・社内調整が業務に含まれるか確認する |
| フリーランス・副業 | 時間の融通を優先したい | 制作以外に、営業・見積もり・進行管理・納品後の対応も必要 |
副業では、知人からの紹介、直接提案、業務委託の募集、クラウドソーシングなどが候補になります。
依頼を受ける前に、制作範囲、素材の準備、修正回数、納期、報酬と支払日、納品後の対応を確認しましょう。実績として公開したい場合は、公開できる範囲も依頼者と合意します。最初の案件でも、無理のない条件で最後まで対応できるかを基準に選びます。
まとめ
- 「Webデザイナー」は複数の職種の総称。
どれを目指すかを先に決める - 募集要項を確認し、作品と説明で担当できる範囲を伝える
- 希望職種に合う作品を用意し、実装も担当するなら動作するサイトを示す
- 独学で続けられるなら独学で構わない。
スクールは添削・質問・学習管理など必要な支援で選ぶ - 時間を確保できるかを、教材選びより先に考える
この記事を書いた会社
SHIKUMIを運営するMOTOKI合同会社は、WordPressに特化したホームページ制作会社です（埼玉県所沢市）。
制作実績と担当範囲を公開しています。
単一の自社メディアで月間30万PVを達成した過去の実績があります（現在の月間PVではありません）。
MOTOKIはスクールの運営会社ではありません。Web制作の立場から、学習内容や作品づくりの確認点を紹介しています。掲載する講座の一部には広告・アフィリエイトリンクを含みます。
Webデザインの仕事・就職に関する記事
この記事は「必要な技能と、学ぶ順番」を扱っています。
関連する内容は、それぞれ別の記事にまとめています。
- 制作会社は未経験者のどこを見ているか｜採用側がポートフォリオのどこを見ているか
よくある質問：Webデザイナーになるとき
Webデザイナーは、どんな仕事のことですか？
サイトのデザイン、HTML/CSSによる実装、バナー制作、運用更新などを担う仕事です。同じ職種名でも担当範囲は会社ごとに異なります。まず募集要項で、希望する仕事に必要なスキルを確認しましょう。
制作会社は、未経験者の何を見ていますか？
作品の目的、要件への対応、自分で担当した範囲、判断の理由が伝わるかを確認できるポートフォリオを準備しましょう。実装を担当する職種なら、動作するサイトも有効な判断材料になります。
どんな順番で学べばよいですか？
サイト制作を目指すなら、HTML/CSSとデザインツールの基礎を学び、練習、オリジナル制作、公開後の確認へ進む流れが一例です。希望職種で必要な技術に合わせて調整してください。
資格は、取っておくべきですか？
応募先の要件を確認してください。資格の学習と並行して、スキルを具体的に示す作品と説明を準備することが大切です。
スクールに通う価値があるのは、どんな人ですか？
添削や質問への回答、学習計画、就職活動の支援が必要な方には選択肢になります。料金だけでなく、添削回数、回答時間、支援期間、作品制作の範囲を比較しましょう。
Adobe Creative Cloudは、どうすればよいですか？
必要なアプリ、利用期間、個人・法人の区分を決めて、公式のプランを比較してください。ライセンス付き講座は、受講資格とソフトの購入資格を別々に確認します。2026年の制度変更については本文のAdobe公式案内も確認してください。
どのくらいの期間がかかりますか？
使える時間と経験によって異なります。本文の到達点を使って計画を見直しましょう。期間だけで判断せず、自分で制作し、意図を説明し、表示・動作を確認できるかで進み具合を確かめましょう。
最初の仕事は、どうやって取りますか？
制作会社への就職、事業会社のWeb担当、フリーランス・副業などがあります。未経験者の募集条件や担当業務を確認し、応募・提案に合う作品を用意してください。副業では制作に加えて見積もりや納品後の対応も必要です。
