超初心者でもWeb制作が出来るようになる為の勉強方法

Tips Web

先日、後輩から「Web制作に興味があるけど何からしたらいいんすかね?何か準備するものありますか?」と色々な質問が来ました。

その後輩はWebに関しては初心者でして、パソコンすら無い状態だったので知らない事がいっぱいある状態です。

そこで同じような状態の人に向けてこの記事を書きました。

こんな人は読んでみてください

  • 全くの初心者だけどWeb制作の仕事に興味がある。
  • でも何が必要なのか、何を勉強したら良いのかわからない。
  • そもそも理系じゃないし、やっぱ無理なのかな、、、?

文系の方は「文系でもプログラミングを始めたい人へ【挫折の体験談・おすすめ勉強法】」も一緒に読んでみてください^ ^

僕自身、Web制作を独学で勉強しており、今現在はフリーランスのWeb屋として生計を立てています。
*友人と一緒に勉強していましたが、週に1回勉強会するくらいだったのでほとんど独学です。
詳しくはプロフィールをご覧くださいませ

では参ります〜^ ^

目次

スポンサードリンク

Webを使って何をしたいのか決める

まず、自分がWebを使って何をしたいのかざっくりで良いので確認します

例:Webサービスを作りたい・Webサイトを作りたい・ただ単に稼ぎたい・Webデザイナー/ディベロッパーになりたい

こんな感じでオッケーです。

ここでデザイン系に興味がある人はデザインの学習を重点的に勉強してください。
*ここではWeb制作・プログラミング系を紹介しています

それ以外(Webサービスを作りたい・Webサイトを作りたい・ディベロッパーになりたい)人はこのまま読み進めて、Web制作の学習を重点的に勉強してください。

一言にWebデザイナーといっても、コーディングやプログラミングをする人もいますし、デザインのみの人もいるので、どこまでしたいのかまず自分で自分に問いかけてみてください^ ^

ここがぼんやりしていると、何故Web制作を勉強しているのか途中でわからなくなり勉強をやめてしまいます。

道具の準備

対象読者が初心者ということで、道具の準備から書いていきます

準備はとっくに出来ているよって人は飛ばしてくださいませ

僕もWebに関しては何もわからない超初心者だったので、実際に準備したものも含め紹介していきます〜

パソコンを準備

当たり前ですがパソコンを準備しないと何も出来ません。

MacかWindowsかは本当に人それぞれなので、自分が納得できるものを購入してください

また、本気でWeb系で食っていきたいという人は今自分が買える最高のスペックのものを購入してください

この辺の考え方はヒカキンさんの動画を見て共感した場合は実践してみるのもありかと思います(もちろん強制ではないですww)
動画はこちら

ブラウザの準備

Safari / Chrome / Firefoxなどありますが、とりあえずどれか一つ準備して下さい

ただしWeb制作の仕事を受ける場合、ブラウザはなるべく全部揃えていた方が良いです

理由は、ブラウザ毎に表示が違うからです

始めたばかりのうちはあまり気にしなくても良いです

テキストエディタの準備

プログラミングしていくのに必要なツールがテキストエディタです。

色んなテキストエディタがありますが、個人的に使いやすいと感じたのはAtomSublime TextBracketです

今はSublime Textを使っています

初心者はとりあえずAtomSublime Textで良いかと思います

Web制作の勉強

さて準備が整ったらWeb制作の学習開始です

Webについてある程度理解しておく

ホームページがどうやって出来てるかに加え、インターネットは何なのかある程度で良いので学習しておきましょう

この本を読んでおくと良いかと思います。

インターネットがどう動いているのか、Webサイトがどのように表示されているのかわかりやすく解説されています。

勉強する前に読んでおくことで、勉強していることをどのように使っていくのか、どのように動いているのかわかりやすくなります。

HTML/CSSを勉強する

Web制作をするにあたって必ず学習しないといけないのが、HTML/CSSです

ざっくり言うと、「HTMLはサイトに必要なテキストなど」で「CSSはそれらの色や大きさ・見た目」です。
厳密には違いますが、まずはこの二つでWebサイトの見た目が構築されているという認識でオッケーです。

これらの2つを合わせて綺麗なサイトを作っていきます。

どうやって勉強したらいい?

今はネットの無料レッスンなどである程度学べるので、どんどん活用しましょう

おすすめは以下

ドットインストール

ドットインストール一本一本3分ほどの短い動画で解説してくれます。

動画レッスンを見ながら実際に手を動かして進めていきましょう^ ^

無料で学べるプログラミング言語・ツールの幅が広いのが特徴的です。

有料会員になると気軽にオンラインで質問もできますし、勉強できる幅が半端なく広がりますが、まずは無料会員のままでオッケーです。

Progate【プロゲート】

Progateは動画レッスンではありませんが、

やってみるとわかりますが、ゲーム感覚でレッスンを進めていけます。

2つともやってみましたが、個人的にProgateの方が初心者でもとっつきやすいかと思いました。

理由は、

ゲーム感覚で楽しい
テキストエディタ使わない(用意されてる)

より広く深く学びたい人はドットインストールの方が良いかと思います

二つとも見てみて自分に合っている方を進めていきましょう

本に沿ってサイトを作ってみる

以下の本に沿っていくつかサイトを作ってみましょう

これでHTML/CSSの基礎がしっかり学べます。

どちらか片方でいいのでやってみましょう

JavaScriptを勉強する

次にJavaScriptを勉強します。

JavaScriptでWebサイトに動きをつける事ができます。

画像や文字がフワッと表示させたり、メニューを表示させたり、色々できます。

JavaScriptはプログラマーが一番使う言語と言われているので、しっかり基礎を勉強しておくと後々使えます。

学習方法は先ほど紹介したドットインストール・Progate【プロゲート】で勉強出来ます。

jQueryを勉強する

JavaScriptを学習し終えたらjQueryを勉強しておきましょう

jQueryはJavaScriptをより簡単に記述できるように作られたライブラリで、簡単にWebサイトに動きをつけれます。

jQueryは動きが遅かったり、脱jQueryの流れもあるようですが、jQueryが使われたまだいっぱいありますし、簡単で基礎はすぐに終わるのでやっておいて損はないかと思います

学習方法は上に同じくドットインストール・Progate【プロゲート】で学べます

おすすめの本はこれ

これ1冊で、ある程度の動きをWebサイトにつけれるようになります

実際に使うものばかりなので一通りやった後は辞書がわりにも使えます。

フレームワークを勉強する

HTML/CSS、JavaScript、jQueryを終えたらフレームワークを勉強しましょう

フレームワークとは?

ソフトウェアフレームワークとは、プログラミングにおいて、一般的な機能をもつ共通コードをユーザーが選択的に上書きしたり特化させたりすることで、ある特定の機能をもたせようとする抽象概念のことである。単にフレームワークとも呼ばれる。

参照:Wikipedia

噛み砕いてわかりやすく言うと、簡単にサイトのレイアウトやデザインの型を使う事が出来るということです。
*厳密に言うと違うかもですが、まずはこんな感じの認識でオッケーです

一番有名なフレームワークほBootstrapで、様々なテンプレートも用意されており、使いこなすと簡単にクールなサイトが作れます。

Bootstrapの学習はドットインストールで出来ます。
ドットインストールBootstrap4.0

フレームワークを使用する懸念点としては、似たようなサイトになるということです。

Bootstrapで作られた面白いおちょくってるサイトもありますww

でも使えるとかなり便利なので、勉強しておきましょう

0からサイトを作ってアウトプット

ここまで勉強したら実際に本やガイド無しで作ってみましょう〜
*もちろんわからないことがあればググったりして調べるのはオッケーです

  • 1:最初は、無料テンプレートをいじったりしてサイトを作ってみる
  • 2:慣れてきたら好きなサイトの模倣で良いので何個か作ってみる
  • 3:最後は全部0からオリジナルで作ってみる

ここで大事なのは作っていることを楽しむこと

上手くいかないことも沢山あるかと思いますが、そんなの当たり前なので気にしすぎなくて良いです

以上でだいたいの基本的なWebサイト制作のプログラミングの学習は終わりです

必要に応じて追加でプログラミングやフレームワーク、ライブラリを勉強していってくださいませ^ ^

以下では実用的なサイト制作に必要なものを少し紹介していきます。

WordPress(CMS)の学習

より実用的なWebサイトを作るためにWordPressを学んでおきましょう。

WordPressとは?

WordPressは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくコンテンツ管理システム としてもしばしば利用されている。

参照:Wikipedia

コンテンツ管理システム(CMS)とは?

コンテンツ管理システムは、ウェブコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称。2005年頃より一般的に普及したといわれる。コンテンツマネージメントシステムとも呼ばれる。

参照:Wikipedia

簡単に言うと、ブログのように記事や画像を簡単に投稿・管理できるシステムです。

CMSも色々ありますが、その中でも有名なのがWordPressです。

WordPressもドットインストールで無料で学べます。
ドットインストール:WordPress

WordPressによって簡単に実用的なWebサイトが作れますし、企業サイトでよくある「お知らせ」や「最新情報」が簡単に更新できるようなサイトを作る事が出来ます。

ランサーズクラウドワークスにはWordPressサイトの制作案件が沢山あり、報酬はだいたい10万〜20万です。

月1個WordPressサイトを作るだけで月収10万以上いけますね

ブログで発信する(WordPress)

これはオプション的な感じですが、WordPressでブログを実際に作ってみることをおすすめします。

理由は以下

  • 作る過程でどのようにWordPressをインストールし、設定していくかわかる
  • 備忘録として見直す事が出来る
  • 発信する事で仕事につながる、、、かも

ブログをWordPressで作る事でサーバーやドメインの準備やWordPressのインストール方法、設定方法を学ぶ事が出来ます。

WordPressでのブログの作り方は「ブログを始めたい人は、今すぐ始めましょう。【WordPressブログ開設手順】」で紹介しています。

また、ブログに備忘録を書いておく事でアウトプット出来ますし、自分が引っかかった所などを見直す事も出来ます。

発信する事で仕事につながる事もあります。
ちなみに僕が最初に獲得した案件は20万のWordPressサイトの制作案件で、ブログがキッカケとなって僕を選んでくれました^ ^

最後に:Web制作を楽しもう!^ ^

プログラミングを勉強するのはなかなか大変です。

特に一人で勉強していると辛くなって挫折してしまう事もあります。

僕も1度挫折しました、、、

ただ、自分が作りたいものを作っている時はめっちゃ楽しいです^ ^

エラーが出ても”クソガァーってなりつつ”何だかんだエンジョイできます笑

なので自分が作りたいものがあれば勉強も楽しくなります。なるはずです^ ^

どうしても独学がキツい人や向いてない人は有料のオンラインプログラミングスクールやブートキャンプを受けるのも近道です。

有名なプログラミングスクールは以下

今は沢山プログラミングスクールやレッスンがあるので受けてみて良いかと思います。
挫折するよりかはマシですね^ ^笑

授業料がかかりますが、学んだスキルでランサーズやクラウドワークスでその分稼げばオッケーです^ ^

わからない事も多いのでコツコツ勉強して、身につけていきましょう〜^ ^

何か相談があればTwitterInstagramから気軽にDM送って下さ〜い

僕でよければご相談に乗ります〜٩( ‘ω’ )و

それではエンジョイプログラミング〜

スポンサードリンク