Figmaでデザインしたカンプデザインを即座にWebサイト化できるノーコードツールがあると聞いて
Quest AIの機能。Figma to HTMLとの違い
Figmaのプラグインに"Figma to HTML"はあるが…？
Figma to HTML, CSS, React & more! – Figma>](https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML%2C-CSS%2C-React-%26-more!))
Quest AIは下記の機能をもつ。
- レスポンシブ設定を自動的に設定できる
- アニメーションの設定が可能
- Google MapなどのiFrame埋め込みが可能
- 動画の埋め込みが可能
- 下記方式から選択可能
- 動画ファイルを直接アップロード(Quest AIサーバーにアップされる）
- またはYouTubeリンクの埋め込み
- 独自ドメインと接続が可能
- = Quest AIがホスティングサービスも兼ねている
- アクセス解析がQuest AIに内蔵されている
- バージョン管理機能あり
説明動画:
スライドショーを実装できたり、問い合わせフォームなども実装可能のようです。
基本的にはFigmaと接続するNo-Codeツールですが、Adobe XDのデザインデータをQuest AIで利用できるXD用プラグインもあるとのこと。
Quest AIによって制作されたwebページのデモ事例
架空のプロダクト紹介ページ。デモページなのでリンク先すべて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すれば反映されるため、デザイン面での修正も非常に容易だと思われます。