Noriyasu_Katano's blog

脳科学や量子力学、政治や戦争に関して、日々の感じた雑感を書いていきます。

スクリーンショットからHTMLへ、もうフロントエンドはいらなくなるのか!?

HTML Tag

久しぶりに衝撃的なニュースが入ってきた。「web制作の自動化が進む! 画像から自動コーディングする深層学習プログラムが公開」。10年以上もWebの製作現場にいる者として、タイトルだけ読むと夢のような記事だ。

この記事の元になっているのは、FloydHubと言うサービスの開発にブログに挙げられていたようだ。FloydHubは、Deeplearningを使うためのクラウドサービスで誰でもアカウントを無料で作成できる。

 Webデザイナーとしては夢のような話

https://blog.floydhub.com/generate_html_markup-b6ceec69a7c9cfd447d188648049f2a4.gif

先ほどの記事を読んでいただければおおよそ内容は理解していただけると思うが、ロジックを抜きにすると、画像データを読み込ませると勝手にHTMLコードを吐き出してくれると言うもの。

多分、Webデザインに携わっている人だとこのすごさがよく理解できると思う。一言でWebデザインと言っても非常にめんどくさい。何が面倒かと言うと、デザインを作ってもそれをHTMLに変換しなくてはいけない。これが信じられないほど大変な作業である。視覚的な情報をHMTLとCSSを駆使してコンピューターが読める形式にしなくてはいけない。つまり、いくらカッコいいデザインを作っても、さらにそれを手を入れて作り直しているような物だ。

この事が長年に渡りWebサイト制作の課題になっていたと思う。安く済ませようと思っても、実際はそのデザインに2度手間が発生している。クライアントサイドも確認させられたデザインを再度確認する必要があった。

今回のこの記事はまさにそんな状況を大きく改善する大きな一歩だと感じている。

画像データがコード化される

Webサイト制作というのは、捉え方によっては面白い分野だと思っている。見た目とプログラミング的な要素が重なっている領域だからだ。ポスターなどを作るグラフィックデザインとは大きく異なり、HTMLを使って最終的にマークアップする必要がある。ある意味人間的な感覚の部分とシステム的な部分の両極端が混在しているデザインだと言える。

そして、今回のこのプログラムも最先端な人工知能の技術を使って、その両極端が入り混じった内容になっている。

FoyldHubのブログを読むと、Deeplearningにいくつものwebサイトのスクリーンショット(画像)とそのHTMLコードを勉強させて、画像とマークアップの対比させながら覚えさせたようだ。その回数を重ねていき、画像とマークアップの法則が導き出されることになる。

今後この技術が発展すると、グラフィックツールからHTMLの書き出しが夢ではなくなるだろう。

プロトタイプツールとの融合

今回の発想の面白いのはスクリーンショットからHTMLを生み出している点だと思う。以前自分もCSVのファイルリストからHTMLを吐き出すと言うしょうもないジェネレーターを作った事があるが、今までの考えだと既存のツールなどを利用してそれを返還させる事が発想の原点になっていたような気がする。

しかし、今回のものは全く違っており画像そのものからパターンを読み取り、そのパターンと実際のコードを比較するところに自動化の大きな可能性があるんだと思う。

さらにこれがAdobeのXDなどと組み合わされると、その可能性は大きく変わってくると思う。リンクなどの設定がすでに付いており、残りのマークアップに必要な要素は人工知能によって補う事が可能になる。

エンジニアの行末と、原点回帰

この記事を読んで早速FoyldHubを触ってみたが全くわけがわからなかった。設定するのにも一苦労だった。多分、実用化までは多少時間がありそうだが、先ほどXDと組み合わさり、デザイナーだけでHTML制作が完結する事も時間の問題だろう。

そうなった場合は、フロントエンドエンジアはどうなるのか。多分、これからは単純なフロントエンドだけでは職を失うことになるだろう。今回のプログラミングも学習されたHTMLにのっとって作成されている。ある意味チューニングが必ず必要になってくる。それは制作会社ごとなのかデザイナーごとなのか。人工知能の設定からチューニングがメインの仕事になってもおかしくないかもしれない。

そして、大きく問題になるのはデザイナーの仕事だ。

ページ数が少ないサイトなどであればデザインを1ページづつ作ればよいが、100ページを超えたサイトでも今後は全てのページがデザインされていなくてはいけなくなってくる。今までは、実装でシステム的に作れたものが、そうもいけなくなってくるのかもしれない。まさに原点回帰して、雑誌や本を作るのと同じようや作業が待っている。

今までWebデザイナーがやってこなかったデザインなのかもしれない。

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本