HTML/CSSは現在の様々なWEBサイトやWEBサービスにおいて、非常に高い割合で利用されています。HTML/CSSを使えるコーダー(エンジニア)は多く、学習サイトや書籍も充実しており、習得の環境は他の言語に比べかなり整っていると思います。そんなHTMLコーダー(HTML/CSS)案件の平均単価・相場感、メリット/デメリット、案件の探し方、また今後の見通しについて、ご紹介していきます。
※本記事は原則、フリーランスのSES(準委任)契約を主とした内容となり、平均単価や相場感については当サイト独自調査によりますので、ご了承ください。
HTML/CSSの特徴について見ていきましょう。
HTMLとはWebページを作成するためのマークアップ言語です。正式名称は『HyperText Markup Language(ハイパーテキストランゲージ)』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。HTMLは1989年にスイスのCERN(欧州原子核研究機構)で誕生しました。
その際の中心人物はイギリスの計算機科学者であるティム・バーナーズ・リー氏です。主にWorld Wide Web(ワールド・ワイド・ウェブ)と呼ばれるインターネット上のハイパーテキストシステムにおいてWebページを表現するために活用されております。
2020年現在、インターネット上で公開されているWebページのほとんどがHTMLで作成されております。HTMLではWebページを構成するにあたって見出しや段落の作成などのドキュメント構造の作成や編集、フォントや文字色の指定などといった見た目の作成や編集といったことを実現できます。
またハイパーリンクと呼ばれるURLを参照しテキストや画像に他のWebページへの導線となる役割を与える機能も用意されております。この機能はインターネットという世界規模のネットワークの成長に大きな影響を与えWebページを構成するにあたって無くてはならない存在となっております。
HTMLは誕生から30年が経過し数々のアップデートを重ねて2020年現在『HTML5.2』が最新バージョンとなっております。
CSSとはWebページの見た目・デザインを調整するためのスタイルシート言語です。正式名称は『Cascading Style Sheets(カスケーディング・スタイル・シート)』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。CSSは1994年にスイスのCERN(欧州原子核研究機構)で誕生しました。その際の中心人物はオペラ・ソフトウェアの最高技術責任者であるホーコン・ウィウム・リー氏です。CSSの登場によってHTMLで作成されたWebページ上での表現をより高度に装飾ができるようになりました。
具体的には文字のサイズや色、レイアウトなどの表示スタイルなど細かな編集まで手が届くようになったのです。CSSはファイル名に拡張子の『.CSS』を付けることで、コンピューターにCSSファイルとして認識されます。CSSは誕生から数々のアップデートを重ね、2020年現在『CSS4』が最新バージョンとなっております。
CSSとHTMLの関係(違い)はCSSは『デザインを担うもの』でHTMLは『Webページの作成、文章の構造を担うもの』となります。ようするにCSS単体でWebページを作成することは出来ません。あくまでもHTMLで作成されたWebページをより見やすく美しくデザインを加えるために使用するのがCSSなのです。
CSS | Webページのデザインを担う |
HTML | Webページの作成、文章の構造を担う |
CMSとはWebサイトの作成を行う際にHTMLやCSSといった専門的な技術を保有せずとも、Webサイトの作成、管理、更新などを誰でも簡単に実現できるツールです。CMSというその名は、Contents Management System(コンテンツ・マネジメント・システム)の頭文字をとった略式の名称です。代表的なCMSとして”WordPress”や”EC-CUBE”などが挙げられます。CSS、CMSの良し悪しは以下の表を参考にしてみましょう。
HTML | CSS | CMS | |
難易度 | HTMLの仕組みを理解していないと難しい | CSSの仕組みを理解していないと難しい | CSSの仕組みを理解せずとも容易 |
自由度 | 自由度高い | 自由度高い | 自由度低い(CMSに依存) |
プラグイン | プラグイン無し | プラグイン無し | 豊富なプラグイン |
運用面 | HTMLの仕組みを理解していないと難しい | CSSの仕組みを理解していないと難しい | HTMLの仕組みを理解せずとも容易 |
フリーランス向けHTMLコーダー(HTML/CSS)案件の平均単価・相場感を見ていきましょう。各案件サイトの1ヶ月のHTMLコーダー(HTML/CSS)の案件単価は
でした。案件を探す方の実務経験や、案件での役割(フロントエンド対応やサーバーサイド対応、デザイン対応)、難易度、予算によって前後しますが、概ねその単価感が平均といえます。
HTMLコーダー(HTML/CSS)として実務経験1,2年程度の場合の平均単価・相場感について見ていきましょう。
案件評判での実務経験1,2年程度の案件(準委任・週5相当稼働の場合)では、
が相場となっています。
1,2年の経験でもマネジメントやリーダーを任せられた経験や、Sass/Scss、Less経験、フロントエンド(JavaScriptやそのフレームワーク等)経験、CMS利用、CSSフレームワークの利用、サーバーサイドの対応などの経験によっては上振れの可能性もある為、最初のうちはできるだけチャレンジできる環境で開発を行っていけると、今後のキャリアにも繋がります。
HTMLコーダー(HTML/CSS)として実務経験3,4年以上の場合の平均単価・相場感について見ていきましょう。
案件評判での実務経験3,4年程度の案件(準委任・週5相当稼働の場合)では、
が相場となっています。
マネジメントやリーダーを任せられた経験や、Sass/Scss、Less経験、フロントエンド(JavaScriptやそのフレームワーク等)経験、CMS利用、CSSフレームワークの利用、サーバーサイドの対応の経験などによっては上振れの可能性もあります。
但しコーダーでの経験が長くても、JavaScriptなどのフロントエンドまで踏み込まなければ、PM,PLなどの役割にはなりずらく、金額の頭打ちはありますので、自身のスキルアップは必要になってきます。
HTMLコーダー(HTML/CSS)案件の平均単価・相場感は、下記の理由で変動・前後します。
平均単価50万円/月をベースとして下記が目安です。
HTMLコーダー(HTML/CSS)は実務経験の年数での単価は元々の難易度が高く無い為それほど差が無く、コーダーからどれだけ上記の様な対応範囲を広げられるかで単価は変わってきます。コーダーですと50〜60万円/月が頭打ちになってしまう為、Sass/Scss、Lessの習得、Wordpress等のCMS対応の習得、JavaScriptの習得、PHP(Smarty等)の習得、デザイン(UI/UX)の習得を積極的に取り組むことで60万円/月以上の収入を得ることも可能となります。
HTMLコーダー(HTML/CSS)案件の今後の動向と将来性について見ていきましょう。
WEBサイト構築におけるHTMLコーダー(HTML/CSS)の歴史は長く、ブラウザが誕生してから長らく使われてきています。HTMLコーダー(HTML/CSS)案件の現在の動きとしては、現状世界中動いている様々なWebサイトの大半でHTML/CSSが使われている為、案件はありますが、HTML/CSSのみに絞ると案件自体は少なくなっています。背景として、HTML/CSSは対応できる人が多く、Webエンジニアとしてもある程度標準スキルになってしまっている点があげられます。ですので、下記の様にHTMLコーダー(HTML/CSS)案件に絞ると全体での割合は非常に少なくなってしまいます。
HTMLコーダー(HTML/CSS)案件の案件割合 | |
HTMLコーダー(HTML/CSS)案件 | 3.2% |
フロントエンド案件 | 18.8% |
サーバーサイド/SE案件 | 50.8% |
スマホアプリ案件 | 19.1% |
他職種案件 | 8.1% |
(※直近半年の当サイト独自調べ)
HTMLコーダー(HTML/CSS)案件の今後の動向と将来性としては、世界中のWebサイトでHTML/CSSが使われているものの、HTML/CSSのみの経験ですと今後案件の減少は避けられない状況にあります。
HTML/CSSは既にフロントエンド、システムエンジニア、UI/UXデザイナーなどの職種の方々には標準でできる分野になっている為、HTMLコーダー(HTML/CSS)としてプラスアルファの対応範囲を広げていかなければ将来性は低いと想定されます。まずは、
・Sass/Scss、Less等対応
・Wordpress等のCMS対応
・JavaScript対応
・PHP(Smarty等)対応
・デザイン(UI/UX)対応
など、技術的にできることを広げていき、コーダーからフロントエンドや、システムエンジニア、もしくはUI/UXデザイナーなどへ職種を広げることをお勧めします。
フリーランスのHTMLコーダー(HTML/CSS)案件の探し方を見ていきましょう。一般的には契約形態として、準委任契約と請負契約があります。どちらの場合も今の時代、WEB上で仕事探しが可能ですので、それぞれの主なサービスを見ていきましょう。
業務委託契約(準委任契約と請負契約との違い)について解説している記事はこちら>>
フリーランスのHTMLコーダー(HTML/CSS)案件を準委任契約で探せるサービスを見ていきましょう。準委任契約では、主に週5(1ヶ月)の稼働をする形で業務を委託されます。(案件により、週2〜3なども有り)
メリットとしては、一定量のまとまった金額が保証される点、また複数月の契約の場合が多い為、続けて仕事を探さなければならないということが少ない点が挙げられます。
デメリットとしては、自身の裁量にもよりますが、基本1ヶ月丸々稼働を抑えられてしまう為、他の仕事を掛け持ちしずらい点、また現場出社が基本となる点が挙げられます。
(※現在ではコロナ渦によりリモート案件も非常に増えています。)
案件評判(Hack’en)ではIT業種のエンジニア・デザイナーなどフリーランスの方向けの案件をご紹介しております。直案件・高単価やリモートなど希望に合う案件を多数準備しております。またフリーランスのガイドブックを無料配布しており、案件以外の不安なことは相談できる、丁寧・スピード対応のエージェントです。
【案件評判(Hack’en)】の無料ご登録はこちら>>
レバテック【公式】が運営するエンジニア,クリエイターの求人・案件情報サイト【レバテック】。転職支援やフリーランス向け案件への参画サポート、業界ニュースの配信、勉強会などを通じて、エンジニア,クリエイターの成長を応援する一番身近な相談相手を目指します。
【レバテックフリーランス】
Midworksではフリーランスエンジニアを目指す方に正社員並みの保障付きで、独立を支援するサービスです。IT・Web業界の案件のご紹介を始めとして、独立する際のサポートを致します。3000件以上の案件を保有しているので、あなたにぴったりの案件をご紹介致します。
【midworks】
フリーランスのHTMLコーダー(HTML/CSS)案件を請負契約で探せるサービスを見ていきましょう。請負契約では、顧客の業務(開発やデザイン)を請負い、完成、納品までさせる必要があります。顧客の希望予算・納期に合わせて動く為、稼働量は一概に言えません。
メリットとしては、作業時間の縛りは基本無い為いつでも業務ができる点です。また極端に言えば準委任で1ヶ月50万円の仕事を1週間で終わらせてしまうことも可能で、実力によっては1ヶ月の収入を100-200万以上にすることも可能です。
デメリットとしては、顧客の継続発注が無い限りは1つの業務が終われば次の業務を探さなければならない為、継続性が低い点、また完成義務がある為、開発したものの不具合にいつまでも引きづられる可能性がある点です。
クラウドワークスは主に請負契約で、案件を探す場合に活用できるクラウドソーシングです。登録者数・案件数ともクラウドソーシングの中では業界大手のサービスです。実績が少ない内は、こういったサービスを活用して、実績を積み、ポートフォリオの拡充を図っていくことも効果的です。
クラウドワークス
ランサーズは主に請負契約で、案件を探す場合に活用できるクラウドソーシングです。登録者数・案件数ともクラウドソーシングの中では業界大手のサービスです。実績が少ない内は、こういったサービスを活用して、実績を積み、ポートフォリオの拡充を図っていくことも効果的です。
【ランサーズ】
準委任契約での案件例を見ていきましょう。
HTMLコーダー(HTML/CSS)実務経験1,2年程度の案件例を見ていきましょう。
項目 | 内容 |
案件 | Webサイトのリニューアル |
場所 | 東京都内 ※リモート可 |
期間 | 4月〜中長期 |
業務内容・役割 | ・デザインガイドライン・パターン集があり、それをもとに既存ページを新デザインに作り替える業務 ・作業はCMS(Movable Type)上で行うが、テンプレート開発等は不要、ページの移設がメイン |
必要スキル | ・Webサイト作成経験 ・HTMLおよびCSSの基本的な理解 |
尚可・歓迎スキル | ・CMS(Movable Type)でのサイト作成経験 |
単価 | 550,000円〜605,000/月(税込) ※現地へ行く際の交通費込み |
精算幅 | 140-180H |
面談回数 | 1回 |
備考 | 環境構築は現地、それ以外はリモートで可能です。 |
HTMLコーダー(HTML/CSS)実務経験3,4年以上の案件例を見ていきましょう。
項目 | 内容 |
案件 | ECサイト向けコーダー |
場所 | 六本木(東京都)※リモート可 |
期間 | 3月〜中長期 |
業務内容・役割 | コスメ通販企業のECサイトの画面制作(フロントコーディング)に携わります。 ECサイト各種画面の新規制作、改修を行います。 |
必要スキル | ・動的Webサイトのコーディング3年以上 ・スマホ向けWebサイトのコーディング経験1年以上 ・Gitの使用経験があること ・Sass、gulpに関する知識があること |
尚可・歓迎スキル | ・PHP経験 |
単価 | 770,000円〜880,000円/月(税込) ※現地へ行く際の交通費込み |
精算幅 | 140-180H |
面談回数 | 1回 |
備考 | 環境構築は現地、それ以外はリモートで可能です。 |
エンジニア未経験・初心者の方について見ていきましょう。未経験・初心者の方で、特にフリーランスとして案件を獲得するのは非常に難しく厳しなっていることが現状です。そんな中でもできる動きとして下記を参考にしてみてください。
上記のクラウドワークスやランサーズ等のクラウドソーシングを活用していく。決して未経験を推奨している訳ではないですが、システムを開発・納品までする一連の流れを経験することで、開発の全体を見ることができます。小規模でも、予算・納期の把握、開発・調整と学ぶことは多くあります。またここで実績を複数作ることで、開発ポートフォリオを充実させることもでき、その後の案件獲得もスムーズになってきます。
プログラミングスクールはプログラミング言語などのITに関する必要な技術を学べるスクールのことです。利用者の主な目的としては就職や転職、副業などとされておりスクールによっては就職や転職までを支援することを目的とした就職保証プランなども存在し人気を集めております。
今では幼児や小学生に向けられたプログラミングスクールも多数あります。幼少期を含めた若者層だけでなく、シニアや年配者といった高齢者層に向けられたスクールも注目を集めております。
スクールではそのまま案件を紹介してくれるサービスもあるので、そのままそのスクールに案件を紹介してもらうこともスムーズに仕事を探せる手段の一つです。
プログラミングスクールについて解説している記事はこちら>>
また無料で学べるオンラインサイトも現在非常に充実しています。有名なところで、『Progate(プロゲート)』、『ドットインストール』、『paizaラーニング(パイザラーニング)』、『Schoo(スクー)』など、20以上のサービスが無料で利用できます。
どうしても案件が取れないときは、就職活動も視野に入れることをお勧めします。未経験・初心者でフリーランスとして案件を探すにはかなりハードルが高いのですが、その理由は単に『経験』が無いからです。その『経験』を付けるにはやはり、就職して現場の開発の一連の流れをしっかりと学び、実務経験を積むことが近道です。エンジニア不足の昨今、未経験者でも、独学でも学習をしている方は積極的に採用していく企業は増えてきています。
ただし、将来フリーランスになりたいからという理由があった上で、企業は採用することはほぼ無い為、まずは社員・フリーランス問わずしっかり今後どういうエンジニアになりたいのか、将来像・キャリアを考え動いて行きましょう。