Web制作について勉強しましたが、デザインを作るのはあまり自信がありません。
HTMLやCSSを使って始められる副業はないでしょうか？
こんな疑問に答えます。
僕はプログラミング完全初心者からWeb制作の勉強を始めて、今では現役でWeb制作副業をバリバリやっています。
ココナラでは最高のプラチナランクを獲得しました。
結論から言うと、HTMLとCSSをある程度使いこなせるようになれば、HTMLやCSSを使ったコーディング案件を使って副業ができますよ！
以下では、HTML・CSSコーディング副業に必要なスキル、案件の獲得方法や単価を上げる方法について解説していきます。
それでは、どーぞ！
目次
HTML・CSSコーディング副業について
まずはHTML・CSSコーディングがどういったものかについて紹介していきます。
HTML・CSSコーディング副業とは？
HTML・CSSコーディング副業とは、クライアントからすでにできあがったデザインをもらって、デザイン通りにHTML・CSSコーディングする副業です。
自分でデザインを作る必要がないので、HTMLやCSSといったスキルさえあれば、デザインを作るのが苦手な人でも始めることが可能です。
実際のコーディング案件には、例えば以下のようなものがあります。
HTML・CSSコーディング案件の相場
まず気になるのがコーディング案件の相場ですよね。
もちろん1ページ当たりのボリュームや納期によって変わってきますが、クラウドソーシングサイトでのコーディング案件の相場はだいたい以下が相場です。
- トップページの作成：1ページ10,000円〜
- 下層ページの作成：1ページ8,000円〜
- ランディングページの作成：10,000円〜
- レスポンシブデザイン：3,000円〜
- 動的機能の追加：2,000円〜
- お問い合わせフォームの実装：5,000円〜
例えば、5ページのWebサイトのコーディング案件を受けたとしたら、
- トップページの作成：10,000円
- 下層ページの作成：8,000円×4＝32,000円
- レスポンシブデザイン：3,000円×5＝15,000円
- ハンバーガーメニューの実装：2,000円
- お問い合わせフォームの実装：5,000円
と、合計で64,000円くらいになります。
1つのWebサイトのコーディング案件を丸ごと受注できれば、コーディングだけと言えども数万円といった金額になりますね。
こんな人から需要がある
では、コーディング案件はどんな人から依頼があるのか？
実際にこれまでコーディング案件を依頼してくれたクライアントには以下のような人がいます。
- Web制作会社
- Webサイトが必要な個人や企業
- 個人でWebデザイナーをやっている人
上記のとおり、Webサイトのことをあまり知らない人からコーディングもできるけど手が回らなくてお願いしたいという人まで割と幅広い客層です。
Web制作のプロのWeb制作会社から依頼が来たりすることがあるので、HTMLとCSSについてはやはりそれなりのスキルを持っておきたいですね！
HTML・CSSコーディング副業に必要なスキル
HTML・CSSコーディングに必要な以下のスキルです。
- HTML/CSS
- JavaScript
- Photoshop、Illustrator、Adobe XDの基礎
- お問い合わせフォームの実装
- WordPressテーマ化
順番に解説します。
HTML/CSSとJavaScriptのスキル
HTML/CSSについては必須のスキルです。
コーディング案件で副業を始めるなら、HTMLとCSSについてはほぼ自由自在に扱えるようになっておきたいところです。
JavaScriptについてもほぼ必須です。
ただし、こちらについてはjQueryを使ってハンバーガーメニューなどよくある動的機能が実装できればOK。
コーディング案件でよく依頼される動的機能は以下のあたりです。
- ハンバーガーメニュー
- スライダー
- 画面トップに戻るボタン（スムーススクロール）
HTML/CSS/JavaScriptは最低限のスキルとして、重点的に勉強しておきましょう。
Photoshopのスキル
デザインデータはPhotoshopで受け取るがほとんどなので、Photoshopの使い方の基本くらいは知っておく必要があります。
Photoshopの使い方で知っておきたいのは以下のあたり。
- 画像を取り出す
- テキストに関する値を取得する
- 余白の幅を取得する
Photoshopは多機能で使いこなすのは難しいですが、基本の使い方がわかっていればOKです。
お問い合わせフォームとWordPressのスキル
お問い合わせフォームの実装とWordPressについては、扱えなくてもコーディング案件を受注することができます。
ただし、これらのスキルがあれば依頼の幅を広げられて高単価の案件も受けられるのは間違いないです。
お問い合わせフォームの実装とWordPressについては副業を始めてから勉強しても全然OKなので、副業をやりつつ勉強しましょう。
コーディング案件を獲得するには
副業であれば、以下のようなクラウドソーシングサイトが受注するのがメインになると思います。
ココナラであれば、「Webサイト制作・カスタマイズ」の「HTML・CSSコーディング」に出品して依頼を待てばOKです。
一方、クラウドワークスとランサーズは、クライアントからの仕事の募集に対して応募していく形がメインです。
ランサーズにはココナラのような「スキル出品」という機能もありますが、こちらはおまけと言ったような感じ。
待つのが苦手という人はクラウドワークスとランサーズをメインにするといいですね。
どのクラウドソーシングサイトも登録自体は全て無料です。依頼を獲得できる可能性を上げるためにも、すべてに登録しておきましょう。
ココナラで依頼をもらうコツはこちらの記事で詳しく解説してあるので、ぜひ参考にしてください。
慣れてきたら時間単価を上げることを意識しよう！
ある程度コーディング案件をこなせるようになれば、次のステップとして時間単価を上げることが大事になります。
コーディング案件で時間単価を上げる方法には、以下の2つがあります。
- 1ページ当たりの単価を上げる
- コーディングスピードを上げる
順番に解説します。
1ページ当たりの単価を上げる
まずは、1ページ当たりの単価自体を上げる方法です。
ただし、単価を上げた結果、依頼が来なくなってしまっては本末転倒。
なので、ページ単価を上げるにはページ単価が上がっても依頼をしてもらえるほど実績を積み上げておく必要があります。
大事なのはこの順番。
低い単価で依頼をたくさん受けて実績を積み上げる
↓
継続的に依頼をもらえるようになる
↓
1ページ当たりの単価を上げる
最初は割に合わなく感じても、中長期的な視点で依頼をこなしていきましょう。
コーディングスピードを上げる
もう一つの方法は、コーディングスピードを上げる方法です。
経験を積めばコーディングスピードは早くなっていきますが、それだけではやはり限界があります。
以下のツールを使うことで、簡単にコーディングスピードを上げることができます。
- Emmetを導入する
- Sassを導入する
順番に解説します。
Emmetとは？
Emmet（エメット）とはエディター用の拡張機能です。
Emmetを使えば入力文字数がかなり減るので、コーディングスピードをかなり上げることができます。
例えばHTMLの場合だと、「nav>ul>li」と入力してTabを押すだけで「<nav><ul><li></nav></ul></li>」と出力してくれます。
CSSの場合だと、「mb100」と入力してタブを押すだけで「margin-bottom: 100px」と出力してくれます。
Emmetを使えるエディターは以下のとおりです。
- Visual Stadio Code
- Adobe Dreamweaver
- Atom
- Brackets
- Sublime
このうち、Visual Stadio CodeとAdobe Dreamweaverは標準搭載です。
その他のエディターはプラグインをインストールして使えるようにします。
いずれにしても簡単に導入できてしまいますので、導入する以外の手はないですよ！
Sassとは？
Sass（サス）とは、CSSを効率的に書くための拡張機能です。
例えば、
<div class="menu">
<ul>
<li><a href="">テキスト</a></li>
</ul>
</div>
といったHTMLのスタイルを指定する場合、
ul {
list-style-type: none;
li {
a {
color: blue;
&:hover {
color: red;
}
}
}
}
のように入れ子構造で記述することができ、HTMLと同じ階層構造でスタイルを指定することができます。
Sassファイルの拡張子は.scssで、実際にHTMLファイルで読み込むときはコンパイルして、拡張子が.cssのCSSファイルを作成します。
コンパイルというと難しそうに聞こえますが、一度設定さえ済ませれば、あとはエディターで保存するときに自動的にコンパイルしてくれます。
EmmetとSassの導入方法と使い方をこちらの記事に詳しくまとめてあるので、ぜひ一度試してみてください。
まとめ：デザインが苦手な人はHTML・CSSコーディング副業がおすすめ
- HTML・CSSコーディング副業とは、クライアントからすでに出来上がったデザインを受け取って、デザイン通りにHTML・CSSコーディングする副業
- HTML・CSSコーディングに必要なスキルはHTML、CSS、JavaScript、Photoshop
- 高単価案件を受けるため、お問い合わせフォームとWordPressのスキルも副業をやりながら身につけよう
- コーディング案件に慣れてきたら、単価を上げることを意識しよう
以上、Webサイトのデザインが苦手という人に向けて、HTML・CSSコーディング副業に必要なスキル、案件の獲得方法や単価を上げる方法について紹介しました。
HTML・CSSコーディングはできないけど、HTML・CSSコーディング副業に少しでも興味を持った人は、勉強してみるのがオススメです。
HTML・CSSはプログラミング初心者でも習得しやすい言語です。
効率よく勉強する手順は以下の記事で詳しく紹介しているので、参考にしてください。
ではでは～！
