HTML5HTML/CSSのうち、HTMLはWebサイトのレイアウトをするための言語です。CSSはWebサイトのスタイルを指定する言語で、HTMLと一緒に使うことでホームページのクオリティがさらに向上します。 HTML/CSSエンジニアには、Webサイトの「見た目」にこだわることが求められます。他言語エンジニアが「機能」にこだわるのとは対照的です。しかし、見た目に特化した仕事だからといって、HTML/CSSエンジニアを他言語エンジニアより「下」とみなすことは間違っています。 なぜならWebサイトはいま、見た目がとても重視されているからです。世の中にこれだけWebサイトがあふれると、まずは見た目で選別されます。つまりHTML/CSSの技術を駆使して美しくしたWebサイトしか人々に見向きされなくなるのです。 Webサイトは中身が勝負ですが、しかし見た目が悪いWebサイトは勝負に参加させてもらえないのです。見た目が悪いWebサイトは怪しいサイトというレッテルを貼られかねず、デザイン性に劣るホームページを持っている企業は業績がかんばしくないようにみえます。 いまやWebサイトのデザインとレイアウトとスタイルは、Webサイトのオーナーの信用力に関わる重大事なのです。 そのためフリーランスのHTML/CSSエンジニアには、たくさんの仕事が用意されています。そのような魅力あふれるHTML/CSSの歴史を振り返りながら、HTML/CSSエンジニアの立ち位置や業務案件などを紹介していきます。 HTML/CSSの特徴とは HTML/CSSの歴史と特徴をみていきましょう。 HTMLの歴史について ティム・バーナーズ・リー氏が開発 HTMLはハイパー・テキスト・マークアップ・ランゲージの頭文字を取ったものです。つまり、ハイパーテキストをマークアップする言語、ということです。 ハイパーテキストは「テキストを超える」という意味で、多くの機能を備えたテキスト（文書）のことです。本や雑誌などの紙に書かれたテキストは、文書が持つ意味以上の情報は含まれません。しかしコンピュータの画面上のHTML化されたテキストは、コンピュータやインターネットと連動させることでより多くの情報を盛り込むことができます。 例えばWebサイト上の「日経平均株価」という文字をハイパーテキスト化すれば、「日経平均株価」という文字の上にカーソルを置くだけで「日本を代表する225銘柄（225社）の上場株式の平均株価」と表示させることができます。 マークアップとは「マークをつけること」という意味です。HTMLの場合のマークアップとは「テキストにタグをつけること」です。HTMLでは、テキストにタグをつけると文字が修飾（デザイン）されます。 例えば 「<p> ～ </p>」という囲まれたテキストは1つの段落としてデザインされますし、「<b> ～ </b>」で囲まれたテキストは太文字になります。 HTMLは1989年に、ティム・バーナーズ・リー氏という人が開発しました。リー氏はHTMLだけでなく、 文書や画像や動画を公開・閲覧する仕組みであるWWW（ウェブのこと） 転送プロトコルのHTTP リソースを識別するURL も同時に開発し「Webの父」と呼ばれています。 リー氏はスイスの欧州原子核研究機構（CERN）という組織に属していて、何千人もの科学者の論文や資料を探すのに苦労していました。そこでリー氏は、WWW、HTTP、URL、HTMLといった技術を搭載したサーバーとブラウザというツールを開発し、論文や資料の検索と閲覧をシステム化したのです。 CSSの歴史 1996年に登場 一方のCSSは、カスケーディング・スタイル・シートの頭文字を取ったもので、HTMLで構造を整えたテキストをさらにスタイリッシュにする機能を持ちます。 CSSが登場したのは1996年です。機能はHTMLと似ているのですが、次第に両者は役割分担されるようになりました。 いまでは、 ・HTMLはWebサイトのテキストなどの構造を重視する ・CSSはWebサイトのテキストなど装飾を重視する というすみわけがなされています。 CSSは発表当初はほとんど注目されませんでした。ところがInternetExplorerやFirefox、OperaなどのブラウザがCSSをサポートするようになりエンジニアたちに使われるようになったことでメジャーになりました。 CSSを使うと、テキストの構造を変更せずに文字装飾などを行えます。またCSSはテキストのスタイルを一括管理できるので、変更も容易です。 この作業をHTMLだけで行おうとすると、デザイン方針が大きく変わったときに装飾した箇所をすべて手作業で修正していかなければなりません。 HTMLとCSSの両方を使いこなすことで、サイトのメンテナンス性が格段に向上するのです。 HTML/CSSの強みとニーズ HTML/CSSエンジニアの最大の強みは、Webサイトの閲覧数を増やせることです。閲覧数はサイトの実力を測るうえで重要な指標であり、広告収入にも直結します。つまり閲覧数はWebビジネスを展開する企業や個人が最も求める「数字」であり、テレビ業界の視聴率のようなものです。 閲覧数を最も効率よく増やすには、グーグルやヤフーなどの検索サイトで上位に表示されなければなりません。検索サイトは検索ワードに関係が深いサイトを表示しますが、その表示順は、価値が高い情報を掲載しているサイトが優先されます。 グーグルなどは、ロボットを使って世界中のサイトを閲覧し、価値判断しています。 ロボットはサイトの内容だけでなく、体裁にも注目します。つまりHTML/CSSで作成されて美しい体裁のサイトは、グーグルのロボットによって「価値がある」と判断されるのです。HTML/CSSのルールで書かれていないサイトは、価値が低いとみなされてしまうのです。 もちろんグーグルのロボットはキーワードなどもチェックするので、コンテンツの製作者たちはサイトに掲載する記事や写真や動画を磨き上げる必要があります。しかしそれと同じくらいの労力をかけてサイトの見た目をよくしないと、せっかくの良コンテンツが見向きされない結果になってしまうのです。 こうしたことから、Webビジネスを展開する企業はHTML/CSSエンジニアにサイトの「仕上げ」を依頼します。だからフリーランスのHTML/CSSエンジニアは、IT界、Web界で一定の存在感を示すことができているのです。 HTML/CSSで気を付けること HTML/CSSのスキルだけでこなせる案件もありますが、あまり単価は高くないでしょう。 というのもHTML/CSSスキルの獲得はそれほど難しくないからです。例えば企業が事務職社員にHTML/CSSを覚えさせ、自社サイトの更新をさせることも不可能ではありません。 したがってフリーランスエンジニアを目指す人は、HTML/CSSだけでなく「+アルファ」を身につけておいたほうがいいでしょう。 例えば、アドビ社製のグラフィックソフト「Photoshop」のスキルがあると、サイトのデザインとHTML/CSSによるテキスト加工の2つの仕事を請け負うことができます。 もしこれからエンジニアの道に進もうと考えている若い人なら、理想は、C＃やJavaScriptなどのコンピュータ言語を先に身につけてから、後からHTML/CSSを学ぶことです。 HTML/CSSエンジニアの募集要項のトレンドとは HTML/CSSエンジニアは、どのようなポジションで働くことが求められているのでしょうか。案件票の募集要項などを参考に、HTML/CSSエンジニアの働き方のトレンドを探っていきます。 フロントエンドエンジニアというポジション スキルが高いHTML/CSSエンジニアは、フロントエンドのポジションで働くことができます。Web製作のプロジェクトでは、フロントエンドエンジニアはディレクションやデザイン、インターフェースに関わります。ユーザーと直接やり取りすることもあります。 フロントエンドエンジニアは、サーバーサイドエンジニアやバックエンドエンジニアなどと異なり、システムの要件定義や設計、開発業務にはあまり関わりません。 フロントエンドエンジニアは、サーバーサイドエンジニアと比べると新しい職種です。情報が美しく載っているWebサイトへのニーズが高まったことで、フロントエンドエンジニアが誕生したのです。 競争力のあるHTML/CSSエンジニアになるには、PCだけでなくスマホやタブレットに関する知識が必要です。さらに、 ・レスポンシブWebデザイン ・サイトの軽量化 ・表示速度の高速化などの知識が加わるとさらに高単価案件を獲得できるでしょう。 レスポンシブWebデザインとは、どの大きさの画面でも見やすくする技術です。レスポンシブWebデザインでWebサイトをつくるとパソコン、スマホ、タブレットのすべてに対応できるので修正や更新が容易です。 またサイトを軽量化して表示速度を高速化できると、Webサイトの閲覧ストレスが減り、離脱を防止できます。 他のHTML/CSSエンジニアとの差別化を図るには、上記の3つのスキルの獲得はマスト事項といえるでしょう。 HTML/CSSエンジニアが活躍している業界、分野 HTML/CSSエンジニアが活躍できる分野は、幅広いのですが、ここではスマホ向けアプリ製作に注目してみます。 家電業界 HTML/CSSエンジニアは、家電関連の業務で活躍できるでしょう。パナソニックもソニーもシャープも、家電製品とネットをつなぐIoT化に力を入れています。家電をネットにつなぐと遠隔操作ができたり、家電を賢くするスマート化を進めたりできます。 家電のIoT化で重用されるのがスマホです。スマホはIoT家電のコントローラーのような役割を果たします。IoT家電のユーザー（消費者）は、専用アプリをスマホにダウンロードしてスマホで家電を操作します。 IoT家電も家電である以上、老若男女がITやIoTの知識がなくても使えるようにしなければなりません。そのためスマホアプリは、直感で操作できるインター フェイスにしなければなりません。 そこでHTML/CSSエンジニアの力が求められます。家電メーカーが求める操作性とデザイン性を実現できるフリーランスのHTML/CSSエンジニアは仕事の幅が格段に広がるでしょう。 フィンテック フィンテックとは、金融（フィナンシャル）とIT技術（テクノロジー）を合わせた造語です。金融サービスを次々IT化、AI（人工知能）化していこうという取り組みで、メガバンク、クレジット会社、携帯キャリア、IT企業などが進出し、その市場は世界規模となっています。 スキルが高いHTML/CSSエンジニアは、フィンテック関連の案件に関わることもできます。 フィンテックには、何千億円規模のマネーを扱う仮想通貨システムのような超高度なものだけでなく、スマホ決済のようにすでに身近になっているサービスも含まれます。 またフリーランス向けの会計サービスや主婦向け家計簿サービスも、クラウドを使ってフィンテック化しています。 このような市民生活に密着したフィンテックサービスは、ユーザーフレンドリーなインターフェイスが必須となるので、HTML/CSSエンジニアが活躍できるのです。 HTML/CSSのフレームワーク事情 HTML/CSSのフレームワークを紹介します。HTML/CSSだけではスキルに付加価値をつけることは難しいのですが、HTML/CSSエンジニアがフレームワークを多用して「できること」を増やすとライバルエンジニアに差をつけることができます。 GroundworkCSSとは GroundworkCSSの魅力はレスポンシブなところです。パソコン、スマホ、タブレットなど各種デバイス向けにWebサイトを製作するときにGroundworkCSSを使えば、文字の大きさが常に最適なサイズに維持されます。 またアイコンフォントやアニメーションが標準装備されているので表現豊かなサイトに仕上げることができます。 Renaissance.cssとは Renaissance.cssは、まだ高度なスキルを獲得できていないHTML/CSSエンジニアの強力な武器になるでしょう。 Renaissance.cssのコンセプトは「黄金比」です。サイトをデザインするとき、文字やリンクボタンのサイズ決めに苦労するのではないでしょうか。 Renaissance.cssはそれらの最適なサイズを簡単に選択できます。 またRenaissance.cssのユーザーのなかには「レゴブロック感覚でサイトを構築できる」という人もいます。 これはRenaissance.cssがBEMの概念を取り入れているからです。BEMにより作業が簡素化され、製作時間を短縮できます。 micronとは マイクロインタラクションを組み込んだWebサイトはすっかり一般的になりました。マイクロインタラクションが搭載されていないWebサイトのほうが珍しいくらいです。 micronは簡単にマイクロインタラクションを導入できるフレームワークです。JavaScriptのコードを書かずに使えるアニメーションが12個用意されているので、「HTML/CSSのみのエンジニア」も使うことができます。 もちろんJavaScriptスキルがあるとmicronをさらに使いこなすことができます。 マイクロインタラクションとは、ボタン操作したときに正しく実行されたことを示す仕組みです。例えばスマホ画面上をタップしたときにボタンがアニメーションで動く仕組みはマイクロインタラクションです。 Simpleとは HTML/CSSのスキルが身についたら、Simpleを使ってみましょう。簡単な関数を使うことで全体を一括操作できます。 またSimpleには便利なコンポーネント（各種の機能を持つパーツ）が収録されているので、サイトのデザイン性を簡単に向上させることができます。 HTML/CSS案件単価事情 フリーランスのHTML/CSSエンジニアにはどのような業務が発注されるのでしょうか。案件の単価などを紹介します。 大手製薬会社のメルマガ作成、月40万～50万円 広告の企画・製作会社が大手製薬会社のメルマガ作成を請け負ってくれるフリーランスのHTML/CSSエンジニアを探しています。 ギャランティは月40万～50万円となっています。 この案件の応募に求められる技術的なスキルはHTML/CSSだけですが、社会人としてのビジネスマナーやコミュニケーション能力が求められます。 動画配信アプリの開発、月80万円 こちらの案件はHTML/CSSスキルだけでなくJavaScriptの業務経験も必要です。月額80万円とかなり高い報酬となっています。 業務内容は動画配信アプリの開発で、ポジションはフロントエンドエンジニアです。マークアップをしながら、サーバーサイドエンジニアとの調整業務も担当します。 フリーランス向け案件ですが、平日10時～19時の間、常駐する必要があります。 HTML/CSS案件の具体的な業務 HTML/CSSのスキルしかないとどうしても仕事の幅を狭めてしまうので、できればJavaScriptやフォトショップのスキルを身につけておいたほうがよいでしょう。 しかし「HTML/CSSのみのエンジニア」に仕事がないかというとそのようなことはありません。 オペレーターとして働くのであれば、HTML/CSSスキルだけで仕事を獲得することは可能です。 フロントエンドエンジニアのほうがオペレーターより格上のポジションで、報酬も高いのですが、フロントエンジニアはプロジェクトによっては「泊まり込みの日々」が続きます。 一方、HTML/CSSのコーディングだけに専念できるオペレーターは定められた業務を定められた時間内に仕上げれば仕事を終わらせることができます。 つまり「長時間働くことができない」といった事情があったり、「高報酬よりワークライフバランスを重視したい」と希望したりする方は、オペレーターというポジションがおすすめです。 だからといってHTML/CSSオペレーターの仕事は単純作業ではありません。きっとディレクターは、よりよいアイデアをオペレーターに求めるでしょう。サイトのデザイン性を向上させたり、テキストを読みやすくしたりなど、オペレーターが工夫できることは少なくありません。 創意工夫が得意なオペレーターと、単なる作業員のオペレーターでは、次の仕事につながる確率が違ってきます。 ただオペレーター業務は、高額報酬は期待できません。 HTML/CSS案件の案件票をみてみよう フリーランスのエンジニアも、企業の正社員エンジニアの働き方や待遇、福利厚生などを知っておくことは大切です。フリーランスがクライアントと報酬交渉をするときの材料になるからです。 そこでHTML/CSSエンジニアを正社員で採用する企業の案件票をみてみましょう。 愛媛県松山市のHTML/CSSコーダー、月18万～25万円 地方の正社員案件を紹介します。 愛媛県松山市の企業が、自社サイトのコーディングと更新業務ができる正社員のHTML/CSSエンジニアを募集しています。 月給は、基本給14.4万～20万円＋固定時間外手当3.6万～5万円（計18万～25万円）となっています。 HTML/CSSとフォトショップの知識が必須で、イラストレーターやPHPなどの知識がある人を優遇します。 「HTML/CSS＋アルファ」のスキルがあれば憧れの地方移住ができるのです。 飲食店向けWeb予約システムの開発、年収250万～650万円 東京のITベンチャーが、飲食店やリラクゼーション施設向けのWeb予約システムを開発する正社員HTML/CSSエンジニアを募集しています。 この案件に応募するにはHTML/CSSスキルだけでは足りず、JavaScriptの知識と半年以上のプログラミング経験も必要です。 ただ同社は未経験者も積極的に採用していて、さらに年収の下限が250万円となっていることからそれほど高いスキルを持っていない人でも応募できそうです。 エンジニアの労働市場は慢性的に人手不足のため、IT企業には「採用してから育てる」というマインドがあります。 まとめ～HTML/CSS需要の今後と未来 HTML/CSSの需要は今後、増えることはあっても減ることはないでしょう。HTML/CSSエンジニアの将来は有望といえます。 またフリーランスのHTML/CSSエンジニアは「＋アルファ」のスキルを身につけることで確実に収入を増やすことができます。 IT未経験者も、コンピュータ言語になかでも習得が易しいHTML/CSSを身につけておけば、安定した仕事を確保できるIT業界で働くことができます。 HTML/CSSは非常にコスパがよいスキルといえるでしょう。
はじめてフリーランスを目指す方
テクフリで見る
HTML5, フルリモート, 一部リモート案件・求人データ
プログラミング言語
CSS3
エンジニア
HTML5案件・求人のよくある質問
