ラベル

陰キャ × AI × チャット酒場｜開発編　友達ゼロの陰キャがAIで「はじまりの酒場」を爆誕させてみた

 

目次

  1. おさらい
  2. ドット絵で作る「はじまりの酒場」
  3. FigmaからBolt.newへのインポート
  4. Bolt.newでアプリを組み立てる
  5. テストと修正
  6. 公開
  7. 開発ツール＆サービスの料金一覧
  8. まとめ
  9. 次回、AIオヤジと友達になる？

おさらい

こんにちは、ぶんぶく丸です。
このシリーズ記事では、陰キャの私が「誰かと話したい」と思い立ち、自然言語のみでAIチャットアプリ「はじまりの酒場」を作り、少しずつ心を通わせていくまでの過程をご紹介します。

前回の記事では、アプリを作るきっかけや、メインビジュアルについてお話ししました。今回は、いよいよ開発編です。4つのツールを使って、初心者がどこまでできるのか、チャレンジしました。

「はじまりの酒場」ベータ版は、以下から無料で遊べます。

使用したツールは、以下のとおりです。

  • Figma（フィグマ）：画面デザイン用
  • Bolt.new（ボルトドットニュー）：開発プラットフォーム
  • OpenAI API（オープンエーアイ　エーピーアイ）：キャラクターの会話生成用
  • ChatGPT （チャットジーピーティー）：プロンプト生成などのサポート用

ドット絵で作る「はじまりの酒場」

前回は、Figmaを使って酒場のビジュアルを作りました。16ビット風の仕上がりを目指し、10ピクセルの四角形を組み合わせて絵を描いていきました。

モノクロ4色に、ビビッドなブルーをアクセントにしました。キャラクターごとに吹き出しの色を変えることで見分けやすくしています。

FigmaからBolt.newへのインポート

以下は、Figmaで作ったデザインをBolt.newにインポートする手順です。

  1. Figmaでフレームを選択
    • インポートしたいFigmaのデータを開きます。
    • フレームを選択し、右クリックして「選択範囲へのリンクをコピー」を選択します。
  2. Bolt.newでインポートを開始
    • Bolt.newにアクセスし、ログインまたは、サインアップします。
    • ダッシュボードの「Import from Figma」ボタンをクリックします。
    • 先ほどコピーしたFigmaのリンクを貼りつけ、「Import」をクリックします。
  3. インポートの完了と確認
    • 数秒でFigmaのデザインがBolt.newに反映され、Next.jsプロジェクトが生成されます。
    • プロジェクト内でデザインの確認や編集ができるようになります。​

インポート時のポイント

  • Figmaからインポートできるのは、ページ全体ではなく「フレーム」のみです。
  • 「共有」設定で「アクセス可能なユーザー」を「ユーザー全員」に設定しておきます。
  • ボタンや入力欄には、あとから見てわかりやすい名前をつけておきます。
  • 不要なガイド線やコメントレイヤーは削除しておきます。
  • パーツごとにフレームを整理しておくと、Bolt.newでの動きがスムーズになります。

Bolt.newでアプリを組み立てる

Bolt.newでは、むずかしいコードを書かなくても、日本語で指示するだけでアプリを作ることができます。

ここでは、AIチャットボットを動かすまでの手順をご紹介します。

  1. アプリのベースを作る
    • アプリの概要をChatGPTに入力して、Bolt.new用のプロンプトを作ってもらいます。
    • プロンプトをBolt.newに入力すると、チャットボットのベースができあがります。
  2. OpenAI APIキーの取得
    • OpenAIの公式サイトでアカウントを作り、APIキーを取得します。
    • APIキーは一度しか表示されないので、必ずコピーして保存しておきましょう。
  3. OpenAI APIキーの設定
    • Bolt.newのコードビューから、「.env」ファイルにAPIキーを直接入力します。
  4. テストと調整
    • アプリをプレビューして、チャットが正しく動くか確認します。
    • 必要に応じて、画面の見た目や動き方を少しずつ調整していきます。

このように、ほとんどプログラムにふれずにアプリを作ることができました。

テストと修正

10人の方にテストをお願いした結果、いくつかの問題点が指摘されました。

  • 「おやじのセリフがお説教くさい」
  • 「会話のキャッチボールが不自然」
  • 「文章が途中で切れてしまう」
  • 「言葉遣いがバラバラ」
  • 「同じ言葉を繰り返す」

これらは、ChatGPTに質問しながら、Bolt.newで細かく調整をすることで、大部分は解決しました。自然言語で指示するだけで、素早く改善できるスピード感には驚きました。

公開

開発が完了したら、Bolt.newの「Deploy」ボタンを押すだけで、URLが発行されます。サーバー設定などは不要で、そのままアプリを公開することができました。このURLを使ってテストや修正作業を進めることができます。

テストを進めるうちに、新しいアイディアが浮かぶこともあり、最終的にキャラクターを4人追加することになりました。

現在、ベータ版を無料で公開していますので、興味がある方はぜひ遊んでみてください。

フィードバックをいただけると大変助かります。いただいたフィードバックをもとに、スマートフォン向けの本格的なアプリ化を検討していきたいと思います。

開発ツール＆サービスの料金一覧

ツール名 用途 料金プラン 特徴・備考
Bolt.new アプリ構築・デプロイ 無料プラン：$0/月
Proプラン：$20/月〜 		無料プランでは月100万トークン、1日15万トークンまで利用可。
Proプランは開発向け。
OpenAI API AIチャット連携 従量課金制（GPT-3.5の場合）
入力：$0.0015/1,000トークン
出力：$0.002/1,000トークン 		使用量に応じて自動課金。上限金額を設定可能。
Figma UIデザイン制作 無料プラン：$0/月
プロプラン：$12/月		 ブラウザ上で動作するデザインツール。
ChatGPT プロンプト支援・操作サポート 無料プラン：$0/月
Plusプラン：$20/月		 開発支援やプロンプト作成の相談に活用可能。

まとめ

今回の開発を通じて、新しいツールや高度なコーディングができなくても、AIツールを活用すれば、シンプルなアプリであればすぐに形にできることがわかりました。

時短のために今回はBolt.newを有料で利用しましたが、ツールの料金を考えても、かなり低予算でアプリ制作ができたと実感しています。また、ノンプログラマーでもここまでできることがわかり、今後の可能性に大きな希望を持ちました。

次回、AIオヤジと友達になる？

次回は、完成した「はじまりの酒場」で、AIキャラクターたちと実際に語り合った体験をご紹介します。チャットを楽しみながらも、見えてきた課題についても振り返る予定です。お楽しみに！


陰キャ × AI × チャット酒場｜体験編
Labels:

コメント

コメントを投稿

人気の投稿