「初心者がWeb制作のスキルを身に付けるには、何から始めればいいのだろうか？」
「Web制作に必要な知識ってなんだろう？」
「初心者向けのWeb制作の学び方を知りたい」
本記事では、Web制作を学びたい方向けに、
- Web制作で身につけたい知識
- Web制作の学習に役立つサービス
- Web制作について学べる書籍
- 学習のポイント
をまとめました。これからWeb制作を学びたい方は是非参考にしてみてください。
この記事もオススメ
Web制作初心者が身につけておきたい知識・スキル
Web制作初心者が身につけておきたい知識やスキルを解説します。
- Webサイトの仕組み
- Webデザインの基礎知識・スキル
- HTML/CSSの知識・スキル
- JavaScriptの知識・スキル
- WordPressの知識
- SEOの知識
Webサイトの仕組み
まずは、あなたが今後手がけることになるWebサイトの仕組みについて理解しておきましょう。
Webサイトはどのようなシステムで動いているのかを理解することで、自分が身につけておくべきスキルや必要な能力もわかりやすくなります。
ただなんとなくスキルを身につけるのではなく、仕組みから理解することで本当の力になります。
以下のサイトを参考に、Webサイトやインターネットの基礎から学習してみてください。
Webデザインの基礎知識・スキル
Web制作・デザイナーとして欠かせないのが「Webデザインの基礎知識」や「Illustrator・Photoshopを扱うスキル」です。
特にIllustrator・Photoshopは、例えば企業で働く場合、採用条件にこの2つを扱えることが含まれていることもあります。今後Web制作で仕事をしていく上で扱えるようになっておいて損はないソフトです。
書籍を利用して勉強するのも良いですが、一番効果的なのは、実際のサイトを真似してデザインしてみることでしょう。アクセスの多いサイトは、デザインにもこだわりがあるものです。
Illustrator・Photoshopの使い方をマスターするためにも、まずは真似してみることから始めてみてください。
関連記事：
HTML/CSSの知識・スキル
こちらもほぼ必須で必要となります。HTML/CSSです。
HTMLとは「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略で、Webページを作成するためのマークアップ言語のことを意味します。
CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で、HTMLで作られた文書に色や大きさなど見た目のデザインを施す言語です。
Webサイトの見た目を整える上で、欠かせないプログラミング言語の一つです。
こちらも本や、後ほど紹介する学習用サイトを利用して勉強を進めていくべきでしょう。
ただ、知識だけ詰め込んでもスキルになったとは言い切れません。目標として「1つのサイトを立ち上げデザインする」ことを目指してみましょう。実際に手を動かすことで、スキルとして体に覚えこませることができます。
初心者のうちは一からサイトを立ち上げるのも大変でしょう。その場合、無料ブログを立ち上げて、HTML/CSSを使って見栄えを良くするということから始めるのもおすすめです。
参考となるコードを紹介しているサイトもあるので、まずはそのコードのコピー&ペーストから始め、コードに何が書かれているのかを本などを使って理解していくと、効率良くスキルアップできることでしょう。
JavaScriptの知識・スキル
JavaScriptもプログラミング言語の1つであり、Web制作にも必要となる言語です。
Webサイトを見立てる中で、例えば
- マウスを合わせたらボタンの色が変わる
- アニメーションが動く
などの動作を見たことはないでしょうか。このようなwebサイト上での動作を加えるなどの目的でJavaScriptが使われます。
HTML/CSSに比べるとより高度なプログラミング言語となるでしょう。ただ、Webデザインの幅を広げるのであれば、非常に役立つ言語です。こちらもできれば習得しておきたいところです。
jQueryから取り掛かるのもおすすめ
JavaScriptやプログラミング言語に全く触れたことがないという場合、jQueryというライブラリを使いこなすことから始めてみると良いでしょう。
jQueryはJavaScriptのライブラリの一つです。コードがシンプルであるため、プログラミング初心者でも扱いやすいとされています。
またjQueryにはプラグインがあるため、プラグインを使えば簡単に動きのあるサイトは作れてしまいます。JavaScriptでの動作をイメージするにはもってこいと言えるでしょう。
あまりにもプラグインに頼りすぎると、スキルにつながらないことが考えられます。最初は理解するためにも自分の手でコードを書くようにしましょう。
WordPressの知識
近年、WordPress（ブログ運営を手助けするソフトウェア）で運営するWebメディアも増えています。
W3 Techsによると、2017年時点で世界のWebサイトトップ1000万のうち、およそ29%がWordPressによって動作しているとのことです。
このデータから見ても、今後あなたに仕事を依頼するクライアントが、WordPressでのデザインを依頼する可能性も十分に考えられます。WordPressに関する知識もつけておくべきでしょう。
理想は、WordPressに使う「独自テーマ」の作成ができるレベルになることです。自分でテーマを作成できれば、WordPressの仕組みを一から理解できるようになります。
HTML/CSSのスキルがあれば、独自テーマの開発は可能ですので、まずはHTML/CSSの習得を優先してください。
テーマを作成するのに合わせて、自分でもサイトを運営することもおすすめです。その中で実装したい機能を試すなどすれば、実践経験を積むことができます。
PHPも習得できるとさらに理想的
WordPressの大部分は「PHP」というプログラミング言語で作成されています。もし、WordPressで高度なカスタマイズをしたいのであれば、PHPのスキルも必要となるでしょう。
HTML/CSS,JavaScriptと合わせてPHPも習得しておくと、Webデザイナーとしてさらなるスキルアップになります。仕事も獲得しやすくなるでしょう。
この記事もオススメ
SEOの知識
Webサイトを依頼する個人あるいは組織の狙いは、自分たちのサイトや商品を多くのユーザーに知ってもらうことにあります。
つまり、Googleなどの検索エンジンに上位表示させることを考えているのです。
これはWeb制作者にも関係があります。Web制作の依頼主が最大限の効果を得られるようにSEO（検索エンジン最適化）の知識も身につけておくべきです。
SEOを勉強するのであれば、書籍での勉強はおすすめしません。
なぜなら、SEOのアルゴリズムは日々微妙に変化しており、数ヶ月単位で見ると、以前の知識が全く通用しないということも珍しくないからです。常に最新の情報を獲得し続ける必要があります。
できれば自分でブログやサイトを運営する、またはSNSなどを利用してサイト運営者のSEOに対する見解などを参考にすると良いでしょう。
SEOのアルゴリズムはGoogleによって決められていますが、どのようなルールがあるのか、またどのような変化をしたのかは具体的に発表されることがありません。
どれだけ調べても「推測」の域は出ないのですが、調べた中で身につけた知識は確実に役立ちます。
特に、アクセス数などを調査できる「Googleアナリティクス」や、ユーザーがサイトを調べているワードを調査できる「Serch Cosole（サーチコンソール）」などのツールは使えるようになっておいて損はありません。
Web制作の学習に役立つサービス・サイト
実際にWeb制作の勉強を進めるならば、学習に使えるWebサイトを利用することをおすすめします。
有名なところでは、以下のようなサービス・サイトがあります。
- Progate
- ドットインストール
- サルワカ
- Codecademy
主な特徴を説明するので、学習の際にお役立てください。
Progate
料金：無料〜（有料会員価格は公式サイト参照）
プログラミング学習用のWebサービスとして有名な「Progate」。問題形式でコードを書いていき、プログラミングを習得していく作りになっています。
HTML/CSS・JavaScript・jQuery・PHPといった、先ほど紹介したプログラミング言語の学習カリキュラムも用意されているので、プログラミングの初歩を踏み出すためにProgateを利用するのはとてもおすすめです。
ドットインストール
料金：無料（プレミアム会員は980 / 月）
「ドットインストール」もプログラミング学習サービスとして有名です。Progateとの大きな違いは、動画を使って学習を進めていくことにあります。
講師による授業が視覚・聴覚から学べることもあり、内容が印象に残りやすいです。動画である分、コードの書き方や作業が目で見て分かるのは初心者としてもありがたいでしょう。
サルワカ
「サルワカ」はWebメディア（ブログ）であり、学習用のサービスとは異なります。しかし、Webデザイン・Web制作に関わる情報はほとんどサイト内で紹介しています。
しかも、専門用語はなるべく使わず画像をたくさん使って初心者でもわかりやすいような説明をしてくれます。Web制作を仕事とする人はもちろん、趣味でブログなどを立ち上げた人にとっても非常に役立つサイトです。
Web制作を学び始めた最初の頃は特にお世話になるサイトだと思います。サイト内にあるコードを真似るなどして、活用してみましょう。
Codecademy
料金：無料（プロ会員は15.99ドル〜 / 月）
「Codecademy（コードカデミー）」では目的別に4つのコースが準備されています。
Codecademyフォーラムというコミュニティもあり、言語に関する質問を投げかけたり、知識を共有する場としても利用できます。
一つネックとして日本語には対応していない点があるでしょう。翻訳機能を使って学習をしていきましょう。
Web制作の学習に役立つ書籍
Webサイトだけでなく、書籍を使っての学習も合わせて進めるとより知識の定着が図れるでしょう。
以下では、
- HTML/CSS学習向け書籍
- JavaScript（jQuery）の学習向け書籍
- WordPress（PHP）の学習向け書籍
を紹介します。
HTML/CSSの学習向け書籍
まずはHTML/CSSの学習向け書籍を2冊紹介します。
HTML5&CSS3デザインきちんと入門
初めてHTML/CSSに触れるという方は、まず買っておきたい一冊です。HTML/CSSの超基本的な部分から解説してくれます。
書籍に記載されたサンプルコードを真似することで実践的なスキルも身につけることは可能です。
ただ、あくまでも基礎的な内容の書籍なので、より高度なデザインを実現させるにはレベルアップが必要となるでしょう。
他の方の評価にもあるように一つ一つの項目について非常に丁寧な説明がなされており、web初心者を想定してか html とはなんぞやというところから解説が始まります。
新旧問わず定番のcssタグについてはもちろん、後半では現在主流になってきている「フレックスボックス」の作り方にも触れ、押さえておきたい最新の知識も学べるつくりです。
本自体のデザインもオシャレでセンスのある人たちがつくったんだろうなという信頼も置けます。
引用：Amazonレビュー
HTML5&CSS3デザインブック
HTML/CSSの学習において、定番といえる一冊です。基礎的な内容から少し発展して、実際にWebサイトを作るまでを学習できます。
実践的な書籍なので、基礎を学習し終わってから取り掛かると良いでしょう。
ウェブやスマホのサイトを最新のHTML5やCSS3で解説してくれてます。
当然、コード付き。ただ内容的には初心者向けでなく、だからと言って中・上級者には物足りないかもしれません。
どちらかといえば初心者を卒業し、初級者としてさらに「スキル」を磨く人向けの内容です。
引用：Amazonレビュー
JavaScript（jQuery）の学習向け
続いては、JavaScriptとJQueryの学習向け書籍を3冊紹介します。
確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)
JavaScriptをこれから始める人、一度つまずいたことがある人でもこの一冊でJavaScriptの基礎が学べます。
サンプルコードを真似すれば実践的なスキルも身につくので、JavaScriptの第一歩を踏み出すための一冊として活用すると良いでしょう。一部jQueryに関する内容もあります。
かっちり体系的に書かれていないので初心者は取っ掛かりやすい。
CHAPTER５までは分かりやすく、何度も繰り返し行うと理解が深まります。
他のJavascript書籍の様に初心者が分かりづらいオブジェクト言語の理論を多用した表現で書かれていないのが親切。
引用：Amazonレビュー
スラスラわかるJavaScript
JavaScriptに関する知識が一切ない人が、自力でプログラムが作れるようになることを目指す一冊です。
HTML/CSSの基礎についても触れているので、Webデザインに必要はプログラミング言語の基礎を身につける上で役立つでしょう。
プログラミング自体が全くの初めて、という人のためのJavaScript入門。平易な日本語で丁寧に解説されており、中高生から年配の読者まで無理なく学べると思う。知識ゼロの初心者に対する「教え方」という点でも参考になる。
引用：Amazonレビュー
jQuery最高の教科書
jQueryの定番とも言えるスクロール、スライダーなどの動作や、さらに発展させた機能の実装などにも対応しています。
サンプルコードを真似して、手を動かしながら学習することでスキルも定着しやすいです。
ただ内容はWebデザイナー向けで、HTMLやCSSを理解してから取り掛かる方が良いでしょう。
良く書かれている教材です
字も見やすいですし
良く読んで、サンプルを反復すれば中級までの概念とスキルはは学べます。
ただ、jQueryを学ぶには多少はJavaScriptの勉強は必要ですね。
引用：Amazonレビュー
WordPress（PHP）の学習向け書籍
最後は、WordPressとPHP学習向け書籍を2冊紹介します。
ただ、PHPなどはプログラミングの発展的な内容も含まれるので、これらはHTML/CSS・JavaScriptを身に付けた上で取り組むことをおすすめします。
WordPressレッスンブック HTML5/CSS準拠
WordPressの仕組みや基本的な操作方法などを網羅しており、WordPressの理解に役立ちます。また、サイトの拡張やカスタマイズの事例も紹介しているので、応用的な知識も身に付けられるでしょう。
WordPressが何かよくわかっていない人なら、必読の一冊です。
WordPressをプラグインではなく自分で細かくカスタマイズしたいと思っても、仕組みがよくわからないと手が出せません。
本書は基本的なサイトのテーマを一から構築していきながらWordPressの仕組みを理解できます。
前提知識としてHTML、CSS、PHPについてさわり部分でも知っていればスラスラと読めます。
引用：Amazonレビュー
スラスラわかるPHP
プログラミングもPHPもわからない状態から、PHPの基礎を身につけ、自力でプログラムの作成をできるようになるまでサポートしてくれる一冊です。
画像などをふんだんに使って、初心者でもわかりやすいように解説しています。
もちろん、基礎的なスキルではできることも限られるので、さらにPHPをマスターしたい人はレベルアップが必要です。
PHPの教科書と謳っているが、単なるプログラムの解説書ではなく、
インターネットやサーバの知識、その周辺情報をも掲載している。
可愛らしいイラストを交えて親切丁寧に解説してあり、非常に分かりやすい。
とりあえず超初心者がこれからPHPという言語でWebプログラムを作るために最適な1冊だと思われる。
引用：Amazonレビュー
学習を進める上で大切なポイント
全くの未経験の状態から学習しようと思っている方は、Web制作のハードルが高いと感じたかもしれません。
しかし、必要以上に不安になる必要はありません。学習を続けていけばスキルアップは可能です。そのために重要なポイント・心がけについても紹介しておきます。
- 最初は誰しもつまずくもの
- 身につくまで繰り返し学習する
- 毎日欠かさず学習する
- わからない点は人に質問する
最初は誰しもつまずくもの
Web制作に限った話ではありませんが、初めてのことを学習する時はうまくいかないものです。誰しも大なり小なり壁に突き当たるものです。
そのため、もし学習の中で理解できない部分があってもネガティブにならないようにしましょう。現在Web制作の現場で働く人のほとんどが経験しているものです。
問題は、理解できないこと以上にどのようにすれば理解できそうかを考えることです。そのように前向きに考え方を切り替えられた人が、高いWeb制作のスキル習得に至っています。
身につくまで繰り返し学習する
人間は、一度覚えたはずのことでもしばらく時間が経つと忘れてしまいがちです。例えば、HTML/CSSの書籍を一通り読んだとします。
しかし、それだけでは抜け漏れがあったり、序盤の学習内容を忘れてしまうこともあるでしょう。
知識・スキルの習得には何度も繰り返すことが大切です。同じ書籍でも2回3回と読むことで、内容が頭の中に入ります。
スポーツなどを見てもそうですが、選手は素振りなど同じ動作を何百何千回と繰り返します。これは、試合中でもその動きができるように体に染み込ませるためです。
勉強も同じで、繰り返すことで頭にも体にも記憶されていくのです。文字通りスキルを「身につける」ことになります。
毎日欠かさず学習する
学習を始めたら、毎日欠かさず行うのが理想的です。知識の定着という面でも毎日学習した方が早くなるのはもちろんですが、モチベーションの面でも重要となるのです。
学習が途切れ途切れになってしまうと、モチベーションが下がって、学習の進捗も遅れてしまいます。するといつまでたってもスキルが上がらず、最悪の場合、挫折につながりかねません。
仕事などの関係で、毎日何時間も学習時間を確保するのは難しいかもしれません。そのような場合でも、1日10分だけでもいいので時間を見つけてみてください。
10分で学べる範囲は限られてしまいますが、学習に穴を空けないことでモチベーションの維持にはなるはずです。
わからない点は人に質問する
最初に説明した通り、Web制作の学習の中で必ずわからない点が見つかります。そのような時は、いつまでも悩まずわかる人に質問してみましょう。
自分で考えることも大切なのですが、どうしても学習効率が下がってしまいます。サクサクと学習を進めてスキルアップを図りたい人は、質問することが最善の方法です。
就職・転職などで学習期間が限られている人ほど質問する意識が大切です。
身の回りに質問できる人がいない場合。ネットで検索して情報を手に入れましょう。ネットで正しい情報を見つける能力もWeb制作者に必要なスキルの一つです。
未経験からの転職の悩みを解決！無料カウンセリング開催中【転職成功人数4400名以上！※1】
こんな不安や疑問はありませんか？
・未経験から転職して、本当に年収が上がるのか
・ITエンジニア転職後の働き方や稼ぎ方が想像できない
・スキルゼロからITエンジニアとしてフリーランスになれるのか
カウンセリングでは、ITエンジニア転職やプログラミング学習を知り尽くしたプロのカウンセラーが、あなたの悩み解決をサポートします。満足度93%※1、累計利用者数は42,000人以上！※2
無料で相談できますので、気軽にご参加ください。【テックキャンプは給付金活用で受講料最大70%オフ※4】
※1.2018年10月24日〜11月16日(N=106) 2.2020年12月時点 3.テックキャンプ エンジニア転職は経済産業省の第四次産業革命スキル習得講座の認定も受けており、条件を満たすことで支払った受講料の最大70％(最大56万円)が給付金として支給されます
