- 全くの初心者だけどWeb制作の仕事に興味がある。
- でも何が必要なのか、何を勉強したら良いのかわからない。
- できればお金も稼ぎたい。
こんな方に向けてこの記事を書いています。
文系の方は「文系でもプログラミングを始めたい人へ【挫折の体験談・おすすめ勉強法】」も一緒に読んでみてください^ ^
僕自身、Web制作を独学で勉強しており、今現在はフリーランスとしてWeb制作で生計を立てています。
＊友人と一緒に勉強していましたが、週に１回勉強会するくらいだったのでほとんど独学です。
詳しくはプロフィールをご覧くださいませ
では参ります〜^ ^
目次
- (1) そもそもWeb制作で何をしたいのか決める
- (2) 道具の準備
- – パソコンを準備
- – ブラウザの準備
- – テキストエディタの準備
- (3) Web制作の勉強
- – Webについてある程度理解しておく
- – HTML/CSSを勉強する
- – JavaScriptを勉強する
- – jQueryを勉強する
- – ０からサイトを作ってアウトプット
- (4) WordPress(CMS)の学習
- (5) ブログで発信する(WordPress)
- (5) Web制作で稼ぐ
- (6) 最後に：Web制作を楽しもう！^ ^
そもそもWeb制作で何をしたいのか決める
まず、自分がWeb制作で何をしたいのかざっくりで良いので確認します
例：Webサービスを作りたい・Webサイトを作りたい・ただ単に稼ぎたい・Webデザイナー/ディベロッパーになりたい
こんな感じでオッケーです。
＊この記事ではWeb制作・プログラミング系を紹介していますので、デザインに関してはあまり触れていません。
一言にWebデザイナーといっても、コーディングやプログラミングをする人もいますし、デザインのみの人もいるので、どこまでしたいのかまず自分で自分に問いかけてみてください^ ^
ここがぼんやりしていると、何故Web制作を勉強しているのか途中でわからなくなり勉強をやめてしまいます。
道具の準備
対象読者が初心者ということで、道具の準備から書いていきます
準備はとっくに出来ているよって人は飛ばしてください
僕もWebに関しては何もわからない超初心者だったので、実際に準備したものも含め紹介していきます〜
パソコンを準備
当たり前ですがパソコンを準備しないと何も出来ません。
MacかWindowsかは本当に人それぞれなので、自分が納得できるものを購入してください
僕はMacBook Proを使っており、デザイン・コーディングをしてますが、満足しています。
また、本気でWeb系で食っていきたいという人は今自分が買える最高のスペックのものを購入してください
この辺の考え方はヒカキンさんの動画を見て共感した場合は実践してみるのもありかと思います(もちろん強制ではないですww)
動画はこちら
ブラウザの準備
Safari / Chrome / Firefoxなどありますが、とりあえずどれか一つ準備して下さい
ただしWeb制作の仕事を受ける場合、ブラウザはなるべく全部揃えていた方が良いです
理由は、ブラウザ毎に挙動が違うからです
コーディングをしているとわかりますが、ブラウザによって反映されないコードや書き方が変わってくることもあります。
仕事としてWeb制作を受ける場合は複数のブラウザでチェックできるように準備しておきましょう。
テキストエディタの準備
プログラミングしていくのに必要なツールがテキストエディタです。
色んなテキストエディタがありますが、個人的に使いやすいと感じたのはAtom・Sublime Text・Bracket・VS Code(Visual Studio Code)です
Bracket以外全て使用しましたが、VS Codeをとりあえず入れていたら間違いないです。
Sublime Textを主に使っていましたが、今はVS Codeに落ち着いています。
Web制作の勉強
さて準備が整ったらWeb制作の学習開始です
Webについてある程度理解しておく
ホームページがどうやって出来てるかに加え、インターネットは何なのかある程度で良いので学習しておきましょう
この本を読んでおくと良いかと思います。
インターネットがどう動いているのか、Webサイトがどのように表示されているのかわかりやすく解説されています。
勉強する前に読んでおくことで、勉強していることをどのように使っていくのか、どのように動いているのかわかりやすくなります。
HTML/CSSを勉強する
Web制作をするにあたって必ず学習しないといけないのが、HTML/CSSです
ざっくり言うと、「HTMLはサイトに必要なテキストなど」で「CSSはそれらの色や大きさ・見た目」です。
厳密には違いますが、まずはこの二つでWebサイトの見た目が構築されているという認識でオッケーです。
これらの２つを合わせて綺麗なサイトを作っていきます。
これはマークアップ言語と言われており、プログラミングではないぞ！と怒られるので注意しておきましょうw
どうやって勉強したらいい？
今はネットの無料レッスンなどである程度学べるので、どんどん活用しましょう
おすすめは以下
ドットインストール
ドットインストールは一本一本3分ほどの短い動画で解説してくれます。
動画レッスンを見ながら実際に手を動かして進めていきましょう^ ^
無料で学べるプログラミング言語・ツールの幅が広いのが特徴的です。
有料会員になると気軽にオンラインで質問もできますし、勉強できる幅が半端なく広がりますが、まずは無料会員のままでオッケーです。
Progate【プロゲート】
Progateは動画レッスンではありませんが、
やってみるとわかりますが、ゲーム感覚でレッスンを進めていけます。
２つともやってみましたが、個人的にProgateの方が初心者でもとっつきやすいかと思いました。
理由は、
ゲーム感覚で楽しい テキストエディタ使わない(用意されてる)
より広く深く学びたい人はドットインストールの方が良いかと思います
二つとも見てみて自分に合っている方を進めていきましょう。
今は「30DAYSトライアル」という30日を１句切りでWeb制作を学んでいく学習ロードマップがあるのでそれに沿って学習を行うのをおすすめします。
この中にProgateも出てきます。
本に沿ってサイトを作ってみる
以下の本に沿っていくつかサイトを作ってみましょう
これでHTML/CSSの基礎がしっかり学べます。
どちらか片方でいいのでやってみましょう
JavaScriptを勉強する
次にJavaScriptを勉強します。
JavaScriptでWebサイトに動きをつける事ができます。
画像や文字がフワッと表示させたり、メニューを表示させたり、データを引っ張ってきたり色々できます。
JavaScriptはプログラマーが一番使う言語と言われているので、しっかり基礎を勉強しておくと後々使えます。
学習方法は先ほど紹介したドットインストール・Progate【プロゲート】で勉強出来ます。
jQueryを勉強する
JavaScriptを学習し終えたらjQueryを勉強しておきましょう
jQueryはJavaScriptをより簡単に記述できるように作られたライブラリで、簡単にWebサイトに動きをつけれます。
jQueryは動きが遅かったり、脱jQueryの流れもあるようですが、jQueryが使われたまだいっぱいありますし、簡単で基礎はすぐに終わるのでやっておいて損はないかと思います
学習方法は上に同じくドットインストール・Progate【プロゲート】で学べます。
おすすめの本はこれ
これ１冊で、ある程度の動きをWebサイトにつけれるようになります
実際に使うものばかりなので一通りやった後は辞書がわりにも使えます。
０からサイトを作ってアウトプット
ここまで勉強したら実際に本やガイド無しで作ってみましょう〜
＊もちろんわからないことがあればググったりして調べるのはオッケーです
- １：最初は、無料テンプレートをいじったりしてサイトを作ってみる
- ２：慣れてきたら好きなサイトの模倣で良いので何個か作ってみる
- ３：最後は全部０からオリジナルで作ってみる
ここで大事なのは作っていることを楽しむこと
上手くいかないことも沢山あるかと思いますが、そんなの当たり前なので気にしすぎなくて良いです
以上でだいたいの基本的なWebサイト制作の学習は終わりです
必要に応じて追加でプログラミングやフレームワーク、ライブラリを勉強していってくださいませ^ ^
JSをもっと学んでみたい方は、Vue、React、Nuxt、Next、Gatsby、Gridsomeなどを勉強してみてください^ ^
以下では実用的なサイト制作に必要なものを少し紹介していきます。
WordPress(CMS)の学習
より実用的なWebサイトを作るためにWordPressを学んでおきましょう。
WordPressとは？
WordPressは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくコンテンツ管理システム としてもしばしば利用されている。
コンテンツ管理システム(CMS)とは？
コンテンツ管理システムは、ウェブコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称。2005年頃より一般的に普及したといわれる。コンテンツマネージメントシステムとも呼ばれる。
簡単に言うと、ブログのように記事や画像を簡単に投稿・管理できるシステムです。
CMSも色々ありますが、その中でも有名なのがWordPressです。
WordPressもドットインストールで無料で学べます。
ドットインストール：WordPress
WordPressによって簡単に実用的なWebサイトが作れますし、企業サイトでよくある「お知らせ」や「最新情報」が簡単に更新できるようなサイトを作る事が出来ます。
ランサーズやクラウドワークスにはWordPressサイトの制作案件が沢山あり、報酬はだいたい10万〜20万です。
月１個WordPressサイトを作るだけで月収10万以上いけますね
ブログで発信する(WordPress)
これはオプション的な感じですが、WordPressでブログを実際に作ってみることをおすすめします。
理由は以下
- 作る過程でどのようにWordPressをインストールし、設定していくかわかる
- 備忘録として見直す事が出来る
- 発信する事で仕事につながる、、、かも
ブログをWordPressで作る事でサーバーやドメインの準備やWordPressのインストール方法、設定方法を学ぶ事が出来ます。
WordPressでのブログの作り方は「ブログを始めたい人は、今すぐ始めましょう。【WordPressブログ開設手順】」で紹介しています。
ブログを始めたい人は、今すぐ始めましょう。【WordPressブログ開設手順】
ブログの始め方・開設手順とおすすめのブログサービス・サーバー・ドメイン会社を紹介しています。写真付きでブログ開設の流れをわかりやすく解説していますので、この記事を見ながら是非ブログをスタートしてみてください(^^)
また、ブログに備忘録を書いておく事でアウトプット出来ますし、自分が引っかかった所などを見直す事も出来ます。
発信する事で仕事につながる事もあります。
ちなみに僕が最初に獲得した案件は20万のWordPressサイトの制作案件で、ブログがキッカケとなって僕を選んでくれました^ ^
Web制作で稼ぐ！
Web制作で稼ぐには、先ほど出てきた「クラウドワークス」や「ランサーズ」などのクラウドソーシングサイトで案件を探すのも良いですが、フリーランスのエージェント経由で仕事をゲットすることもおすすめです。
おすすめのフリーランスエージェント・求人サイト
プロフィールを設定して、あとは案件を探したりエージェントさんが企業とマッチングさせてくれる感じです。
会費は掛からないので、とりあえず登録して自分にもできそうな案件を探してみましょう。
独学で未経験ですとハードルは高くなりますので、自分のポートフォリオを持っておいた方が良いです。
先ほど書いた「0から作ってみよう」のところでサイトをいくつか制作したり、自分のポートフォリオサイトを作っておくと何も無いよりかはマシになります。
最後に：Web制作を楽しもう！^ ^
Web制作を勉強するのはなかなか大変です。
特に一人で勉強していると辛くなって挫折してしまう事もあります。
僕も１度挫折しました、、、
ただ、自分が作りたいものを作っている時はめっちゃ楽しいです^ ^
エラーが出ても”クソガァーってなりつつ”何だかんだエンジョイできます笑
なので自分が作りたいものがあれば勉強も楽しくなります。なるはずです^ ^
どうしても独学がキツい人や向いてない人は有料のオンラインプログラミングスクールやブートキャンプを受けるのも近道です。
有名なプログラミングスクールは以下
今は沢山プログラミングスクールやレッスンがあるので受けてみて良いかと思います。
挫折するよりかはマシですね^ ^笑
授業料がかかりますが、学んだスキルでランサーズやクラウドワークスでその分稼げばオッケーです^ ^
わからない事も多いのでコツコツ勉強して、身につけていきましょう〜^ ^
何か相談があればTwitterかInstagramから気軽にDM送って下さ〜い
僕でよければご相談に乗ります〜٩( ‘ω’ )و
それではエンジョイプログラミング〜