Figmaから瞬時にWebサイトを立ち上げられるNo-Codeツール"Quest AI"

image

Figmaでデザインしたカンプデザインを即座にWebサイト化できるノーコードツールがあると聞いて

Quest AIの機能。Figma to HTMLとの違い

Figmaのプラグインに"Figma to HTML"はあるが…?

Quest AIは下記の機能をもつ。

  • レスポンシブ設定を自動的に設定できる
  • アニメーションの設定が可能
  • Google MapなどのiFrame埋め込みが可能
  • 動画の埋め込みが可能
    • 下記方式から選択可能
      • 動画ファイルを直接アップロード(Quest AIサーバーにアップされる)
      • またはYouTubeリンクの埋め込み

      説明動画:

  • 独自ドメインと接続が可能
    • = Quest AIがホスティングサービスも兼ねている
  • アクセス解析がQuest AIに内蔵されている
  • バージョン管理機能あり

スライドショーを実装できたり、問い合わせフォームなども実装可能のようです。

基本的にはFigmaと接続するNo-Codeツールですが、Adobe XDのデザインデータをQuest AIで利用できるXD用プラグインもあるとのこと。

Quest AIによって制作されたwebページのデモ事例

image

架空のプロダクト紹介ページ。デモページなのでリンク先すべてQuest AIに設定されています。

Quest AIの2分間デモ動画

Quest AIの2分間デモ動画

ノーコードツール"STUDIO"のエディタに近い画面で、レスポンシブ設定ができるよう。

Quest AI公式サイトの"Play with a Sample Page"から実際にエディタを触って試すことが可能です。

Quest AIの使いどころ

STUDIOやWebflowはカンプデザインを見ながら実装する工程が必要だが、Quest AIはFigmaのデザインカンプをそのまま公開用データとしてHTML出力してくれる

ただしCMS機能はない。ブログ投稿等を行いたい場合には不向き。

CMS機能が不要なLPやWebサイトなら、もうこのQuestで良いかも?

特にA/Bテストを行いたいようなランディングページの運用には適していそう

Figmaで変更し再度Publishすれば反映されるため、デザイン面での修正も非常に容易だと思われます。