Web制作を独学で副業にすることはできるの？
どんな手順で勉強すればいいのかわからない...。
プログラミングってなんか難しそう...。
このようなお悩みはありませんか？
これからWeb制作を副業で始めようと思っても、何から勉強したらいいのかわからないと困っている人もおそらく多いのではないでしょうか。
本業の合間に勉強するとなると時間も限られているので、できる限り効率的に学習を進めていきたいですよね...。
そこで本記事では、Web制作を独学で副業にするまでの具体的な手順や心得などを解説します！
- Web制作学習の独学ステップ
- Web制作を独学する具体的な流れ
- Web制作を独学するときの3つ心得
本記事を読めば、完全初心者の人でもWeb制作のスキルが身につけるための最適な手順がわかるようになるでしょう。
もくじ
Web制作を独学で副業にできるのか
結論、Web制作は独学でも副業として仕事にできます。
なぜなら、実際に独学でWeb制作を副業にしているサラリーマンはたくさんいるからです。かくいう僕もWeb制作を独学し、今ではデザイン会社のWebディレクターとして働いています。
しかし、決して「誰でも簡単にWeb制作を副業にできる」というわけではありません。もちろん適切な努力や勉強時間の確保は必要です。
ただ適切な手順で相応の時間（500〜1,000時間程度）分の学習さえすれば、大体の人はWeb制作を副業にできるスキルは身に付くと思っています。
Web制作を独学するための3ステップ
まずは基本的な言語を押さえましょう。
3つの言語を学習していきます。
- HTMLの構造を理解する
- CSSで装飾を学ぶ
- Javascriptでサイトに動きをつける
順番に解説していきますね。
1．HTMLの構造を理解する
HTMLとは
HTMLとは、サイトの骨組みを決める言語。人間に例えると「顔のパーツ」です。
「目が2つあって、鼻が1つあって、口が1つある」というのを、コンピュータに伝える役割です。
基本的には、タグの役割や使い方を学習します。
例えば
- h2タグ：大見出し
- brタグ：改行
- aタグ：リンクを張る
など、それぞれのタグの意味を理解し、適切に使い分けていきましょう。まずはHTMLの基礎を身につけることが大切です。
2．CSSで装飾を学ぶ
CSSとは
CSSとは、サイトの色や形を決める言語。人間に例えると、「顔のお化粧」です。
「目はみんなより大きくぱっちりで、少し離れ目で、口は人より小さめ、リップを塗ってかわいらしく」ということを、コンピューターに伝えます。
例えば
- 文字の装飾
- 背景色をつける
- 位置の調整
こんなことができます。HTMLでサイトの構造を設計したら、次にCSSでデザインをしていきましょう！
3．Javascriptでサイトに動きをつける
Javascriptとは
Javascriptは、サイトに動きをつける言語。人間に例えると「顔の表情」です。
「嬉しい気持ちになったら笑顔になります、悲しい気持ちになったら泣いてしまいます」ということを、コンピューターに伝えます。
例えば、
- ボタンをクリックしたら、メニューが展開する
- 画面をスクロールしたら、フワッと画像が現れる
といったような動きですね。例えば企業のサイトだと「お問い合わせフォーム」が設置されていたりしますが、あれもJavascriptで作られています。
「構造やデザインは整っているけど、一切動かないサイト」だと嫌ですよね。笑
なので、Javascriptで機能面も充実させられるようにする必要があります。
Web制作を独学する具体的な流れ
では、3つの言語を学習するためにはどのような流れで進めていけばいいのでしょうか。
具体的な流れは、下記のとおり。
- ドットインストールで雰囲気をつかむ
- Progateで実際に手を動かす
- サイトの模写でより実践的なスキルを身につける
こちらも順番に解説していきますね。
1．ドットインストールで雰囲気をつかむ
ドットインストールとは、プログラミングを動画で学習できるサイト。
1回の動画の長さは3分程度なので、初心者でも比較的学習しやすいサービスです。ここでHTMLやCSSに関する全体像を掴むと良いでしょう。
「参考書などのテキストだと集中力が続かない」「通勤時間などのスキマ時間に勉強したい」という人におすすめです。
有料プランもありますが、基礎を学ぶだけなら無料の範囲だけでも十分です。
有料プランも、月額1000円程度で価格も良心的ですね。
2．Progateで実際に手を動かす
ドットインストールでWeb制作の基礎や大まかな流れをつかんだら、次はProgateに挑戦してみましょう。
Progateでは、ブラウザ上で実際にコードを書いて学習できます。
記述したコードを実行して結果も確認可能で、かつ実際に手を動かしながら実践的で能動的な学習ができるため、Web制作スキルを体に染み付かせるにはもってこいのサービスですね。
Progateで手を動かしながら「コードを打つ感覚」を身につけてみてください！
3．サイトの模写でより実践的なスキルを身につける
ここまできたら、簡単なWebサイト制作はできるようになってるはずです。
既にあるWebサイトを模写して、ひたすら練習しましょう！
ただ、ここで挫折する人が多いです。なぜなら、基礎スキルがあっても自分でサイトを構築するとなった途端に全然うまくいかなくなるからです。
「Web制作の言語がわかる」と「Web制作の言語を使える」の間には、大きな壁があるということ。
そこで、サイト模写を効率的に進める方法を3つご紹介します。
- カンニングする
- メンターをつける
- Twitterで発信する
1．カンニングする
こちらについては賛否両論あると思いますが、筆者はカンニングOK派です。
なぜなら、「知らないことは考えても出てこない」からです。
Chromeの検証ツール（デベロッパーモード）という機能を使うと、サイトのソースコードを確認できるので、そこからヒントを貰って実装してみましょう。
初めはカンニングをしてもいいので、まずは自分の引き出しを増やすことが大切です。
※ただ、他社サービスのコードを丸々コピペして貼り付けると著作権に反する恐れがあるので注意しておきましょう...！
2．メンターをつける
カンニングOKとは言っても、それでもうまく表示できないなどの壁にぶつかることは多々あります。
筆者自身、本当に何度も心が折れかけたことがあります。いや、何回も折れていました...。
そんな時に筆者を救ってくれたのが、メンターです。
メンターというと大層な気がしますが、いつでも質問したら教えてくれる人を見つけるということです。
親戚や友人にWeb制作ができる人がいればベストですが、「そんな人いないよ！」という人は、SNSを活用したり、Web制作の学習サービスなどを活用したりしてみましょう。
3．Twitterで発信する
メンター探しにも通ずる話ですが、学習の過程はTwitterで発信することをおすすめします。
なぜなら、過程を発信することで自分自身のアウトプットになりますし、誰かが見ているので課題が出てきた時にヒントをもらえる可能性があるからです。
筆者自身も壁にぶつかった時、Twitter経由で解決策を教えてくれる人が出てきて、それ以降もいろいろと助けていただきました。
まさに初心者時代の筆者のメンターです。
Web制作を副業にするための3ステップ！
ここまで来たら、ある程度のサイトを制作できるようになっているはずです。
しかし、実際にお仕事をいただくとなると、もう一押し頑張らなければなりません。
次のステップは下記のとおり。
- WordPressで独自テーマを作れるようになる
- ポートフォリオサイトを作る
- 案件に応募する
順番に解説していきます。
1．WordPressで独自テーマを作れるようになる
実際のWeb制作案件の多くは、ブログ機能を実装したり、指定の箇所をクライアント側でも修正・変更できる仕様にしたり、動的なWebサイトを制作したりすることが求められます。
そのためには、CMSという管理システムを導入する必要があります。
CMSとは
Contents Management Systemの略で、HTMLなどの専門知識がない初心者でも、簡単にWebサイトの構築や、ページの作成・管理・更新ができるシステムのことを言います。
要はCMSを導入すれば、簡単な管理作業はクライラント側でも自分でできるようになるということです。
偏にCMSとは言っても種類がたくさんあるのですが、その中でも最も使用率が高いWordPressの習得はマストといっても過言ではないでしょう。
独学でWordPressを学習するなら、下記の参考書がおすすめです。
参考書以外にもYouTubeでもわかりやすく解説してくれている動画があるので、そちらを参考にしてみてもいいかと思います。
2．ポートフォリオサイトを作る
ポートフォリオサイトは「自分はこんなことができます！」「自分はこんなものを作りました！」ということを証明するためのWebサイトです。
就活やアルバイトの時に履歴書や職務経歴書を提出するように、Web制作でお仕事をいただくためには、自分のスキルや実績がすぐにわかる制作物を持つことがとても重要です。
ポイント
Twitterでの発信もポートフォリオの一部として活用できます。
なので学習過程は、Twitterで発信していきましょう！
3．案件に応募する
ポートフォリオサイトができたら、案件に応募していきましょう。
最もお手軽なのは「クラウドワークス」や「ランサーズ」などのクラウドソーシングですね。
ただ、クラウドソーシングはプラットフォームがゆえにライバルが多く、価格競争が激しいため、予測以上の結果は出にくいかもしれません。
クラウドソーシングだけに固執せず、制作会社にメールを送ったり、勉強会に参加して挨拶回りをしたり、いろいろなコミュニティに顔を出してGiveしたりしても良いでしょう。泥臭い営業活動を試してみるのも良いと思います。
Web制作を独学するときの3つ心得
最後に、Web制作を独学でする際の心得を3つお伝えしていきます。
- 半分理解したらOK
- インプットよりアウトプット
- 毎日コードを書き続ける
1．半分以上理解したら、どんどん次のステップへ
長年の学校教育の影響で「勉強＝暗記」という固定観念が染み付いてしまっている人も多いでしょうが、Web制作の勉強において暗記はほとんど必要ありません。
わからないことや忘れてしまったことは、その都度調べてOKです。
Web制作は情報量は膨大ですし、新しい記述やトレンドがどんどん出てくるので、それらをすべて覚えようとしてもキリがありません。
現場のエンジニアですら、毎日のようにGoogleで検索していますからね。
半分以上理解できたら、どんどん次に進んでいきましょう。
2．インプットよりアウトプットを多めに
Web制作に限った話ではないですが、なんでも学習する時は、「インプット：アウトプット＝３：７」が大前提です。
なぜなら、知識が身につくのはインプットではなくアウトプットの過程だからです。
どれだけ参考書を読み込んでも、何回動画を見直しても、なかなか自分の血肉となる知識を身につけることはできません。
大まかな流れをつかんだら、「実際に自分でコードを書いてみる」ことを意識しましょう。
3．毎日、コードを書き続ける
Web制作で大切なのは、課題に直面したときに自分で考えて解決できる力です。
この力を身につけるいちばんの近道は、たくさんの経験を積んで引き出しを増やすことです。
サイト模写や実際に案件をこなす中で、とにかく手を動かしていきましょう。
まとめ：正直、Web制作を独学で勉強するのはつらい...
以上、Web制作を独学で副業にする方法についてでした。
ここまで解説してきた流れでWeb制作のスキルを習得できると思いますが、正直なところ独学はおすすめしません。
なぜなら、Web制作の独学はつらいことが多いからです。
↓筆者の独学経験でつらかったこと
- 孤独との戦い
- エラーの原因が見つからない
- 見たことのないコードが出てきてパニック
副業でWeb制作を勉強するとなると、勉強できる時間は限られているので、会社の飲み会や友達からのお誘いを断わることも多々ありました。
孤独と闘いながら、黙々と学習を続ける忍耐力が必要です。
また、独学していると「エラーの原因が全然わからない」という沼にハマることもあります。
Web制作は、半角スペースが全角になっていたり、1文字抜けているだけでエラーが発生する世界です。
たったこれだけで、1〜2時間、場合によっては1週間以上解決しないこともザラにあります。
これら経験から言えることは、「独学するより先人に習うほうが圧倒的に効率が良い」ということです。
もちろん、初めは独学でも全然問題ないと思います。
ただ、Progateやドットインストールで軽く勉強してみて「Web制作が楽しい」と思えたら、スクールに通うなり、有料教材を購入するなり、先人の力を借りながらスキルアップしていくのが最も効率的と言えるでしょう。