ChatGPT&Next.jsでマーケティング支援アプリを作ろう

いい商品やサービスを提供しようとしても相手に伝わっていなければ存在しないのと同じです。これは頭では分かっていてもなかなか相手に伝わる言葉や文章を作れるものではありません。ましてや、相手の心をグッと掴むようなキャッチコピーを何個も思いつくのはなおのこと難しいです。

それなら誰でも伝わる文章やキャッチコピーを作成できるマーケティングに特化した生成AIを開発したら魅力的で伝わりやすい文章を効率的に作れるのでは？と思いました。そこで、ChatGPTを開発したOpenAIのAPIと簡単にWebアプリが作れるNext.jsを活用して短時間でマーケティングを手伝ってくれる優秀なマーケティング支援アプリを開発しました。

マーケティング支援アプリの概要

ユーザーが商品名と詳細を入力するだけで、効果的なキャッチコピーと魅力的な説明文を自動生成するチャット型マーケティング支援ツールです。忙しいマーケティング担当者やクリエイティブチームもこれを使えばスムーズにコンテンツ制作できます。

機能概要

商品名と簡単な詳細情報を入力するだけでキャッチコピーと商品説明文を生成してくれます。必要に応じてターゲットになる人物像や広告を設置する場所などの情報を入力することでより効果的な文章を作成してくれます。

また、チャット型に設計しているため会話の内容を学習しながらより思い通りのキャッチコピーを作れます。このことで短時間でターゲットに刺さるコピーを作れます。

データフロー

ユーザーが情報を入力し、アプリが回答を表示するまでをシーケンス図にしました。ユーザーはチャットに情報を送信するとOpenAIにシーケンス図を作成するためのシナリオとして、ユーザーがNext.jsアプリケーションのページを訪れ、チャットコンポーネントを使用してOpenAI APIにリクエストを送信し、キャッチコピーと説明文を生成する流れを考えます。LocalStorageはユーザーの入力を一時保存するために使用されます。

データフロー

生成AIアプリの需要

生成AIアプリを開発する需要は年々高まって、電子情報技術産業協会（JEITA）の発表によると、2030年の世界需要は2023年に比べ約20倍の規模になり、日本市場も現在と比べ15倍に拡大する見通しになるようです。

電子情報技術産業協会（JEITA）は2023年12月、生成AI（人工知能）の世界需要額見通しを発表した（概要）。2030年の世界需要は2110億米ドルと予測され、2023年に比べ約20倍の規模となる。日本市場も1兆7774億円になるとみられ、現在と比べ15倍に拡大する。
…
中でも、製造分野は大きな伸びを見込む。製造現場における業務支援や製品開発支援など、適用範囲は多岐にわたり、2030年には507億米ドルの規模になると予測した。年平均成長率は54.6％である。それ以外では、金融や公共、通信・放送分野などで、生成AIの利活用が広がるとみている。

生成AIの世界需要、2030年に2110億ドルと予測 | EE Times Japan

ちなみに、生成AIでは以下のような使われ方をします。

多様な分野での需要
生成AIはテキスト生成、画像生成、音声生成など幅広い分野で活用されています。特にコンテンツ制作などのクリエイティブな分野から顧客サポート、マーケティング分析、翻訳などのルーティン業務が必要な分野まで多様な業界で需要が増加しています。

顧客の特性に合った体験の提供
各ユーザーに個別化された体験を提供するためにも生成AIは使われています。特に商品特有の特徴を学習されたAIを使った販促システムや顧客の特性に合わせた個別対応のカスタマーサービスシステムなどに使われています。

効率化とコスト削減
多くのルーティンワークが生成AIで自動化されることで人手による作業を削減できます。その削減できた時間や人手は付加価値を出すための業務に充てることができるため、多くの企業が生成AIアプリ開発へ投資しています。

AIエンジニアは幅広い業務をこなす

ちなみに、昔のAIエンジニアの定義はAI自体を開発するというイメージが強かったのですが、今ではAI開発からチューニング、実装までAI関連で幅広く行うエンジニアのことを指すようになりました。

AI エンジニアとは、人工知能 (AI) の研究開発から実装、運用までを担当するエンジニアのことを指します。AI エンジニアは、機械学習やディープラーニングなどの AI 技術を駆使して、様々な分野における問題解決や業務効率化に取り組みます。

AI エンジニアの定義 | キカガクキャリア

それでは実際にマーケティング支援アプリを開発していきましょう！

Next.jsセットアップ

ここからアプリ開発の準備をしていきます。

フォルダの作成

デスクトップにアプリのフォルダを作成します。

shell

~/Desktop $ mkdir chatbot
~/Desktop $ cd chatbot 

Next.jsセットアップ

Next.jsの初期設定をします。

shell

~/Desktop/chatbot $ npx create-next-app .
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … Yes
✔ What import alias would you like configured? … @/*

✔ Would you like to use TypeScript? … Yes
Yes を選択するとプロジェクトがTypeScriptで構成されます。TypeScriptを使うことで型チェックされて安全なアプリ開発ができます。

TypeScript | TypeScript入門『サバイバルTypeScript』

✔ Would you like to use ESLint? … Yes
Yes を選択するとESLintがプロジェクトに追加されます。ESLintは、コードの品質を保つための静的解析ツールです。

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

✔ Would you like to use Tailwind CSS? … Yes
Yes を選択するとTailwind CSSがプロジェクトに追加されます。Tailwind CSSはカスタマイズしやすく、メンテナンスがしやすいCSSフレームワークです。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

✔ Would you like to use `src/` directory? … No
No を選択するとプロジェクトのディレクトリ構造はsrc/ディレクトリとならず、プロジェクトフォルダ直下に配置されるようになります。

✔ Would you like to use App Router? (recommended) … Yes
Yes を選択するとNext.jsの新しいApp Routerを使用できます。これは、ルーティングやデータフェッチングをするための強力で新しい機能です。

✔ Would you like to customize the default import alias (@/*)? … Yes
Yes を選択するとインポートエイリアスをカスタマイズできます。
@/* を選択したことで、@を使ってプロジェクト内のファイルを参照する際の簡便なパス指定が可能になります。例えば、@/components/Button というように、絶対パスでモジュールをインポートできます。

初期設定を完了してアプリを起動します。

shell

~/Desktop/chatbot $ npm run dev

> chatbot@0.1.0 dev
> next dev

  ▲ Next.js 14.2.5
  - Local:        http://localhost:3000

下のURLにアクセスしてNext.jsのアプリが表示されたら成功です。
http://localhost:3000

OpenAIセットアップ

ここからはOpenAIの設定方法を説明します。OpenAIのAPIは有料となっているので、クレジットカードを用意しておきましょう。料金は従量課金制になっていて、あらかじめ料金をチャージしてからAPIを使用します。

OpenAIのアカウト作成