- Web制作を勉強してみたいけれど、何から始めればいいのかわからない
- HTMLとCSSの次はJavaScript？それともWordPress？
- FigmaやPHPまで全部勉強しないと、Webサイトは作れないの？
Web制作をこれから学び始める方にとって、最初につまずきやすいのが学習する順番です。
Web制作にはHTML、CSS、JavaScript、WordPress、PHP、Figmaなど、さまざまな技術やツールがあります。名前だけを見ると、
「全部覚えないとWebサイトは作れないのでは？」と思ってしまうかもしれません。
しかし、最初からすべてを学ぶ必要はありません。
まずはWebページの基本となるHTMLとCSSから始め、できることを少しずつ増やしていけば大丈夫です。
- なぜHTMLから始めるのか
- CSSはどの段階で学ぶのか
- JavaScriptはどこまで必要なのか
- WordPressはいつ始めるのか
- PHPはWordPressより先に勉強した方がよいのか
- Figmaはいつ学ぶのか
Web制作の基本的な学習順
最初に全体の流れを確認しておきましょう。
初心者の方には、まず次の順番がおすすめです。
HTML
↓
CSS
↓
レスポンシブ対応
↓
JavaScript
↓
WordPress
さらに必要に応じて、
PHP
を学習していきます。
デザインも学びたい場合は、この流れと並行して
Figma
を学習するとよいでしょう。
すべてを一度に覚えるのではなく、まずHTMLとCSSで1ページ作れるようになることを最初の目標にしてみましょう。
1．なぜHTMLから始めるのか
Web制作を学ぶなら、最初はHTMLから始めます。HTMLは、Webページの文章や構造を作るための言語です。
- 見出し
- 文章
- 画像
- リンク
- リスト
- 表
- フォーム
などをHTMLで作ります。
Webページを人の体にたとえるなら、HTMLは「骨組み」のようなものです。
CSSやJavaScriptを先に学んでも、操作するHTMLがなければWebページを作ることはできません。
そのため、最初は難しいことを考えず、「HTMLを書いてブラウザに表示する」ところから始めるのがおすすめです。
最初からHTMLタグをすべて暗記する必要もありません。
よく使うタグを実際に書きながら、少しずつ覚えていけば十分です。
2．CSSはどの段階で学ぶのか
HTMLで簡単なページを作れるようになったら、次にCSSを学びます。CSSは、HTMLで作ったページの見た目を整えるためのものです。
CSSを使うと、
- 文字の色や大きさを変える
- 背景色を付ける
- 余白を調整する
- 横並びにする
- ボタンを作る
- ページ全体のレイアウトを整える
といったことができるようになります。
HTMLだけでもWebページは表示できますが、CSSを使えるようになると、一気に「Webサイトらしい見た目」になります。
学習するときは、HTMLを全部覚えてからCSSへ進む 必要はありません。
HTMLの基本がわかったら、HTMLとCSSを一緒に使いながらページを作っていく方が理解しやすくなります。
3．HTMLとCSSの次はレスポンシブ対応
HTMLとCSSを使ってパソコン向けのページが作れるようになったら、スマートフォンでも見やすく表示できるようにします。これをレスポンシブWebデザインといいます。
現在のWebサイトは、パソコンだけでなくスマートフォンやタブレットなど、さまざまな画面サイズで閲覧されます。
そのため、
- 画面幅に合わせてレイアウトを変える
- スマホでは縦並びにする
- 文字や画像のサイズを調整する
- メディアクエリを使う
といった考え方を学びます。
HTMLとCSSの基礎を学んだら、簡単な1ページをスマートフォン対応まで仕上げてみると、実際のWeb制作にかなり近づきます。
4．JavaScriptはどこまで必要？
HTMLとCSSの次に出てくるのがJavaScriptです。JavaScriptを使うと、Webページに動きや操作機能を追加できます。
たとえば、
- メニューを開閉する
- ボタンをクリックすると内容を切り替える
- スライドショーを動かす
- 入力フォームをチェックする
- 表示・非表示を切り替える
といったことができます。
ただし、Web制作初心者が最初からJavaScriptを深く学ぶ必要はありません。
まずは、 クリックしたら何かが変わる という基本的な仕組みを理解するところから始めるとよいでしょう。
Webサイトを制作することが目的であれば、最初はJavaScriptのすべてを理解するよりも、
HTML・CSS・JavaScriptを組み合わせて簡単なページを完成させることの方が重要です。
5．WordPressはいつ始めればいい？
HTMLとCSSの基本がわかってきたら、WordPressを学び始めても大丈夫です。
WordPressは、ブログや企業サイトなどを作成・管理できるCMSです。
「WordPressを学ぶならPHPを先に勉強しなければいけない」
と思われることがありますが、必ずしもそうではありません。
WordPressには管理画面があり、
- 固定ページを作る
- 投稿を書く
- メニューを設定する
- 画像を登録する
- テーマを設定する
- ブロックを使ってページを作る
といった基本操作はPHPを書かなくてもできます。
HTMLやCSSを知っていると、WordPressの画面を見たときにも、
「これは見出し」「これは画像」「ここはCSSで見た目が設定されている」
ということが理解しやすくなります。
そのため初心者の場合は、
HTML・CSSの基本
↓
WordPress
という順番でも問題ありません。
6．PHPはWordPressの前に必要？
WordPressを使い始める前に、PHPをすべて学習する必要はありません。
まずWordPressの基本操作を覚え、その後、 もっとWordPressをカスタマイズしたい と思った段階でPHPを学ぶ方法もおすすめです。
PHPを学ぶと、
- お問い合わせフォームの処理
- データの受け渡し
- 条件による表示変更
- WordPressテーマのカスタマイズ
- 投稿データの取得
- オリジナル機能の追加
など、できることが増えていきます。
特にWordPressのオリジナルテーマを作ったり、既存テーマを細かくカスタマイズしたりする場合にはPHPの知識が役立ちます。
したがって、初心者の学習順としては、WordPressを始めるためにPHPが必須 と考えなくても大丈夫です。
まずWordPressを使ってみて、必要になったところからPHPへ進む方法でも十分です。
7．Figmaはいつ学ぶ？
FigmaはWebサイトのデザインを作るためによく使われるデザインツールです。
Web制作では、いきなりHTMLやCSSを書くのではなく、先にWebサイトの完成イメージを作ることがあります。
そのときに利用されるのがFigmaです。
Figmaでは、
- ワイヤーフレームを作る
- Webページのデザインを作る
- 色やフォントを決める
- ボタンなどのパーツを作る
- レイアウトを考える
といったことができます。
ただし、HTMLを学ぶ前にFigmaを完璧にする必要はありません。
コーディングを中心に学びたい場合は、まずHTMLとCSSから始めても大丈夫です。
一方で、
- Webデザイナーを目指したい
- デザインからコーディングまでできるようになりたい
- 自分でサイトの見た目を考えたい
という方は、HTML・CSSと並行してFigmaを学ぶと理解しやすくなります。
まずはHTMLとCSSで1ページ作ることから
Web制作には覚えることがたくさんあります。
しかし、
HTML
CSS
JavaScript
WordPress
PHP
Figma
を最初から全部覚えようとする必要はありません。
まずは、
HTMLでページを作る
↓
CSSで見た目を整える
↓
スマートフォンにも対応させる
ここまでを一つの目標にしてみましょう。
その後、
動きを付けたい → JavaScript
更新しやすいサイトを作りたい → WordPress
WordPressをもっとカスタマイズしたい → PHP
デザインから作れるようになりたい → Figma
というように、自分が作りたいものに合わせて学習範囲を広げていけば大丈夫です。
Web制作では、「すべて覚えてから作る」のではなく、作りながら必要なことを一つずつ覚えていくことが上達への近道です。
