見出し画像

ChatGPTを使って新規事業AIジェネレーター「打ち上げくん」のLPを作成しました！

80&Company開発チーム

はじめに

こんにちは。株式会社80&Companyです！
80&Companyは、新規事業開発に興味がある企業様がより新規事業のアイデアを出しやすくするため、最近流行りの対話型AIチャットボット「ChatGPT」などのAIを用いて新規事業AIジェネレーター「「打ち上げくん」」を作成しました🎉

この記事では、打ち上げくんを、AIの力をつかって作成した過程について紹介します。
AIを用いたランディングページ作成に興味のある方はぜひ読んでみてください！

写真:新規事業AIジェネレーター(打ち上げ)LPページ

Chat GPTとは？

今回新規事業AIで活用しているChatGPTとは、イーロン・マスク氏やマイクロソフト社が出資している、サンフランシスコのOpenAI社が生み出した最新の対話型AIチャットボットです。

｢ワイヤーフレームを作ってくれませんか？｣などのプロンプトを入力するとその指示通りに作成してくれる他、おすすめのアニメなど質問への受け答えや会話、さらにはコードや作詞、翻訳、議事録などを書いてもらうことも可能です。

写真:ChatGPTのホーム画面

新規事業AIジェネレーター「打ち上げくん」のLPをAIが作成！

新規事業AIジェネレーター「打ち上げくん」ですが、なんとLPもAIで作っちゃいました！
最初は日本語で問いかけを行なっていましたが、ターゲット選定以降から思うような回答が返ってこなくなりました。
試しに英語で問いかけを行うと日本語より精度が高かったです。
AIが早く進化して、日本語で問いかけても精度の高い回答が返ってきて欲しいですね💧

ということで、今回のLPページは英語で問いかけを行い作成しました。

英語で問いかけて作成してみた手順

ChatGPTを用いたターゲット選定

では、早速LPページの作成を始めましょう！
まずは新規事業AIジェネレーター「打ち上げくん」のターゲット選定を行います。
記述した意図をChatGPTがより理解できるように、表現したい内容をはっきり決め、関連するすべてのキーワードを追加します。
英語で下記のように質問を投げましょう。

I am thinking of creating a website for a bot that will offer suggestions for new business development. What would be the target audience?

日本語訳：
新規事業開発の提案をするボットに関してWebサイトを作ろうと考えています。ターゲットの相手はどんな人ですか？

写真:ChatGPTに新規事業開発LPのターゲットについて英語で尋ねた画面

質問を投げた結果、下記4点のターゲットが選定されました。
日本語訳をすると以下のようになります。

  1. 自分のビジネスを始めるためのアイデアを探している意欲的な起業

  2. ビジネスを成長させる方法を探している中小企業の経営者

  3. 自社の新しいビジネス開発戦略を探しているマネージャーと管理者

  4. 新しい事業への投資機会を探している投資家

上記のターゲットに対してアピールできるよう、コンテンツやデザイン等を作成していきます！

ChatGPTをつかったデザイン選定

次に上記で行った新規事業AIジェネレーター「壁打ちくん」のターゲット選定結果から、ターゲットに対して好ましいデザイン選定を行います。
ターゲット選定の質問と続いているため、下記のように質問を英語で投げましょう。

What taste in design does the target audience of 1.2.3.4 prefer?

日本語訳：
上記1.2.3.4のターゲットが好むデザインテイストはなんですか？

写真:ChatGPTにターゲットが好みそうなデザインを英語で尋ねた画面

質問を投げた結果、下記4点のようなデザインテイストが選定されました。
日本語訳をすると以下のようになります。

  1. プロフェッショナルでモダンなデザイン

  2. 明確で簡潔な内容

  3. ビジュアルとグラフィック

  4. レスポンシブデザイン

  5. ソーシャルメディアの統合

ChatGPTでは、ターゲットの好みに合わせたデザインのテイストも提案できるようです！

ChatGPTをつかったサイト構成

次に上記のターゲット選定結果から、LPページに掲載するコンテンツと機能面における、キホンの構造を決めます。

  • 参考になるLP例を挙げる

まずは、上記デザイン例から参考になるLPを挙げます。
デザイン選定の質問と続いているため、下記のように質問を英語で投げましょう。

Please provide reference examples of professional and modern designed LPs.

日本語訳：
プロフェッショナルでモダンなデザインの LP の参考例を教えてください。

写真:ChatGPTにLPの参考例を英語で尋ねた画面

質問を投げた結果、下記5点のようなLP例が選定されました。

  1. Canva LP

  2. Shopify LP

  3. Hubspot LP

  4.  Grammarly LP

  5.  Dropbox Business LP

次に、上記LP例からサイト構成を考えます。
LP例の質問と続いているため、下記のように質問を英語で投げましょう。

Please tell us the LP structure of the bot that will propose new business development, referring to LPs 1.2.3.4.5 above.

日本語訳：
上記1.2.3.4.5のLPを参考に、新規事業開発を提案するボットの LP構成を教えてください。

写真:ChatGPTにLP構成を英語で尋ねた画面

質問を投げた結果、下記5点のようなサイト構成が選定されました。
日本語訳をすると以下のようになります。

  1. ヘッダー

  2. ヒーロー画像

  3. 機能セクション

  4. 証言

  5. 行動を促すフレーズ

  6. フッター

また、サイト構成で加えたいセクションや消したいセクションがある場合は随時ChatGPTに尋ねてみましょう。

  • LP 構成を1ページ目と2ページ目に分ける

LP構成の1ページ目と2ページ目にセクションを分けたいと思います。
デザイン選定の質問と続いているため、下記のように質問を英語で投げましょう。

The Results Section and Bot's Suggestions Section should be displayed on the second page. We would like to place a button in the Checkbox Section so that clicking the button will take you to the page where the Results Section and Bot's Suggestions Section are displayed on the second page.

日本語訳：
結果セクションとボットの提案セクションは、2ページ目に表示する必要があります。ボタンをクリックすると、2 ページ目に結果セクションとボットの提案セクションが表示されるページに移動するように、チェックボックスセクションにボタンを配置したいと考えています。

写真:ChatGPTにLP構成を1ページ目と2ページ目に分けるよう英語で尋ねた画面①
写真:ChatGPTにLP構成を1ページ目と2ページ目に分けるよう英語で尋ねた画面②

質問を投げた結果、下記のようなページ構成の割り振りが選定されました。
日本語訳をすると以下のようになります。

  • １ページ目

  1.  ヘッダー

  2.  チェックボックスセクション

  • ２ページ目

  1. 結果セクション

  2. ボットの提案セクション

  3. 行動を促すフレーズ

  4. フッター

ChatGPTでHTMLとCSSを生成

  • HTMLを生成しよう

上記の情報を元にHTMLの生成を依頼しましょう。
下記のように英語で質問を行います。

Please create HTML that is Page 1 responsive.
In the Checkbox Section, please prepare 6 options for each of the current business areas and the new business area you would like to work on.
You may select only one option for each.

日本語訳：
Page 1 レスポンシブな HTML を作成してください。チェックボックスセクションでは、現在の事業領域と、新たに取り組みたい事業領域について、それぞれ 6 つのオプションを用意してください。それぞれのオプションは 1 つのみ選択できます。

写真:ChatGPTにLPのHTMLを英語で尋ねた画面

上記のように、HTMLを吐き出してもらえます。
また、LP2枚目も同様の方法でHTMLを生成することができます。

  • HTMLのタグ内を日本語訳しよう

生成したHTMLを元に、HTMLのタグ内を日本語として使用したいため翻訳を行いましょう。
下記のように英語で質問を行います。

Please translate the inside of this html tag into Japanese.

日本語訳：
htmlのタグの内側を日本語に翻訳してください。


写真:ChatGPTにHTMLのタグ内を日本語訳するよう英語で尋ねた画面

  • CSSを生成しよう

HTMLを生成したら、追加して欲しいcssを作成します。

Change the background color of section id="call-to-action" and footer.
The section id="call-to-action" form should be aligned vertically, with the button in the center.

日本語訳：
セクション id="call-to-action" とフッターの背景色を変更します。セクション id="call-to-action" フォームは、ボタンを中央にして垂直方向に配置する必要があります。

写真:ChatGPTにLPのHTMLを英語で尋ねた画面

上記のように、各々のセクションで必要なCSSを随時追加しましょう。

Midjourneyをつかったキャラクター生成

大体の枠組みができてきましたが、少し寂しい気がするので打ち上げくんのキャラクターを作成していきます。

キャラクターは、midjourney と呼ばれる打ち込んだテキストから画像を生成するAI画像生成サービス を使用して作成しました。

以下のようなキャラクター画像が出力され、LPに採用しました。
キャラクター生成の手順に関しては、別記事で触れているため、詳しく知りたい方はぜひそちらをご覧ください。

写真:Midjourneyで生成したキャラクターの画面

完成バージョン

調整や追加項目で少し手を加えて、LPが完成しました。
下記の画像が、AIを用いて作成した新規事業AIジェネレーター「打ち上げくん」のLPページの完成画面です。

写真:新規事業AIジェネレーター(打ち上げ)LPページ


ご覧の通り、AIでLPページを簡易的に作成できたと言えるでしょう。

ウェブサイトの基本となる要件定義、サイト構成やワイヤーフレームの作成、実際のコンテンツ生成、キャラクター画像生成までAIを用いて行うことができました。

早速つかってみよう！

新規事業AIページの概要や作り方について説明しました。
では、早速試しにつかってみましょう！
下記を押すと新規事業AIページに遷移します。

最後に

株式会社80&Companyは、パートナー企業の皆様と伴走して新規事業のアイデア出しからサービスの運営まで一気通貫で事業を創り上げています。

また、ChatGPTのような最新技術を取り入れる環境も持ち合わせています。

打ち上げくんが提案してくれた事業をともに作り上げることも大歓迎なので、少しでも気になった方はお気軽にお問い合わせください！


この記事が参加している募集

#企業のnote

with note pro

13,857件

この記事が気に入ったらサポートをしてみませんか？