デザインからコード作成までのプロセスを短縮し、効率を飛躍的に向上させるツールとして話題を集めているのが、2024年9月から提供が始まったAI搭載のサービス「Superflex」です。プログラマーやデザイナーにとって、時間と労力を大幅に節約できるこのツールについて今回はご紹介します。

Superflexとは

「Superflex」は、WebサービスやWebサイトなどでユーザーが操作する画面を開発するフロントエンドのコード生成をイメージ画像から行うAIサービスで、Microsoft社が提供する無料のコードエディター「Visual Studio Code（VSCode）」の拡張機能として使用することができます。「Superflex」は手描きのデザインやラフスケッチを認識し、それをコードに変換するAIツールとなっており、スケッチを描くだけで実際に動作するWebページを作成できるのが特徴です。

引用：Superflex公式サイト

「Superflex」では、LLM（大規模言語モデル）が画像を認識し、レイアウトを分析して把握することで対応するHTML、CSSなどのコードを自動生成します。

▼英語ですが、動画でも紹介されています。（Superflex公式サイトより）

Superflexの主な機能

手書きのラフスケッチを高い精度で認識し、レイアウトやデザイン要素を理解します。手書きのスケッチの他、デザインツール「Figma」で作成されたデザインや、既存のWebサイトのスクリーンショット、簡単なテキストプロンプトからもコード生成が可能になっています。
生成されたコードをベースに、エンジニア自身がさらに細かい調整を加えることができます。例えば、色やフォントサイズ、ボタンの配置など、細かなカスタマイズが可能です。
コードの生成ではユーザーがこれまで書いたコードなどを分析してユーザーのコーディングスタイルに適応したものが生成されます。さらに、既存のコンポーネントを活用することで既存のコードベースやデザインシステムとシームレスに統合させることが可能です。

Superflexのプランと料金

「Superflex」はサブスクリプション契約で、以下の3つのプランがあります。

「Free」
無料で使えるプランですが、コード生成の回数に制限があり１ヶ月につき200回までとなります。

「pro」
月額19ドルのプランです。コード生成は無制限で使え、メールによるサポートもあります。

「Business」
企業やチームで使用することを想定されたプランで、1ユーザーあたり月額49ドル（企業やチームごとに一括徴収）。管理者用の画面が用意されており、プライバシー制御など企業やチームで安全に使えるように考慮されています。

最後に

今回ご紹介した「Superflex」は、デザイナーが描いたラフスケッチをAIが解析し、Webページのコードを自動生成してくれる画期的なツールです。開発にかかる作業時間を大幅に削減できるほか、アイデアの実現を加速させることで、チームでの共同作業やプロジェクトの効率化にも大きく寄与するツールとして、開発現場に新たな可能性をもたらしています。スタートアップから大企業まで、幅広い企業で活用が期待されており、今後ますます進化していくと考えられています。

筆者Y.S