【初心者向け】Web制作とは？副業で始める基礎とAI時代の予想

「Web制作」と聞いた時に最初に思いませんか？

先に答えを置くと、Web制作とは「お客さんの困りごとをWebサイトで解決する仕事」です。

ホームページをつくる人、というとわかりやすいでしょうか。

デザイン・コーディング・進行管理に分かれていて、副業から始めて月数万〜十数万に育てていく人が一定数います。

AIで作業の一部は確実に置き換わりますが、基礎を理解した人が「AIを使う側」に回って生き残る、というのが2026年5月現在の僕の見方です。

10分くらいで読めるようにまとめたので、Web制作が自分に合いそうかを判断する材料にしてもらえたらと思います。

また、あえて専門用語を多めに使用しています。解説も入れますが、そう言うのがあるんだな〜。程度にでも覚えておくと良いです。

Web制作とは？30秒でわかる定義

Web制作とは、ざっくり言うと「Webサイトをゼロから作る仕事」です。

会社の公式サイト、お店のホームページ、商品ページ、ブログ、予約サイト。普段スマホやPCで何気なく見ているWebページのほとんどは、誰かが「これを作ってください」と発注して、Web制作者が形にしたものです。

もう少し踏み込むと、Web制作は「お客さんが抱えている困りごとや叶えたいことを、Webという道具で解決する仕事」と僕は捉えています。

たとえば「お店の集客がうまくいっていない」「採用に応募が来ない」「商品が売れない」という困りごとに対して、見やすいサイトを設計し、文章を整え、申し込みボタンを置く。デザインやコードは目的ではなく、お客さんの困りごとを解決するための手段なんですよね。

細かい言葉の違いを覚えるより、「Web上に何かを作って公開する仕事ぜんぶ」とまずはざっくり認識してもらえれば十分です。副業で受ける案件のほとんどは、この大きなくくりの中に入ります。

Web制作で作る「Webサイトの種類」4つ

「Webサイト」と一口に言っても、目的によって作るものはかなり違います。イメージしやすくするために、よくある4種類をざっくり整理しておきますね。

細かく分けるともっと出てきますが、最初は

• コーポレートサイト
• LP(ランディングページ)
• ECサイト
• メディアブログ

の4つを覚えておけば十分実用になります。

①コーポレートサイト（会社の公式ホームページ）

会社や個人事業主の「公式の名刺」みたいな存在のサイトです。事業内容、サービス、会社概要、採用情報、お問い合わせ。一番ベタで、副業案件としても件数が多いタイプですね。

10ページ前後の規模が多く、ページごとの構成パターンが決まっているので、初心者が最初に挑戦しやすい案件でもあります。

②LP（ランディングページ）

1枚の縦長ページで、商品・サービスの申し込みや問い合わせに特化したサイトです。広告のリンク先によく使われます。

デザインのトレンドが派手めで、コピーライティングや構成力が問われます。1ページなのでボリューム自体は小さいですが、結果（コンバージョン）を求められるシビアな案件でもあります。

時期限定のものが多かったりして、納期が厳しい案件が多くちょっと初心者には難しい印象です。

③ECサイト（ネットショップ）

商品を売るためのサイトです。Shopify、BASE、STORES、WooCommerceあたりのプラットフォームを使うことが多いですね。

決済・在庫・配送など考えることが多く、運用も伴うので副業初心者にはハードル高め。ただ、立ち上げ後の保守で月額契約につながりやすい点は魅力です。

単純なコーディング、もしくはデザイン業にプラスECとして専門の学習が必要になるジャンルです。全体的な単価高めで、先行きの明るいジャンルです。

④メディア・ブログサイト

記事を投稿し続けるタイプのサイトで、WordPressで作るのが定番です。このdawn-web.comもメディアサイトに分類されます。

初期構築自体はそこまで難しくないですが、「投稿しやすさ」「読みやすさ」「SEO」などを考慮した設計が必要になります。自分でブログを運営する経験があると、案件にも応用しやすいタイプです。

Shopifyは教材が少なく、あっても英語のものが多い、バージョンアップが多く学習コストが高い、などの参入障壁の高さがありますが、デイトラは実務レベルまで身につけられるカリキュラムを出しています。

カリキュラムをこなして唯一無二のスキルを身につけると大きな武器になります。

Web制作に関わる人たち
（職種と役割）

1つのWebサイトを作るとき、現場では複数の職種の人が関わります。副業として「自分はどのポジションを目指すか」を決める時の判断材料になるので、それぞれの役割をざっくり押さえておきましょう。

制作会社や案件規模によって担当範囲は変わるんですが、よくある分け方はこの4つです。副業フリーランスの場合は、これを1人で複数兼任するケースが多くなります。

①ディレクター（進行管理・お客さん対応）

お客さんと直接やりとりして、要望をヒアリングし、スケジュールと予算を管理して、デザイナー・コーダーに指示を出す人。プロジェクト全体の責任者ですね。

技術スキルそのものよりも、コミュニケーション力・段取り力・ドキュメント力が問われます。副業フリーランスは、これを自分で兼任することがほぼ前提になります。お客さんといっしょにビジネスを成長させたい、一緒に事業を盛り上げたい！という考えの方が向いていると思います。

Webディレクターと呼ばれます。

②デザイナー（見た目・配色・構成を考える）

Figma、Adobe XD、Photoshopなどを使って、サイトの見た目を設計する人。色使い、タイポグラフィ、写真の選定、ボタンの配置などを決めていきます。

センスが必要そうに見えますが、最近は「型」と「論理」で組み立てる比重が大きく、未経験からでも体系的に学べる職種です。

センスは勉強で磨ける！１！Webデザイナーと呼ばれます。

③コーダー（HTML/CSS/JSで形にする）

デザイナーが作ったデザインを、HTMLとCSS、必要に応じてJavaScriptを使って、ブラウザで表示できる形に作り上げる人。WordPressのテーマ実装まで含めると、現場で一番需要が安定しているポジションです。

覚える範囲がはっきりしていて、独学のロードマップも整っています。副業初心者がまず狙うなら、僕はコーダーをおすすめします（理由は後でまとめます）。

Webコーダー、フロントエンドエンジニアなどと呼ばれています。

副業で目指すならどのポジションがいい？

未経験から始めるなら、まずはコーダーかデザイナーから始めるべきです。

ディレクターをするには多少なりともコードかデザインの知識が必要になることがあります。

どっちがいいの？というのは、どうしても向き不向きがあります。ここはフィーリングでいいと思います。

直感というのは意外と馬鹿になりませんが、どうしても決めきれない方は以下の記事を見てください。

• コーダー：HTMLやCSSなどでWebサイトとして使えるようにする。
• デザイナー：クライアントのイメージや想いを形にしていく。Webサイトを作る第一歩の仕事。
• ディレクター：クライアントの意見を取りまとめ、コーダー・デザイナーに指示を振る。

Web制作の流れ
（制作会社版／個人で受ける版）

ここはWeb制作の入門記事だと「5ステップで解説」みたいなパターンが多いんですが、それって基本「制作会社が大型案件を回すときの流れ」なんですよね。副業で個人受注するときは、もう少しシンプルに、現実的に動きます。

両方を並べておくので、自分が想定している働き方と照らし合わせてみてください。

制作会社版（5〜7ステップ）

個人で受ける版（副業フリーランス目線）

個人で受ける場合は、もう少しコンパクトに動きます。クラウドソーシングや知り合い経由で1人で受けるパターンですね。

個人で受ける場合、コーポレートサイト1本でだいたい1〜2ヶ月。会社員と兼業なら、平日夜と土日に少しずつ進めて、3ヶ月くらい見ておくと無理がないです。

大事なのは、最初の案件で利益を出すことより「納品まで完走する経験」を積むことだと思っています。1本完走できると、2本目以降の見積もりも組めるようになりますからね！

Web制作に必要なスキル

「Web制作=プログラミング」というイメージがあるかもしれませんが、実際に副業レベルで必要なスキルは、世間で言われるほど広くないです。最初に手をつけるべきものを優先順に並べておきますね。

コーダー、デザイナーで全く種類が違うのでそれぞれに分けています。

コーダー

HTML（文章構造を作る）

Webページの骨組みを作る言語です。見出し・段落・画像・リンクなどを定義します。

Web制作に関わる以上逃れられない言語です。デザインを「Webサイトとして機能」させるために使用します。

AIに触れるときもこの言語の事を知っていると、細かい箇所の修正、手直しが簡単にできて今後ますます重要になると思います。

CSS（見た目を整える）

HTMLで作った構造に、色・サイズ・配置・装飾を加える言語です。Web制作で一番奥が深く、一番面白い部分でもあります。
HTMLだけだとテキストが並んだだけのページが出来てしまうのでCSSで装飾します。HTMLとセットで覚えます。
昔は制限が多く、カクカクっとしたHPがよく見られましたが、最近は柔らかな雰囲気を作ったり、見やすいサイトになったりと日々進化しています。

JavaScript（動きを付ける）

クリックでメニューが開く、スライダーが動く、アニメーションがつく、といった「動き」を担当します。

副業レベルなら、いきなり全部覚えなくても、jQueryやライブラリを使って「動きを真似する」ところから始めて大丈夫です。プログラミング未経験者がここで一番つまずくので、HTML/CSSがしっかり書けるようになってから手をつけるのがおすすめです。

HTML/CSSと違い、非常に「プログラミングしてる」感のある言語です。

WordPress・Figma・Git

• WordPress：「ワードプレス」Web制作案件では使われている事が非常に多いです。世のWebサイトの6~8割はWordPressで作られているので、制作・修正・改修に関わることが出来ます。
• Figma：デザイン確認・デザインデータの受け取り。AIにデータを渡す際にも使います。
• Git：バージョン管理システム。使うことが出来たら幅が広がります。

デザイナー

デザインの基礎知識

デザインを「センス」ではなく「論理」で構成するための骨組みです。

• 関連する情報を近づける（近接）
• 要素の端を揃える（整列）
• 同じルールを繰り返す（反復）
• 情報の優先度をハッキリさせる（対比）

これらを守るだけで、誰にとっても読みやすく、美しいレイアウトが作れます。AIにデザインを指示・修正する際も、この原則を理解しているかどうかが、クオリティの差となって現れる一生モノのスキルです。

デザインの言語化能力

「なぜこの色、この配置にしたのか」を客観的に説明する力です。

デザインは自己表現ではなく、クライアントの課題を解決する手段。

根拠（視線誘導や心理的効果など）を持って説明できれば、チームの納得感が高まり、プロジェクトがスムーズに進みます。

AIが瞬時に複数のデザイン案を出せる時代だからこそ、「なぜこの案が最適なのか」を人間が定義し、言葉で伝えるスキルはデザイナーの価値そのものになります。

Figma

Web・アプリ制作の現場で「世界標準」となっているデザインツールです。

ブラウザ上で動作し、チームメンバーとリアルタイムで共同編集できるのが最大の特徴。

使いこなせば試作品（プロトタイプ）を作って実際の動きを確認したり、エンジニアに設計図を共有したりする作業がこれ一つで完結します。

2026年現在はAIによるレイアウト補助機能も充実しており、Webデザイナーを目指すなら、まずは一番に使いこなしたい必須ツールです。

Adobe製品

写真加工の「Photoshop」と、ロゴやイラスト制作の「Illustrator」を中心としたプロ仕様のツール群です。

Figmaが「全体の設計図」を作るのに対し、Adobeは「素材そのもの」を磨き上げるために使います。

高品質なビジュアル制作や複雑な画像編集には欠かせません。最近ではアドビ独自の生成AI（Adobe Firefly）との連携により、想像したイメージを爆速で形にするクリエイティブな力がより強化されています。

AI時代のWeb制作はどうなる？【現役フリーの予想】

2024年以降、ChatGPT・Claude・Cursorのようなコーディング支援AIが急速に進化して、Web制作業界は確実に変化の真っ只中にいます。「Web制作はオワコン」という声も聞こえてきますし、副業候補として始めるのを迷う方もいると思うんですよね。

今更覚えても、AIがパパっと作ってくれるんでしょ？みたいな。

正直、僕も「楽観してる」とは言えないです。でも「だから勉強しなくていい」とも全く思っていません。これからWeb制作を始める人にこそ知っておいてほしい、2026年5月現在の僕の見方をまとめます。

①コーディングはAIに置き換わる？→部分的にYES

HTML/CSSのパターン化された記述は、AIが下書きするのが当たり前になりつつあります。僕自身、案件のコーディング時間が体感で半分くらいになりました。

ただ、これは「コーダーが要らなくなる」とは違います。AIが出したコードが正しいか・最適か・お客さんの要望に合っているかを判断するために、結局HTML/CSS/JSの基礎理解は必要なんですよね。

AIが出したコードはパット見はすごくキレイです。ですが思わぬところ、細かい所でどうしても修正が必要になります。

そう言うところを正すための知識、理解度は絶対に必要だと考えます。

②デザインはAIで完結？→今のところNO

画像生成AIで「こういうデザインのサイトを作って」と頼むと、ある程度のラフは出てきます。でも、お客さんの事業内容・ターゲット・予算・ブランドトーンを踏まえて「最適解」を出す部分は、まだ人間の判断が必要です。

むしろAIに「3案出して」と頼んで、その中から人間が選び、調整して仕上げるという使い方が定着しつつあります。

デザインは理屈や型である程度は作れます。ですが、「ある程度」から踏み込んで作れるのは人間だけじゃないかなぁと。

③お客さん対応・進行管理はAIで置き換え不可

ヒアリング、提案、修正対応、納品後のフォロー。「人間同士の信頼関係」が必要なところは、AIで代替しにくい領域として残ります。

むしろ、AIで作業効率が上がった分、お客さんとのコミュニケーションに時間をかけられるようになる人ほど、これから強くなる気がしています。

僕自身、スケジュール管理や進捗管理はAIに任せています。それより、全体の確認、コミュニケーションに時間をかけるようになり、ミスや漏れが大きく減っています。

④AIを使う側に回る人が生き残る

結局、これに尽きると感じています。AIに仕事を奪われる側か、AIを道具として使いこなす側か。後者に回るには、「AIが出したものを判断・修正できる基礎力」が前提になります。

「AIに任せれば自分は何も知らなくていい」は通用しないんですよね。AIに正しい指示を出すにも、出てきた結果を評価するにも、結局基礎理解は必要です。

基礎理解についてピンとこないなぁ、という方は地元のローカルな地名のことを調べてみると面白いですよ。「なんかちょっと違うんじゃない？」そんな答えが帰ってきたりします。

自分が知っていることとズレたこと言ってる。というのが実感できます。

5年後10年後にどうなっているかは、正直誰にもわかりません。それでも、基礎を理解した人がAIを道具にして仕事をする、という大筋は変わらないと思っています。だからこそ「とりあえず勉強しよう」というスタンスで僕は今日もやっています。

工場勤務17年の僕がWeb制作を選んだ理由

少し体験談的な話になりますが、僕は20歳から37歳まで17年間、製造業の工場で機械加工をやっていました。立ち仕事、油まみれ、切り粉まみれ、腰痛持ち。よくある話です。

30代を過ぎたあたりから「このまま定年まで続けるのは無理だな」と感じはじめて、いろんな副業候補を眺めていたんですよね。せどり、ブログ、プログラミング、Webライター。最終的にWeb制作を選んだ理由を、当時の自分の気持ちで書いておきます。

理由：在庫を持たない・初期投資が小さい

せどりは在庫リスク、動画編集は機材投資、ブログは収益化までの時間がかかる。Web制作は「PC＋ネット＋学習教材費」だけでスタートできます。

会社員のまま、失敗してもダメージが小さい範囲で挑戦できる。これも大きい理由でした。

だめなら違う副業を試せばいい。PCを売れば良い。などの逃げ道があったので気楽に構えることが出来たんだと思います。

理由：スキルが資産になる

工場勤務で身についたスキルは、正直その会社・その機械でしか通用しないものが多かったんですよね。HTML・CSS・WordPressのスキルは、どこに行っても通用する「持ち運べる資産」になります。

会社が傾いても、住む場所が変わっても、自分の手元にスキルが残る。これは工場勤務時代には絶対に手に入らない感覚でした。

エンドミルやドリルの知識なんて日常生活で役に立ったことがありません。切削速度の計算式なんて忘れました。

理由：副業から本業に育てられる

いきなり会社を辞めるのはリスクが大きすぎました。でもWeb制作は、副業で月数万から始めて、少しずつ案件を増やして、フリーランスに移行できる仕事です。

「会社員→副業で実績作り→独立」というルートが現実的に存在する。この道筋がはっきり見えたのが、最終的にWeb制作を選んだ決め手でした。

ちなみに、Web制作はラクではないです。深夜まで作業することもありますし、修正対応で疲れる日もあります。でも「自分で選んでいる」感覚があるので、工場で言われた通り動いていた頃とはストレスの質がぜんぜん違います。

副業からWeb制作を始める最初の一歩

ここまで読んで「やってみようかな」と思った方に、副業から始めるときの最初の一歩を整理しておきます。やることをシンプルにまとめると、選択肢は2つだけです。

「お金をかけずに独学で始める」か「スクールに投資して効率を取る」か。どちらが正解かはその人の状況次第なので、フラットに両方を紹介します。

ルート①：独学（無料〜教材費数千円）

Progate・ドットインストール・YouTube・無料ロードマップ記事。今は独学でも使える教材が揃っています。「お金をかけずに、まず適性を見たい」という方にはこちらがおすすめ。

ただし、独学には「挫折率の高さ」「質問できる相手がいない」「進捗管理を自分でやる必要がある」という課題があります。会社員と兼業ならなおさら、自走力が求められます。

今だとAIから学ぶことも出来ます。最高の教材となりえるので、是非試してもらいたいです。

独学で始める場合のロードマップは、無料版を別記事で公開しています。

ルート②：スクール（投資10〜30万円）

デイトラ・忍者CODE・侍エンジニア・テックアカデミーなど、Web制作系のオンラインスクールがいくつもあります。「お金で時間を買う」「質問できる環境を確保する」「最初から最短ルートで進む」という選び方ですね。

僕自身はデイトラのWeb制作コースを受講して、1年後に初案件を取れました。会社員と兼業で進めるなら、僕個人としてはスクール投資の方が結果的に近道だったと感じています。

スクールを受講する最大のメリットは安心と保証だと思っています。

ここまでやればOK、というラインが引かれているのはわかりやすいです。独学だとどうしても「勉強したけど大丈夫かな？もっとやったほうが良いかな？」という不安がつきまとってしまいます。

スクール選びで迷う方は、5社の特徴を診断型でまとめた記事があります。

どっちを選ぶか迷ったら

判断基準として、僕がよく聞かれるときに伝えているのはこんな感じです。

• 独学が向く：自走力に自信がある。まず適正を見たい。そんなにお金をかけたくない。
• スクールが向く：学習内容で迷う。サポートしてもらいたい。

「迷うならまず独学で1ヶ月触ってみる」というのも全然アリです。Progateを1ヶ月やってみて、続きそうならそのまま独学、しんどそうならスクール、という判断もできますからね。

全体のロードマップをじっくり見たい方は、こちらのピラー記事もどうぞ。

よくある質問

Web制作を始める前によく聞かれる質問をまとめておきます。

Web制作とWebデザインは違う？

厳密に分けると、Web制作は「サイトを作る工程全部」、Webデザインは「見た目を設計する工程」を指します。ただし求人やスクールでは混在して使われていて、現場ではほぼ同じ意味で扱われることも多いです。副業で受ける場合、両方できると単価が上がりますが、最初はどちらか1つに絞って学ぶのがおすすめ。

未経験でもできる？何歳まで大丈夫？

未経験から始める人がほとんどです。年齢も30代・40代・50代から始めて副業収入を作っている人が普通にいます。僕自身も37歳・工場勤務17年・PCスキルほぼゼロからスタートしました。年齢より「続けられるか」の方がよっぽど重要だと感じています。

AIで仕事が無くなるって本当？

「基礎を理解せずAIに頼り切る人」の仕事は減ると思います。一方で「AIを道具として使いこなす人」の生産性は上がります。むしろこれから学ぶ人は最初からAIと一緒に育てる強みがある、と僕は捉えています。基礎を学ぶ意味は、AI時代でもむしろ増えていると思いますね。

副業から始めるのと制作会社に入るのどっちがいい？

会社員を続けながらリスクを抑えたいなら副業ルート、若くて時間があってフルコミットできるなら制作会社ルートがおすすめです。30〜40代で家族がいる方は、いきなり転職せず副業でスキルを身につけてから判断する方が現実的かなと思います。僕も副業から入ってフリーランスになったクチです。

まとめ：Web制作は「会社員のまま始められる仕事」

長くなりましたが、副業でWeb制作を始める前に知っておきたい全体像をまとめておきます。

正直、Web制作は「ラクして稼げる副業」ではないです。学習にも時間がかかりますし、案件を取るには営業も必要になります。でも会社員のまま、PCとネットがあれば始められて、続けるほどスキルが手元に積み上がっていく仕事です。

17年工場で働いていた僕でも、37歳から始めて副業→フリーランスに移行できました。年齢も学歴もPCスキルも、始める前に思っているほどハードルにはなりません。

このサイトでは、副業でWeb制作を始めて独立するまでに必要なことを、僕の実体験ベースで書いています。次の一歩として、独学のロードマップやスクール比較の記事も置いてあるので、気になるところから読んでみてくださいね。