FRONT-END.AIはHTMLデザインのカンプ、およびその中にある画像ファイルをアップロードすることで、HTMLとCSSファイルを生成します。つまりフロントエンドエンジニアの方々が、デザイナーの方からデザインファイルを受け取り、HTMLコーディングに落とし込んでいく作業を効率化させるサービスになります。
この記事では、FRONT-END.AIをどうした思いから開発し始めたのか、そしてエンジニアの方々をどうサポートしていきたいのかを紹介します。
1. Web制作のカイゼンは限界にきている
Web制作におけるHTML、CSSコーディング作業が占める割合は決して小さくありません。しかしデザインが上がってきてから、HTML/CSSファイルに落とし込むまでの時間はなるべく短くしたいと考えられがちです。デザインを理解し、ベストなHTML構造に落とし込んでいく作業はとても大変であるにも関わらずです。
HTMLコーディングの生産力向上として、社内プロセス標準化やオフショア、ニアショアなどが行われてきました。一定の品質を担保するために社内プロセスを標準化し、フレームワークなどを導入されている企業は多いのですが、それでもまだまだ属人的であるという話を聞きます。別な担当者が書いたHTMLファイルを渡されて、いきなり編集するのは大変でしょう。
オフショアやニアショアも行われていますが、昨今では単価が上昇しています。その結果、中国からフィリピン、ミャンマー、タイ、ベトナムなど各国へ拠点が動いています。しかし、拠点が動けばチームの作り直しになり、知見の共有や教育を再度行わなければなりません。
FRONT-END.AIにはそうした「カイゼンは限界にきている」という思いがあります。HTMLコーディングを省力化することで、カイゼンのレベルを一段階引き上げ、皆さんの生産性を大幅に引き上げたいと考えています。
2. エンジニアが足りない
ソフトウェアが世界を飲み込むと言われて久しいですが、実際エンジニアが圧倒的に不足しています。どの企業でもエンジニアの採用に力を入れていたり、その生産性向上が課題になっています。
HTMLやCSSコーディングを行うのもエンジニアとしての大事な役割ではあるのですが、よりクリエイティブな作業に取り組んで欲しいと考えるマネージャや経営層は多いはずです。実際、マークアップ作業は外注やオフショアでお願いしているところも多いでしょう。
デザインからHTML、CSSファイルに展開する作業は、ある程度慣れとルーティン化しやすい作業ではあります。課題になるのはコーディングした後のアニメーションであったり、JavaScriptによるインタラクティブな機能の追加にあるのではないでしょうか。
FRONT-END.AIは、そうしたルーティン化しやすい作業を任せることができます。そうしてできあがったHTML、CSSファイルをベースに、よりクリエイティブな作業に集中できるようになります。
3. スキルアップを促す
フロントエンドの技術は毎年のようにトレンドが変化しています。Virtual DOMのようなものもあれば、ヘッドレスCMSやCSS3アニメーションなど技術要素も広がっています。コーディング作業に時間がとられてしまうと、そうした新しい技術のキャッチアップが後回しになってしまい、結果的にエンジニアとしてのスキルアップに充てる時間が少なくなってしまいます。
もちろん最初の頃であればHTML/CSSコーディングの中で得られる知見も数多くあります。しかし、案件をこなしていく中で、徐々に新規性を失ってしまう傾向にあるようです。エンジニアとしては新しい技術のキャッチアップと試用、そこから得られる知見をプロジェクトに活かしていくことでスキルアップしていくことが求められるでしょう。
FRONT-END.AIを利用されている企業では、コーディング作業の自動化によって、学習やスキルアップする時間を確保できたという意見をいただくことがあります。サーバサイドやデータベースなど、これまでとは異なる領域の技術を学べば、幅広いエンジニアスキルを得られるようになるでしょう。
4. ノーコードと異なる立ち位置
FRONT-END.AIはローコーディングサービスです。ノーコードは字のごとく、コードを一切書かないサービスになります。つまり画像をアップロードすれば、それが自動的に解析されてHTMLとCSSファイルを出力して完了します。この出力された内容が完璧で、誰にとっても使いやすいならば良いのですが、実際にはそんなことはありません。
例えば社内標準に合わせたHTML構造（リストやdivの規定）や画像へのクラス命名規定など、企業によってルールが異なるのはよくあることです。ノーコードサービスの場合、それらをダウンロードするたびに修正しなければなりません。これは意外と手間のかかる作業で、せっかくコーディングを自動化しても修正の工数が大きくなります。
FRONT-END.AIでは解析結果に対して、エンジニアの方がWebベースのエディタを使って構造の修正を行えます。ここで各社のルールに合わせた変更を行ってもらうことで、出力されたHTML/CSSファイルがそのまま運用フローで使えるものになります。
ノーコードでできると言われると聞こえは良いのですが、実際の社内ルールによっては通用しないものになってしまいます。FRONT-END.AIは現実の業務に最適化された形でサービスを提供します。
5. 自由度の高さを重視
画像編集ソフトウェアやデザインツールで、HTMLエクスポート機能を備えたものがあります。画像編集ソフトウェアで作ったデザインがそのまま出力できれば良いのですが、実際にはそんなことはありません。実際、使われているケースは多くないのではないでしょうか。
問題点は次の通りです。
ルールが厳しい
そうしたツールでデザインを行う場合、出力結果を考えた上でデザインを行う必要があります。例えばグルーピングしたい場合にはフォルダを作ったり、レイヤーの名前をidと同じものにしたりといった具合です。デザイナーの方が自由に考えて、その創造性のままにデザインできなくなります。
出力結果が分かりづらい
コンピュータが生成するHTMLコードは余計なクラスやdivタグの入れ子などが発生し、とても人が手を入れたいと思えるものにはなっていません。構造を理解するのも難解ですし、命名規則なども分からないでしょう。
FRONT-END.AIではそうした問題を考慮し、JPEG画像を解析するという方式をとっています。つまりデザイナーの方はJPEG画像さえ用意すればよく、元のレイヤー構造などは気にする必要がありません。デザイン上の制約もなく、自由にデザインできます。
また、FRONT-END.AIは人が書いたかのような、すっきりとしたデザインのHTMLを生成します。生成後に手を加えるのも難しくはないでしょう。これもまた、実運用を考慮したサービスである所以です。
まとめ
FRONT-END.AIではフロントエンド開発に関わるエンジニアの生産性を向上させ、よりクリエイティブな作業に集中できる環境を実現したいと考えています。ルーティンに感じてしまっていたり、属人的になりがちなHTML/CSSコーディングを省力化できれば、Web制作作業は大幅に改善できるでしょう。
