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” との違い
- Quest.AIによって生成されたコードはエクスポート可能
- Adobe XDのデザインデータとも連携できる
- 公式ドキュメントのほかSlackコミュニティがあり、質問が可能
- Quest AIによって制作されたWebページのデモ事例
- Quest AIの2分間デモ動画
- Quest.AIをSTUDIOやWebflowと比較した場合
- 細かいアニメーションや、特殊なエフェクトを設定したい場合
- 厳密なマークアップを求める場合
- Quest.AIの使いどころ。CMS機能の不要な個人ポートフォリオやLP、キャンペーンサイトには最適かも
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すれば変更点が即時に反映され、デザイン面の修正が非常に容易なため。
Category: