ウェブページを出力できるAIアプリが登場、早速評価してみよう

みなさんこんにちは、カソンです。

最近、ウェブページ作成ツールframer[1]は、プロンプトワードに基づいてウェブページを生成するという新しい機能を開始しました。

この機能について上司に知らせたらどうなるでしょうか?フロントエンドエンジニアとして、私は新しい機能をすぐに評価しました。

少しいじってみて、ようやく安心しました。新しい機能はフロントエンドに脅威を与えなかっただけでなく、さらに強力になったのです。

この記事では、AI を使用して Web ページを生成するフレーマーのプロセス全体について説明します。

フレーマーとは

Framer は 2016 年にリリースされた Web ビジュアル エディターです。ノーコード ツールである framer は、他のノーコード ツールと同様に、「不可能三角形」の問題に直面しています。

いわゆる「不可能三角形」とは、ノーコード ツールでは「柔軟性」、「使いやすさ」、「効率性」を同時に考慮できないことを意味します。

たとえば、ツールが次の場合:

1. さまざまなシナリオをサポートし（柔軟性）、Webページの出力効率を大幅に向上させるが、構成が非常に複雑になる（さまざまなシナリオに対応する必要があり、使いにくい）
2. 様々なシナリオに対応（柔軟）し、使いやすいが、開発効率は高くない（考えずにページを生成することは不可能で、製品コードを修正する必要がある）
3. 構成はシンプル（使いやすい）で開発効率は高いが、適用シナリオは狭い（柔軟性に欠ける）

Framer は、使いやすさと効率性を維持しながら柔軟性を犠牲にする 3 番目の方法を選択しました。

具体的には、フレーマーの適用シナリオは、ランディングページ、製品紹介ページ、公式ウェブサイトなどの静的ページの生成に限定されています。

これらのシーンの特徴は、表示に重点が置かれ、インタラクションにはあまり注意が払われないことです。

フレーマーによって生成されたページ

フレーマーワークフロー

フレーマーの全体的なワークフローには、次の 3 つのステップが含まれます。

まず、プロトタイプを設計します。このステップは、次の 2 つの方法で実行できます。

• デザイナーはFigmaでデザインする
• AIによって生成されたプロンプトワードで説明

生成されたプロトタイプはエディター インターフェイスに入り、次の操作を実行できます。

• サイズ、スタイル、レイアウトを調整する（CSS、HTML の変更など）
• 対応するJSコードを直接変更する（Reactコンポーネントの形式）
• CMS 経由でデータ ソースに接続する
• ......

編集が完了したら、ワンクリックで展開できます。

次に、AI が生成した Web ページの例を見てみましょう。

AI 生成 Web ページの例

私たちの目標は、次のプロンプトを使用して「セールス タンク」のランディング ページを生成することです。

ボタンをクリックすると、数秒後に、フレーマーが 3 つのデバイスに適したレスポンシブ ページを生成します。

生成されたコンテンツを見ると、要件に応じて 3 つの部分が生成されています。

これで全体的な構造ができたので、あとはカラースキームやレイアウトを調整し、コンテンツを変更して、エディターで CMS に接続するだけです。

もちろん、欠点もあります。

• プロンプトには「スライドショー」と書かれていますが、フレーマーには既製のスライドショーコンポーネントがありますが、使用されていません。
• プロンプトには「ナビゲーション バー」と表示されていましたが、フレーマーはそれを生成しませんでした。

今後のバージョンではさらに最適化されると思います。

最後に、ワンクリックでWebページ（tank.framer.ai[2]）をデプロイします。設計、編集、起動のプロセス全体を 10 分以内に完了できます。

フロントエンドへの影響

フレーマーは「ランディングページ、公式サイト」のシナリオで開発効率を大幅に向上させることができるので、フロントエンド開発者の仕事を奪うことになるのでしょうか？

この質問に答えるには、ビジネスから始める必要があります。ランディング ページと公式 Web サイトのシナリオの目標は何でしょうか?

答えは「変換」です。

コンバージョンは、販売リード（登録情報、メールアドレスなど）を取得することや、WeChat、App へのトラフィックを誘導することなどが考えられます。

コンバージョン率を向上させるには、次のような多くの A/B テストが必要です。

• 携帯電話番号を入力するための入力ボックスは、ページの先頭に配置する必要がありますか、それとも末尾に配置する必要がありますか?
• セールスポイントの紹介は 3 列でレイアウトするべきでしょうか、それとも単刀直入にレイアウトするべきでしょうか?

このようなシナリオでは、目標に基づいて、フロントエンド エンジニアの作業の焦点は次のようになります。

• 製品がページ上にさらに詳細な埋め込みポイントを作成し、ユーザーの行動経路を分析するのを支援します。
• さまざまなページのコンバージョン率をテストするためのA/Bテストプラットフォームを構築する

ページを描くという面倒な作業はフレーマーに任せるのが最も適切です。

要約する

ツールが登場したとき、それを盲目的に拒否するのではなく、ビジネスにさらに価値を生み出すためにそれをどのように使用するかを考える必要があります (専門用語では、「ビジネスを強化する方法」と呼ばれます)。

ちなみに、現在、framer は無料で試用および展開できます。最も基本的な有料版（1000uv/月）は5ドルです。

参考文献

[1]フレーマー: https://framer.com/.

[2] tank.framer.ai:https://tank.framer.ai/.