Webが広く使われるようになって30年近くが経とうとしています。かつてはグレーの背景で、テーブルやframeを使って構築したWebサイトが多かったですが、今はその頃とは比べものにならないくらい、リッチで高度なデザインに溢れています。
HTMLはその頃から徐々に仕様をバージョンアップしながら進化してきましたが、当時からすでにHTMLを手打ちするのか、専用ツールを使うのかという問題が存在していたように思い起こされます。
今回はそうしたHTMLコード自動生成に関する歴史と、その課題、そしてFRONT-END.AIが何を目指しているのかを紹介します。
オーサリングツールの台頭
HTMLのオーサリングツールと聞いて、よく思い出されるのはマクロメディア（現Adobe）のDreamweaverではないでしょうか。多彩なコンポーネントと、プロパティの配置によって、HTMLタグを知らなくともWebページが作成できました。インデントなどが自動で行われるので、ある程度見やすいHTMLが生成できていたように思います。
同様にホームページビルダーやAdobe GoLiveといったソフトウェアもありました。いずれもビジュアル的にWebページを作成し、HTMLコードが出力されるタイプのソフトウェアですが、CSS3やJavaScriptの高度化に伴って、使いづらい場面が増えてしまった印象があります。
とはいえ、今なおDreamweaverを利用されている方々はたくさんおり、オーサリングツールとして重要な地位を占めています。デザイナーの方にとって使いやすい表示、機能はFRONT-END.AIとしても、大いに参考になるところがあります。
HTMLエクスポート機能
Webが広まるのに合わせて、多くのソフトウェアにHTMLエクスポート機能が追加されました。しかし、ほとんどが使いづらいものです。例えばMicrosoft WordにもHTMLエクスポート機能がありますが、利用しているエンジニアやデザイナーの方がいるでしょうか。
自動生成ツールの多くは、とても複雑なHTMLを出力します。自動化されているために、不要なタグが多くなります。また、元のドキュメントを再現しようとするあまり、配置を厳密に指定します。その結果、人が手を加えようとするものなら、すべてがバラバラになってしまうような、繊細なHTMLができあがるのです。
一度きりで、出力した後に絶対に編集しないならば、利用しても良いでしょう。しかし開発フローの中には決して相容れない存在となっています。
プラグインによるHTMLコード生成
各種グラフィックスツールのプラグインとしてインストールし、HTMLコードが生成できるツールもあります。例えばExport Kitがあります。FigmaやXD、Photoshopなどのプラグインとして提供されます。
こうしたプラグインの場合、まず対応しているソフトウェアを持っている必要があります。Photoshopをメインに利用しているデザイナーの方がFigmaにしか対応していないエクスポートプラグインを使いたいと思っても、利用できません。FRONT-END.AIでは、こうした対象ユーザの絞り込みは避けたいと考えています。
また、この手のプラグインでは、HTML構造のあり方をデザイナーの方がある程度理解している必要があります。HTMLとデザインのレイヤー構造は異なる考え方なので、エクスポートされた結果を意識しながらデザインを行うのは難しいですし、創造性の幅を狭めてしまう可能性があります。さらにレスポンシブ対応などのために、レイヤー名やフォルダ名に特殊なコードを書かないといけないなど、多数の独自ルールも存在します。
- Illustrator: #いきなりHTML 2
- Photoshop: knockknock-jp/psdexporter-jsx
- Sketch: Launchpad for Sketch - Sketch to HTML
- Sketch/XD/FigmaAnima: anima
Wiki、そしてMarkdown
Webが広まるのに伴って、多くの人たちがコンテンツを更新したり、ページ内容を作る必要が出てきました。その際、HTML構文を覚えるのは非効率的で、HTML代替となる（Alt HTML）なマークアップ言語が望まれるようになりました。その最たるものとしてはWiki記法ではないでしょうか。若干特殊ではありますが、HTMLよりは覚えやすく、読みやすいマークアップ言語になります。
開発者であればMarkdownがよく知られているでしょう。可読性と機能性を備えたマークアップ言語で、今やデファクトとも言えます。MarkdownからHTMLに変換するツールは数多く存在し、ヘルプなどのドキュメントのテンプレートとしてもよく使われます。
同様にHTMLの大体言語として、PugやEjs、Handlebars、Mustacheなどのテンプレートも存在します。これらはHTMLを簡略化して書くことができる一方、オーサリングツールとの相性は良くありません。多くの場合、プログラミングエディタを使って手打ちすることになるでしょう。
Webサービスの登場
2015年頃にAUTOCODINGというサービスが登場しました。こちらはPSDファイルを読み込んでHTMLファイルを生成するというサービスです。プラグインの場合と同じく、レイヤー構造やレイヤー名に規則性も持たせることで、HTML構造を実現するタイプのものだったようです。残念ながら現在はサービスを停止しています。
Adobe社ではCreative Cloud Extractというサービスを提供していました。こちらはHTMLではありませんが、クラウド上で画像の切り出しを手軽に行ったり、簡単なCSSも生成してくれるサービスです。こちらも現在はサービスを停止しています（DreamweaverのExtra機能に取り込まれたようです）。
この他、類似のサービスはいくつか存在します。
そしてAIによる自動化へ
Webサービスがいくつも登場して消えていく中、大きな技術革新が起こっています。それはAI、機械学習の台頭です。AIを用いることで、これまでにないほど精度が高いHTMLコード生成が実現できるようになっています。これまではカンプの中にある画像を見つけるのが困難だったため、あらかじめレイヤーを分けるような工夫が必要でしたが、そういった手間はAIが自動的に認識できるようになっています。
FRONT-END.AIの目指す世界
私たちの提供するFRONT-END.AIも、このAI/機械学習を用いたHTML/CSS生成カテゴリに属するサービスになります。彼らのサービスとの違いは、ノーコードではなくローコードであるという点です。自動で生成されるHTMLは生成して終わりではなく、IDやクラス付け、自社規定に合わせた構造の調整が必ず必要です。そうした調整をFRONT-END.AI上で素早く、効率的にできるようにしています。
また、特定のファイルフォーマットではなく、JPEG画像を利用するのもFRONT-END.AIの特徴です。汎用的な画像フォーマットを利用することで、どのようなデザインツールを使っているデザイナーであっても、FRONT-END.AIを利用できます。レイヤー構造や名前の付け方に制限はありません。想像の翼を締め付けるようなことなく、さらに変換する工数を省くことで、デザインに費やす時間を増やせることでしょう。
FRONT-END.AIの生成するHTMLはなるべくシンプルに、人が書いたかのような構造を目指しています。これはHTMLを生成して終わりではなく、プログラマーに組み込んでもらったり、JavaScriptやCSS3によるアニメーション組み込みを想定してのことです。特別なツールではなく、皆さんのワークフローに溶け込める、そんなサービスを目指しています。
FRONT-END.AIはこれまでのHTML自動生成の歴史から学び、よりエンジニアにとって使いやすいサービスを目指しています。FRONT-END.AIに興味がありましたら、ぜひお問い合わせください。
