★ はじめての方はこちらをクリック ➠ 『1ページでわかる《独学応援ブログ》のおすすめ記事』

【2026年版】Web制作 独学応援ロードマップ|AIメンターと未経験から案件獲得

平均読了時間→ 8
この記事の内容を3行で!
  1. Web制作は独学でも習得できるし、案件獲得まで到達できる。
  2. 生成AIを学習のメンター代わりに使えるかどうかで、独学の速度とコストが変わる。
  3. HTML/CSS・jQuery・WordPress・ポートフォリオ・営業まで、低予算で進める手順が1記事にまとまっている。

※本記事は広告(アフィリエイトリンク)を含みます。

30代・会社員

会社員をしながら、副業でWeb制作を始めたいと思っています。30歳・未経験で、しかも完全独学です。本当にこんな状態から、案件を取れるようになるんでしょうか?

30代・主婦

独学のやり方に自信がありません。スクールも気になりますが、子育て中で時間も限られていて、できるだけお金をかけずに進めたいんです……。

メンターとして相談を受けていると、こういう声を本当に多くいただきます。

僕自身、30歳・高卒・未経験の会社員から、副業としてWeb制作の独学を始めました。

2020年2月のことです。

そこから積み上げた学習時間は1,000時間。

単価50万円の案件を受注できるようになったのは、独学開始から10ヶ月後のことでした。

この経験から、会社員が副業として独学で始め、Web制作を仕事にしていくルートは、特別な才能がなくても十分に現実的だと強く考えています。

だからこそ断言します。

Web制作は、独学でも習得できます。

デイトラのようなスクールで学ぶ人もいますし、市販の書籍や無料動画を頼りに独学で身につける人だって今でもたくさんいます。

ただ、ひとつだけ、2年前とはっきり変わったことがあります。

生成AIを「メンター代わり」に使えるかどうかで、学習の速度が大きく変わる時代になったんです。

2020年に独学を始めたとき、僕の手元に頼れるAIなんていませんでした。

あの頃と同じ学習を、今ならAIを活用することで効率良く進められます。

変化の大きさは人によりますが、独学のコストとハードルを下げる強力な武器が増えたことは確か。

「AIに仕事を奪われる」「Web制作はもうオワコンだ」という声が聞こえない日がないくらい、その影響度は甚大です。

ただ、これから学ぶ独学者にとってAIとは積極的に活用すべき道具。

この記事は、そんな前提で全体的に書き直した2026年版です。

こんな人に読んでほしい!

✅ 会社員をしながら、副業でWeb制作の収入をつくりたい
✅ 在宅でできるスキルを身につけたい
✅ スクールに通わず、できるだけ低予算で学びたい
✅ 自分にWeb制作が向いているのか、まず確かめたい
✅ AIを独学にどう使えばいいのか知りたい

このロードマップが、あなたの独学の頼れる地図になれば幸いです。

それでは、さっそく始めていきましょう!

本記事の目次

Web制作で稼ぐまでの全体像〜5ステップ

独学の方法を説明する前に、まずは未経験から独学でWeb制作を仕事にするまでの流れを確認しておきましょう。

ゴールまでの地図がないまま走り出すと、途中で「今やっていることが何につながるのか」を見失い、迷いや不安から手が止まりやすくなってしまうからです。

僕も独学中に何度か挫折しかけましたが、その多くは「この道で合っているのか?」が不安になったときでしたし、逆に進む順番とその先の展望をハッキリさせてからは迷わず前に進めるようになりました。

そこで、まずはじめにWeb制作を仕事にするまでのルートを確認しておきましょう。

案件獲得までの5つのステップ

僕は30歳・高卒・未経験の会社員という状態で独学を始め、10か月後に単価50万円の案件を受注できました。

その後、メンターとして多くの方の相談に乗ってきた実感として、これは特別な才能がなくても再現できる道だと考えています(もちろん、到達までの期間には個人差があります)。

そのための流れが、次の5ステップです。

  1. Web制作スキルを身につける
  2. 実績を作るために採算度外視で営業する
  3. 実績を武器に信用を得て単価を上げる
  4. 外注先を見つけて仕事を増やす
  5. 営業・制作を仕組み化する

① Web制作スキルを身につける

まずは「Web制作という商品を提供できるレベル」になることが出発点です。

目安としては、デイトラを卒業できる程度の実力をイメージしてください。

スクールに通わず独学でこの状態を目指す人は、このあと説明する順番をそのまま進めていただければ大丈夫です。

この段階でAIを活用するなら:

エラーの原因特定や自分の生活パターンに基づいた学習計画の設計を相談すると、立ち止まる時間を減らせるでしょう。

具体的な使い方は、次の章「AIを最強のメンターにする独学法」でまとめて解説します。

② 実績を作るために採算度外視で営業する

スキルがついたら、次は「自分にそのスキルがあることを知ってもらう」段階です。

多くの人がここで、いきなり大きく稼ごうとして空回りします。

最初は焦らず、実績と信用を積むことを優先しましょう。

そのために、最初の数件は採算度外視のつもりで動くのが現実的です。

この段階でAIを活用するなら:

提案文の下書きや応募先のリサーチの壁打ち相手などとして頼りましょう。

営業の具体的な進め方は、記事後半の営業パートで詳しくご紹介します。

③ 実績を武器に信用を得て単価を上げる

実績が増えると、クライアントからの信頼も積み上がります。

この段階では、「この単価では申し訳ない」と思ってもらえる仕事を続けることがポイントです。

丁寧で誠実な対応の積み重ねで、自然な単価アップにつなげましょう。

この段階でAIを活用するなら:

納品前の品質チェックやコードの改善提案にAIを使うと、納品物の精度を一段上げられます。

④ 外注先を見つけて仕事を増やす

依頼が増えてくると、ひとりでは抱えきれない量になってきます。

そのときこそが信頼できる外注先を確保し、自分の時間を守りながら収益を伸ばすフェーズ。

単価だけでなく、自由な時間を増やす設計を考える段階とも言えます。

この段階でAIを活用するなら:

指示書やマニュアルのたたき台づくりに使うと、外注先とのやり取りがスムーズに。

⑤ 営業・制作を仕組み化する

ここまで来れば、フリーランスとして安定して収入を得られる状態です。

さらに制作体制を整えて仕組み化することで、営業し続けなくても仕事が入る状況に近づきます。

紹介が増える、制作パートナーと案件が回る、長期契約で継続収入が生まれる。

こうした状態をつくることが、ひとつの目標地点です。

この段階でAIを活用するなら:

定型業務のテンプレ化や繰り返し作業の自動化で大活躍します。

ひとりで抱え込まないこと

ここまでの流れを見て、イメージは掴めたでしょうか。

正直に言うと、すべての工程を完全にひとりでこなすのは決して簡単ではありません。

だからこそ、早い段階で相談できる相手や、同じ方向を向いた人々が集まる環境を持っておくことが効いてきます。

SNSやコミュニティで近い立場の人とつながるだけでも、独学の辛さはかなり和らぎますのでぜひ一度覗いてみてください。

そして今は、その「相談できる相手」の役割の多くをAIに任せられます。

次の章ではそんなAIの活用方法を解説しているので、ぜひご参考ください。

最初の一歩は「教材選び」

独学の初期でつまずく原因の多くは、教材選びにあります。

自分のレベルに合わない教材を選ぶと、基礎が固まらないまま壁にぶつかり必要以上に自信を失ってしまうからです。

自分に合った教材は迷わず進むための地図のようなものですから、教材選びは独学の大切な最初の一歩になります。

どれを選べばいいか迷う場合は、目的別にまとめたこちらの記事を参考にしてください。

独学教材まとめました

AIを最強のメンターにする独学法

冒頭にも書いたとおり、僕が独学を始めた2020年2月には生成AIなんてありませんでした。

分からないことはProgateの解説を読み返し、YouTubeを止めながら写経し、それでも詰まればUdemyを買い足す。そうやって1,000時間を積み上げました。

しかし、今は事情が全然違います。

僕らの手元には、いつでも質問に答えてくれる相棒=AIがいます。

これが独学のコストとスピードを大きく変えました。

ここで僕の立場をはっきりさせておきますが、ここに書いていることは「スクールなんて要らない」という話ではありません。

スクールには、強制力・添削・コミュニティという完全独学にはない価値があります。

ここで伝えたいのは、「できるだけお金をかけずに独学したい人にとって、AIは今いちばん現実的な選択肢になった」という一点です。

スクール比較という土俵の外に「AIという第3の道」がある、という整理だと理解してもらえると幸いです。

ただし、AIは万能ではありませんし、作業を丸投げしてしまっては何の知識も身につきません。

「AIに任せる部分」と「自分で考える部分」を切り分けられることが、新しい時代の独学スキル。

この章の続きでは、その線引きを具体的に示していきます。

学習のパートナーは「使い慣れたAI」ひとつでいい

このブログでは、学習のパートナーとして、まずはあなたが使い慣れたAIをひとつ選ぶことを薦めています。

Claude(クロード)でもChatGPT(チャットGPT)でも、どれでも大丈夫です。

どのAIも毎週のように進化していて「これが最強」と断定すること自体がリスクになるくらいなので、「まずは1つで始めて、慣れたら自分で他のAIと比べてみる」くらいのスタンスで大丈夫。

初心者の場合、複数のツールを比べているうちに肝心の学習が進まなくなるという状態に陥りやすいというリスクもあるため、まずは思い切って使用するAIをひとつに絞ってください。

すでに触ったことのあるものがあれば、それで十分です。

そして、どんなツールも乗り換えられますが、乗り換えるための土台=質問の作法こそが、この段階で学ぶ価値のある本当のスキルです。

有料プランについても触れておくと、結論はまず無料で十分

学習が軌道に乗って質問が増え、無料枠の上限が気になり始めたら、そのとき月数千円のプランを検討すれば大丈夫です。

最初から課金する必要はありません(各社プランは頻繁に変わるので、契約前には必ず最新情報の確認をお願いします)。

基礎学習中は、AIに「コードを書かせない」

ここで、いちばん大事な注意点を先に伝えておきます。

基礎学習の間、AIにコードを書かせるのは本末転倒です。

いま身につけようとしているのは「自分の手でコードを書ける力」。

それをAIに肩代わりさせてしまうと、肝心の力が育たないまま先に進むことになります。

基礎学習中のAIは、質問・解説・エラーの原因の切り分け・学習計画づくりといった「対話」のために使ってください(具体的な役割は次の項で整理します)。

そして、コードは必ずVS Codeなどのテキストエディタに、自分の手で書いてください。(エディタの準備は、実際に自分の手で書きはじめるHTML/CSSのSTEP4で改めて説明します。)

なお、コードの生成・修正・実行までを一気にこなす「エージェント型」のAIツール(Claude Codeなど)もありますが、それが本領を発揮するのは基礎を終えて実務に入ってから

これについては、この記事の終盤で改めて紹介します。

まずはAIに学習計画を相談してみよう

手始めに、選んだAI(ClaudeやChatGPTなど)に、以下のプロンプトであなた自身の学習計画を相談してみるのはいかがでしょうか?

Web制作で副業を始めるために、Web制作の独学を始めたいです。
https://meganelog.site/webdesign-selfstudy-roadmaps/ に書かれていることを参考に自分の学習計画を考えたいのですが、あなたにどんな情報を伝えれば僕に適した計画を組み立てられますか?

AIに任せる4つの役割

独学でつまずきやすいポイントは様々ですが、その中でも特にAIを頼るべきことといえば以下の4つ。

  1. 疑問を即解決:以前はスクール講師やメンターに相談していた「これ、何で動かないんでしょうか?」をいつでもすぐ相談できる。
  2. 学習の順番と計画づくり:以前はメンターに引いてもらっていた学習ルートを、自分のスケジュールに合わせて柔軟に考えられる。
  3. コードのエラー解決:以前は検索画面とにらめっこしていたエラーの原因特定を、状況ごとコピペして渡すだけで相談できる。
  4. コードの添削とリファクタ提案:以前は先輩やメンターのレビューで気づいていた「もっと良い書き方」をその場で提案してもらえる。

ここは誤解されたくないのでもう一度書きますが、ここまでの話は決して「だからスクールは不要」ということではありません。

「これらをAIで代替できるから、コストを抑えたい人はまずAIで始められる」という話です。

経験者から添削やレビューをもらう価値そのものは今でも消えていません。

【最重要】フェーズ別・実際のAI活用法

ということで、いよいよこの章の本題です。

「AIを使えばいい」と言われても、具体的に何をどう頼むのかが分からなければ前に進めませんよね。

そこでここでは、フェーズごとに(a) 頼んでいい作業、(b) 頼んではいけない作業、(c) 実際のやりとりの型、を示します。

今はまだそれぞれの意味が分からないかもしれませんが、実際の学習段階になるとこれがすごく腑に落ちると思いますので、まずはこの記事にAIの活用方法が書いてあることだけでも覚えてもらえたらと思います。

なお、以下に載せている「やりとりの型」は、決してコピペするだけの完成文ではありません。

【 】の中を自分の状況で埋めて使うテンプレートです。

埋める作業そのものが、自分の状況を言葉にする練習にもなるのでぜひご参考ください。

HTML & CSS
  • 頼んでいい作業:用語の意味、プロパティの違い、「思った通りに表示されない」原因の切り分けなど。
  • 頼んではいけない作業:デザインカンプを丸ごと渡して「コーディングして」。これをやると、手が動くようになりません。
  • やりとりの型(エラー解決): 「【エラーメッセージ全文】が出ました。該当のHTMLとCSSは【コード】です。【自分が試したこと】は試しました。原因として考えられることと、確認すべき順番を教えてください。」
jQuery(JavaScript)
  • 頼んでいい作業:動きの実装イメージの相談、サンプルコードの意味の解説、「なぜこの書き方なのか」の確認など。
  • 頼んではいけない作業:意味を理解しないままのコピペ。動いても、案件で条件が少し変わると詰みます。
  • やりとりの型(添削): 「自分で書いたコードが【コード】です。意図した動きはしています。実務の水準で見たとき、改善点と、その理由を教えてください。」
WordPress
  • 頼んでいい作業:実装したい挙動を日本語で説明し、必要な関数・手順・つまずきやすい点を相談するなど。
  • 頼んではいけない作業:テーマのファイルを理解しないまま、生成コードを貼り続けること。壊れたときに直せなくなります。
  • やりとりの型(実装相談): 「WordPressで【実現したい挙動】をしたいです。使っているテーマは【テーマ名】です。必要な関数と、編集すべきファイル、注意点を順番に教えてください。」
ポートフォリオ
  • 頼んでいい作業:構成案へのツッコミ、キャッチコピーの言い換え、説明文の推敲。
  • 頼んではいけない作業:「あなたを選ぶ理由」の中身そのものを丸ごと作らせること。ここは自分の言葉でないと相手に届きません。
  • やりとりの型(キャッチコピー・説明文の推敲): 「このポートフォリオで狙う相手は【発注者の種類(制作会社/事業主など)】です。僕の強みは【自分の強み】です。自分で書いたキャッチコピー案は【自分の案】です。もっと伝わる表現に、複数パターン言い換えてください。ただし、事実でない実績や誇張は加えないでください。」

AI独学が失敗する使い方〜NGと正しい線引き

AIは便利ですが、使い方を間違えると時間をかけた割に何も身につきません。

失敗する人に共通するのは、だいたい次の3つです。

  • コピペで動いて満足し、なぜ動いたのかを確認しないまま次へ進む。
  • AIの回答を検証せず鵜呑みにする。
  • 詳しい指示を与えずに「作って」とだけ丸投げし、出てきた物を自分で読まない。

正しい線引きは、シンプルです。

答えを写すのではなく、「なぜそうなるのか」を必ず一度は確認すること。

AIは「一緒に考える相手」であって、「代わりに考えてくれる機械」ではありません。

この一線を守れる人だけが、AIを良き相棒にできるんです。

ここは独学の成否を分ける部分なので正直に書いておきますが、「AIを使えば簡単に稼げる」というのはあまりにも雑な表現です。

AIがどんなに優秀でも、最終的な判断を下すのは僕たち自身。

そして、判断を下すために必要なのがコーディングやデザインの知識であり、クライアントに対する理解であり、社会人としての信念です。

ここを誤魔化さないことが、結局はいちばんの近道になるんだということを忘れないでください。

それでも独学がつらいと感じたら

ここまでAIを軸にした独学法を書いてきましたが、最後に独学を成功させるためにとても大切な事実を書いておきます。

「完全独学」は高い自己管理力を必要とします。

AIが伴走しても、毎日の進捗を自分で管理するという部分は自分の仕事として残るからです。

なので、完全独学で頑張るかスクールに通うべきかを検討するときは、一度以下の順番で考えてみてください。

  1. まずはAIを活用しながら基礎学習をはじめ、自分にこの道が向いているかを見極める。お金はほとんどかかりません。
  2. 「進捗管理を自分一人で続けるのはきつい」と感じたら、スクールやメンターとの契約を前向きに検討しましょう。それは決して挫折ではなく、とても賢い合理的な判断です。
  3. いきなりスクールやメンターと契約するのが不安なら、まずは方向性の相談を申し込んでみましょう。

「方向性の相談」は、僕のようにメンターとして個別相談を受けている人を頼るのもひとつの手です。

ただ、この段階ではまず無料のAIで学習を始めてみるのが先

実際に手を動かしてみて「一人で進捗を管理するのはきつい」と感じたら、そのときにメンターを検討すれば十分です。

具体的な相談先は次の章の中でまとめて紹介しますので、そちらをご参考ください。

次のステップへ

ここまでで、AIという「いつでも相談できるメンター」を手に入れる方法や考え方はご理解いただけたと思います。

ただし、ツールを揃えただけで独学は続けられません。

次の章では、その独学を最後までやり切るための「挫折しない準備」を解説していきます。

ぜひご一読ください。

AIについてもう少し深掘りしたい方はこちら
【ガチで反論してみた】AIの進化でWeb制作者は不要になる? → 回答:Web制作は全然オワコンじゃない
AI時代のコーダーになる方法|独学者が身につけるべきスキルと戦略を解説
AI時代のコーダーになる方法|独学者が身につけるべきスキルと戦略を解説

挫折しない独学に必要な4つの準備

「Web制作で稼ぐまでの流れ」が掴めたら、お次は学習を始める前に準備しておきたいことを整理していきましょう。

ここを飛ばして走り出すと、途中でモチベーションが切れたり、学習が非効率になったりしがちです。

とくに会社員や子育て中の方のように、使える時間が限られている人ほど最初の設計が効いてくるものです。

考えておきたいのは、次の4つ。

  1. 目的をはっきりさせる
  2. 家族や周囲の理解を得ておく
  3. 学習を習慣にする
  4. 相談できる相手(メンター)を確保する

① 目的をはっきりさせる

最初にやるべきは、ゴールの設定=「何のためにWeb制作を学ぶのか」を言語化しておくこと。

ここが曖昧なまま始めると、途中で迷いが出たときにそのまま迷走しやすいからです。

言語化するために、次の4つを書き出してみてください。

  1. Web制作を学んで、何を実現したいのか?
  2. 目指すのは「副業」か「専業フリーランス」か?
  3. いつまでに仕事にしたいのか?
  4. 年間でどれくらい稼ぎたいのか?

コツは「Web制作を仕事にする」という手段ではなく、その先にある未来を具体的に思い描くこと。

「副業で月5万円の余裕をつくる」「いずれフルリモートで働く」など、ゴールは人によって違います。

副業か専業かで、必要なスキルの幅もかけられる時間も変わります。

このゴール設定こそが計画の実現度を高める上で最も重要な要素なので、ここはしっかりと悩んで決めてください。

また、学習には終わりがないのでゴール設定が曖昧だと、営業に移るタイミングも判断が難しくなりますから、そういう意味でもゴール設定は重要と言えます。

いつまでも学習段階から抜け出せなくなる負のスパイラルを防ぐためにも、できるだけ具体的なゴールを設定しておきましょう。

② 家族や周囲の理解を得ておく

会社員や子育て中の方の場合、学習時間の多くは、本来は家族と過ごす時間や休む時間から捻出することになります。

だからこそ、周囲の理解があるかどうかで続けやすさが大きく変わるんです。

事前に話しておきたいのは、主に次の3点。

  1. 何のために、いつまで学ぶのか?
  2. 1日のうち、いつ・どれくらい勉強するのか?
  3. 進捗の共有をどのタイミングでするのか?

「一定の期間だけ応援してほしい」と先に伝えておくだけで、家庭内の摩擦はかなり減らせます。

逆に、黙って続けて理解を得られないまま消耗してしまうケースは相談でも特によく聞く話ですし、これを解決できないことで家族のためにはじめた独学が原因で不仲になってしまうケースも珍しくありません。

独学をはじめる前の話し合い=日々の密なコミュニケーションは疎かにしないように気をつけてください。

③ 学習を習慣にする

どれだけ良い計画を立てても、継続できなければ意味がありません。

継続するためには、気合と根性だけで乗り切ろうとせず、生活の中に「勉強の時間」を組み込んでしまうのが現実的です。

まずは必要な時間の目安から考えてみましょう。

「案件を取れるレベルに届くまで」ということで考えてみると、よく言われるひとつの目安が「1,000時間」です。

1日あたりの時間で割ると、ざっくり次のようになります。

  • 1日1時間 → 約1,000日(約2年9か月)
  • 1日3時間 → 約330日(約11か月)
  • 1日5時間 → 約200日(約6か月)

これらは「1日も休まず続けた場合」の単純計算です。

実際には休む日もありますし、日によって増減はあるでしょうから、カレンダー上はもう少し長くかかると見ておくと計画が崩れにくくなるでしょう。

いずれにしても、本業の合間で学ぶ場合は毎日3〜4時間くらいの学習時間をまとめて取るのは難しいと思われますので、そこで効いてくるのがスキマ時間の活用です。

  • 通勤や移動中:解説動画を見る、用語を覚える(手を動かさなくていい学習)
  • 昼休みなどの短い時間:Progateを1単元だけ進める
  • エラーで詰まったとき:状況をAIに投げておき、帰宅後にまとめて手を動かす
  • まとまった時間が取れる休日:デザインカンプの実装など、集中が要る作業に充てる

見る・読む(インプット)と、手を動かす(アウトプット)を時間帯で分けると、細切れの時間でも積み上がっていきます。

なお、上の「1,000時間」はAIがなかった頃からの目安です。

AIに相談しながら進めればつまずいて止まる時間を減らせるので、今なら同じ1,000時間でも昔より遥かに効率的な基礎学習ができるでしょう。

習慣化のコツもひとつだけお伝えしておくと、学習を行う際に「今日も1時間だけ勉強しよう」などと時間で区切るのはオススメできません。

そうではなく、「今日はこのタグの機能について理解しよう」などとタスクを小さく区切ることが学習のハードルを下げ、独学を続けやすくさせるポイントだったりします。

④ 相談できる相手(メンター)を確保する

独学のいちばんの落とし穴は、「自分が正しい方向に進んでいるか分からなくなること」です。

これにはまると、無駄な遠回りをしたり、途中で心が折れたりしやすくなるんです。

だからこそ、経験者にフィードバックをもらえる環境を早めに用意しておくことをお奨めします。

相談先として考えられるもの
  • AI:疑問の即解消やエラー発生時の相談相手として
  • X(旧Twitter)やコミュニティ:同じ立場の人とつながってモチベーション維持
  • MENTAなどの個別指導:自分にはない経験者の知見を頼れる
  • スクールやオンラインサロン:カリキュラムをこなすことで安心して学習

正直に言うと、完全独学はそれなりの自己管理力を必要とします。

なので、進捗管理まで自分ひとりで背負うのがきついと感じるなら、メンター契約やスクールを前向きに検討してください。

それは挫折などではなく、とても合理的で賢い判断です。

僕自身も、フリーランスとして活動をはじめた頃にMENTAというサービスが立ち上がり、経験者に質問できると知ったのですぐに利用しました。(当時、登場して間もないShopifyの開発について経験者に質問させていただきました)

そして、自分自身がMENTAでメンターになってからは、これまでにおよそ400人以上の方の相談に乗ってきました。

「何から手をつけるか?」「この進め方で合ってるか?」といった、独学の方向性の部分を相談者様と一緒に整理してきましたが、こういうことの解決は早ければ早い方が望ましいので、疑問や不安を感じたその瞬間に頼れるメンターを探してもらえたらと思います。

独学応援メンター(MENTA)の初回相談はこちら

このロードマップの進め方

最後に、このあとの学習の順番を確認しておきます。

  1. HTML & CSS
  2. jQuery(JavaScript)
  3. WordPress
  4. ポートフォリオ制作

この工程をおおむね3か月〜1年で進めて、安定して案件を取れる状態を目指します。

ペースは人それぞれなので早く進められる人はどんどん先へ、時間がかかる人はAIやメンターに相談して学習のやり方を見直しながら進めてください。

それではさっそく、最初のステップ(HTML & CSS)に進みましょう。

【HTML&CSS】Web制作の第一歩!

それでは、いよいよ学習をスタートしましょう!

ここでのゴールは、シンプルなデザインを見ながら、それをコードで再現できるようになることです。

HTML & CSS 基礎学習 5STEP
  1. ドットインストールで全体像をつかむ
  2. Progateで基礎を固める
  3. YouTubeで理屈を理解する
  4. 書籍で復習 しながらサイトを作る
  5. デザインカンプの再現に挑戦する

STEPごとに学習時間の目安も設けていますが、これは毎日1〜2時間以上の学習時間を設ける前提で計算しています。

1日に使える時間は人それぞれなので、実際には第3章で設計した自分の時間割に当てはめて取り組んでください。

そして各STEPの最後に、「このフェーズのAI活用方法」も短く解説しています。

AIの基本的な使い方は前章で解説したとおりですが、ここではSTEPごとの具体的な活用方法について書いていますので、そちらもご参照いただけたらと思います。

STEP1:ドットインストールで全体像をつかむ

  • 使う教材:ドットインストール(無料)
  • 学習時間の目安:30分

まずは、「HTML&CSSって何?」をざっくり理解することから始めます。

ドットインストールは1本2〜3分の短い動画で基礎を解説してくれるので、最初は手を動かさず、流し見でかまいません。

💡 学習のポイント
  • 6割わかれば次へ進む(100%理解しようとしない)
  • 繰り返し視聴する必要なし(深掘りは次のSTEPで)

この時点で「意外と簡単そう!」と思えたら、プログラミングの適性ありです!

もし「難しい…」と感じたら、焦らず次のSTEPでじっくり学んでいけば大丈夫

このフェーズのAI活用方法
  • 理解が難しかった説明について「初心者向けに一言で」と質問する:
    聞き方としては人間に質問するときと同じで、できるだけ状況を詳しく簡潔に伝えることが重要。何についての動画で、何の解説をしているときに出てきたどのキーワード/説明の意味を理解したいのか?を詳しく伝えてください。
    ※まだコードを書く段階ではないので、AIに何かを作らせる必要はありません。

ドットインストールはこちら

STEP2:Progateで基礎を固める

  • 使う教材:Progate(基本無料)
  • 学習時間の目安:1週間〜1ヶ月

ここから実際に手を動かしながら学習していきます。

Progateはブラウザ上でコードを書きながら学べるので、環境構築なしで始められるのが特徴。

学習の進め方
  1. HTML&CSSコースを最初から順番に進める
  2. 道場コースで応用問題に挑戦する(検索しながらOK!)
  3. Flexbox編まで完了する(レイアウトの基礎を学ぶため必須)
💡 学習のポイント
  • 暗記しなくていい(調べながら進めるのが普通)
  • Flexboxを押さえると、レイアウト作成が一気に楽になる
このフェーズのAI活用方法
  • 道場コースで詰まったときにヒントを教えてもらう
    最初から丸ごと答えをもらうと身につきません。間違っていてもまったく問題ないので、自分なりの回答を考えてからAIにアドバイスを求めるようにしましょう。

Progateはこちら

STEP3:YouTubeで理屈を理解する

  • 使う教材:YouTube(たにぐちまことさんの動画など/無料)
  • 学習時間の目安:1〜3日

Progateで「なんとなく書ける」状態になったら、次は理屈の補強です。

HTMLの構造やCSSの仕組みを、言葉で説明できるレベルに引き上げていきましょう。

💡 学習のポイント
  • 動画は1.5〜2倍速で時短する(集中力が持続しやすく、理解度を落とさずに学習時間を大幅に短縮できます)
  • FlexboxやCSS Gridの基礎を押さえる
このフェーズのAI活用方法
  • 動画の説明で腑に落ちない箇所があれば、その状況を説明した上で「具体例をひとつ出して」と頼む
    分かった気になりやすいフェーズです。説明を聞いて理解できた内容は、次のSTEPで必ず手を動かして確かめましょう。

STEP4:書籍で復習しながらサイトを作る

  • 使う教材:「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」
  • 学習時間の目安:1週間〜1ヶ月

いよいよ「WebサイトをHTML/CSSで作る」に挑戦します。

ここでは初心者向けの質の高い教材として上記の書籍を推薦します。

また、手元に頼れる1冊があるとつまずいたときにすぐに立ち返れるので、そういう意味でも基礎を解説している書籍を買っておくと安心です。

なお、ここからは自分のパソコンでコードを書いていきます。

まだ準備していなければ、無料のコードエディタ「VS Code(ヴィジュアル・スタジオ・コード)」をインストールしておきましょう。

インストール方法や日本語化などの初期設定は書籍でも解説されていますし、つまずいても「VS Codeの初期設定を初心者向けに教えて」とAIに聞けば手順を出してくれるのでご安心ください。

💡 学習のポイント
  • はじめから完璧を目指さない
  • インプット3:アウトプット7のつもりで、とにかく手を動かす
このフェーズのAI活用方法
  • 本のとおりにコードを書いたはずなのに表示が崩れてしまう場合は、第2章で紹介したエラー解決の型で相談してみる
    ここで大切なのは、あくまでコードを書くのはあなた自身であるということ。このあたりからコーディングをAI任せにする人が増えてきてますが、そうなると理解が不十分なまま先に進むことになります。Web制作を仕事にするということは、コーディングに詳しい人たちと競い合うということでもあるので、基礎学習から楽をしてしまうとAIを使いこなしてるベテラン達に太刀打ちできなくなるので、ここは必ず自分でコードを書いて理解を優先してください。

STEP5:デザインカンプの再現に挑戦する

デザインカンプのイメージ画像
https://webdesigner-go.com/coding/xd/
  • 使う教材:CodeJump(無料のデザインカンプ配布サイト)
  • 学習時間の目安:2週間〜3ヶ月

最後は、実案件にいちばん近い練習です。

デザインカンプ(完成見本)を見て、それをコードで再現していきます。

💡 学習のポイント
  • まずは初級レベルのカンプから
  • 細部まで正確に再現する(ピクセル単位を意識する)

「デザインカンプを再現できる=コーディング案件を受注できるレベル」なので、ここでしっかりスキルを磨きましょう!

このフェーズのAI活用方法
  • デザインカンプを上手く再現できないときに「このレイアウトを実装する方法を2〜3パターン考えて」と質問する:
    出力されたコードを自分のコードと比較してみることで、多くを学べます。また、自分が書いたコードの添削も頼むと改善点が明確になるので効果的です。

Codejumpはこちら

他にもたくさん挑戦してスキルアップしたい!という方へ
デイトラ講師による実践的な課題!

CodeJumpの無料カンプに慣れてきたら、次の一歩として、デイトラ講師でもあるしょーごさんのコーディング演習課題があります。

いくつか種類がありますが、最初は【即戦力編】(1,980円)から挑戦するのがおすすめ。

基礎を終えた人が、実案件に近い課題で力をつけるのにちょうどいい難度だからです。

解説もついているので、独学でも詰まりにくいのがおすすめしたいポイント。

なお、これから中級・上級まで一気に進めたい人には、まとめて入った【全部盛り】(2,480円)もあります。

今の自分に必要な分でいいなら即戦力編、先まで見据えるなら全部盛り、という考え方でお好きな方を選んでください。

ここまでで、HTML/CSSの基礎から実践までの学習をひと通り終えました。

この時点で、「普通の人」より遥かにWeb制作に詳しくなっているので、数ヶ月前の自分と比べてみるとその成長ぶりに自分で驚きませんか?

次の章では、ここで作ったサイトに「動き」を加えてリッチなサイトに仕上げるためにjQueryを学んでいきましょう。

【jQuery入門】Webサイトに“動き”を加える

前回まででHTML/CSSを書いて静的なWebページを作れるようになったので、次はそんな静的サイトをリッチにするために、jQueryを学んで「クリックで開くメニュー」や「自動で切り替わるスライドショー」のような「動き」を少ないコードで実装できるようになりましょう。

jQueryって何?

jQuery(ジェイクエリー)は、JavaScriptを簡単に扱えるようにするライブラリです。

次のような「動き」を短い記述で実装できる便利なものです。

  • クリックすると開閉する「アコーディオンメニュー」
  • 自動で画像が切り替わる「スライドショー」
  • ボタンを押すと画面がふわっと切り替わる「フェードイン・フェードアウト」

大昔はJavaScriptという言語で直接プログラムを書く必要があったんですが、「機能ごとにだいたい同じプログラムを毎回イチから書くのは効率悪いよね?」ということで、賢い人たちが機能ごとにプログラムをパターン化してくれている、と説明したらなんとなくjQueryの有難さを理解してもらえるでしょうか?

jQueryはもう古い

若干本題から逸れますが、巷では5年以上前から「jQueryはオワコン」と言われることがあります。

たしかに、新しい開発ではReactやVueといった別の手法が選ばれる場面も増えました。

ただ、データを見ると現場の実態は少し違います。

W3Techsの調査によると、jQueryは現在でも全Webサイトの68.0%で使われています(2026年6月時点)。

JavaScriptライブラリが判明しているサイトに限れば87.3%にも及びます。

要は、世の中にある多くのサイトが今もjQueryで動いているということです。

特にWeb制作で受注の多い企業サイトやランディングページでは、既存サイトの改修も含めて、jQueryが使われる場面がまだまだ多くあります。

こういうことを書くと「新しいライブラリを学ぶ必要もあるのでは?」という意見が出て来るのですが、それについては一切否定しません。

ただ、ひとつ誤解しないでほしいのは、jQueryは「最初の一歩」であって「ゴール」ではないということ。

まずは案件に直結するjQueryで動きをつける力を確実に身につけ、案件が取れるようになったら、その先で素のJavaScriptやReact・Vueといったモダンな手法へ少しずつ広げていく。

これが遠回りに見えて、実は最短の順番です。

本記事はその最初の一歩としてjQueryを推奨している、と捉えてください。

jQueryを学ぶ3STEP

jQueryも、最初から完璧を目指す必要はありません。

Progateで基礎を一周し、専門書で理屈を補ってから、自分のサイトで実際に動かす、という順番で進めます。

  1. ProgateでjQuery入門を一周する
  2. 専門書で理屈を補う
  3. HTML&CSSの学習時に書籍を読みながら作った静的サイトに動きをつけてみる

STEP1:ProgateでjQuery入門を一周する

  • 使う教材:Progate「jQuery」コース
  • 学習時間の目安:2〜5日

まずはProgateのjQuery入門コースを、最初から最後まで一周しましょう。

ここでの目的は文法を暗記することではなく、「jQueryでどんなことができるのか」を一通り体験することです。

  • 暗記しようとしない(細かい文法は、あとで調べながらで十分)
  • 「こう書くと、こう動く」の感覚をつかむ
このフェーズのAI活用方法
  • HTML&CSSのときと同じで、道場コースなどでつまずいたときにヒントを教えてもらいましょう。概要の説明の中で意味が分からないメソッドがあれば、その意味をより易しく解説してもらうのもありです。

STEP2:専門書で理屈を補う

  • 使う教材:書籍「動くWebデザインアイディア帳」
  • 学習時間の目安:1週間前後

入門を一周したら、専門書で「なぜそう書くのか」を補強しましょう。

「動くWebデザインアイディア帳」は、実案件でも使う動きのサンプルが豊富でパターンごとに仕組みを確認できるのでおすすめです。

💡 学習のポイント
  • 最初から全部ページを読まなくてOK!(必要なところだけ読んでください)
  • 実装してみたいサンプルを見つけたら、次のSTEPで実際に試す前提で読む
このフェーズのAI活用方法
  • 本に掲載されているサンプルコードで分からない行を、一行ずつ解説してもらう:
    読んで分かった気で終わらせるのは、学習としても不十分です。次のSTEPで、実際に動かして確かめる前提で、理解を深めることを大切にしましょう。

なお、動画で学習したい人にはたにぐちまことさんのUdemy講座ちゃんと学ぶ、HTML+CSS & JavaScript入門」を推薦しておきます。

STEP3:作った静的サイトに動きをつけてみる

  • 学習時間の目安:1〜2週間

仕上げは、アウトプットです。

HTML&CSSのSTEP4で、書籍を読みながら作った静的サイトに、jQueryで動きを足していきましょう。

お好きなものを追加してもらって構いませんが、比較的簡単に試せるのは以下の2つ。

  • スライドショー(画像が自動で切り替わる機能)
  • アコーディオンメニュー(クリックで開閉するメニュー)

自分が作ったサイトが実際に動き出すと、jQueryの理解が一気に進みますし、単純に楽しいはずです。

「自分で動かせた」という成功体験が、ここでのいちばんの収穫と言えるでしょう。

このフェーズのAI活用方法
  • 上手く実装できないときは、第2章で紹介したエラー解決の型で相談する:
    自分が
    書いたコードの添削を頼むのもありです。いずれにしても、意味を理解しないままのコピペだけは絶対NG。仮に動いても、構造を理解できていないと案件で条件が変わったときに実装できなくなるリスクがあります。

ここまでで身についたスキルを整理しよう!

この段階まで来ると、あなたは次のことができるようになっています。

  • jQueryの基本文法が読み書きできる
  • スライドショーやアコーディオンメニューが実装できる
  • エラーを自分で調べて解決できる

一言でいうと、実案件で求められる最低限の「動き」を実装できるレベルです。

ここまで来たら基礎学習もいよいよ折り返し地点。

次の章では、最終ステップであるWordPressの学習に進みましょう。

次の実践教材:しょーごさんの演習課題【中級以上】

HTML/CSSとjQueryで「静的+動き」を一通り作れるようになったら、ここまでの復習としてしょーごさんの演習課題【中級以上】(2,140円)に挑戦できます。

複数ページ構成やレスポンシブなど実案件で必ず出てくる要素が含まれているので、WordPressの学習に進む前の腕試しにちょうどいい教材です。

※すでに【全部盛り】を購入済み方は、中級以上もそこに含まれているのであらためて購入する必要はありません。

【WordPress】高単価案件に必須のスキル

HTML/CSSとjQueryで「見た目」と「動き」を作れるようになったら、次に学ぶべきはWordPress。

Web制作の仕事で、もっとも求められるスキルでもあります。

WordPressとは?

WordPress(ワードプレス)は、誰でも簡単にブログやWebサイトを作って管理できる無料のソフトウェアです

  • プラグインを使えば、お問い合わせフォームなどの機能を簡単に追加できる
  • テーマを使えば、HTMLやCSSを書かなくてもサイトの形を作れる
  • コードを書かずに、管理画面から記事を更新できる

W3Techsの2026年の集計によると、WordPressは世界のWebサイトのおよそ4割で使われており、サイトを管理する仕組み(CMS)の中では圧倒的に多く使われているソフトです。

だからこそ、Web制作の現場ではWordPress案件が常に動いていて、独学者が仕事につなげやすいスキルでもあるんです。

WordPressを学ぶ4STEP

  1. YouTubeで「WordPressとは?」を理解する
  2. 書籍で学びながら静的サイトをWordPress化する
  3. デザインカンプをWordPress化する
  4. 高機能テーマ「Snow Monkey」に触れる

STEP1:YouTubeで「WordPressとは?」を理解する

  • おすすめ動画:「アキユキさんのWordPress解説」
  • 学習時間の目安:1時間

まずは「WordPressでサイトを作るとはどういうことか」を、動画でざっくり理解しましょう。

テーマ・プラグイン・投稿機能といった基本の役割を、頭に入れておくのが目的です。

💡 学習のポイント
  • 仕組みの全体像をつかむ(テーマ/プラグイン/投稿)
  • 静的サイトをどうWordPress化するのか、イメージだけ持っておく
このフェーズのAI活用方法
  • 動画に出てくる「テーマ」「プラグイン」などの用語について補足してもらう:
    あくまで全体像をつかむだけの段階なので、この時点で何かの実装を頼む必要はありません。

STEP2:書籍で学びながら静的サイトをWordPress化する

  • おすすめ書籍:「世界一わかりやすいWordPress 導入とサイト制作の教科書」
  • 学習時間の目安:1週間〜1ヶ月

ここでは書籍を参考にしながら、HTML/CSSで作った静的サイトをWordPress化する練習をします。

AIに質問しても手順はわかりますが、初心者にとっては手順が多いので、ステップごとに図とコードを載せてくれている書籍を参考にした方が効率的です。

なお、WordPressを動かすには、まず自分のパソコンに学習用の環境(ローカル環境)を用意します。

「Local」などの無料ツールを使えばサーバーを契約しなくても自分のパソコンの中でWordPressを試せます。

この環境構築の手順も書籍が図つきで解説してくれているので、まずは本の通りに進めれば大丈夫です。(もちろんこれもAIに相談できます)

💡 学習のポイント
  • はじめから熟読しない(知りたい部分から読めばOK)
  • 手を動かしながら、テーマファイルの役割をひとつずつ理解する
このフェーズのAI活用方法
  • 実装でつまずいたときに、第2章で紹介した実装相談の型で原因を聞く:
    本の手順そのものは飛ばさないように。あくまで詰まった箇所の相談に限りましょう。

STEP3:デザインカンプをWordPress化する

  • 学習時間の目安:2週間〜1ヶ月

ここがこの章の山場です。

これまでにコーディングしてきたデザインカンプを、WordPressで動く形に組み替えていきます。

💡 学習のポイント
  • ヘッダーやフッターを共通パーツとして管理する
  • WordPressの関数を使って、記事一覧などを表示する
  • プラグインで必要な機能を追加する

STEP4:現場でもよく使われる高機能テーマ「Snow Monkey」に触れ

  • 学習時間の目安:3日〜1週間

ここまででWordPressの基本が理解できたら、実際の案件で使われることも多い国産テーマ「Snow Monkey(スノーモンキー)」について学習しておきましょう。

💡 学習のポイント
  • 動画で基本的なメリットを把握する
  • 無料で試せるので、まずは1ページだけ作ってみる
  • 制作〜管理のしやすさを体感し、案件での使いどころをイメージする
このフェーズのAI活用方法
  • 公式情報を確認させたうえで、不明点を質問する:
    質問する前に最新の公式情報を検索させて内容を学習させておくと、AIが古い情報を答えるリスクを防げます。

Snow Monkeyの詳細・無料版のダウンロードはこちら

ここをやり切れると、実務レベルのWordPressスキルが身につく=基礎学習をひと通り終えることになります!

本当にお疲れ様でした。

ここまでで身についたスキル

  • WordPressの基本的な仕組みが理解できた
  • 静的サイトをWordPress化できるようになった
  • プラグインを活用して機能を追加できるようになった
  • デザインカンプをWordPressで実装できるようになった
  • Snow Monkeyを活用して効率的にサイトを作れる方法を理解した

ここまでの学習を終えると、目安としては20万〜30万円ほどのWordPress案件に応募できる実力がついています。

僕が独学していた頃はこの段階で基礎学習を卒業し、次のステップである営業活動に向けた準備=ポートフォリオ制作に進みました。

ただ、次のステップに進む前に、ここまでの学習の総仕上げとして本番に近い状況を一度経験しておくことも「自信をつける」という意味では価値があります。

その場合は、しょーごさんの演習課題の中で実際の案件の流れを再現した【超実践編】模擬案件(5,000円)がおすすめ。

要件を読み解いて、ゼロから作り上げる構成なので実務の予行演習としてとても勉強になります。

これまでの教材より少し価格は高いですが、営業活動をはじめる前に「本番に近い状況」を通しで経験しておくと最初の不安をかなり減らせるでしょう。

さらに上の単価を目指す方へ

基礎学習としてはここまでで十分ですが、さらに高単価の案件を受注したい方や制作・管理の効率を高めたい方は必ず学ぶべき知識があります。

初学者のみなさんは一旦スルーしても問題ありませんが、今後の学習の方向性として知っておいてください。

  • WordPressのカスタム3兄弟カスタム投稿タイプ、カスタムタクソノミー、カスタムフィールド):ページ数の多い企業サイトやメディアサイトを効率良く作れるようになり、単価50万円以上の案件を狙いやすくなります。
  • Shopify(ECサイト構築):単価100万円以上も珍しくないネットショップ案件に対応できるようになり、対応できる仕事の幅がさらに広がります。
カスタム3兄弟を制するものは、WordPressを制する。のサムネイル
【初心者必見】WordPressのカスタム3兄弟「カスタム投稿タイプ」「カスタムタクソノミー」「カスタムフィールド」の完全ガイド
Shopifyを独学でマスター【基本構築~設定編】のサムネイル
【初心者向け】Shopify 初期設定 完全ガイド:ECサイト構築の第一歩

ポートフォリオ設計術|「選ばれる」ための作り方

Editorial commision-amico

スキルがそろったら、最後にそれを仕事につなげるためのポートフォリオを作っていきましょう。

学習を終えても案件を獲得できなくて諦めてしまう人は、このポートフォリオの設計でつまずいているケースが多いので、ここでは考え方から順番に説明していきます。

ポートフォリオは「自己紹介」ではない

ポートフォリオとは、お客さま(多くは制作会社やデザイナー)が「この人に頼んでいいか」を判断するためのサイトです。

ありがちな失敗が、経歴やスキルを並べただけの「自己紹介サイト」になってしまうこと。

伝えるべきは、あなたの人となりではなく「あなたに仕事を頼むべき理由」です。

そのために、ポートフォリオは見せる順番や構成を設計する必要があるんです。

AIと一緒に設計を考える

ポートフォリオの設計も、いきなり一人で悩む必要はありません。

まずはAIを相手に、構成を組み立てていきましょう。

ただし、AIに「ポートフォリオの構成を考えて」とだけ投げても、ありきたりな答えしか返ってきません。

学習中もそうであったように、設計を任せるにはこちらが先に前提を渡し、AIと丁寧に目線を合わせることが肝心です。

最低でも、次の6つをできるだけ詳しく伝えましょう。

事前に考えるべき6つのポイント
  1. ターゲットは誰か?(制作会社?フリーのデザイナー?ディレクター?)
  2. どんな印象を持たせたいか?(真面目?親しみやすい?洗練された?)
  3. どんな強みを伝えるか?(コーディングの正確さ?納期の速さ?)
  4. どんな順番・構成で見せるか?(「結論 → 根拠 → 信頼 → 安心」が基本)
  5. どんな言葉で伝えるか?(端的で分かりやすい文章を意識)
  6. どんなデザインにするか?(メインカラーやフォントの選定)

とはいえ、いきなりこれらすべてを詳しく説明するのも大変だと思うので、AIと一緒に考えていくためのプロンプト(指示文)も貼っておきます。必要に応じてご参考ください。

私はWeb制作の独学者です。これから自分の事業サイト型のポートフォリオを作ります。
目標はターゲットに『この人にコーディングを頼みたい』と感じさせること。
そのために適切なページ構成(セクションの順番と、各セクションに書くべき要素)を考えるために、まずは事前情報として以下の6点をあなたと詳しく決めていきたいです。

- ターゲットは誰か?(制作会社?フリーのデザイナー?ディレクター?)
- どんな印象を持たせたいか?(真面目?親しみやすい?洗練された?)
- どんな強みを伝えるか?(コーディングの正確さ?納期の速さ?)
- どんな順番・構成で見せるか?(「結論 → 根拠 → 信頼 → 安心」が基本)
- どんな言葉で伝えるか?(端的で分かりやすい文章を意識したい)
- どんなデザインにするか?(メインカラーやフォントの選定など)

事前情報をできるだけ詳しく決めて、ポートフォリオの設計を進めるために、あなたが知りたい情報を整理して、私に箇条書きで質問してください。

上記のような聞き方でAIとの協業をはじめて、ここから「このセクションは何のため?」「もっと信頼が伝わる並びは?」と相談を重ねていくことで自分らしさのあるポートフォリオの構成案が形になっていきます。

ここでの注意点も、これまでと同じです。

AIはあなたの状況を整理するのは得意ですが、「Web制作の発注者に実際に刺さる構成」を知っているわけではありません。

出てきた構成が本当に受注につながるのかは、AIには判断できませんので、常に思考の主導権は自分にあることを忘れないでください。

「選ばれる構成」の型は、実例から借りるのが早い

案件獲得につながるポートフォリオとは?
【購入者限定特典:事業サイト型ポートフォリオのワイヤーフレーム】:3,000円(税込)

AIは「Web制作の発注者に実際に刺さる構成」を知っているわけではない、と書きましたが、実はここに僕たち経験者の強みがありまして、それが受注を目的に設計された「型」を知っているということ。

AIに質問したとて、独学者がいちばん判断に迷うのは「何を・どの順で見せれば選ばれるのか」という点。

なんせ実際に営業活動を何十回・何百回と繰り返してみないことにはポートフォリオに対する感想の平均値を考えられないので、その良し悪しを評価することもできないからです。

それ故に、ここはゼロから考えるより、実際に案件を取ってきた人の設計をなぞるのが近道ということになります。

その設計をひとつの記事にまとめたのが『案件獲得につながるポートフォリオとは?【購入者限定特典:事業サイト型ポートフォリオのワイヤーフレーム】』

案件獲得を目的とした「事業サイト型」の作り方を分かりやすく解説し、さらに購入者特典として、そのままなぞれるワイヤーフレーム(設計図)をつけています。

この記事をAIに読ませると、事業サイト型のポートフォリオを文字どおり爆速で作れるというわけですね。

AI登場以前は、この教材を使ってもポートフォリオの完成に1〜2週間ほど掛かっていましたが、AIに内容を読み込ませることで1〜2日に短縮できます。

ここで何日も構成に迷う時間を考えると、3,000円で実証済みの「型」を手に入れて数十時間をスキップできるのは十分に取り返せる投資だと思います。

案件獲得につながるポートフォリオとは?
【購入者限定特典:事業サイト型ポートフォリオのワイヤーフレーム】はこちら

独学からここまで作れる:サロンメンバーの実例

「本当に独学だけでポートフォリオなんて作れるの?」なんて疑う気持ちもわかります。

そこで参考までに、独学応援サロンのメンバーが実際に公開しているポートフォリオを2つ紹介します。

どちらも、ここで説明した「事業サイト型」を基本に設計されていますね。

ヒロシさんのBUILD UP:
山口県を拠点に、制作会社・Webデザイナー向けの「コーディングパートナー」として活動。強み(Shopify・WordPress構築)、制作実績、料金表が整理して並び、ECサイトやLP・コーポレートサイトの実績が掲載されています。

むらりんさんの「ネコの手」:
制作会社・デザイナー・エンジニアのリソース不足を補う「コーディング代行」サービス。レスポンシブ対応、jQueryでの動きの実装、WordPress構築に対応し、サービス内容と料金表が明確に示されています。

2人に共通するのは、自己紹介で終わらせず、「誰の何を解決できるか」と「料金」まで提示していること。

独学からでもここまで形にできるのが、事業サイトの型をそのまま実践した例です。

仕上げ:コピー・デザイン・公開

構成が固まったら、最後の仕上げに進みましょう。

仕上げの手順は、以下の3STEPです。

  1. 各セクションごとのコピー(キャッチコピーや説明文)を作る
  2. ポートフォリオのデザインを作る
  3. ポートフォリオを完成させて、ウェブ上に公開する

コピー(キャッチコピー・説明文)

  • 長い文章は読まれません。短く、要点から書きましょう。
  • 相手のリテラシーに合わせた言葉選びを意識しましょう。制作会社をターゲットとするなら専門用語を使えますが、Webに詳しくない企業の担当者や個人経営者をターゲットとする場合は専門用語をできるだけ使わずに説明する方が親切です。
  • 文章が苦手な場合、AIに「推敲」を手伝ってもらうのはありです。お察しのとおり、自分のたたき台を渡して整えてもらうのが基本で、丸ごと書かせるのは悪手。基礎から文章力を固めたい人は、別記事で詳しく解説しているので、そちらもご参考ください。

②デザイン

  • 学んでいない段階で自己流に走ると、安っぽくなりがちです。まずはギャラリーサイトでプロが作ったデザインをたくさん見て、自分のポートフォリオに採用したいテイストを探しましょう。
  • ここでもAIに頼るなら、いくつか参考サイトや参考デザインを共有した上で、自分のポートフォリオに適したデザインを考えるための手法を聞くようにしてください。
  • 営業において、ポートフォリオの見た目がターゲットに与える影響はとても大きいです。自分の好みやデザインの方向性をある程度言語化した上で、プロに外注するのも賢い選択と言えるでしょう。

公開

  • デザインまで決まれば、ここまでに学習したスキルを発揮してポートフォリオを一気にコーディングしてください。
  • ポートフォリオができあがったら、いよいよサーバーにアップして公開します。
  • サーバーにも色々な種類がありますが、サポート体制含め一番無難な選択肢はエックスサーバーでしょう。僕が仕事で使うのもほぼすべてエックスサーバーです。サーバーの設置手順は別記事にまとめているので、そちらをご参考ください。
  • たまに「ポートフォリオってレンタルサーバーを契約してまで公開しないとダメですか?」というご質問をいただきますが、答えはもちろん「実務を見据えるならレンタルサーバーを契約してください」です。Web制作の仕事を受注しようとしているのに、自分のポートフォリオがWeb上にない場合、逆にどうやって自分の実力をターゲットに確認・信用してもらえると思いますか?

ここまでの学習をやり切ったあなたなら、もう案件獲得レベルです。

次の章からいよいよ営業を始めていきましょう!

【営業スタート】学んだスキルを仕事にする

ここまで来たあなたは、もう仕事を受けられる状態です。

いよいよそのスキルで実際に「仕事を取る」段階に入っていきましょう。

しかし、この段階に来て多くの人が抱く疑問があります。

よくある悩み
  • 営業って何をすればいいの?
  • どこで仕事を探せばいいの?
  • 最初の案件がなかなか取れない…

僕も同じ壁にぶつかったので、気持ちはよく分かります。

ただ、スキルを学んだだけで稼げるようにならないのは当たり前。

「作れること」と「信用されること」はまったく別の問題ですからね。

と同時に、「誰でも絶対に信用を勝ち取れる営業方法」なんて存在しません。

営業とは自分がビジネスパートナーとして信用に足る人物であり、そのスキルで助けになると期待してもらう行為ですから、本当に奥が深いものです。

そのため、具体的な営業手法を徹底解説した『案件獲得ロードマップ2.0』は全5本の記事になってしまいました…

そんな大作をいきなりすべて読んでもらうのも大変なので、この章ではその入口として「最初の一歩の踏み出し方」を解説し、その上でテーマごとにさらなる深掘り先としておすすめしたい記事やコンテンツをご案内します。

まず押さえるべき4つの心得

細かいテクニックの前に、最初からいきなりつまずかないための心得4つをご確認ください。

  1. 第1章に書いたことの繰り返しになりますが、最初の数件は「実績づくり」と割り切ること。いきなり高単価を狙わず、相場より控えめでも、まず受注して実績と評価を積むことを優先してください。
  2. 主に営業する場所は、大きく2パターン。クラウドソーシング(ランサーズやクラウドワークスなど)で小さく始めるか、制作会社へ直接営業するか。ポートフォリオを作ったときに設定したターゲットがいる場所を選んでください。
  3. 応募するときは「相手の募集内容をよく読み、自分がどう役に立てるか」を具体的に書くこと。スキルを並べるのではなく、相手の困りごとに合わせるのがコツです。
  4. 断られるのは当たり前。一件ごとに落ち込まず、行動量を一定に保つことを優先してください。999回断られても、1回受注できれば良いんです。

この4つを理解し、信じ続けることが、最初の一歩を踏み出すときの大きな支えとなります。

もちろん応募先のリサーチや提案文の下書きを見直すときにもAIは使えますが、ここでもちゃんと最後は自分の言葉に直すのが前提であることは忘れないでください。

具体的な手順は「案件獲得ロードマップ2.0」へ

【保存版】Web制作 案件獲得ロードマップ 2.0【①3つの前提確認】

「営業って具体的に何をすればいいの?」という疑問に答えるために、僕がフリーランスとして実践してきた営業手法を5本の記事にまとめたのが『案件獲得ロードマップ2.0』。全編無料です。

記事を書くにあたって重視した3点
  • 「営業って何をすればいいの?」という最初の疑問に答える
  • 「どこで案件を探すのか?」を具体的に示す
  • 「最初の案件獲得→単価アップ→安定収入」の流れがわかる

「最初の一歩」を、実際の行動に落とし込むための記事です。

営業を始めるときに、あなたの状況に合わせて該当箇所を読み進めてください。

Web制作 案件獲得ロードマップ 2.0【①3つの前提確認】はこちら

受注率を左右する「提案文」

クラウドソーシングの提案文|受注率を上げる/下げる書き方

応募の結果は、提案文の書き方で大きく変わります。

同じスキルでも書き方ひとつで印象はガラッと変わり、そこで命運が分かれるものです。

そんな受注率を上げる書き方と下げる書き方についてはこちらの記事をご参考ください。

クラウドソーシングの提案文|受注率を上げる/下げる書き方(無料)はこちら

また、提案文をイチから組み立てるのが苦手な人向けには、僕が実際に使ってきたテンプレート集を販売してます。(「価格交渉スクリプト」と「クライアント対応テンプレート」も収録)

クラウドソーシングの提案文テンプレ【完全版】
初心者でも受注できる書き方(10,000円)はこちら

さらに、応募文の添削まで受けたい人には、しょーごさんの【制作会社への営業法と添削】(1,680円)もおすすめ。

『案件獲得ロードマップ 2.0』で学んだことをアウトプットするときにも効果的です。

しょーごさんの【制作会社への営業法と添削】(1,680円)はこちら

それぞれ、あなたの状況に合わせてご活用ください。

単発で終わらせない:リピートと紹介で安定させる

【5日間集中】動画で学ぶ、紹介とリピートを生み出し続ける最強営業術:5,000円(税込)

ここから先は、最初の案件が取れたあとの話です。

安定して稼げるかどうかは、単発を追い続けることではなく、リピートと紹介を生み出せるかにかかっています。

そこで、初案件獲得までの苦労を経験した人にこそ伝えたい「営業の本質」と「信頼される営業方法」を動画にまとめたのが『5日間集中・動画で学ぶ最強営業術』(5,000円)です。

制作にあたって特に詳しく解説した3点
  • 「売れる人」と「売れない人」の違い
  • 紹介とリピートを生む営業の組み立て方
  • 自分の市場価値を上げ、単価を高める考え方

最初の一歩を踏み出し、「次は安定させたい」と思った段階でご覧ください。

5日間集中】動画で学ぶ最強営業術(5,000円)はこちら

この章のまとめ

  • まずは「実績づくり」と割り切って、最初の一歩を踏み出す
  • 具体的な手順は『案件獲得ロードマップ2.0』で確認する
  • 提案文の書き方で受注率を上げる
  • リピートと紹介は、最初の案件が取れたあとの課題
  • 完璧を待たず、行動量を一定に保つ

繰り返しになりますが、知識があるだけでは収入を増やせません。

ここまで努力して学習を続けてきたあなたなら、もう十分に営業を始められますから、ぜひ勇気と自信を持って最初の一歩を踏み出してください。

まとめ|独学を始める、続けるあなたへ

以上が、未経験からWeb制作で案件を取るまでの独学ロードマップです。

長い記事を、ここまで読んでいただきありがとうございます。

最後に、少しだけ僕自身の話をさせてください。

僕がWeb制作の独学を始めたのは、2020年2月11日でした。

30歳・高卒・完全未経験でした。

緊急事態宣言で外に出られない時期も、本業が再開してからも、すき間の時間を使って学び続けました。

積み上げた時間は、累計でおよそ1,000時間。

10か月で、単価50万円の案件を受注できるようになりました。

その後も制作と発信を続け、今は営業をしなくても仕事が入る状態になり、副業の月収が100万円を超えたときに大きな自信を得られました。

特別な才能があったわけではありません。

やったことは、自分の直感と計画を信じて手を動かし続けただけです。

だからこそ、同じように一歩ずつ進めば、十分に再現可能な道だと思っています(もちろん、必要な期間や進み方に個人差はあります)。

そして2026年の今、当時の僕にはなかった「AIという伴走者」がいます。

コストを抑えて独学したい人にとって、条件は僕が独学に挑戦したあの頃よりずっと良くなっています。

焦らなくて大丈夫なので、今日できる小さな一歩から、始めてみてください。

あなたの独学を、心から応援しています。

基礎を終えたあなたへ|Claude Codeで実務の効率アップ

ここまで本当にお疲れさまでした。

自分の手でコードを書く力がついた今こそ、AIの使い方を一段ギアチェンジするタイミングです。

基礎学習中は封印してもらっていた「エージェント型」のAIツール、その中でも僕が日々使っているのがClaude Code(クロードコード)です。

これは対話で質問に答えるだけでなく、コードの生成・修正・実行までを一つの流れで扱える本当に凄いやつで、たとえば「エラーが出た」と相談した場合、その場で原因の説明から修正の反映までを一気に進められるスピード感は、実務の効率を大きく押し上げてくれます。

なぜそんな便利なものをここまで封印していただいたのか?

ここまでこのロードマップを読んでくださったあなたならもう十分にご理解くださっていると思いますが、それは出てきたコードの良し悪しを自分で判断できるようになって初めて、こうしたツールを「使いこなす側」に回れるからです。

土台がないまま頼ると、ただ「動くか分からないコードを貼り付けるだけの作業」になってしまい、結果的にコーディングの実力もClaude Codeに関する理解も中途半端な状態で終わってしまいます。

逆に言えば、ここまで独学をやり切ったあなたなら、その力を十二分に理解し、活用できます。

ここからの実務では、ぜひClaude Codeのようなツールを活用して、制作効率をどんどん上げていってください。

全部をまとめて一気に学びたい方へ

【営業未経験OK】クラウドソーシングで希望単価を獲得する受注戦略
3つのコンテンツをまとめました:15,000円(税込)

ここまで読んで、「ポートフォリオ・提案文・営業のすべてをまとめて一気に学びたい」という方向けに、僕が作成した3つの教材をセットにしています。

  • 事業サイト型ポートフォリオの作り方+ワイヤーフレーム(単品3,000円)
  • 提案文テンプレート【完全版】(単品10,000円)
  • 5日間集中・動画で学ぶ最強営業術(単品5,000円)

単品価格の合計は18,000円ですが、セットは15,000円としました。

ポートフォリオ・提案文・営業を、僕の理論に従って一気に学びたいという方は、ぜひこちらをご検討ください。

【営業未経験OK】クラウドソーシングで希望単価を獲得する受注戦略:3つのコンテンツをまとめました:15,000円(税込)はこちら

感想は、Xで気軽に

この記事の感想を X(旧Twitter)で@iammeganenをメンションしてポストしてくださった方には、MENTAで30分2,000円で提供しているサービス「方向性コンサル」を1回無料で提供させていただきます。

「何から始めればいいんだろう?」「この進め方で合ってるのかな?」など、Web制作の独学や営業に関する不安をなんでも聞いてください。

MENTA「方向性コンサル」の詳細はこちら

おすすめ記事

AI時代のコーダーになる方法|独学者が身につけるべきスキルと戦略を解説
【30代/未経験】Webデザインの独学が「時間の無駄」に終わる人の共通点。AI時代に生き残るための「仮説・論点・戦略」思考

この記事が独学をがんばる皆さんのお役に立てたらうれしいです。

Visited 10,257 times, 3 visit(s) today
ご感想はぜひXにポストしてください!(僕をメンションしていただければ、必ずコメント&RPさせていただきます!)
ABOUT US
めがねん管理人
独学でWeb制作を学び、フリーランス歴6年目| MENTA上位1%のトップメンター|独学で稼げるようになりたい人を全力サポート🧑‍💻|Web制作の学習 → 営業 → 案件対応のリアルなノウハウを、X・ブログ・サロンで発信中|本気の人を本気で応援します| 個別サポート希望の方は 「独学応援メンター」で検索🔍