Quest.AIはWebサイト化ツールから「フロント用コード出力ツール」へと変化しました
Quest.AIはかつては「Figmaを自動でWebサイト化する」というノーコードツールだったのですが、現在ではFigmaからReactをはじめとするフロント用コードを自動出力するツールへと変化を遂げています。
2023年6月時点ではFigmaデザインからの「Webサイト生成・フロントコード生成・モバイルアプリ生成」3つそれぞれに有力な自動生成サービスが存在
2023年6月時点においてFigmaから自動でサイト生成・コード生成するサービスとして、Webサイト用ツールとしては”Framer Sites”（および”STUDIO”）、フロント用コード生成ツールとしては”bitfrost”、モバイルアプリ（プロトタイピング）構築ツールとしては”Bravo Studio”がそれぞれ有力です。
※ 2023/08/21追記: 国産のWebサイト制作ノーコードツールである”STUDIO”がFigmaのデザインデータのインポートに対応しました！🎉（ベータ版）
2023/08/21追記: 国産ノーコードWebサイト制作ツール”STUDIO”がFigmaデザインのインポートに対応！🎉
2023/08/21にて、国産ノーコードWebサイト制作ツールの雄である”STUDIO”が、Figmaデザインデータのインポートに対応しました！
Figmaのプラグインとして”Figma to STUDIO”なるものがリリースされました。「FigmaからSTUDIOへの実装作業が非常に無駄な作業に感じる」というユーザーの声を反映したものでしょう。
Figma to STUDIOの使い方について、公式プラグインページで説明されています。
STUDIOは国産ツールなだけあって、ビルトインでの日本語フォントが優秀です。なんとモリサワフォントを追加料金ナシで利用することも可能。
FigmaデザインからWebサイトを自動で実装・公開させたいという場合には、基本的にはSTUDIO一度で良いでしょう。
ただし、まだベータ版という扱いであり、一部動作が不安定・正しくインポートされないという声も聞きます。実装をゼロにするというより、大幅に工数削減してくれるツールとしての認識がよいでしょう。
参考タグ:
Figma to STUDIOもこれからさらにインポート精度を増していくものと思われますが、「とにかくインポートを完璧にさせて実装コストを0に近づけたい」という場合には、下記ご紹介する”Framer Sites”のほうが完成度が高いかもしれません。
Figmaを直接インポートして、自動的にWebサイト化”Framer Sites”
現在では、「Figmaでデザインしたデータを自動的にWebサイト化したい」というニーズにダイレクトに応えている、”Framer” というノーコードサービス。
上のFramerサイトTOPは現在AI押しなのですが、FigmaプラグインとしてのFramer紹介ページのほうがFigmaとの関係性が分かりやすいかもしれません。
FramerはFigmaからデータを取り込みWebサイト化したうえで、サイトをホスティングしてくれるサービスです。CMS機能も搭載しており、Framer上でカスタマイズも可能となっています。
海外では”脱WordPress”の流れとしてしばらく”Webflow”が一強だったのですが、最近ではWebflowからFramerへの流出が多く見られるようです。
デザインやワイヤーフレームを自動生成してくれるツールやFigmaプラグインを含め、LP・Webページの自動生成については
FigmaからReactなどのフロント用コードを自動生成するサービス”bifrost”
なお、FigmaからReactなどフロント用コードを自動生成するサービスについては、現在ではより新しいAIによる高精度な自動生成サービス bifrost が良さそうです。
2023/10/22追記: bifrostはサービス終了したようです。
FigmaからReactなどのフロント用コードを自動生成するサービスの詳細について、
Figmaからモバイルアプリを自動で構築”Bravo Studio”
Figmaからモバイルアプリを構築してくれるノーコードツール”Bravo Studio”について、上の記事および
Bravo Studioは当初、モバイルアプリのプロトタイピングツールとして打ち出していましたが、今や要件さえ合えばそのままモバイルアプリとしてリリースできるレベルのものにまで進化しているように感じました。
関連タグ:
以下はQuest.aiについての記事
ここから以下はQuest.AIがWebサイト化ツールだったときの記述です。記録として残しておきますが、現在ではQuest.AI上ではWebサイトとして公開する機能はなくなっていると考えられるため、ご注意ください。
目次:
- Quest.AIはWebサイト化ツールから「フロント用コード出力ツール」へと変化しました
- 2023年6月時点ではFigmaデザインからの「Webサイト生成・フロントコード生成・モバイルアプリ生成」3つそれぞれに有力な自動生成サービスが存在
- 2023/08/21追記: 国産ノーコードWebサイト制作ツール”STUDIO”がFigmaデザインのインポートに対応！🎉
- Figmaを直接インポートして、自動的にWebサイト化”Framer Sites”
- FigmaからReactなどのフロント用コードを自動生成するサービス”bifrost”
- Figmaからモバイルアプリを自動で構築”Bravo Studio”
- 以下はQuest.aiについての記事
- Quest.AIとは（旧情報）
- Figma・Adobe XDをWebサイト化してくれる”Quest AI”の機能について
- FigmaのHTML化プラグイン ”Figma to HTML” との違い
- Quest.AIによって生成されたコードはエクスポート可能
- Adobe XDのデザインデータとも連携できる
- 公式ドキュメントのほかSlackコミュニティがあり、質問が可能
- Quest AIによって制作されたWebページのデモ事例
- Quest AIの2分間デモ動画
- Quest.AIをSTUDIOやWebflowと比較した場合
- 細かいアニメーションや、特殊なエフェクトを設定したい場合
- 厳密なマークアップを求める場合
- Quest.AIの使いどころ。CMS機能の不要な個人ポートフォリオやLP、キャンペーンサイトには最適かも
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
Quest.AIとは（旧情報）
FigmaおよびAdobe XDによるカンプデザインを即座にWebサイト化できる”Quest.AI”というノーコードツールがあります。公式の謳い文句から引用すると「Figma, XDでデザインしたデータを『10分』でWebサイトとして公開できる」というもの。
FigmaやAdobe XDでデザインするだけで、Webサイトとして公開する際に通常必要となる、コーディングやノーコードツールによる「実装」の工程をまるっと省略できるという優れモノです。
LPに限定していえば、国産のサービスにも FRONT-END.AI | フロントエンド開発業務を1/2に がありますね。
こちらはFigmaに限定せず、”デザインカンプ"という言い方をしているので各種Adobeフォーマットでも対応しているのかもしれません。
今回はFigma・Adobe XDのデザインデータをWebサイトに自動変換・ホスティングまでしてくれるQuest AIについて、他サービスと比較しつつご紹介していきます。
Figma・Adobe XDをWebサイト化してくれる”Quest AI”の機能について
FigmaのHTML化プラグイン ”Figma to HTML” との違い
Figmaのプラグインには、FigmaのデザインデータをHTML化してくれる"Figma to HTML" が既に存在します。
このFigma to HTMLとQuest.AIとの違いにはどのようなものがあるでしょうか。
“Figma to HTML” と比べて、Quest.AIは下記の機能をもちます。
- レスポンシブ設定を自動的に設定してくれる
- アニメーションの設定が可能
- 問い合わせフォームが実装可能
- Google MapなどのiFrame埋め込みが可能
- 動画の埋め込みが可能
- 下記方式から選択可能
- 動画ファイルを直接アップロード(Quest AIサーバーにアップされる）
- またはYouTubeリンクの埋め込み
- 独自ドメインと接続が可能
- Quest AIがホスティングサービスも兼ねている
- 独自ドメイン接続には有料プランの契約が必要
- アクセス解析がQuest AIに内蔵されている
- Google Analyticsの設置が可能
- ただし有料プランの契約が必要
- バージョン管理機能あり
上記のほか、スライドショーも実装可能のようです。
Quest.AIによって生成されたコードはエクスポート可能
また、Quest.AIによって生成されたコードはエクスポート可能。
万が一、Quest.AIがサービス停止することになっても、コードをエクスポートできればひとまずは安心できそうですね。
ただし、コードエクスポート機能を利用するにはProプラン（$50/月）の契約が必要です。
Adobe XDのデザインデータとも連携できる
Quest.AI基本的にはFigmaと接続するNo-Codeツールですが、Adobe XDのデザインデータをQuest AIで利用できるXD用プラグインがあります。
公式ドキュメントのほかSlackコミュニティがあり、質問が可能
公式ドキュメントのほか、公式Slackコミュニティがあり、Quest.AI開発者とユーザーとの間で活発にやりとりがなされています。
Slack | Quest.AI （Slackコミュニティ登録ページにリダイレクトされます）
Quest AIによって制作されたWebページのデモ事例
Quest AIで制作されたデモページ: NInjaMail
架空のプロダクト紹介ページ。デモページなのでリンク先すべてQuest AIに設定されています。
動き・アニメーションエフェクトのあるLPとなっています。
QUEST Showcase には、他にも多くの制作事例が掲載されています。
Quest AIの2分間デモ動画
Quest AIの2分間デモ動画
ノーコードツール"STUDIO"のエディタに近い画面で、レスポンシブ設定ができるよう。
Quest AI公式サイトの"Play with a Sample Page"から実際にエディタを触って試すことが可能です。
Quest.AIをSTUDIOやWebflowと比較した場合
このように、Figma, Adobe XDのデザインデータを自動的にWebサイトの形として変換してくれるのであれば、Figma, XDでデザインする際にはすべてこのQuest.AIで良さそうに思います。
2021年12月現在、ページ表示速度（高速化）の要件やよほど特殊な要件がない限り、STUDIOやWebflowなどのノーコードツールによってWebサイトを制作することが可能です。
むしろ保守性の観点から考えると、WordPressなどのレガシーCMSを導入するよりノーコードによる制作のほうが優れている場合もあります。
しかし、STUDIOやWebflowと比較した場合においても、下記の要求がある場合にはQuest.AIでは要件を満たせないかもしれません。
細かいアニメーションや、特殊なエフェクトを設定したい場合
STUDIOやWebflowでは、要素ごとに多種多様なアニメーションを細かく設定することが可能。
一方、STUDIOやWebflowに比べると、Quest.AIでは詳細なアニメーションや凝ったエフェクトを実装することは難しいでしょう。
厳密なマークアップを求める場合
Quest.AIによってどの程度のHTMLが吐き出されるか、未知数です。
こういった自動マークアップサービスによくあることですが、吐き出されるHTMLが適切なマークアップ構造になっていない場合があります。
アクセシビリティの問題もあるため、可能な限り正しいHTMLマークアップをすることが望ましいことはその通りです。
しかし、きちんとしたマークアップの実装には一定の工数がかかってしまうことも事実。Quest.AIによって削減できる工数や費用と適切なマークアップで得られる恩恵を比較したうえで、多少のコードの汚さには目を瞑りQuest.AIを利用するのも一つの選択肢でしょう。
そもそも適切なHTMLマークアップが求められる場面はSEOからの要求が多かったことと思われますが、近年ではHTMLマークアップが及ぼすSEOへの影響はかなり小さくなってきています。
Quest.AIの使いどころ。CMS機能の不要な個人ポートフォリオやLP、キャンペーンサイトには最適かも
STUDIOやWebflowはカンプデザインを見ながら実装する工程が必要ですが、Quest AIはFigmaのデザインカンプをそのまま公開用データとしてHTML出力してくれます。
ただしCMS機能はありません。ブログ投稿等を行いたい場合には不向き。
Slackコミュニティ内の情報（2021/11/5）によると、CMS機能は次アップデートで実装することを予定しているようです。
現状でCMS機能を利用したい場合、Airtableなどを利用して投稿機能を実装する代替策が紹介されていました。
RSS埋め込みも難しそう。
CMS機能が不要な個人ポートフォリオやLP、キャンペーンサイトなら、Quest.AIで公開させるのが未来的で適しているかも。
特にA/Bテストを行いたいようなランディングページの運用には適していそうです。
Figmaで変更し再度Publishすれば変更点が即時に反映され、デザイン面の修正が非常に容易なため。
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。
上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。
Category:
