制作したワークフローの概要

実験的にユーザーが入力した情報を元にLPを自動生成するAIワークフローを作成しました。

使用する技術等

Dify

アプリケーションのUIおよび処理の構築にはAIプラットフォームのDifyを作成しました。

OpenAI API

プロンプトの生成にAPI経由でChatGPTを使用します。 DifyはさまざまなLLMを使用できるためGemini、Claudeなどお好みのLLMを使用することができます。

v0

React ベースの UI を作ることができる生成 AI サービスです。 v0はプロンプトをパラメーターとしてURLに引き渡すことが可能なためスムーズなLP生成を実現するために今回採用しました。

基本的な処理の流れ

①LPの概要を入力する

②概要からLPの構成を作成する（LLM）

③概要＋②のLPの構成でLPを生成するプロンプトを作成

④v0にパラメータで渡すためのURLを生成

⑤プロンプトとv0へのリンクを表示

入力のサンプル

制作するLPの情報を入力します。画像のサンプルでは架空の中古車査定のLPを作成するための情報を記載し、実行ボタンを押下するとワークフローが起動します。

出力のサンプル

出力ではLPを生成するためのプロンプトが出力されます。 v0で生成するボタンを押下するとこのプロンプトを使ったLPが生成されます。

---

v0では下記のLPが出力されました。 v0ではデフォルトではReactのコードが生成されますがClaudeに同様のプロンプトを貼り付けることでHTML/CSSのコードで生成することができます。 実際にLPとして使用するにはもう少し内容やデザインをブラッシュアップする必要がありますが概ねLPとしての構成要件をおさえています。

この事例のポイント

①最初にLPを作成するプロンプトを設計する

まず、v0やClaudeでLPを作成するプロンプトを作成してそれに必要な情報をワークフロー上のユーザー入力とLLMによって埋めていくイメージ

②LLMの出力やプロンプトをブラッシュアップ

要所要所で、「これが50点なら100点にしてください」というプロンプトのブラッシュアップを繰り返すことによって出力の精度を高めています。

③v0にパラメータでプロンプトを引き渡す

v0はパラメーターでプロンプトを引き渡すことができます。ただし改行やスペースをパラメーターの形式に変換する必要があるためそこはPythonで処理しています。

④他のアウトプットにも転用可能

同じロジックでベースのプロンプトさえ設定すれば、UI作成やスライド、グラフ作成にも転用できます。

課題について

デザインはテンプレート的なものになるのでそのあたりがv0やClaudeなどでクリエイティブなデザインが行えるようになるとレベルは上がりそうです。

この事例ではv0でLPを作成していますが、v0はReactベースのコードが生成されるので実際に公開しようと思うとサーバー周りの知識が必要になります。プロンプトをClaudeに貼り付けてLPを生成した方がHTML/CSSのあつかいやすいコードを生成することができました。

まとめ

Difyを使うことで最小限の情報でLPを生成することのできるAIアプリを構築することでできました。

ここからさらに発展させてワークフローを作り込めばパンフレット情報やホームページの製品情報からLPに掲載するコンテンツを生成することも可能になります。

現時点でもLPとしての基本的なコンテンツを生成することは可能なのでワイヤーフレームの作成やお客さんとの打ち合わせで制作物のイメージを共有するなどの利用シーンで活用できそうです。