コーディング・実装不要!Figma・XDを瞬時にWebサイト化するノーコードツール"Quest.AI"

最新の更新日
Apr 27, 2022 9:47 AM
Target Keywords
vol.

FigmaおよびAdobe XDによるカンプデザインを即座にWebサイト化できる”Quest.AI”というノーコードツールがあります。公式の謳い文句から引用すると「Figma, XDでデザインしたデータを『10分』でWebサイトとして公開できる」というもの。

FigmaやAdobe XDでデザインするだけで、Webサイトとして公開する際に通常必要となる、コーディングやノーコードツールによる「実装」の工程をまるっと省略できるという優れモノです。

LPに限定していえば、国産のサービスにも FRONT-END.AI | フロントエンド開発業務を1/2に がありますね。

こちらはFigmaに限定せず、”デザインカンプ"という言い方をしているので各種Adobeフォーマットでも対応しているのかもしれません。

FRONT-END.AI | フロントエンド開発業務を1/2に

AIがアップロードされたデザインカンプを解析し HTML,CSSなどのコーディング候補を自動出力 今すぐ無料デモを依頼 ISSUE 1案件あたりの制作時間が圧縮できず、月間の制作本数に限界がある 01 1案件あたりの制作時間が圧縮できず、月間の制作本数に限界がある 単純作業に忙殺されており、インタラクションや高速化対応に時間を割けない 02 単純作業に忙殺されており、インタラクションや高速化対応に時間を割けない オフショアや外部委託のコストに加え、ディレクションなどの人件費もかかる 03 オフショアや外部委託のコストに加え、 ディレクションなどの人件費もかかる SOLUTION デザインカンプを読み込み、AIが構造を判別します 検出したサイト構造を元に、UI上で効率的にコードを作成します レイアウト判定やレスポンシブ対応など、CSSのコーディングも支援 XDプラグインの利用で高精度に、CSSもより細部まで ※XD以外のデザインツールでもFRONT-END.AIは利用できます EFFECTS 導入企業では、10営業日かかっていたサイトを2.5営業日で完成させた事例あり 外部委託を止めたことにより、年間1000万円コスト削減した事例も 単純作業を減らし余剰時間が出来ることで、エンジニアのインプット時間を創造 USER 50社以上が、FRONT-END.AIを活用してフロントエンド開発業務を効率化しています

FRONT-END.AI | フロントエンド開発業務を1/2に

今回はFigma・Adobe XDのデザインデータをWebサイトに自動変換・ホスティングまでしてくれるQuest AIについて、他サービスと比較しつつご紹介していきます。

image

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

image

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

image

動き・アニメーションエフェクトのある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で良さそうに思います。

しかし、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すれば変更点が即時に反映され、デザイン面の修正が非常に容易なため。