(生成AI) AI Landing Page Generatorを利用した爆走LP作成

# 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

``` zsh
git clone https://github.com/JustAIGithub/AI-Landing-Page-Generator
```

## 2.pnpm のインストール
まず、pnpm がインストールされていない場合、以下のコマンドでグローバルにインストールします：

``` zsh
➜  ~ 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.プロジェクトディレクトリに移動する
ロジェクトディレクトリに移動するためには、以下のコマンドを実行します：

``` zsh
cd AI-Landing-Page-Generator
```

## 4. .env.example ファイルを .env にコピーします

``` zsh
cp .env.example .env
```
.env ファイルをテキストエディタで開き、必要な情報を記入します。例えば、以下のような内容になっているかもしれません：

``` zsh
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`エラーになる場合
``` zsh
➜  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?
 ```

プロジェクトディレクトリに移動し、依存関係を再インストールします：

``` zsh
➜  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！
![スクリーンショット 2024-06-09 17.40.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286094/2676179e-18b6-0a09-0942-9604dd9df773.png)


## 3. ウェブサイトの説明を入力し、「Enter」をクリックします。

```
例）
生成AIを利用した、AIモデルを格安で利用できるLP。

利用メリットとしては下記の通り。

- 自分の理想のモデルを利用できる
- 自社のアパレル商品をモデルに着せ替えできる
- 実際のモデルを雇うより安い。
```

## 4. ランディングページを生成するのを待ちます。
画像とかないので、質素ですがLPの雛形はできました。
![スクリーンショット 2024-06-10 19.09.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286094/e152513f-8edf-09e0-868d-a596bab02350.png)

codeをクリックすると、HTMLが出力されます。

![スクリーンショット 2024-06-10 19.09.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286094/13ff11ca-1896-ef1d-643c-3cff756043e7.png)




``` 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が作成できる！までは程遠そう.....