初心者向け：独学でWeb制作の勉強方法まとめ
私はWeb制作をすべて独学で勉強してきました。また、今も継続中で、すでに16年ほど勉強中です。そこで今回は、初心者の方で、独学でweb制作の勉強をしたいと思っている方向けに、何をどのように勉強すれば、独学でWeb制作ができるようになるのか記載してみたいと思います。
初心者の方で、Web制作を独学している！これから学習してみたいと思う方に少しでも、独学でのWeb制作学習の参考になれば幸です。
という事で、それでは今回はッ、
- ・Webサイト制作の仕組みと基礎を理解
- ・初心者でも理解できるWeb制作参考サイト
- ・Webサイト制作ができるようになるまでの時間とコツ
- ・独学でWeb制作の勉強方法まとめ
上記について記載していこうと思います…。
Webサイト制作の仕組みと基礎を理解
初心者の方がWeb制作勉強の第一歩として、どのようなデザインのWebサイトを制作したいのか、まず考える必要がございます。また、ページ制作初期段階でも、よく見かけるページ上に動き（アニメーション）や複雑な構成のデザインが施されたサイトを作成したいと思うことでしょうが、初期段階ではあまりオススメいたしません。アニメーションや複雑なレイアウトのデザインになりますと、スタイルシート（CSS）のソースコードの記載が、一気に複雑になり途中で挫折してしまう要因になってしまいことと思います。
まずは、比較的簡単にできそうなデザインの、参考になりそうなサイトを探し、それを真似するようにページ自体の作成することをオススメします。
また、ここまでであれば、Webサイト制作初心者の方でも簡単にできることと思いますが、参考になるサイトを見つけた時点で、ページの骨格であるワイヤーフレームなどを作成する必要がなくなります。
次に理解しなくてはならない内容として、HTMLとCSSの技術が必要になってきます。サイト制作では画像など（JavaScriptやjQuery含む）も色々と必要になりますが、現段階では画像などの細かな作製技術につきましては割愛いたします。
参考までに、実際に私が初めて独学を始めた2004年頃は、HTMLだけでCSSは後から（2008年頃から）学習いたしました。実は2004年頃、すでにCSSの技術は確立されていましたが、独学を始めた2004年頃は、おもにテーブルレイアウトが多くのサイトで採用されていました。
実際に、HTMLと比べるとCSSは比較的複雑な要素で、なにを隠そう私もCSSでデザインをおこなえるようになるまで、他の業務をこなしながらの勉強だったこともあり、約半年ほどかかってしまったことを覚えております。HTMLだけであれば比較的簡単に覚えることができることと思いますが、CSSを含めてできるようになるには、最短でも1ヶ月から2ヶ月位を目安に考えておくことがイイでしょう。
また、勉強方法としては、実際に手を動かしてソースコードを記載してしていくことが重要になってきます。本を見たり、解説動画を見ているだけですと、いつまでたってもHTMLタグやCSSのプロパティを覚えることが、できなくなってしまうことと思います。
テーブルレイアウトとは、本来表組みのデータを表す為の要素を使用してレイアウトを行うこと、またその手法を用いて制作されたWebページのことを指します。 なお、(X)HTMLにおいては、table要素をレイアウトに使用するべきではなく、スタイルシートを用いてレイアウトを行うべきとされています。
オススメのサーバーもしくはローカル環境
Webサイト制作の仕組みとしては、実際にサイトのデザインをおこない、Webサーバー上にアップロードして、初めてWebサイトが完成となる訳ですが、その際は、Webサーバーが必要になります。
また、制作途中であれば、ローカル環境でWebサイトを確認することも可能で、Webサイト制作の基本となるHTMLとCSSのソースコードが記載することができれば、どのようなデザインまたはスタイルで表示するのかも、ローカル環境で確認することも可能になります。
上記でご紹介した、エックスサーバー！実はこのサイト事態もエックスサーバーで稼働しています。
比較的安価で、安定した表示がおこなえることと、膨大なアクセスに耐えることができるサーバーなのが、オススメの理由です。ただ価格の安いだけのサーバーは、あまりおススメいたしませんので、十分にサーバー自体のスペック（内容）を確認することが重要になります。
初心者でも理解できるWeb制作参考サイト
ドットインストール
≫ はじめてのHTML (全14回)プログラミングならドットインストール
≫ はじめてのCSS (全15回)プログラミングならドットインストール
ドットインストールは、私も良く見ています。プログラミング全般を動画（3分間）で分かりやすく解説しているサイトになります。
個人的には、「多少進み方が早いなッ！」と思うことが多々ございますが、無料でここまで解説して頂けるのは、非常に有益で良質なサイトだと思います。
また、これと並行して下記に紹介する書籍で学習することをオススメします。書籍ですとサンプルコードなどが、多々記載されている場合がございますので、初心者の方であれば、非常に参考になることと思います。
補足といたしましては、このMK-blogでもHTMLとCSSにつきましては、結構なボリュームで記載してあり、またtipsとしてサンプルコードも記載してありますので、合わせて学習教材になれば幸いです。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
上記は、Webクリエーターズボックスの中の人「Webデザイナー+WebデベロッパーのMana」さんが記載した書籍になります。
レビューにも記載してあるとおり、初心者の方に、非常に分かりやすく理解しやすい内容になっています。
サイト：Webクリエーターズボックス自体は、あまり初心者向けではなくサイト名が表すように、現役のクリエーターに向けた内容が中心になっています。
HTML記載方法とCSSプロパティが分かる参考サイト
ある程度、HTMLとCSSの学習をすすめますと理解いただけることと思いますが、使い方を理解する、または使い方を覚えることは可能ですが、HTMLすべてのタグ、CSSすべてのプロパティを覚えることは不可能であることに、気が付くことと思います。
そんな時はッ、まずはMK-blog以前の記載記事HTMLは、
CSSは
上記をご参考にして頂ければ幸いです。また、下記も非常に参考になるサイトだと思います。
上記HTMLクイックリファレンスさんは、HTML・CSSのほかにも基礎的な内容が、多々記載されています。簡潔な説明内容になるので、初心者の方には、多少難しく感じることがあるかもしれません。
Webサイト制作ができるようになるまでの時間とコツ
初心者の方が、Webサイト制作ができるようになるまでの時間につきましては、簡単なものであれば最短で2週間から1カ月くらいかと思います。しかしながら、あくまでも簡単なものに限ります。私を例にとりますと、イケてるサイト作成をめざし！早16年という感じでお勉強を続けております。
また、このページで説明した、HTMLとCSSを使って簡単なWebサイトであれば、作成することは可能ですが、なかなかそれでは満足いかないWebサイトになってしまうことと思います。
制作時のコツを多少記載してみます。
ズバリ！！「焦らず、ゆっくり、少しづつ！」になります。
ご説明いたしますと、例えば、いまヴァージョンアップを行っております、地酒のかどや「お歳暮特集」
こちらのページであれば、同業者の方からも「コレ！大変でしょ！」と言われたことがございます。
少しご説明いたしますと、すでにこのページ自体は結構古く、確か初めて作成したのは2014年頃になるかと思います。
そこから、スマートフォン用のページを加え、さらにこのページ自体は、jQueryのスライダーとCSS3のアニメーションとwowというJavaScriptが搭載されていて、さらにSEO対策も講じています。コレを聞いただけでも、初心者の方であれば複雑だろうし、何より大変と思うかもしれません。
これをどうやったら上手く作成できるかというと、先ほど記載した「焦らず、ゆっくり、少しづつ！」になります。
では具体的には、初めはPC版ヘッダーだけ作成していき、次にコンテンツの大枠を作り、その次にコンテンツの1番目、上記ページではメインのイメージスライダーという具合に作り進めていく訳です。要は、パーツごと、もしくは箇所ごとに制作していくわけです。
現在の私であれば、レスポンシブウェブデザイン（PCとスマホをワンソース）で作製したとしても、おおよそ20時間から30時間ほどで完成することと思います。16年かけてお勉強しても1日で完成とは流石にいきません！！
なので、「焦らず、ゆっくり、少しづつ！」が、プログラミングなどに取っては非常に重要なコツになります。
部分部分に分けて作成することを考えてみれば、特殊なものの場合は別ですが、比較的難しい物でも作ることが可能であることが理解できることと思います。また、初心者の方が今後Web制作だけでなく、phpやその他のスクリプトなどを勉強する際も、重要な考え方となることと思います。
もう一つ分かりやすいように例
例えば趣味などで楽器などの練習を行ったことがある方もいる事と思います。
私は趣味で、学生の頃からギターの演奏をおこないますが、「この曲が弾いてみたい！」と思うことが多々ございます。しかしながら残念なことに、思った瞬間、練習を始めてみた所で、いつまでたっても上手く弾くことができない！！などという経験も多々ございます。皆様も同じような経験をされた方がいる事と思います。
いつまでたっても、なかなか上手く弾くことができない場合、弾きたいと思う曲とは別の、もう少し簡単な曲を選び直し、簡単な曲のほうから練習を行い、さらに他の簡単な曲の練習を続けること半年！以前、弾きたかった曲に再度挑戦すると、比較的簡単に弾けてしまうことなどがあります。
Webサイト制作初心者の方で、同じような経験をしたことがある人もいる事と思います。Webサイト制作も、これと全く同じで、初めのうちは比較的簡単にできそうな内容の制作をオススメします。
初心者の方でも経験を積むにつれ、難しいWebサイト制作も、徐々にではありますがスキルアップが望めることと思います。
ポイントは、「焦らず、ゆっくり、少しづつ！」です。参考になることと思いますので下記に、初心者へホームページ作成時の心得！のリンクを張っておきます。
独学でWeb制作の勉強方法まとめ
この記事は私自身がWeb制作を独学で学ぶ際に使った初期段階の方法です。初心者の方であれば、HTMLとCSSが重要で、まず初めに勉強に取り組まなければならないことが、ご理解いただけたことと思います。
HTMLとCSSをしっかりと学習した後は、jQueryやJavaScript、WordPress・PHPとまだまだ勉強内容はWebの世界ではキリもなくございます。また、HTMLとCSSの学習が終った時点あたりで、その先に進む方向性も決める必要がでてくることと思います。
Webサイト制作と一言でいってみたものの、実際にはディレクター・デザイナー・コーダー・プログラマーというように、プロの世界では、現在分業が主流になっています。
HTMLとCSSの勉強が終ったら、ある程度、自分はどちらの方向性が得意だな！などの感覚が生まれてくることと思います。
そこから新たに、デザイナーであればデザイン！コーダーであればコーディングをさらに深堀していくことをオススメします。
勉強途中で挫折しそうな方へ
独学でWeb制作の勉強を途中で挫折しそうな方へ、私自身も、何度も途中で嫌になった経験がございます。
「分からないものは分からない！！」や「なんでそうなるの？」などといった疑問や、果たしてコレで良いのかといった不安など、独学ならではの悩みのようなものは、いろいろ生まれてくることと思います。
そこで裏ワザ！！
実は私も何度か、これから紹介する裏技を使ったことがあります。それでは、もったいぶらずに早速！「ズバリ！外注です！」
これはいったいどういうことなのかを記載してみたいと思います。
例えば、デザインだけはフォトショプなどで完成済みのものがあることが前提になりますが、コレをHTMLとCSSでページ自体の作成を行っていく途中で、挫折するとします。
何処か一か所のスタイルが思ったようにできずに、途中までは完成している場合など、1ページとして完成していない場合、そのページ自体を外注してしまうという裏ワザになります。
これ実は、自分の今まで勉強してきたことが、間違えていないのか？もしくは現時点での自分のスキルはどうなのか？の確認をすることができるというメリットが含まれています。また、1ページだけの、しかもコーディングだけであれば、2万円からくらいで比較的安価に済みます。
また、コレを裏ワザというと、ページの模写はダメなの？と、思う方もいる事と思いますが、私の経験上、ページの模写はあまり勉強になりません。
理由といたしましては、作業中、圧倒的に考えることが少なくなってしまい、答えをすぐ見ることができるので、自分のスキルに定着しにくい要因となります。なので、できるまで極力、ご自身の力で頑張ってみて、ダメなようなら外注もあります。
最短でHTML・CSSのスキルを習得したい方へ
「HTML・CSSのスキルを習得したい！」これは、私も勉強し始めの頃、メチャクチャ考えた内容になります。どうすれば、早く覚えることができるのか？
2020年現在であれば簡単です！！スクールに通う事をオススメします。また、現在であれば無料のお試し期間の設定もあるので、試して損はないことと思います。
独学の方法記載記事の最後に、スクールとは！！と思うかもしれませんが、私が学習を始めたころは、こんな便利なスクールは、まだありませんでした。しかもあったとしても、オンラインではなく、実際に足を運ばなくてはいけないもの、また、授業料も限られたエンジニアが授業をおこなう時代でしたので高額でした。
今のようなオンラインスクールがあるのであれば、私なら初めに迷うことなく申し込んでしまうことと思います。
理由は簡単でメリットばかりだから！！
プログラミングのスキルを比較的短時間で習得できることは、言うまでもなく、それ以外に、同じようなものを志す仲間や講師もいて、スキルの習得後も、なにかと便利なことが沢山あることがメリットのように感じます。
できる事であれば、私が学び始めた頃、すでにオンラインで時間を気にすることなく受講できるスクールがあったら、現時点でのWebサイト制作のスキルも、もう少しあがっていたものと思います。
という事で今回は、初心者向け：独学でWeb制作の勉強方法まとめを記載してみました。
今回ご紹介した方法が、必ずしも正しいとは限りませんが、多少なりとも参考になれば幸いです。また、プログラミング勉強に行き詰まっている人などは、ブログのお問い合わせフォームからご連絡いただけたら、可能な限り回答します。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
