特集インタビューサービス一覧お問い合わせコーダー・マークアップエンジニア・フロントエンドエンジニアの違いとは?2019.03.31フリーランスエンジニアのなり方HOMEフリーランス基礎知識フリーランスエンジニアのなり方コーダー・マークアップエンジニア・フロントエンドエンジニアの違いとは?こんにちは。エンジニア・ライターの七色メガネです。最近、エンジニア界隈や求人広告でよくフリーランスエンジニアという言葉をよく聞きますね。フリーランスエンジニアについて調べてみると、簡単な種類の仕事ではないものの、昨今のITエンジニア需要に追い風を受けていることもあり難易度に見合うだけの報酬が約束されていることが分かります。IT業界は転職に寛容であり、むしろスキルアップのステップとして転職は有効な選択肢だとされています。通常の正社員では自分のスキルアップを主眼とした職場を選びを出来ることは少なく、そうした点からもフリーランスエンジニアという生き方は価値あるものとなっています。巷では「フリーランスエンジニア」という言葉で一括りにされるこの職業ですが、箱を開けてみれば、実はそこには多種多様なタイプなエンジニアが存在します。理想のキャリアを歩むには、職業選択でミスをしないフリーランスエンジニアにも違いがあり、キャリアも異なるフリーランスに憧れているからフリーランスエンジニアになる。それはとても大事な動機です。それが有ると無いとでは、成長速度も全く異なるものになるでしょう。どんなタイプのエンジニアになるかを考えておかなければ、優れたキャリアを積むことは出来ません。優れたキャリアを積むことが出来なければ、最悪、ただの都合の良い人員としてのエンジニアになってしまうことも大いにあり得ます。したがってフリーランスエンジニアとして活躍するには、どの舞台で活躍するかをよく考える必要があります。フリーランスエンジニアにはどのような種類があるのでしょうか?今回はその中でも、コーダー・マークアップエンジニア・フロントエンドエンジニアの3つのタイプのエンジニアについて紹介していこうと思います。コーダー、マークアップエンジニア、フロントエンドエンジニアとは?その違いは?さて突然ですが、皆さんはコーダー・マークアップエンジニア・フロントエンドエンジニアという3つのタイプのエンジニアの違いについて説明できるでしょうか?これを説明できることがMustか、と言われれば全然そんなことはありません。人が知らなそうなことを知っている、ということが往々にして個人の価値になりやすいものです。このタイプの違うエンジニアについて知ることは決して雑学レベルでなく、実用レベルで貴方の力になることかと思います。ご存知でなければ是非覚えてみてください。ご存知の方は知識の確認に役立ててくださればと思います。ポイントなお初めに断っておくと、これらのエンジニア・タイプについての理解・定義は人によって多少揺れるところがあります。一例として見ていただければ幸いです。コーダーってなに?その仕事内容は?「コーダー」とはその名の通り、HTMLコードを作成することをメイン・ワークとするタイプのエンジニアです。コードとは本来プログラミング言語を問わずに作成されたソース・コードを指す言葉ですが、「コーダー」という場合には一般的に「HTMLコーダー」のことを指しており、HTMLを使用してコードを作成することがその仕事となります。コーダーの仕事は、Webデザイナーから発注されたデザインを元にWebサイトを作成することです。過去にはWebデザイナーがデザインからコーディングまで一貫して行うことも多かったですが、各種技術が複雑化した現在、デザインから先のコーディングが別途発注されることが多くなり、併せてコーダーの需要が高まった経緯があります。コーダーの立ち位置はプログラマーと似ています。プログラマーはシステムエンジニアの作成した設計書に基づきプログラムを作成し、コーダーはWebデザイナーの作成したデザインに基づきWebサイトを作成します。その仕事は決して簡単なものではありませんが、以降二つのタイプのエンジニアと比較した時には、コーダーはその入門的な立ち位置となります。マークアップエンジニアってなに?その仕事内容は?「マークアップエンジニア」とは、HTML作成のプロフェッショナルであるタイプのエンジニアです。一般的に、コーダーの上位職と捉えられることが多いようです。コーダーがデザインに基づいてWebサイトを作成するだけだったのに対し、マークアップエンジニアはより多くの見識を携えてWebサイトの制作に当たります。)Webサイトにするという配慮に基づいた実装を行う能力や、より多くのユーザに届くようSEO対策を行う能力がマークアップエンジニアには必要とされます。コーダーの上位職であるので、コーディング能力についてもコーダーより高いレベルの技術が求められます。HTMLやCSSなどに明るいことは当然ながら、JavaScriptなどにも見識を持つことが求められるでしょう。フロントエンドエンジニアってなに?その仕事内容は?「フロントエンドエンジニア」とは、Webサイトにおけるフロントエンド、すなわちユーザが目にするサイト部分全てを作成することの出来るタイプのエンジニアです。ここは定義が混在しやすいところであり、マークアップエンジニアとフロントエンドエンジニアが同一視されることも少なくありません。ここでは、マークアップエンジニアとフロントエンドエンジニアには違いがあるものとし、フロントエンドエンジニアはコーダーの上位職であるという理解に基づいて説明を行います。マークアップエンジニアがHTMLのプロフェッショナルであるのに対し、フロントエンドエンジニアはより広範に、Webサイト作成全般のプロフェッショナルと言えます。Webサイトの特にプログラム面に強みをもつタイプのエンジニア、とも言えます。その知識はHTMLのみならず、CSS、JavaScript、PHPなど多くの領域に及ぶことが要求されます。WebディレクターやWebデザイナーとコミュニケーションをとり、Webサイト上で何が表現し得るか意見を求められることも多いでしょう。マークアップエンジニアと比較した時、フロントエンドエンジニアの仕事はよりプログラミング的領域に踏み込むもの、と区分けがされるようです。マークアップエンジニアもHTMLを中心としてCSSやJavaScriptについての見識を求められますが、フロントエンドエンジニアほどの知識は求められないでしょう。反面、HTMLに関する知識ではマークアップエンジニアの方が優れている、というイメージでこの2つのタイプのエンジニアは区別されることが多いようです。技術とその難易度では、コーダー・マークアップエンジニア・フロントエンドエンジニアにはどんな技術が必要とされるのでしょうか。ここではそれを解説していきます。コーダーに必要な技術とその難易度コーダーの仕事は前述の通り、Webデザイナーが作成するデザインに基づいてWebサイトを制作することです。その実現に当たって必要な知識・スキルを列挙してみます。ついての基本的な知識がある。(難易度:★★☆☆☆)デザインから全体構成を整理してコードが書ける。使用し、データから画像の書き出しができる。(難易度:★☆☆☆☆)レスポンシブなWebサイトの実装が出来る。(難易度:★★★☆☆)BootstrapなどのCSSフレームワークを使用できる。(難易度:★☆☆☆☆)jQueryのライブラリ導入や設定ができる。(難易度:★★☆☆☆)デザインをHTMLに書き出すだけ、というと簡単に聞こえてしまいますが、そのために必要なスキルは多くあります。HTMLやCSSについての技術があることはMustですが、仕事としてクオリティを担保するため、あるいは求められる作業効率の実現のためには上のように各種ツールを使いこなせる必要があります。言え、一つ一つを解題していけばそれほど難しいスキルが並んでいる訳ではありません。努力と経験を重ねれば、大抵の人はクリア出来るスキルであるはずです。マークアップエンジニアに必要な技術とその難易度マークアップエンジニアはHTMLのプロフェッショナルです。したがって、HTMLに関連する技術は他者に引けを取らないレベルであることが求められます。その他能力についても全ての面でコーダー以上であることを要求されるでしょう。ついて高いレベルでの知識を保有している。(難易度:★★★★★)デザインを忠実に再現したコーディングができる。(ピクセルパーフェクト)(難易度:★★★☆☆)デザインから全体構成を整理し、保守性の高いコードが書ける。用いて簡単な機能を実装できる。(難易度:★★★☆☆)WordPressの知識があり、テーマを自作できる。(難易度:★★★★☆)SEOの知識があり、対策できる。(難易度:★★★★☆)アクセシビリティ、ユーザビリティに配慮した実装を行える。(難易度:★★★★☆)コーダーに求められる能力が可視的であったのに比べ、マークアップエンジニアのそれは不可視的なものも少なくありません。SEOやユーザビリティはこれを行えば間違いない、と言う正解が常に存在するものではありません。いった能力が求められることに難しさはありますが、しかしそれが出来るようになれば間違いなく、どんな現場でも重宝される人物になることが出来るでしょう。フロントエンドエンジニアに必要な技術とその難易度フロントエンドエンジニアは、マークアップエンジニアに比べて高レベルなプログラミング・スキルが求められます。開発はほとんどの場合チームで行われますから、チーム開発におけるノウハウやツールの使用にも明るいことが望まれます。ついて基礎レベル以上の知識を保有している。用いて求められる機能を実装できる。(難易度:★★★★★)WordPressの知識があり、テーマを自作できる。バージョン管理ツールの知識があり、チーム開発で使用できる。フレームワークの知識があり、小規模Webアプリの開発ができる。(難易度:★★★☆☆)サーバーサイドの知識があり、バックグラウンドの機能を考慮したサイトおよびウェブアプリケーションの構築ができる。Gruntなどの知識があり、開発を効率化できる。等についての知識があり、サーバーサイドとのインターフェイスを考慮した実装ができる。知識があり、実装ができる。(難易度:★★★★☆)項目の多さからも、知識の広範さが伺い知れますね。重複になりますが、難易度が高いと言うことはそれだけ希少性が高いと言うことを意味します。フロントエンドエンジニアなのにサーバー側も考慮することが出来る人がいたら、一緒に仕事をしたくなりませんか?コーダーやマークアップエンジニアになる方法ここまで、コーダーやマークアップエンジニア、フロントエンドエンジニアの仕事や必要とされるスキルについて見て来ました。どのようにすれば実際にコーダーやマークアップエンジニアになれるのでしょうか?前述のように、これらの仕事を端的にまとめてしまえば、「クライアントからWebサイトデザインの発注を受け、作成して納品する」ということになります。したがって、クライアントが見つかりさえすれば、実際にコーダーやマークアップエンジニアとして活躍できるようになります。何も実績がない状態からクライアントを見つけるのは難しいことです。一般的にはWebサイト作成を請け負う企業に所属して経験や実績を積み、フリーへの希望があるならばそこから独立、というコースが安定的であるようです。未経験からフリーランスを志向する人や、業界内転職でこれらのタイプのエンジニアを目指す方にもルートは存在します。クラウド・ソーシングを利用すると、個人でクライアントを見つけることができるため、企業に所属しなくても実績・報酬を獲得することが出来ます。次のサイトは、クラウド・ソーシングの最大手であるランサーズです。コーディング」と言うタグで案件を絞ってみたところ、多くの案件がヒットしました。競合は少なくなく、ここでも良い条件の案件を獲得するには実績が必要だとは思いますがチャンスが多く転がっているのは間違い無いでしょう。ココナラというサイトでは、もっとカジュアルにスキルの提供が出来るようです。こちらは自分で提供するサービスを提示し、クライアントがそれを選択して契約すると言うタイプのサービスのようですね。いったスキルに需要が集まっているのか調査する目的で潜入してみるのも、面白いかもしれません。https://coconala.com/coconalaココナラでは、WordPressに関するスキルについて検索してみました。ランサーズとはまた異なるアプローチでのサービス提供方法で、ここで成果を上げられれば、間違いなく実績として誇ることの出来るものになると思われました。コーダー・マークアップエンジニア・フロントエンドエンジニアのキャリア最後に、コーダー・マークアップエンジニア・フロントエンドエンジニアのキャリアについてまとめたいと思います。何度か書いているように、マークアップエンジニアとフロントエンドエンジニアはコーダーの上位職であり、コーダー経験が無い場合からいきなりフロントエンドエンジニアになる、と言うのは難しいかもしれません。(自分でポートフォリオを作成している、クラウド・ソーシングで実績を積んでいる、多ジャンルのエンジニアとしての知識・経験がある、などの場合はその限りではありません。)したがって、一般的には先ずはコーダーからキャリアを積み始めることが多いかと思います。コーダーからのキャリアパスとしては、主に次の2つのルートがあります。マークアップエンジニア・フロントエンドエンジニアコーダーで培ったHTMLやCSSの経験を100%活かすのであれば、マークアップエンジニアやフロントエンドエンジニアを目指すのが王道です。そのために必要なスキルは、本記事のマークアップエンジニアやフロントエンドエンジニアのスキル欄に具体例を上げているのでそちらをご覧ください。日本ではスキルアップすると実作業から離れていってしまうと言う習わしがありますが、このルートでは生涯現役を体現できるのではないでしょうか。コーダーでは見えなかったSEOの視野、プログラミングによる動的処理の実現、サーバーサイドへの配慮など、きっと経験を積むたびに新たな世界が見えてくるはずです!その代わり、IT業界では共通のテーマですが生涯新しいことを学び続ける必要があります。Webディレクター(など)コーダーで学ぶことが出来るのはHTMLやCSSの知識ばかりではありません。Webデザイナーから発注されるデザインに日々触れるので、Webサイトのデザインにも造詣を得られるはずです。デザイン分野に興味が出て来たならば、Webデザイナーへキャリアを転換するのも一つの手です。Webデザイナーはデザインを作成しますが、コーダーに実装を発注することから分かるようにデザイナー自身がコーディング能力を保持していないことが多々あります。そこを突いて、実装も出来るWebデザイナーへと転身したならば、貴方の価値は間違いなく上がることでしょう。Webデザイナーはコーダーと同様、デザインにおけるキャリアパスの基本職として捉えられることが多いです。Webデザイナーとして経験を積むことができたら、さらにWebディレクターなどのパスが拓けて来ます。Webデザイナーについての紹介記事もまた別途作成しますので、興味があればそちらもご覧ください。理想のキャリアを歩むには、職業選択でミスをしない今回はコーダー、マークアップエンジニア、フロントエンドエンジニアについて紹介を行いました。気になるエンジニア・タイプについて、欲しい情報は得られたでしょうか?皆さんの中には、フリーランスエンジニアを志す方以外にも、未経験でこれからIT業界に転職しようとしている人、異なるタイプのエンジニアから転職を行おうとしている人など多くの方がいるかと思います。最後にお伝えしたいのは、キャリアと職業選択には大きな関連があると言うことです。Webサイトを作りたいのにシステムエンジニアを目指してしまったり、逆にアルゴリズムなどを使ったプログラムに憧れているのにコーダーに成ってしまったりすると、職業の性質上、少なからずの手戻りが発生してしまいます。大きな決断の前に正しい情報を手に入れ、ぜひ輝かしい転身をなさってください!次回以降は、「Webデザイナー」、「サーバーサイドエンジニア」についての解説記事を作成します。ご興味があれば是非そちらもご覧ください。いう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。投稿一覧IT業界に転職してきて3年目の新米エンジニア。前職は高校の国語教員。生徒と触れ合う日々に楽しさを覚えつつも、自分も新たなことを学び続けたいという気持ちが強くなり、エンジニアに。始め複数の資格を取得。日替わりで付け替えられるメガネからは、その日の気分が読み取れるとか、取れないとか。2019.06.12この記事では、こんな疑問にお答えします。こんにちは、りか(@kei_freedomer)です。2019.07.01せっかくITエンジニアになったのに「収入が伸びない」と思い悩んでいる方も多いでしょう。2019.07.15こんにちは、プログラマーのとだこうきです。本記事ではプログラミングの効率的な学習方法について説明していきます。USイメージキャラクター『Freena』フリーランスの羅針盤となるメディアサイト『東京フリーランス』。フリーランスの皆さんに役立つコンテンツを配信しています。