10万円くらい稼ぐために必要な学習時間も知りたいです。
決して楽ではないですが、副業として稼げるようになるまでは意外と時間が掛からなかったです。
この記事ではWeb制作に必要なスキルと学習方法について詳しくお伝えします。
独学でWeb制作スキルを身に付け、副業で月に10万円ほど稼いでます。
以下のツイートは最近の収益です。
6月の副業売上
・Web制作･･･102,557
・ブログ･･･0合計 ¥102,557
2020年累計 ¥737,509
— クッカ@副業で年間100万円達成中 (@kukka_ja) June 30, 2020
それではWeb制作に必要なスキルについて解説いたします。
Web制作に必要なスキル
Web制作に必要なスキルというのは、
Webサイトが完成するまでの工程から逆算してみると分かります。
Web制作の工程とは一般的に以下のようになります。
①ディレクション
↓
②デザイン作成
↓
③コーディング
↓
④テスト
↓
⑤クライアントチェック
↓
⑥サーバーアップ
↓
⑦納品
※実際にはもっと細かいです。上記はかなり大雑把な例です。
Web制作会社であれば、チームで分担して制作していきます。
例えば、ディレクションはディレクターが行い、デザイン作成はデザイナーが行う、というような感じですね。
僕のケースは副業でWeb制作会社から受注することが多いので、主に②〜④までを担当することが多いです。
クライアントが直のユーザーであれば、自分で全て担当する必要があります。
デザイン作成スキルなども必要になるので、いきなり全行程を請けるのはリスクが高いです。
オススメは、Web制作会社から仕事を振ってもらうことです。
Webサイトが欲しいユーザーがいて、Web制作会社が営業します。
しかし、社内ではリソースが足りないため、外注するということが頻繁に起こります。
クラウドソーシングなどでもWeb制作会社が外注している案件は数多くあります。
ただ下請けの位置付けなので、報酬は低めです。
ですが経験を積むには下請けのポジションの方が効率が良いです。
コーディング作業のみ考えれば良いので、リソースを集中投下できますね！
コーディングのスキルは、言語で言うと、HTML/CSS/JavaScript(jQuery)になります。
この後に具体的な学習方法をお伝えします。
まずはコーディングスキルを身に付ける
最初はWeb制作会社の下請けのポジションがオススメ
学習概要
僕がもし未経験から独学で学習するとしたら、この方法で行うという手順を考えました。
できるだけお金を掛けたくない方、黙々と学習できる方にオススメです。
■ゴール
クラウドソーシングでコーディング案件をこなせるスキルを身に付ける
■学習時間
個人差はありますが、200~300時間は必要です。
これ以上時間を掛けても、モチベーションの維持が難しいですし、
スキルが一定まで達したら、後は稼ぎながら経験を積むほうが効率的です。
■教材について
ほぼインターネットの学習サービスで完結するようにしました。
「Progate」と「ドットインストール」というサービスですが、どちらも僕が学習する時に利用したものになっています。
※WordPressの学習だけ良いものがないので、書籍にしています。
書籍も良い教材がいっぱいあるんですが、学習サービスのほうが継続できる方が多そうなので。
■掛かる費用について
Progateとドットインストールのレッスンを受けようとすると、有料プランにならないと出来ないものもあります。
どちらも月額1000円くらいなので、自己投資と割り切って課金しましょう。
どうしても費用を掛けたくないなら、セルフバックで資金を稼ぐという方法もあります。
僕もブログを始めるときに、サーバー代などを賄うために行いました。
※ブログを持っていなくてもセルフバックは可能です。詳しくは以下の記事を参考にしてください。
ブログの初期費用を自己アフィリエイトを使って0円にする方法
次に実際の学習手順を説明します。
学習手順
学習する手順は以下のようになっています。
- 環境構築
- HTML/CSSの学習
- JavaScriptの学習
- デザインツールの使い方
- Gitの学習
- WordPressの学習
- サーバーへのアップ
■行わないこと
他にも必要になりそうなスキルはありますが、時間が増えてしまうので割愛しています。
削ったのは以下です。
- Gulpなどのタスクランナー→個人受託では使わくてもいける
環境構築
VisualStudioCodeをインストールする
まずはコーディングするためのエディタをインストールしましょう。
オススメはMS製のVisualStudioCodeというエディタです。
拡張機能を入れる
VisualStudioCodeをインストールしたら、拡張機能を入れてみましょう。
拡張機能を使えば、エディタをさらに機能を拡張できます。
例えば、エディタをインストールしてもエディタのメニューが英語表記になっています。
これを日本語化できる拡張機能がありまして、以下の記事で手順を載せています。
VisualStudioCodeを日本語化する手順
参考までに僕が導入している拡張機能を一部紹介します。
- Auto Close Tag
- Auto Rename Tag
- Japanese Language Pack for Visual Studio Code
- indent-rainbow
- IntelliSense for CSS class names in HTML
- HTML Snippets
- HTMLHint
- Liveserver
- Path Intellisense
- Trailing Spaces
- zenkaku
なかでもLiveserverという拡張機能は非常に便利です。
【VisualStudioCode】ブラウザの自動更新(オートリロード) ができる拡張機能『Live Server』の紹介
エディタの設定
エディタをWeb制作の特化した設定に変更できます。
これも効率が上がるので、色々変更してみると良いです。
参考記事を載せておきます。
Visual Studio Code の初期設定と最低限必要な拡張機能 – フロントエンド向け –
HTML/CSSの学習
まずはWeb制作において基本となるHTML/CSSを学習します。
HTMLとCSSはとっつきやすいですが、奥が深いです。
慣れるまではとにかく量をこなすしかありません。
Progate
■学習方法
VisualStudioCodeは使いません。
ブラウザ上で完結できる学習サービスになっています。
■取り組む内容
HTML&CSSコース
対象：初級、中級まで行いましょう。道場コースは時間があれば取り組んでください。
※全てのレッスンを受けるには有料プラン(¥980/月)に加入する必要があります。
■アドバイス
この段階では、何となくしか分からないと思いますが、問題ありません。
徐々に理解できるようになるので、気にせず進みましょう。
ドットインストール
■学習方法
動画を見つつ、VisualStudioCodeでも同じコードを記述してください。
視聴しただけでは意味がないので注意してください！
■取り組む内容
詳解HTML 基礎文法編
対象：全動画
※全てのレッスンを受けるにはプレミアムコース(¥1,080/月)に加入する必要があります。
JavaScriptの学習
JavaScriptとはブラウザで実行されるプログラミング言語です。
フロントエンド開発には必須ですが、Web制作ではサイトに動きを付けるためによく使われます。
例えば、サイトによくあるような、スライドショー、メニュー開閉、フォームバリデーションなどですね。
この後、学ぶJavaScriptの記述を簡単に書ける「jQuery」というライブラリを理解するためにも必要です。
Progate
■学習方法
VisualStudioCodeは使いません。
ブラウザ上で学習します。
■取り組む内容
JavaScript
対象：Ⅰ〜Ⅲまで学んでください。Ⅳ以降は現段階では必要ありません。
※全てのレッスンを受けるには有料プラン(¥980/月)に加入する必要があります。
ドットインストール
■学習方法
動画を見つつ、VisualStudioCodeでも同じコードを記述してください。
視聴しただけでは意味がないので注意してください。
■取り組み内容
詳解JavaScript 基礎文法編
対象：上記の全動画
ドットインストールのプレミアムコースのレッスンはこの先使わないので、この課題が終わったら、解約しても問題ありません。
jQueryの学習
JavaScriptを学んだ後は、ライブラリであるjQueryを学びましょう。
jQueryはレガシーな技術と言われてる向きもありますが、まだまだ現場では使われています。
Webサイト制作にとっては必須にスキルです。
Progate
■学習方法
VisualStudioCodeは使いません。
ブラウザ上で学習します。
■取り組む内容
jQuery
対象：全レッスン
Progateの有料プランのレッスンはこの先使わないので、この課題が終わったら解約しても問題ありません。
ドットインストール
■学習方法
動画を見つつ、VisualStudioCodeでも同じコードを記述してください。
視聴しただけでは意味がないので注意してください。
■取り組み内容
jQuery入門
対象：上記の全動画
デザインツールの使い方
よく使われているデザインツールは以下のソフトになります。
- Adobe Photoshop
- Adobe Illustrator
- Adobe XD
- Sketch
実際の制作では、デザイナーが上記のソフトを使い、Webデザインを作成します。
その後、デザインデータをもらい、コーディングしていきます。
ソフトの使い方さえ分かっていれば問題なしです。
まずは無料で利用できるXDを使ってみましょう。
XDはここ数年、人気が出たソフトです。
XDについては以下の記事が参考になります。
Adobe XDまだ使ってないの？こんなに万能なのにもったいない！
ちなみに他のソフトもコーディングに必要な操作はそれほど多くありません。
XD以外は有料なので、必要になった時に契約するくらいで良いと思います。
まずは公式サイトでXDをダウンロードしてください。
XDをダウンロードしてインストールする方法
ダウンロードしたら、使い方を覚えましょう。
Adobe XDでコーディングする方法！初心者はこれで最低限覚えておこう！
XDファイルからコーディングをする
デザインデータ(デザインカンプとも言います)をXDファイルで渡されたと想定して、コーディングしてみましょう。
ただデザインカンプを自前で用意するのは大変かと思います。
以下のようにデザインカンプを提供してくれてるサイトがあるので、ぜひ利用させていただきましょう。
クリ★スタさんのサイトにある
【コーディング課題】XDからコーディングをしよう【初級編】という記事がオススメです。
中級、上級とあるので続けてトライしてみましょう。
ここまで到達した方は、コーディングに必要な知識は一通り付いているかと思います！
残り少しです！
Gitの学習
コーディングしたファイルをGitで管理することが多いです。
Gitについては以下の入門編一読してみましょう。
サル先生のGit入門
Progate
■学習方法
VisualStudioCodeは使いません。
ブラウザ上で学習します。
■取り組む内容
コマンドライン
対象：全レッスン
レッスン後は、同サイトでGitの環境構築をしましょう。
WordPressの学習
■取り組む内容
以下の書籍を一通り試してみましょう。
サーバーへのアップ
レンタルサーバーに契約して、ファイルのアップ方法を学びましょう。
レンタルサーバー会社は何でも良いです。
有名どころの会社を載せておきます。
どこも大きな差はないのでサイトを見て、気に入ったものを選びましょう。
自前のレンタルサーバーを1つ契約しておくと、自分で検証などもできるので、何かと便利です。
例えば、クライアントのサーバーにアップする前に、事前に確認ができたりします。
(WordPressでブログ運営もできますよ)
※無料のサーバーもありますが、使い勝手が悪いのでオススメしません。
大手を選んでおけば問題ないでしょう。
僕はロリポップを契約しています。
全て使ったことがありますが、結局はどれでも良いです笑
■取り組む内容
FTPクライアントソフトでサーバーに接続する
FTPクライアントソフトを使いサーバーにファイルをアップする。
FileZillaというソフトが無料で使えるのでオススメです。
参考：【FileZillaの使い方】WordPressでFTPソフトを使おう
ベーシック認証を掛ける
サイト公開前だとベーシック認証を掛けて、関係者しか閲覧できないようにします。
こちらでベーシック認証を掛けることもあるため、方法を覚えておきましょう。
※フルパスが分からない場合は、FTPクライアントソフトを使い、PHPファイルを設置してみましょう。
参考：フルパスの調べ方
学習方法は以上となります！お疲れ様でした。
この後の進め方は？
コーディングスキルの基礎は身に付いたと思いますので、後はひたすら仕事をさがしましょう。
クラウドワークス
や、ランサーズなどに会員登録して、案件に応募しましょう。
注意点としては、デザインデータ支給あり、コーディングのみの案件を選ぶことです。
デザイン作成も依頼内容に含まれていたら、対応できないので応募前に必ず確認しましょう。
以下の記事も参考にしてみてください。
