企画記事 2022.12.01

【そのとき投資】面倒なWeb/アプリフロントエンド開発を自動化、Function12

韓国ちょい事情通の記者資金調達アプリスタートアップ

【そのとき投資】面倒なWeb/アプリフロントエンド開発を自動化、Function12

ソン・ユンモMashUp Angels　首席チーム長

@そのとき投資（私はその時、投資することを決めました）では、現役の投資家がなぜこのスタートアップに投資したのかを共有します。

2022年9月、Adobe（アドビ）のFigma（フィグマ）買収のニュースが話題になった。AdobeはPhotoshopを筆頭に様々なデザイン作業ソリューションを保有している会社でありつつも、新生の会社であるFigmaに勝てずにいた。

Figmaは、Web/アプリサービスを企画、デザインするために必要なすべての主要な機能をコラボレーションに最適化された形で提供し、開発の進行の仕方自体を変えてきた。これまで様々な形で企画書を作る中で、苦労していた企画者、デザイナーたちはFigmaを通じて業務にかかる時間を大幅に節約できるようになった。

しかし、その素晴らしいFigmaも開発者の苦痛までは和らげられなかった。Figmaによって完成させられたデザインの試案をコードで実装する作業は依然として面倒で難しい仕事である。

Web/アプリサービスの開発は、通常、企画会議、デザイン試案、サービス実装の順に行われる。計画会議で、新しいプロジェクトに実装する機能の仕様を決め、それをUI/UXデザイン試案に移します。設計試案は建築物の鳥瞰図のようなものであり、設計図レベルの詳細な構造的情報は含まれていない。

構造的情報のないデザイン試案から、実際の建築のための設計図を構想するのは開発者の役割である。Figmaは企画をデザイン試案に移す作業の効率は改善したが、デザインをコードに変える作業には大きく寄与していない。開発者の立場では伝えられるデザイン試案の形が変わっただけで、設計図を構想しなければならない根本的な開発作業が変わったわけではないためだ。

開発作業のうち、実際のユーザーが見る画面と各種ユーザーの行動を実装する作業をフロントエンド(Front-End)という。絵で描かれたデザイン試案をコードに変える作業はフロントエンド開発者が進める。しかし、開発者にとって、製品開発のプロセスはそれほど簡単なものではない。美的な要素のみで構成されたデザインを実際の設計構造に変える作業には、高次元的な思考が要求される。

コードを編む作業は試行錯誤の連続であり、設計構造を実際のコードとして実装してみて二次、三次修正するのは基本である。頭だけでなく指まで痛い、実に辛い作業だ。しかし、チームは常に時間が足りないとして、迅速な開発を要求し、開発者が企画とデザインの意図を理解するのに十分な時間を与えない。苦労しつつAシナリオの開発を終えるとすぐにA1、A2、A3作業が下される。

Aの実装が終わっているため、出力方式だけを変えたA1、A2、A3は簡単に実装できるのではないかと聞いてくるが、同じコンテンツであっても、見え方を変えるなら、すべてを違う風に実装しなければならない。出力方式が多様なほど、作業量は数倍に増えることになる。

Function12　パク・スンホ代表/Function12提供

デザイン試案を自動的にコードに変換するソリューション

デザイン試案を自動的にコードに変えることができれば、フロントエンド開発者の業務量を大幅に減らすことができる。以前企画書は絵と文で構成されており、自動化の試みが難しかったが、デザインコラボレーションツールの発展が状況を完全に変えた。

Figmaの試案には各デザイン要素に関する詳細情報が含まれており、AIが試案を分析してコード化しやすい。

Figmaを含むデータ基盤のデザインコラボレーションツールの発展は、多様な「デザインtoコードソリューション」市場の誕生へと繋がった。Anima、Teleport HQ、Locofyなどのグローバルサービスが完全自動化を目標に市場をリードしており、すでに数百億ウォン（約数十億円）の投資金を誘致している。

しかし、これらのサービスのうち、製品にすぐに適用できる良質のコードを作ることのできるサービスは1つもない。コードは単にデザイン試案を描くことを超え、企画の意図を込め、構造的に設計しなければならないためだ。

フロントエンド開発作業の難しさは、静的に描かれた試案を実際の動的に動作するコードに移すプロセスにある。内容が変わらない静的なウェブページはどのように描いても動作すればよい。

しかし、レスポンシブウェブやユーザーの便宜に合わせてコンテンツの出力方式を変える機能を実装するには、単に描く作業のみでは足りない。さまざまな状況に適した柔軟な基本構造設計に基づいて、各シナリオに対応できる個々のコードを作成する必要がある。しかし、既存のデザインtoコードのソリューションは、この部分の十分なクオリティを提供できずにいる。

デザインを何とかしてコードとして実装するには１人の開発者がすべて一つずつ修正しなくてはならないいわゆる「つぎはぎコード」が出てくる。デザインから解釈された設計情報は開発者の頭の中にのみ存在し、AIが企画意図まで把握することは難しいからだ。結局開発者の手を経なければならない。

現時点で利用可能な開発者向けの95％自動化ソリューションFunction12

筆者は既存のデザイン to コードソリューションのクオリティに大きく失望していた渦中にFunction12（ファンクショントゥエルブ）を知ることになった。大きな期待なしに技術デモに参加したが、算出されたコードを見てハッとした。

これまでのような古びたつぎはぎコードではなく、すぐに活用できる「本物の使えるコード」が出てきた！さらに驚くべき点は、コードを作成することに留まらず、すぐに修正できるエディタまで用意されているということだった。

Function12は、開発者に焦点を当てた、開発者のためのデザインtoコードのツールだ。完全な自動化ではなく、95%の自動化と5%の開発者作業を目指す。AIは定量的なデータのほか、デザイン試案に盛り込まれたコンテキストと意図まで把握できないという限界を把握し、開発者の領域を意図的に開けて利便性を最大化したサービスだ。

まず基本設計構造を描く単純反復作業をAIが処理してくれる。その後、開発者は強力なエディタ機能を活用し、AIが描いた草案にデザイン試案の意図を柔軟に反映することができる。結局、完璧でない100％自動化よりもはるかに実質的かつ効率的な開発環境を提供する。

Function12はデザイン to コードで最も重要なのは設計であり、AI は開発者を代替するよりも手助けする方向で行かなければならないという実用的な理念のもと開発された。Function12のパク・スンホ代表は、漢陽（ハニャン）大学情報システムの修士卒業以来、10年以上にわたって様々な開発プロジェクトを進め、実際の製品が開発される過程を詳細に観察して悩んできた。

この過程で開発者が経験する困難を深く理解し、これをもとにFunction12を作った。パク・スンホ代表の執念は、Function12をグローバル・テック・コミュニティProduct Hunt（プロダクト・ハント）でデビューしてすぐデイリートップに導いた。

多くのパブリッシング、フロントエンド開発作業に疲れた開発者であれば利用してみることを強くおすすめする。半信半疑の試してみる気持ちがいつのまにか感心と確信に変わっているだろう。フロントエンド開発環境の未来をFunction12がリードしていくのに期待している。