AI Landing Page Generatorを利用した爆走LP作成
AI Landing Page Generatorは、人工知能を使用してランディングページを作成できるツールです。
このジェネレーターを使用することで、ランディングページのデザインとコーディングのプロセスを自動化できます。
HTMLおよびTailwind CSSでのランディングページの作成のみをサポートしています。
公式サイト：https://github.com/AICodeHunt/AI-Landing-Page-Generator?tab=readme-ov-file
インストール方法
Clone the repository: git clone https://github.com/JustAIGithub/AI-Landing-Page-Generator
Install the required dependencies: pnpm install
Navigate to the project directory cd AI-Landing-Page-Generator
Copy the .env.example file to .env and fill in the required information.
1.git clone
git clone https://github.com/JustAIGithub/AI-Landing-Page-Generator
2.pnpm のインストール
まず、pnpm がインストールされていない場合、以下のコマンドでグローバルにインストールします：
➜ ~ npm install -g pnpm
added 1 package in 5s
1 package is looking for funding
run `npm fund` for details
npm notice
npm notice New minor version of npm available! 10.7.0 -> 10.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1
npm notice To update run: npm install -g npm@10.8.1
npm notice
3.プロジェクトディレクトリに移動する
ロジェクトディレクトリに移動するためには、以下のコマンドを実行します：
cd AI-Landing-Page-Generator
4. .env.example ファイルを .env にコピーします
cp .env.example .env
.env ファイルをテキストエディタで開き、必要な情報を記入します。例えば、以下のような内容になっているかもしれません：
OPENAI_API_KEY_ARRAY="aaaaaaaaaaaaaaaaaaaa"
APIキーの設定
利用方法
Run the generator: pnpm dev
Open the browser and go to http://localhost:3000
Describe your website and click on the "Enter".
Wait for the genie to generate the landing page.
1. ジェネレーターを実行します
pnpm dev
next: command not foundエラーになる場合
➜ AI-Landing-Page-Generator git:(main) pnpm dev
> next-openai@0.1.0 dev /Users/hiroki/ghq/github.com/AICodeHunt/AI-Landing-Page-Generator
> next dev
sh: next: command not found
ELIFECYCLE Command failed.
WARN Local package.json exists, but node_modules missing, did you mean to install?
プロジェクトディレクトリに移動し、依存関係を再インストールします：
➜ AI-Landing-Page-Generator git:(main) ✗ pnpm install
Lockfile is up to date, resolution step is skipped
Packages: +440
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Downloading typescript@5.0.4: 7.05 MB/7.05 MB, done
Downloading next@13.4.4-canary.11: 12.33 MB/12.33 MB, done
Downloading monaco-editor@0.40.0: 16.51 MB/16.51 MB, done
Downloading @next/swc-darwin-arm64@13.4.4-canary.11: 34.61 MB/34.61 MB, done
Progress: resolved 440, reused 0, downloaded 440, added 440, done
dependencies:
+ ai 2.1.7
+ monaco-editor 0.40.0
+ next 13.4.4-canary.11
+ openai-edge 0.5.1
+ re-resizable 6.9.9
+ react 18.2.0
+ react-dom 18.2.0
+ react-frame-component 5.2.6
+ react-html-parser 2.0.2
+ react-resizable 3.0.5
+ react-select 5.7.3
devDependencies:
+ @types/node 17.0.45
+ @types/react 18.2.7
+ @types/react-dom 18.2.4
+ @types/react-html-parser 2.0.2
+ @types/react-resizable 3.0.4
+ autoprefixer 10.4.14
+ eslint 7.32.0
+ eslint-config-next 13.4.4-canary.11
+ postcss 8.4.24
+ tailwindcss 3.3.2
+ typescript 5.0.4
Done in 1m 17s
これにより、node_modules フォルダが再作成され、必要なパッケージがインストールされます。
2. ブラウザを開き、localhostにアクセス
http://localhost:3000
下記のページが表示されればOK！
3. ウェブサイトの説明を入力し、「Enter」をクリックします。
例）
生成AIを利用した、AIモデルを格安で利用できるLP。
利用メリットとしては下記の通り。
- 自分の理想のモデルを利用できる
- 自社のアパレル商品をモデルに着せ替えできる
- 実際のモデルを雇うより安い。
4. ランディングページを生成するのを待ちます。
画像とかないので、質素ですがLPの雛形はできました。
codeをクリックすると、HTMLが出力されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/animate.css" rel="stylesheet">
<title>Your AI Model LP</title>
</head>
<body>
<!-- Header Section -->
<header class="bg-gray-900 text-white py-4">
<div class="container mx-auto flex justify-between items-center">
<img src="logo.png" alt="Logo" class="h-8">
<nav>
<a href="#" class="mr-4">Home</a>
<a href="#" class="mr-4">Features</a>
<a href="#" class="mr-4">Team</a>
<a href="#" class="mr-4">Contact</a>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="bg-cover bg-center h-96" style="background-image: url('https://source.unsplash.com/featured/1280x720/?AI')">
<div class="container mx-auto flex flex-col items-center justify-center h-full text-white">
<h1 class="text-4xl font-bold mb-4">Unlock the Power of AI Models</h1>
<a href="#" class="bg-blue-500 py-2 px-4 rounded hover:bg-blue-700">Get Started</a>
</div>
</section>
<!-- Feature Section -->
<section class="bg-gray-100 py-8">
<div class="container mx-auto flex justify-center items-center">
<!-- Feature Cards -->
<div class="p-4">
<i class="fas fa-cogs text-4xl text-blue-500"></i>
<h2 class="text-lg font-bold my-2">Customizable AI Models</h2>
<p class="text-sm">Tailor the AI model to suit your needs with ease.</p>
</div>
<div class="p-4">
<i class="fas fa-images text-4xl text-blue-500"></i>
<h2 class="text-lg font-bold my-2">Apparel Product Integration</h2>
<p class="text-sm">Dress your apparel products on virtual models effortlessly.</p>
</div>
<div class="p-4">
<i class="fas fa-dollar-sign text-4xl text-blue-500"></i>
<h2 class="text-lg font-bold my-2">Cost-Effective Solution</h2>
<p class="text-sm">Save on expenses compared to hiring actual models.</p>
</div>
</div>
</section>
<!-- Individual Feature Sections -->
<section class="bg-cover bg-center h-80" style="background-image: url('https://source.unsplash.com/featured/1280x720/?model')">
<div class="container mx-auto flex justify-between items-center text-white">
<div class="w-1/2 p-4">
<h2 class="text-2xl font-bold">Your Perfect AI Model</h2>
<p class="my-4">Tailor the AI model to represent your brand effortlessly.</p>
<a href="#" class="bg-blue-500 py-2 px-4 rounded hover:bg-blue-700">Learn More</a>
</div>
</div>
</section>
<!-- Testimonial Section -->
<section class="bg-gray-200 py-8">
<div class="container mx-auto flex justify-between items-center">
<!-- Testimonials -->
<div class="p-4">
<p>"The AI models exceeded our expectations." - John Doe, CEO</p>
</div>
<div class="p-4">
<p>"A game-changer for our apparel products." - Jane Smith, Marketing Manager</p>
</div>
</div>
</section>
<!-- FAQ Section, Team Section, Newsletter Subscription, Contact Form, Map Section, and Footer Section -->
</body>
</html>
まとめ
簡単にLPの雛形を作りたい場合であれば、利用する価値はあるのかなと思いました。
ただ、これだけではレベルが低すぎるのでまずは0->1の雛形を作ってもらって。
その雛形をもとにLPをブラッシュアップしたい場合に利用するくらいがちょうど良さそうな印象でした。
これだけで有料級のLPが作成できる！までは程遠そう.....