未経験から始める！Webコーダーの副業に必要な知識とその準備

Webコーディングは、未経験者でも始めることができる副業の一つです。
かくいう私も未経験から独学でWeb制作について学習し、現在は個人事業主として開業後、業務提携先の制作会社経由で案件を請け負っています。

現代の日本で豊かな暮らしを実現するのに収入が本業のみではなかなか難しいですよね。そういった考えから、なにかしらの副業を始めている社会人が多くいます。

その中でWebコーダーとしてのスキルを持つことは、副収入を得るためだけでなく、自身のキャリアを広げる助けにもなり得ます。

では、Webコーダーになるためにはどのような知識が必要で、どのような準備をすれば良いのでしょうか？
簡単な結論を挙げておきます。

それでは早速これらについて詳しくみていきましょう。

この記事ではこのような人に向けて発信しています。

筆者はこんな感じの人です

いわたろ

Webコーダーの副業について語る前に、『そもそもお前、Web制作についてなんか知ってんの？』というごもっともな意見が飛んできそうなので、記事に信憑性を持たせるためにも、簡単に私の経歴をまとめたよ！

以上が私の副業遍歴で、現在も本業と副業をうまく両立させています。
なのでWeb制作に関する副業ついて、それなりに説得力、信憑性のある情報発信ができるかと思います。

Webコーダーとは

Webコーダーとは、Web制作領域の職業の一つであり、Webサイトのデザインをコーディングで再現する技術者のことを指します。Webデザイナーがデザインの立案や構成を担当する一方、Webコーダーはそのデザインを実際にコードに落とし込み、見た目や機能の実装を行います。

主な業務内容は、HTML、CSS、JavaScriptなどの言語を使用して、LPサイトやコーポレートサイト、ECサイトなどを制作することです。

具体的には、Webデザイナーが制作したデザインカンプやワイヤーフレームを基に、HTMLでWebページの構造を定義し、CSSで見た目を整え、JavaScriptを使って動的な機能を実装します。また、レスポンシブデザインやクロスブラウザ対応など、ユーザーが快適に利用できるよう最適化することも求められます。

Webコーダーは、デザインとコーディングのバランスを保ちながら、ユーザビリティやアクセシビリティの観点からも考慮しながら開発を進める必要があります。

また、プログラミング領域全般に言えることですが、新しい技術が非常に速いペースで生まれるため、常に最新のトレンドを追い続け、自己学習をすることが求められます。
Web系の企業に勤めている場合はそういった知識は勝手に耳に入ってくる環境なのでいいですが、私のような個人事業主やこれから副業として始めようという方は自分で情報を調達しなければなりません。

個人的なオススメとしてはX(旧Twitter)などのSNSアカウントを作成して、有用な情報をポストしている人をフォローすると良いかと思います。

Webコーダーに必要なプログラミング言語

諸説あるかと思いますが、私の考えるWebコーダーに必要な最低限の知識とは、以下の3つです。

これらの技術を習得することで、Webサイトのページを作ることができます。
それでは、それぞれがどのようなものでどういった用途があるのかを見ていきます。

HTML

HTMLは、Hyper Text Markup Languageの略であり、Webページの構造を定義するためのマークアップ言語です。

HTMLでは、要素（タグ）を使用してコンテンツをマークアップし、階層構造で配置します。例えば、<h1>タグは見出しを表し、<p>タグは段落を表します。
タグで表現することで、コンピューター側に『このテキストが見出しだよー』といった具合に伝えています。

<h1>ここが見出しだよ</h1>
<p>ここは段落だよ</p>
<a href=“https://~~~”>ここはリンクだよ</a>

CSS

CSSは、Cascading Style Sheetsの略であり、Webページの見た目をデザインするためのスタイルシート言語です。

CSSを使用すると、色、フォント、レイアウト、背景画像などのスタイルを指定して、HTML要素を装飾することができます。例えば、colorプロパティを使用してテキストの色を変更したり、font-familyプロパティを使用してフォントを指定したりすることができます。

h1 {
  font-family: YuGothic, sans-serif; /*フォントを游ゴシック体にするよ、対応してなかったらサンセリフ体で表示するよ*/
  color: red; /*見出しの色を赤にするよ*/
}

JavaScript

JavaScriptは、Webページに動的な機能を追加するためのプログラミング言語です。

JavaScriptを使用すると、ユーザーの操作に応じて要素を操作したり、アニメーションを走らせたり、フォームの入力を検証したりすることができます。
例えば、よくある実装として『ハンバーガーメニュー』があります。スマートフォンでサイトを閲覧しているとき、右上や左上に3本線のボタンがよくあるかと思います。これをタップするとメニューが開閉しますが、こういった動きはJavaScriptで実装しています。

// ハンバーガーメニューの要素を取得
let hamburger = document.querySelector('.hamburger');

// メニューの要素を取得
let menu = document.querySelector('.menu');

// ハンバーガーメニューの要素がクリックされたとき、
hamburger.addEventListener('click', function() {
  // メニューを開閉する(正しくは.openクラスを付与または外し、CSS側で表示・非表示を管理する)
  menu.classList.toggle('open');
});

これらの言語を学ぶことで、基本的なWebコーディングのスキルを身につけることができます。HTMLではコンテンツの構造を定義し、CSSではデザインを装飾し、JavaScriptでは動的な機能を追加することで、魅力的で使いやすいWebサイトを制作することができます。

ただし誤解のないようにお伝えしておくと、仕事をする上では先ほど挙げた言語の知識だけでは全然足りません。
3つの言語を習得したからといって勇足で案件を受注すると高確率でトラブルに見舞われると思いますので、注意しましょう。

Webコーダーに必要なツールとソフトウェア

前述の通り、Webコーダーの仕事をするために必要な知識は言語だけではありません。
コーディングする際に使用するツールや開発時の管理、納品する際に必要なソフトなどの操作を知らなくてはいけません。
例えば下記の4つです。

それぞれについて見ていきましょう。

テキストエディタ

テキストエディタは、テキストやコードを作成、編集、保存するもののことをいいます。例えばWindowsに入っている『メモ帳』、これがテキストエディタにあたります。

実はメモ帳ソフトだけでもプログラミングはできますが、この世の中にはプログラミングに特化した機能を持つテキストエディタが多くあります。
以下、プログラミング用のテキストエディタに良くある機能です。

また、代表的なプログラミング用テキストエディタは以下の通りです。

私はこの中でVisual Studio Codeを使用していますが、どれでも良いと思います。実際に使ってみて自分に合ったエディタを選択してみてください。

ブラウザの開発者ツール

開発者ツールは、WebコーダーやWebエンジニアがページやアプリケーションをデバッグ、テストするためのツールです。また、ネットワークのパフォーマンスの分析も行うことができます。

主な用途としては、コーディングしたサイトがブラウザ上でデザインが崩れていたとき、それを修正するために用います。開発者ツールではHTMLやCSSが確認、編集ができるので、ブラウザ上でコードを修正し、それで改善すればその修正内容をテキストエディタ側に反映させます。 また、JavaScriptのエラーの有無を確認することができ、エラーメッセージやエラー箇所も表示されるので、そのデバッグをする手助けにもなります。

バージョン管理ツール

バージョン管理ツールは、プロジェクトでファイルの変更履歴を管理するためのツールです。
バージョン管理ツールを使用することで、開発者は変更の履歴を追跡し、プロジェクトのバージョンを管理することができます。
このツールは基本的には多人数での作業の際によく使われます。Web制作であれば、個々が担当するページを作成してアップロード(プッシュ)、その後全員のコードを統合(マージ)して１つのサイトを作成する、といったワークフローになります。

ですが、私のように個人でコーディングをしている人でも使用するメリットがあります。それはバックアップとしての用途です。『作成したファイルが気づいたら消えてた！』、『ある日を境にデザインが崩れるようになった！』といった不測の事態に対応できるので、自分のコードをツールで管理するというのはとても安全です。

また、『急にパソコンがぶっ壊れた！？』というような恐ろしいことが往々にして起こり得ます。これで納期に間に合わなくなったら最悪です。ですがバージョン管理ツールで管理をしておけば他のパソコンからデータを引っ張ってこれるのでどうにでもなります。

一般的にバージョン管理ツールはGitが採用されることが多いです。
また、バージョン管理だけでなく納品方法としても使用されることがあります。

FTPツール

FTPツールは、ファイルの転送を行うためのツールで、FTP（File Transfer Protocol）というのは、ネットワーク上でファイルを送受信するためのプロトコルです。FTPツールを使用することで、ファイルをリモートサーバーにアップロードしたり、リモートサーバーからファイルをダウンロードしたりすることができます。

納品方法が『サーバー内にアップロード』となっていることもよくあるので、ぜひ覚えておきたいです。といっても操作はとても簡単なのでそこの心配はないのですが、実際にサーバー内にアクセスすることの怖さは知っておいた方が良いかと思います。

というのもサーバー内に納品する際に、間違えて先方のデータを削除してしまうリスクがあるからです。
SNSでもときどきそういった話を聞きますが、ちゃんと損害賠償ものですので、『どこのディレクトリにアップロードするのか』『指定のディレクトリ内に元からファイルが置いてあるが、これは削除してもいいのか』など、密にコンタクトをとって進めた方が身のためです。

また、一応自分が触れるディレクトリについては一時的にバックアップをとっておきましょう。
ただ、秘密保持の観点から、そのバックアップをずっと持っておくことも問題ですので、納品後に問題がないことを確認できたら速やかに削除しましょう。

FTPツールとしてFileZillaが使われることが多い印象です。

Webコーダーの勉強方法

Webコーディングを学ぶための方法はいくつかあります。有名どころですと、以下が挙げられます。

それでは、こちらも詳しくみていきましょう。

Progate

Progateは、プログラミング学習のためのオンラインサービスです。初心者から上級者まで、幅広いレベルのコースを提供しています。

基礎から学べるコースや特定の言語やフレームワークに特化したコースなど様々な選択肢があるので、自分がこれから始めたい副業について柔軟に対応しています。

かくいう私も実は最初はProgateから入りました。Progateの最も優れているところはブラウザ上で実際にコーディングを行うことができることです。

プログラミングをするためには、その言語ごとにPC上で環境構築というものが必要になります。『これから少しプログラミングを触ってみようかな』くらいの初学者には正直いって難易度が高すぎます。せっかく勉強をしたいのにそれを始めるまでが大変だと嫌になりますよね。
Progateならそんな手間は一切不要で、学びたい言語についてすぐにコーディングを行えるので初めてのプログラミング学習に最適です。

Progateは月額1,490円で利用できますが、各コースの数セクションは無料でできます。なのでまずは無料で試してみて、プログラミングが自分に合っているかを一度考えてみるのが良いかと思います。

ドットインストール

ドットインストールは、Web開発やプログラミングのスキルを短時間で学ぶことができるオンライン学習サイトです。ビデオレッスン形式で、手軽に学習することができます。

幅広いトピックや言語に関するコースがあるので、こちらもProgate同様に、個々のニーズに合わせたコース選択が可能です。
ざっくりいってしまうとドットインストールはProgateの動画版です。動画学習は好みの分かれるところですので、自分にとって効率の良い学習方法を選ぶといいでしょう。
ちなみに私はProgateの方が合っていたので、ドットインストールはチョロっと見た程度です。

Udemy

Udemyは、インターネット上でオンライン講座を提供している動画配信サービスです。プログラミングからビジネス、語学、趣味まで、さまざまな分野のコースがあります。

先ほどのドットインストールであったりProgateで学べる内容は比較的簡単なもので、そこで得た知識だけでは案件をこなすことは難しいです。
Udemyでは簡単なものから実務に使えるレベルの講座がたくさん用意されています。

例えばWordPressサイトの構築であったり、新しい技術に関する内容であったり、普段から現場で活躍している方が講師として動画を配信しているので、得られる知識の質が非常に高いです。

講座は有料で配信されており、大体は10,000円を超えますが、定期的に対象コースが2,000円程度に値下げるキャンペーンがあるので、そのタイミングで気になった講座を受講するのがいいと思います。

書籍や参考書

プログラミング学習には書籍や参考書も有用です。私もコーディングに関する本は何冊も購入しています。

書籍の良いところはどの学習サイトよりも詳しく記載がされており、そして読了後にもう一度読み返すのが簡単なことです。また、実際に案件を受注した際に、参考資料として手元に本があるのはとても安心感があります。

すぐに参照ができるようにプログラミング系の本はKindleなどの電子ブックでの購入を強くお勧めします。

まとめ

以上が、未経験者がWebコーダーの副業を始めるために必要な知識と学習方法です。まとめると、プログラミング言語の基礎知識や使用ツールの使い方についてオンラインサービスや書籍で学び、実践的な経験を積むことが大切という話でした。

SNS上で『プログラミング初心者が◯ヶ月で××万円達成！！』みたいな過大広告をよく見かけますが、気にしなくていいです。基本的に目に見える実績が掲載されていないので、信用に値しません。

大事なのは自分のペースで学習し、着実に正しい知識を積み上げていくことです。副業を始めるきっかけはほとんどの人が『副収入を得たい！』といった感情からだと思うのですが、副業でも仕事は仕事。自分が適当な仕事をすれば困るのは依頼者ですし、今後仕事が回ってくることはないでしょう。

何が言いたいかというと、短期間に付け焼き刃の知識を得て痛い思いをするくらいなら、ある程度長い目線で学習に取り組んだほうが結果的に得しますよってことです。

そして自分が基礎知識を学習した後もWebコーディングの世界は常に進化していますので、常に新しい技術やトレンドにも関心を持つようにしましょう。未経験からでも始めることができるWebコーディングの副業、ぜひチャレンジしてみてください。