
- Webサイト制作におけるコーディング業務を半自動化
- 複数のモデルを組み合わせた「デザインを理解するAI」
- データを活用することで人の働き方を変えられる
- 単純作業を減らし、エンジニアの成長機会を創出
約20年前から全く変わっていないWebサイト開発の属人的な工程をアップデートすることで、現場の働き方を変える──。Tsunagu.AI (ツナグドットエーアイ)では「2025年にフロントエンド開発をすべて自動化する」という野心的な目標を掲げ、AIを活用したプロダクトの開発に取り組んでいる。
現在同社が展開する「FRONT-END.AI(フロントエンドエーアイ)」は、Webエンジニアを支援するローコードサービスだ。
ローコードサービスとは、最小限のコーディングで素早くソフトウェアを開発するための環境を備えたサービスのこと。通常Webサイトやランディングページなどを制作するには、デザイナーが作成したデザインをエンジニアが理解し、コードに落とし込む作業が必要になる。それに対してFRONT-END.AIでは“デザインを理解するAI”がデザインを分析し、自動でコーディング作業を行う。
FRONT-END.AIという名前のとおり、フロントエンド開発におけるコーディング作業をAIが代わりに担当することで、エンジニアの作業時間を大幅に短縮して、他の業務により多くの時間を使えるように後押しするわけだ。
Tsunagu.AIでは2019年4月より同サービスのクローズドベータ版を一部の企業に提供しながら、機能面の改善を続けてきた。現在はWeb制作会社や広告代理店など約30社が有料でサービスを導入している状況。今後はさらなる機能拡充を見込んでいる。
そのための軍資金として、Tsunagu.AIは12月3日にANOBAKA(旧:KVP)などを引受先としたJ-KISS型新株予約権方式により総額1億円を調達した。今回Tsunagu.AIに出資した投資家陣は以下の通り。なお同社は以前にもDNX Ventures、NOW、ディップなどから資金調達を実施している。
・ANOBAKA
・East Ventures
・DNX Ventures(既存投資家)
・NOW(既存投資家)
・日本スタートアップ支援協会とフューチャーベンチャーキャピタルが運営する日本スタートアップ支援1号ファンド
・個人投資家
Webサイト制作におけるコーディング業務を半自動化
上述した通り、FRONT-END.AIはWebサイト制作におけるコーディング業務を半自動化するプロダクトだ。
使い方はシンプルで、ページ全体のデザインカンプ(JPEGファイル)とアセットファイル(Webサイトに表示される素材)をサービス上にアップロードするだけ。するとFRONT-END.AIに搭載された複数の機械学習モデルを用いたAIが、“人の目で見たかのように”HTMLの構造やデザイン要素を分析する。
具体的にはデザインカンプの中で各素材がどのように配置されているのか。どれが見出しでどれがボタンかといったように、今まではエンジニアが人力で確かめていたものを機械化するイメージだ。

分析結果はだいたい30秒〜1分で終了し、上の画像のような形式で左右に分けて表示される。左側がアップロードしたJPEGファイルのデザインカンプ、右側がそれを分析した上で抽出されるコードの候補だ。
表示されたコードは必要に応じて画面上で修正することができる。階層を整えたり、タグの中身を変えたりしながら内容が固まれば準備は完了。コーディングボタンを押せば数秒でコードが生成されるので、後はダウンロードしてエンジニア自身のエディター上で作業を進めていく。


複数のモデルを組み合わせた「デザインを理解するAI」
Tsunagu.AIで代表取締役兼CEOを務める森隆晃氏によると、従来はエンジニアが担っていた「デザインを理解する」作業をAI化したのがこのプロダクトの大きなポイントだ。
その前工程であるデザインを作成する業務に関してはPhotoshopやSketchのような便利なツールが生まれ、同様に後工程となるコーディング業務についても使いやすいフレームワークなどが誕生し続けている。ただデザインを理解する工程だけは「10年〜20年の間全くアップデートされておらず、今でも多くの時間がかかる」のが現場のネックにもなっているという。
Tsunagu.AIが目指したのは「複数のモデルを組み合わせた『デザインを理解するAI』」を開発することで、この工程を大幅にアップデートすることだ。

特徴は画像認識精度とテキスト情報の認識精度の高さ。たとえばある背景の上に他の画像が表示されているような場合、人間が見ればすぐにわかるものでも、機械的に正しく判別するのが難しかったそう。かといって(背景と他の画像を判定する処理の)閾値を下げるようなことをすれば、今度は誤検出が発生してしまい現場では使えなくなってしまう。
Tsunagu.AIでは画像の特徴を掴む技術を自社で開発することで、背景とその上にある画像をきちんと判別し、業務内でストレスなく使えるレベルのプロダクトを実現。テキストの判別に関しても手書き文字を認識するために開発されたAI(AI-OCRエンジン)を、デジタル文字を判別することに特化したAIとして再学習させることで精度を高めてきた。
「たとえば先日2万ピクセルの非常に長いランディングページをコーディングしたのですが、通常の方法だとHTMLを作るだけでも2〜3時間かかってしまっていました。それがFRONT-END.AIを活用すれば(微修正も含めて)20〜30分ほどに短縮されるようになります」(森氏)
データを活用することで人の働き方を変えられる

森氏は新卒で入社したメンバーズで新規事業やウェブサービスの構築・運用支援などを経験。独立後はグッドパッチにジョインしてUXデザイン支援業務などにも携わった。
起業自体は学生時代の頃から考えていたそうだが、FRONT-END.AIのアイデアに関してはメンバーズ時代の原体験が大きく影響しているという。
「新規事業としてリスティング広告を自動で最適化するツールの開発・運営に携わる機会がありました。今ではアドテクノロジーが進歩して自動化やデータ活用も進んでいますが、当時は現場の担当者が夜遅くまで手作業でやっていた業務も多かったんです。でも最適化ツールが完成すると、実際にメンバーが早く帰れるようになった。その様子を見ていて『データを活用することで人の働き方を変えられる』と強く感じました」(森氏)
それから数年後にはディープラーニングが話題になり始め、森氏はこの技術で世界が変わるなと考えるようになった。それが過去の実体験やウェブ制作の現場における課題などとも結びつき、FRONT-END.AIのアイデアに行き着いたのだという。
実際にプロダクト開発を進め、プロトタイプが完成したタイミングでクローズドベータ版の利用企業を募ったところ最終的には1100名(企業と個人を含む)から申し込みがあった。
まずはその中の一部の企業に実際に使ってもらいながら検証やプロダクトの改善を継続。中でも相性が良かったWeb制作会社や広告代理店を初期のターゲットに定め、現在はアカウント数に応じた月額制のサービスとして約30社に有償で提供している。
「いろいろな技術が発展しているにも関わらず、人がデザインを理解して構造化していく作業は何も変わっていないという課題感は各社に共通するものです。特に現場でキーワードになるのは『(単純作業の)工数をいかに減らしていくか』。新しい技術が生まれ、やること自体は増えているのに単価は依然とあまり変わらない。増えた業務は残業でカバーするか、とにかく納期厳守でエンジニアにとって不完全燃焼な形であったとしても区切りをいれるかしかありません。そういった状況が続けば現場が疲弊するだけでなく、離職や満足度の低下にもつながってしまいます」(森氏)
単純作業を減らし、エンジニアの成長機会を創出
各社で違いはあれど、FRONT-END.AIの導入企業はだいたい開発工数を5割ほど削減することに成功している企業が多いそう。開発にかかる時間が半分に短縮されれば、現場のエンジニアは残りの時間をより“クリエイティブなコーディング作業”に費やすことも、自身の技術力を高めるために投資をすることもできる。
現場のコスト削減や工数削減はわかりやすいメリットだが、森氏としてはエンジニアのキャリアアップを支援したいという気持ちも強い。
「これまで若手のエンジニアをたくさん採用して、さまざまな案件にアサインしてきました。たとえば3年経ったタイミングでエンジニアとしての成長度を見ると、やはり人それぞれで大きく異なります。1つの要因として自己研鑽の時間をあまり取れなかった人は、どうしても技術を磨けていないことが多かった。エンジニアの負担になっている単純作業を減らすことで、彼らや彼女らが時間の使い方を変えられるようにサポートできればと考えています」(森氏)
今回調達した資金は主に機械学習エンジニアやカスタマーサクセス担当者など組織体制の強化に用いる計画。さらなる機能拡充を進めるほか、コアとなるデザインの分析技術を磨き、ゆくゆくはCMSへの対応などにも取り組む予定だ。
「近年はテンプレートなどを活用しながらWeb開発のハードルを下げるノーコードツールも登場してきています。これはもちろん素晴らしい技術ですが、大手企業のブランドサイトなどを中心にデザイナーが作ったオリジナルデザインをコード化するような技術はまだなく、ほとんどが手作業によって成り立っているのが現状です。FRONT-END.AIでもまずはその作業をローコードサービスとしてしっかり支援しつつ、中長期的にはノーコードツールがより広がっていくと思うので、その際に上手く繋ぎこめるようにサポートできる仕組みも検討していく方針です」(森氏)