はじめに：同じ教材で学んでいたのに、なぜあの人だけ案件を取れたのか？
僕が初めてWeb制作を学び始めたのは、仕事の合間に見たYouTubeの「在宅でできる副業ランキング」でした。 「HTMLとCSSを学べば月5万円稼げる」と聞き、Progateやドットインストールを使ってコツコツ勉強を始めました。
それから2ヶ月。模写コーディングもできるようになり、「そろそろ案件取ってみようかな」と思っていた矢先、SNSで同じ時期に学び始めた知人が「初案件取れました！」と投稿しているのを見ました。
正直、焦りました。
「え？自分より学習歴も短かったのに…何が違うの？」 そう思って、その人のポートフォリオを見てみたんです。
そこには、WordPressで組まれたブログサイトや、JavaScriptで動くカルーセル、フォーム付きのLPなどが並んでいて、僕の静的なHTMLページとは明らかに違っていました。
そのとき初めて気づいたんです。
らいち「HTMLとCSSだけでは、“作れる人”どまり。仕事を取るには、“動かせる人”にならないといけないんだ」
この記事では、そんな経験を踏まえて、フリーランスとして上位20％に入るためのスキルセットと、そこに到達するまでの道のりをお伝えします。
なぜ今、Web制作は「4言語＋WordPress」で差がつくのか？
らいち「HTMLとCSSを学べば、Web制作で稼げる」
よく聞くフレーズですが、実際にクラウドソーシングや制作会社の外注案件を見ていると、HTML/CSSだけで完結する案件はむしろ少数派だというのが現実です。
僕も最初は「HTMLとCSSができれば、1〜2万円くらいのLPは受けられるだろう」と思っていました。
でも、いざ募集されている案件を見てみると、こういった要件がセットで書かれていることがほとんどです。
・「WordPressテーマをカスタマイズできる方」
・「JavaScriptやjQueryで簡単な動きがつけられる方」
・「レスポンシブ対応できる方」
・「カスタム投稿タイプを作成できる方」
らいちつまり、「HTML/CSSだけの人」では仕事を取りづらいというのが僕の体感です。
“差がつく”のはどこ？
実際にWeb制作学習を始める人の多くは、ProgateやYouTubeを使ってHTMLとCSSからスタートします。
そして、「模写ができるようになった！」という達成感を味わったあと、多くの人が次のステップ（JavaScript・PHP・WordPress）に進めず、挫折してしまいます。
なぜかというと、次のステップは一気に抽象度が上がるからです。
- JavaScript：画面の「動き」に関するロジック的思考が必要になる
- PHP：コードが見えない部分で動くため、変数や処理の流れが見えづらい
- WordPress：ファイル構成やテンプレート階層の概念が一気に複雑になる
僕自身もここでつまずきました。
らいち模写はある程度できる。でも、動きのある要素やCMS化となると手が止まってしまう。
「動かない」「バグる」「エラー文が読めない」……そうして数日間手がつかなくなる。
でも、ここを超えると、一気に“仕事にできるスキル”に近づいていきます。
なぜ「4言語＋WordPress」がちょうどいいのか？
もちろん、フロントエンドならReactやVue、バックエンドならLaravelやNode.jsなど、学ぼうと思えば技術は無限にあります。
でもフリーランス、特に「Web制作」で案件を受けるなら、
- HTML：構造を作れる
- CSS：見た目を整えられる
- JavaScript：最低限の動きを実装できる
- PHP：WordPressのテーマで使えるレベル
- WordPress：テーマ編集・投稿機能・カスタムフィールドが使える
この範囲が、もっとも仕事に直結するゾーンだと僕は感じています。
なぜなら、この構成で作られているWebサイトが圧倒的に多いからです。
実際、僕が独立当初受注した案件は「WordPressの既存テーマを使って、ブログ機能をつけたい」というものでした。
- デザインはFigmaでもらえる
- コーディングはHTML/CSSでOK
- 投稿ページと一覧ページだけPHPで組む
- jQueryでモーダルを追加
- 納品はWordPressに組み込んで渡す
まさに、「4言語＋WordPress」だけで完結する内容でした。
まずは“横に広げる”より“縦に深める”
らいち学習を進めていると、どうしても「もっと高度なことを学ばなきゃ」と焦ってしまうことがあります。
でも、案件を受けて感じたのは、「複雑なこと」より「基本が正確で再現性があること」の方が信頼につながるということ。
例えば、
- CSSのレスポンシブが崩れない
- JSの簡単な動きが確実に再現される
- WordPressが納品後も壊れずに動く
この“安定感”がクライアントからの信頼を生み、リピートや紹介につながっていきました。
「まだJavaScriptが完璧じゃない」
「WordPressも完全に理解できていない」
そう思っていた僕が、それでも案件を取れたのは、必要最低限の範囲を“確実にできる”状態にしたからだと思います。
このように、「4つの言語とWordPress」が“差がつくセット”である理由は、案件に必要な技術と学習者の脱落ポイントの中間を突いているからです。
完璧ではなくてもいい。
でも、このセットを押さえておくだけで、市場の中で一歩前に出られるのは間違いないと僕は感じています。
「上位20％」って本当？スキル分布と差別化の話
らいち「Web制作で稼ぎたいなら、上位20％に入れ」とよく言われます。
でも、僕は最初それを聞いて「20％って、なんか曖昧だな…」と感じていました。
でも、自分で学び、スクールに通い、SNSやコミュニティで他の学習者と関わる中で、「あ、確かにこれって20％くらいの話かもしれない」と思うようになったんです。
実感値：9割の人が途中で止まっている
僕が在籍していたスクールでは、初回のオリエンテーションで30人くらいの同期がいました。
最初の1ヶ月は、みんな活発にSlackで質問したり、コードを貼って添削を求めたりしていたんですが…
2ヶ月目になると、明らかに投稿数が減りました。
3ヶ月目には、週に1回投稿する人が数名という状態。
最後まで完走して、案件を取れるレベルのポートフォリオを仕上げたのは、おそらく全体の20％くらいだったと思います。
学習フェーズごとの“脱落ポイント”
この経験をもとに、自分なりに「どこでつまずく人が多いのか」を整理してみました。
| フェーズ | スキル範囲 | 脱落率 | 主な挫折要因 |
| フェーズ1 | HTML/CSS | 30％ | 模写の継続・理解不足 |
| フェーズ2 | JavaScript/jQuery | 40％ | 動的処理の理解・複雑化 |
| フェーズ3 | PHP | 20％ | ロジックの理解、文法への苦手意識 |
| フェーズ4 | WordPress | 10％ | 環境構築・テンプレート階層の理解 |
つまり、HTML/CSSをしっかり学ぶ人は多くても、その先に進める人は少ない。
そして、WordPressまで扱えるようになった人は、感覚的に「全体の上位20％前後」だと僕は思っています。
なぜWordPressが“壁”になるのか？
らいち個人的に、WordPressが最大のハードルだと感じました。
- ローカル環境を作る手間（MAMP/XAMPPの設定）
- ファイル構成の多さ（header.php、functions.php、template-partsなど）
- カスタム投稿、カスタムフィールド、固定ページ…複雑な概念の理解
らいち僕も最初は、テンプレート階層図を見て頭がぐるぐるになりました。
「なぜsingle.phpが効かない？」「なんで404になるの？」と1日中格闘していた日もあります。
でも、この壁を越えると、一気にできることが増えます。
- 実際に納品されている多くのWebサイトと同じ構造を組める
- ブログ機能付きサイトや企業の更新型ページが作れる
- 制作会社やクライアントに「WordPress対応可能です」と自信を持って言える
つまり、「使える状態に持っていくのが難しい」からこそ、やりきった人は“差別化”されるんです。
実案件では“できる人”が意外と少ない
これは、実際に案件を受けてみて分かったことですが、「WordPressに詳しい人」はクライアント側にも意外と少ないです。
「WordPress詳しいんですよ」と言っていたクライアントが、実際は「テーマのインストールはできるけど、カスタムフィールドって何？」というレベルだったり。
つまり、少し実装ができるようになるだけで、“専門家”扱いされるケースが多い。
これは、独学で学んでいたときには想像できなかった感覚でした。
僕は「やっとWP触れるようになったレベルだな」と思っていたのに、相手からは「すごい！詳しいですね！」と言われることが何度もありました。
差別化に必要なのは“完璧”ではなく“現場対応力”
ここまで読むと、「WordPressやPHPまでやらないとダメなのか…」と思うかもしれません。
でも実際は、完璧である必要はないんです。
- カスタム投稿の追加方法を調べて実装できる
- functions.phpの記述が参考資料を見ながら書ける
- テーマのテンプレート構成をなんとなく把握している
このレベルでも、実務では十分に対応可能です。
現場では「調べながら対応できるか」が何より重要だからです。
「脱落しないだけで勝てる」世界もある
この業界では、「スキルの高さ」よりも「継続力」や「やり切る力」の方が強い武器になります。
実際、僕が知っているフリーランス仲間で継続的に案件を受けている人たちは、全員が「突出した技術者」ではありません。
むしろ、
- 基礎を丁寧に積み上げてきた
- 期限を守れる
- クライアントと誠実にやり取りできる
そういう“当たり前のこと”をしっかりこなしている人たちです。
らいちだからこそ僕は、上位20％というのは、「天才だけが行ける領域」ではなくて、「やり切る人だけが到達する当たり前の結果」なんだと思っています。
案件が取れるスキルセット：4言語＋WordPressとは？
HTML/CSS：Web制作の“共通言語”
僕が最初に覚えたのも、やはりHTMLとCSSでした。
「とりあえず模写から始めましょう」と言われて、LPのデザインを見ながらコードを書き写していく。最初は1ページ仕上げるのに3日以上かかっていたのを覚えています。
でも、HTMLとCSSがしっかり書けるだけでも、実はWebサイトの8割近くを構築できることに途中から気づきました。
特に大事なのは次の3点です。
- FigmaやXDからのコーディングができる（＝デザイン再現力）
- レスポンシブ対応ができる（メディアクエリ／flex／grid）
- 命名規則（BEMなど）を意識してクリーンに書ける
僕が初めて案件を取ったとき、クライアントに一番褒められたのは「コードが読みやすい」でした。
見た目の再現以上に、“誰が見ても編集しやすいコード”を書くことが、地味に信頼につながります。
JavaScript：UIに「動き」をつける
HTMLとCSSだけでは、静的なページしか作れません。
でも、ユーザーが「気持ちいい」と感じるWeb体験の多くは、JavaScriptによって演出されています。
たとえば：
- スクロールでふわっと要素が表示される
- メニューが開閉する
- モーダルが表示される
- タブの切り替えができる
こういった要素を自力で書けるようになると、案件の中で「動きも対応できますか？」と聞かれたときに「はい」と言えるようになります。
らいちちなみに僕は、最初にjQueryを学びました。
理由は「短く書けて分かりやすかった」から。
そこから少しずつネイティブJSにも触れるようになり、今では両方使い分けています。
大事なのは、「こういう動きって、どう書くんだろう？」と思ったら調べて試す習慣をつけること。
難しいライブラリを使いこなす必要はなく、DOM操作やイベント制御がある程度分かっていれば、現場では十分通用します。
また、jQueryばかり使用するとサイトの動きが重くなるので、徐々にJSに慣れていき実装できるようになることで、制作物の品質も上がります。
PHP：動的処理とWordPressの橋渡し役
JavaScriptの次に僕がつまずいたのが、PHPです。
関数、変数、条件分岐、ループ…と、コードの“裏側”で何が起きているのか見えないという点で、とても難しく感じました。
でも、WordPressを触る上では避けて通れない存在。
というのも、WordPressは内部的にPHPで構築されていて、カスタマイズやテンプレート編集をする際にはPHPの知識が求められるからです。
最初に覚えたのは以下のような内容でした。
- if / foreach などの基本的な構文
- the_title() や the_content() など、WordPressのテンプレートタグ
- get_template_part() や get_header() など、パーツの呼び出し方
このあたりを押さえるだけで、「投稿ページをループで一覧表示する」ような処理が書けるようになります。
らいち正直、今でもPHPは得意ではありません。でも、調べて何とかできる範囲で“使える”状態を維持していることが、現場では重宝されています。
WordPress：案件の半分以上はこれで決まる
らいち僕が学習を進めていく中で、最も「仕事になる」と感じたのが、WordPressでした。
理由はシンプルで、とにかく案件数が多い。世界のウェブサイト全体の約43%で利用されています。
クラウドソーシングを見ても、制作会社の外注募集を見ても、「WordPress対応できる方」「既存テーマのカスタマイズできる方」という記述が本当に多いんです。
そして、WordPressを使えるようになると、以下のようなことができるようになります。
・既存テーマのレイアウト変更やパーツ追加
・カスタム投稿タイプを使ったコンテンツ設計
・ACF（Advanced Custom Fields）での入力項目管理
・固定ページとブログ機能の共存構成
・サイト全体のCMS化と納品体制構築
僕が初めてWordPressで納品した案件は、「クライアントが自分でブログを書けるようにしたい」という依頼でした。
- 投稿画面をカスタムして分かりやすく
- タグとカテゴリを実装
- トップページに最新記事の一覧表示
このくらいのことでも、しっかり動いて更新できるサイトを納品できたことが自信につながりました。
そしてなにより、「納品後に相手が迷わず更新できている」姿を見ると、技術の意味が実感できる瞬間でもありました。
この「4言語＋WordPress」の組み合わせは、僕にとっては「武器が揃った」という感覚に近いです。
これがあれば、静的なサイトも動的なサイトも、ある程度自分で構築できるようになります。
また、「◯◯の対応もお願いできますか？」という追加依頼にも答えやすくなり、提案の幅がぐっと広がるようになりました。
「できるようになるまで」のロードマップ（初学者向け）
「その4つの言語とWordPressを学べば上位20％に入れる」と言われても、正直、最初は想像がつきませんでした。
「何から手をつければいいのか」「どれくらいの期間がかかるのか」そんな不安が常にありました。
ここでは、僕が実際に半年かけて進めた学習ロードマップを、時系列でご紹介します。
1ヶ月目：HTML/CSSの基礎＋模写
最初の1ヶ月はとにかく「書くことに慣れる」ことが目標でした。
・Progateやドットインストールで基本文法
・Google Chromeの開発者ツールの使い方
・LPの模写を2つ仕上げる
最初の模写では、marginやpaddingで悩み、flexboxがうまく効かず、「どうやって中央揃えするの？」と何時間も試行錯誤していました。でも、この時期はとにかく「触った分だけ理解が深まる」感覚がありました。
2ヶ月目：レスポンシブ＋CSS設計
この時期は、「スマホでも崩れないデザイン」を意識して学びました。
・メディアクエリの使い方
・画面幅ごとのレイアウト調整
・BEMやSassによるCSS設計
モバイル対応ができるようになると、一気に「実務っぽさ」が出てくるんですよね。スクールの課題でも「レスポンシブ対応ができていると通過率が高い」と言われていました。
らいちちなみにHTML/CSSでChatGPTを使った実践的なプログラミング方法はこちらの記事でも解説していますので、気になる方はご覧ください。
【ChatGPT】初心者向けにAIを使った実践的なプログラミング方法
3ヶ月目：JavaScript／jQueryの基礎
らいち正直、この時期が一番つらかったです。
・DOM操作（クリックイベント、クラスの追加・削除）
・モーダルやスライダーの実装
・jQueryとJavaScriptの違いを整理
最初は「このコード、何をやってるの？」という感じで、1行1行の意味が分かりませんでした。でも、手を動かしていくうちに、「とりあえずこう書けば動く」が「なぜこう書くのか」に変わっていきました。
4ヶ月目：PHPの基礎＋WordPress環境構築
ここからWordPressに向けての準備です。
・XAMPPでのローカル環境構築
・PHPの基本構文（if / foreach / 変数など）
・WordPressのテーマ構造の理解
初めてfunctions.phpを触ったときは緊張しました。
間違えて画面が真っ白になったこともあります（笑）。
でも、ここを越えると、サイト全体「自分の手で組める」ようになっていく実感がありました。
らいち中級者向けですが、PHPでChatGPTを使った実践的なプログラミング方法はこちらの記事でも解説していますので、気になる方はご覧ください。
【学習中級者向け】PHPで作れるもの完全ガイド｜ChatGPTを使った実践方法も解説
5〜6ヶ月目：WordPress実装とポートフォリオ制作
最後の2ヶ月は、ひたすら「人に見せる・使ってもらう」ものを作る時間でした。
・WordPressでブログ型サイトを構築
・カスタム投稿タイプで実案件を想定
・ACFで管理画面から編集可能に
・GitHubでコード管理＋簡単なREADME作成
1件目の案件につながったのもこの頃です。
「完成させる」って、技術以上に“信頼の証”になるんだと感じた瞬間でした。
1日2時間 × 半年でも十分可能です
僕は子どもが寝たあとの時間を使って、平日2〜3時間＋土日3〜4時間ほど学習していました。
朝活のときもありましたし、週に1〜2回は休んだ日もあります。
でも、積み上げていくと確実に「できること」が増えていくんですよね。
大切なのは、「完璧を目指すこと」ではなくて、“毎日、昨日より少しでも進むこと”。
焦らなくても、半年で案件が取れる状態には十分たどり着けます。
らいち独立後、さらに実力を上げたい方向けに、Web制作のフリーランスとして必要な心構えをこちらの記事で紹介しています。
【コーディングの極意】どの要件・案件でも実現できるキャッチアップ方法。極めるまでのロードマップも紹介
まとめ｜“たくさんの言語”より“仕事になる言語”を
プログラミングの世界には、無数の言語と技術があります。
新しいフレームワークやツールが次々と登場し、SNSを開けば「今はReactだ」「次はAIだ」といった情報が流れてきます。
らいちでも、僕が今こうしてフリーランスとして仕事ができているのは、HTML・CSS・JavaScript・PHP、そしてWordPressという“地味だけど現実的な技術”をしっかり学んだからです。
他の言語も魅力的ですし、将来的に必要になるかもしれません。
でも、最初からそれらを全部やろうとしていたら、間違いなく挫折していたと思います。
僕が思う“仕事になる技術”とは、こんなものです。
・クライアントが困っていることを解決できる
・現場で必要とされている
・実装・修正・納品までの流れが自分で回せる
そう考えたとき、やはり「4つの言語＋WordPress」は、現場と直結している実践的なセットだと実感しています。
また、「上位20％」というと、何か特別な才能が必要だと思われがちですが、僕のように普通の人でも到達できます。
なぜなら、必要なのは完璧な知識でも、高度な技術でもなくて、
- 毎日少しずつ手を動かすこと
- 分からないことを放置しないこと
- 完成させて、人に見せること
この3つを続ける力だからです。
学び始めた頃の僕は、「デザインしかできない自分に、仕事なんて来るわけがない」と思っていました。
でも、少しずつコードを書き、動かし、ミスして、また直して……そうして半年経った頃には、自分でWebサイトを構築し、実際にお金をいただいて納品できるようになっていました。
技術は裏切りません。
派手さはなくても、必要とされている場所で、自分の手で何かを作れる力は、何にも代えがたい自信になります。
「今の自分でも、できるようになるだろうか」
そう思ったなら、まずは一歩、手を動かしてみてください。
あなたが目指している“フリーランスとして自由に働く未来”は、この4つの言語とWordPressの先にあると、僕は本気で思っています。
