マークアップエンジニア/コーダーは中途半端な存在なのか??

先日、Microsoftが手書きのスケッチ画像からhtmlのコードを自動生成してしまう「Sketch2Code」という技術を開発したというニュースがありました。

Microsoftが「Sketch 2 Code」を公開!AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい!!|榊原昌彦 @rdlabo|note(ノート)

どうせデザインからコードを生成してくれる系のソフトにありがちな、出来上がったコードは不要な入れ子がいっぱいでお世辞にも綺麗なコードとは言えないものだろうと思ったら、割とスッキリしたhtmlコードを自動生成してくれるみたいです。時代はどんどんAIによって技術が進んできていますね。上記のツイートのように、マークアップエンジニアの仕事がAIによって不要となることを心配する人もちらほら見受けられます。

また、ちょっと前にはTwitterでこんな議論が勃発してました。

こういう話が出てくると、名刺に「マークアップエンジニア」と記載している身としてはたいへんモヤモヤします(苦笑)
個人的にも自分の職業の呼称は何に当たるのか、実はいまいちピンと来ていない部分があったので。。。

そもそも「エンジニア」って何なんでしょう。Wikipediaには以下のようにあります。

-技術者(ぎじゅつしゃ、英語: engineer、エンジニア)とは、工学(エンジニアリング)に関する専門的な才能や技術を持った実践者のことである。(直訳するとエン=拡大する・実践するの接頭語、ジーニア=才能ある人・閃く人。エンジニアリングを工学と翻訳した場合、エンジニアには「工学者」が当てられるべきだが狭義すぎること、また技術=technicとして技術者=technician(en:Technician)とする英語側とのねじれが生じることから、国内では実際の内容としては広義の専門的な技術者=エンジニアと定義することが多い。ただし英語圏ではエンジニアと単なる技能習得者は明確に区別されるので注意が必要となる。なお、逐語的には技術=technologyとすることが多い)

-通常、工学(機械工学、電子工学、情報工学、化学工学など)や理学(数学、物理学など)の分野の知識を持ち、有用な物・工程・システムなどを設計・開発・製造する。

私は学生時代に言語の歴史的変化について専攻していたので、こういう語源の話が出てくるとつい興味津々になります。それはさておき、エンジニアという語をざっくり定義すると、「専門的な知識を身につけた技術者」といった感じでしょうか。
「開発」という点から行けば、PHPやRubyやJavaScriptを使ってWebサービスを構築できる人がエンジニアであることのように思えますが、html/CSSについても破綻しないコードを書くためにはしっかりとした設計が必要になるので、そこができる人は別にエンジニアと呼んでもおかしくないんじゃないかという気はします。

フロントエンドとマークアップエンジニアの垣根もよくわからなくて、私はhtml/CSSでデザインを反映させることはもちろん、PHPを使ってお問合せフォームを実装したり、WordPressのオリジナルテーマを構築したりといったこともしますし、静的htmlのサイトを作る場合でも現状はJavascriptのテンプレートエンジンであるEJSを使います。実務では実装したことがありませんがかつてはRubyの講座に通っていたのでRubyOnRailsを触ることもできます。しかしJavascriptやPHPのコードをフルスクラッチで書けるかというと、そこまでは出来ないため「フロントエンドと名乗るほどではないな」ということで、自己紹介するときは一応「マークアップエンジニア」と言っています。(多分マークアップエンジニアと名乗る人ってこのような技術レベルの人が多いのではないかなぁと思います。)

マークアップエンジニアだろうがコーダーだろうが呼び方はどうでも良いんですが、今のWeb業界では「マークアップエンジニア(コーダー)<フロントエンドエンジニア<バックエンドエンジニア」という構図があるように思えます。
要は、「プログラミングできる人が偉い!」という風潮なんですね。
Twitterでの「マークアップエンジニアなんてかっこいい呼び方あるけどエンジニアじゃないから!」という叫びに象徴されるように、フロントエンドがマウンティングしてる状態です。

10年くらい前までは、プログラマーとhtml/CSSを書くコーダーの間にはっきりとした境界線があったような気がします。(この記事を書いているのは2018年9月です。)2007年に初代iPhoneが世に出てモバイルデバイスで様々なアプリケーションを使うことが出来るようになり、Flashがモバイルデバイスで使えない問題が生じ、それと同時進行でNode.jsの登場でJavascriptがサーバーサイドでも使えるようになり、また、ReactやVue.jsのようなフレームワークが誕生しました。JavascriptがWebの目に見える側でも裏側でも用いられ始めたことによって、今やフロントエンド側にもプログラミングが求められています。びゅんびゅん動きのあるWebサイトってなんか先進的でカッコイイですし。
昔はWebデザインをしてhtml/CSSに落とし込める技術を持った人が「Webデザイナー」だったけれど、今はプログラミング畑出身でWeb業界に入ってくる人が沢山います。
日本だけでなく海外にも目を向けると、「Web Designer」という肩書きの人と言えば、まさに国内で言う所のフロントエンドエンジニアの領域プラス、デザイン部分まで全部出来る人!という感じです。それだけに年収も日本のWebデザイナーと比べると圧倒的に高いです。なんて羨ましい。
こうなってくると、html/CSS「だけ」できる状態のコーダーであることって、非常に肩身が狭いですよね。
html/CSSを書くだけでがっつりプログラミングの出来ないマークアップエンジニア/コーダーは、中途半端な存在なのでしょうか?

話は変わりますが、先週土曜日(2018年9月8日)に福岡市中央区天神のクリエイティブセンター福岡8階で開催された、福岡でWeb制作に携わる人たちの集まり「サト研(仮)vol.73 10周年記念の会」に参加してきた際、私が座ったグループの中で、マークアップエンジニアの立ち位置に関して少しだけ話し合える機会がありました。
同席の方々はこのような感じです。

  • Aさん:サト研運営の方。福岡市内の通販サービスを取り扱う企業にてR&Dグループに所属。
  • Bさん:情報設計・HTML/CSSマークアップなどを行う会社をひとりで経営する代表取締役/ウェブ・ディベロッパー。
  • Cさん:Web企画・制作・デザインをご夫婦で行う制作会社のデザイン部門担当。
  • Dさん:コンピュータシステムの開発・保守/キャリア教育コーディネーター。プログラミング歴は小4から。

私はサト研は2度目の参加だったのですが、皆さんずっと以前からサト研に関わっていらっしゃる方々で、 サト研が始まった10年前の福岡のWeb業界の雰囲気の話から業務に関するマニアックな内容まで様々な話を交わすができ、私も自分自身の考えていることをアウトプットできて終始楽しい時間を過ごしました。(楽しすぎて終了後の懇親会も最後まで残ってしまいました。参加者は温かい方ばかりで和気あいあいと語れます。サト研、オススメです。)

議題のひとつとしてBさんの質問内容である「どうやったらビジネスパートナーと出会えるか」ということがテーマになったのですが、Aさんの社内では「マークアップが出来る人は少ない」という話に。
意外に思えましたが、フロントエンドエンジニアとしてプログラムをする人・デザインをする人といった形で分業される中、ちょうどその中間地点にいるようなhtml/CSSのコーディングが出来る人が不足しているのだとか。確かに、WebサービスやモバイルアプリでVue.jsなどを駆使して動きをつける技術と、html/CSSのマークアップをする技術とは全く別物ですよね。Dさんについては元々プログラマーであるものの、html/CSSの知識はなかったのでサト研に通うようになって知識を身につけたということを仰っていました。

WordPressや静的htmlで構築する普通のWebサイトには、現時点ではReactやVue.jsを使ってコードを書くことはほぼ不要です。jQueryがオワコンなんて言われているものの、10ページ前後のコーポレートサイトならjQueryで十分です。むしろ、こういった小規模なサイトにVue.jsを採用してしまうと、後からメンテナンスできるエンジニアが他にいないという悲劇も起こり得ます。
それよりも、マークアップをする側に求められるのは、「随所でhtml5の適切な要素を用いる」ことだったり、「SEOに強い」ということだったり、「アクセシビリティに配慮している」ということだったりします。また、後から作業に入る人でもわかりやすい「メンテナブルなCSS設計ができる」ことも含まれます。
こうなってくると、実はマークアップエンジニアの考えなければいけない仕事の範囲は結構幅広く、専門性の高いものであると言えるのではないでしょうか?

実際、既に出来上がっているWebサービスなどのSEOなどで改修に入る業務を行うことがあるのですが、構築されたコードを見てみると、最先端の技術を利用してよくできたサイトであるにも関わらず、SEOやアクセシビリティへの配慮が全くされていない残念な状態のものが割と多く見受けられます。また、そのページがひとつのドキュメントであるという観点が抜けており、html5に於ける要素の適切な使われ方が出来ておらず、ただデザインの見た目を再現させただけのコードになっていることもよくあります。
こういった時こそ、コーディングのあらゆる面でしっかりとした知識を持ち合わせたマークアップエンジニアの出番ですよね・・・!

Webサイトは何のために存在するかといえば、「そのサービスを世に知らしめて何らかの成果を上げる」という目的達成のためであるはずです。そこにはターゲットユーザーが使いやすく成約に結びつきやすい設計も必要になるし、マーケティングも絡んできます。検索順位でなるべく上のほうに表示させ、クリックされやすいようにする工夫が要ります。サイトを訪れた人の目が見えにくかったりネットワーク環境が悪い状態だったりしても、ユーザーが情報を得やすいようにする配慮があると喜ばれます。さらに裏側では、サイトを運用するに当たってメンテナンスしやすいすっきりとしたコードを書くことが求められます。
単にコードを書いてデザインを反映させるだけでなく、コードを書きながらマーケティングや顧客満足度を上げることまで考えられるのがマークアップエンジニアです。AIの技術は確かにどんどん発展していますが、人間の手によってしか実現できないきめ細やかな配慮の部分を担うことができるのも私たちの仕事です。
ここまで突き詰めることが出来れば、マークアップエンジニアは中途半端なものではなく、立派な専門職と呼んでも良いですよね。サイトの中で今まで以上の成果が少しでも出せるよう、これからもマークアップの腕をもっともっと磨いていこうと考えている今日この頃です。