「HTML/CSSを一通り勉強したけど、次になにを勉強すればいい…？」
このように悩んでいる人も少なくないはず。
HTML/CSSの次に何を勉強するかは、あなたがどんなキャリアを選ぶかによって変わります。
私は現在、主にフロントエンドエンジニアを主軸にしたWeb全般のエンジニアなのですが、今から学び直すとしても、この手順を踏みます。
Web業界を3社経験した私が、今現場で使われている技術を踏まえた最適な学習ロードマップを紹介します。
エンジニア共通：まずはここから
エンジニア志望であれば以下の技術は避けて通れません。まずはこの基礎を固めましょう。
JavaScript
HTML/CSSで「見た目」を作れるようになったら、次はJavaScriptで「動き」と「機能」を作りましょう。 いきなりReactやNext.jsなどのフレームワークは勉強せず、まずは「Vanilla JS（素のJavaScript）」で以下のことができるようになりましょう。
- 基本文法（変数、関数、if文、for文）
- ボタンをクリックしたらメニューが開くハンバーガーメニュー
- スクロールすると要素が出現するフェードインアニメーション
まずはWebサイトギャラリーを見て「こんなサイトの動き・機能を作ってみたい！」を見つけて、真似してみましょう。
Git / GitHub
Gitとは「コードを誤って消してしまった！」「昨日の状態に戻したい！」という事故を防ぐための「バージョン管理ツール」です。Gitはどんなエンジニアであろうと、実務でチーム開発する際には必須のスキルです。
GitとGitHubは意味が異なります。
- Git: PC上で履歴を保存するツール。仕組みのこと。
- GitHub: 履歴をネット上に保存し、チームで共有するサービス。
Gitにはcommit, push, pullなどのコマンドがあるので、それらを使えるようになっておきましょう。
GitHubのアカウント作成はこちらから。
レンタルサーバーでWebサイトを公開
作ったサイトを自分のPCで見るだけでなく、公開してみましょう。 作ったサイトを公開することもエンジニアとして必須のスキルです。
サイトを世の中に公開するには「サーバー」と「ドメイン」が必要です。
世界的な技術調査機関であるW3Techsのデータ（2025年時点）によると、日本国内のウェブサイトの約70%以上が「エックスサーバー」「さくらインターネット」「GMO（ロリポップ等）」といった国内のレンタルサーバーで動いています。
レンタルサーバーを使えば、格安でサーバーを借りることができます。
レンタルサーバーを契約して、ドメイン取得の流れを経験することで、Webサイト公開までの最低限の操作を理解し、実務でも活かすことができるでしょう！
フロントエンドエンジニアを目指すなら
近年、フロントエンドの技術はとても発展し、フロントエンドだけでできることが増えました。ここではフロントエンドエンジニア向けのステップです。
モダンJavaScriptとnpm
“モダンJavaScript”とは後述するReactやNext.jsを使ったWeb開発手法で、これらが登場したことによって、フロントエンドの実装方法が大幅に変わりました。
モダンJavaScriptの開発手法を可能にするのが、npm（node package manager）と呼ばれるパッケージ管理ツールです。
- npm: 世界中のエンジニアが作った便利な「部品（パッケージ）」を、自分のプロジェクトに自由に取り込める仕組みです。
つまり、Reactなどを含む様々なライブラリやフレームワークをnpmが管理してくれるということです。
現在のフロントエンド開発手法には避けて通れないnpm。少し難しいですが、勉強しておくことでフロントエンド開発手法が広がります。
Vite / Astro
このあたりが「テキストファイルでHTMLやCSSを書いて実装」から「ツールを駆使したモダンな実装」へと開発の手法が変わるフェーズです。まさに、マークアップとフロントエンドの境目だと思っています。
フロントエンドのツールとしてよく使われているのが、ViteとAstroです。
- Vite: 開発環境を爆速で構築するツール。今の標準です。
- Astro: 最近大人気のフレームワーク。内部でViteが使われています。HTML/CSSベースで直感的に書けるのに、非常に高速なサイトが作れます。「Reactはまだ難しいけど、モダンな開発をしたい」という方の入門に最適です。
どちらも日本語のドキュメントがあるので、マークアップエンジニアでもあまり抵抗なく取り組めると思います。
これらのツールやフレームワークもnpmを用いてインストールします。
例えば、npm create astro@latestといったコマンドを打ち込みます。これにより、Astroの開発環境を一瞬でセットアップできるのです。
個人的にAstroは大好きなフレームワークで、最近のWeb制作や簡単なWebアプリケーションを作るときにはとても重宝しています。学んでいて損なしです。
React / Next.js
現在、フロントエンドにおいて最も人気のあるフレームワークです。転職求人を見ていても応募条件にReactやNext.jsを挙げている企業が多くあります。
- React: Facebook（Meta）が作ったライブラリ。コンポーネントごとにコードを管理します。
- Next.js: Reactベースのフレームワーク。就職・転職市場で最も需要が高いスキルセットの一つです。
ReactやNext.jsアップデートが頻繁に行われ、記法や仕様の移り変わりが激しいです。去年まで使えていた記法が、現在では非推奨なんてこともザラにあります。
比較的最新の本を購入して学んだり、いくつか動画教材を購入して学習していました。
TypeScript
JavaScriptに「型（Type）」というルールを加えた言語です。 「数字が入るはずの場所に文字が入ってエラーになる」といったミスを事前に防げます。最近のフロントエンド開発では、JavaScriptではなくTypeScriptで書くのが当たり前になっています。
ホームページ制作をするだけであればTypeScriptの書き方は大袈裟に感じます。しかし、大規模なWebアプリケーション開発になるとより堅牢にコードを書いていないと予期せぬ箇所でバグります。
個人的にはReactやNext.jsを学ぶタイミングで一緒に学ぶのが理解しやすいかと思います。
ちなみに、GitHubによると2025年に最も使われていたプログラミング言語として、TypeScriptが1位となりました。
Webエンジニアを目指すなら
Webエンジニアと括ってしまいましたが、ここではホームページやコーポレートサイトを作るWeb制作ができるエンジニアを指しています。バックエンドエンジニアもこのセクションに当たります。
WordPress
世界の全ウェブサイトの約43%がWordPressで構築されていると言われており、CMS（コンテンツ管理システム）を利用しているサイトに限定すれば、そのシェアは60%以上にのぼります。（参考：W3Techs）
HTML/CSSでデザインしたものをWordPress化できるスキルがあれば仕事の幅が一気に広がります。WordPress化とは、要するにWordPressのオリジナルテーマを作ることです。
WordPressにはテーマが用意されており、それらをインストールしてブログを立ち上げたりできるのですが、そのテーマを一から作ることを指しています。このブログもオリジナルテーマで制作しています。
WordPressのソースコードの中に/themeディレクトリがあり、その中にPHPを書いていくことで、オリジナルテーマを作成できます。
ゆくゆくはPHPを使ったバックエンドをメインとしたエンジニアを目指す人にも、一度WordPressを触ることはとても勉強になると思います。
Webデザイナーを目指すなら
「コードも書けるデザイナー」は非常に市場価値が高いです。エンジニア目線で、このような知見があるデザイナーがいたら重宝するという意味でピックアップしています。
Figma
今、Web業界で最も標準的なツールです。エンジニアの私から見て、デザイナーがFigmaを使ってくれると以下のようなメリットがあり、本当に助かっています。
- リアルタイム共有: 「最新版のデザインデータ、どこですか？」という不毛なやり取りが消える。
- FigmaMCP: 革命。
特に最近ではFigma MCPの登場により、AIがFigmaのデザインデータを直接読み取ってコーディングできるようになりました。「デザインが整っている ＝ AIが一瞬で完璧なコードを生成できる」という時代です。
使いこなせれば簡単なページであればエンジニアいらず、AIのみで完結できると思うほどです。
Adobe（Photoshop / Illustrator）
「今はFigma全盛期だからAdobeは不要？」と思うかもしれませんが、現場ではまだまだ現役です。
現在でもFigmaだけでなく、PhotoshopでWebデザインデータをいただくことはありますし、Webデザイナーにとっては欠かせないスキルスタックです。
まとめ｜目的にあった技術を選んで最短ルートでスキルアップを！
HTML/CSSを学んだあとの次のステップを目的別にご紹介しました！
今から何を勉強しよう…？と悩んでいる方の参考になりましたら幸いです！
Popular 人気の記事
