MENU
未分類

【生成AI自分教材化シリーズ】ChatGPTで爆速でスマホアプリを開発する2【設計編】

きたたく

こんにちは、IT博士のきたたくです。

今日のブログでは、ChatGPTを活用したアプリ設計について詳しくお話しします。

特に、アプリ設計に悩む方々のために、アプリ設計に活用できるChatGPTのプロンプトに焦点を当てます。

この情報は、個人でアプリを開発し、収益化を目指す方にとって非常に有益です。

ぜひ最後までお読みいただき、アプリ設計の参考にしてください。

きたたく
きたたく

本記事の信頼性

  • スマホアプリ開発会社を創業&売却
  • 個人開発アプリで新着有料ランキング4位を獲得
  • これまでに40以上のアプリを開発
目次
  1. ChatGPTにアプリの設計を依頼する
  2. ユーザーストリーマップを作る
  3. 技術選定
  4. まとめ

ChatGPTにアプリの設計を依頼する

以下の記事で固めた企画を、ChatGPTに設計してもらいます。

あわせて読みたい
【生成AI自分教材化シリーズ】ChatGPTで爆速でスマホアプリを開発する1【企画編】
【生成AI自分教材化シリーズ】ChatGPTで爆速でスマホアプリを開発する1【企画編】

ChatGPTに、以下のプロンプトを投げます。

きたたく
きたたく

あなたはプロのアプリエンジニアです。
以下のアプリの設計を行ってください。

  • スマホアプリ iOS/Android
  • チェスのオープニングを学べるアプリ
  • 日本語/英語対応　デフォルトは英語
  • オープニングを1つずつ選べる
  • オープニングを学ぶモードとテストモードの2種類がある
  • 学ぶモードでは、オープニングを実際に盤面で打って再現できる
  • 学ぶモードでは、一手一手の解説を見ることができる
  • テストモードでは、ユーザーが盤面を見ながら、2択の中から正しい手を選ぶ

ChatGPTの回答は以下です。

ChatGPT
ChatGPT

プラットフォーム

  • 対応OS: iOS, Android
  • 言語対応: 日本語, 英語（デフォルトは英語）

機能要件

1. ホーム画面

  • メインメニュー:
    • オープニング選択
    • 学ぶモード
    • テストモード
    • 設定
    • ヘルプ

2. オープニング選択画面

  • 機能:
    • リスト表示: オープニング一覧（フィルター機能付き）
    • オープニング詳細: 名前、概要、評価（ユーザー評価）、難易度

3. 学ぶモード

  • インターフェース:
    • チェス盤: ユーザーが実際に駒を動かせるインタラクティブなチェス盤
    • 解説表示: 各手の解説をポップアップで表示
    • ナビゲーションボタン: 次の手、前の手、リスタート
  • 機能:
    • オープニング選択: 学びたいオープニングを選択
    • 手順ガイド: ユーザーが一手ずつ進めて学ぶ
    • 解説: 各手に対する詳細な解説

4. テストモード

  • インターフェース:
    • チェス盤: ユーザーが盤面を見て手を選択
    • 2択表示: 次の一手を選ぶ2つの選択肢を表示
  • 機能:
    • 問題生成: 選択したオープニングに基づいた問題を生成
    • 正誤判定: 選んだ手が正しいかどうかを即座に判定
    • スコア表示: テスト終了後のスコア表示

5. 設定画面

  • 機能:
    • 言語切替: 日本語/英語
    • 通知設定: 学習リマインダー
    • プロファイル設定: ユーザー情報の管理
ChatGPT
ChatGPT

技術要件

1. フロントエンド

  • フレームワーク: React Native
  • UIライブラリ: React Native Paper, React Navigation
  • 国際化: i18next

2. バックエンド

  • サーバー: Node.js + Express
  • データベース: MongoDB
  • API: RESTful API

3. チェスエンジン

  • ライブラリ: Chess.js（ゲームロジック）
  • UIライブラリ: Chessboard.js（チェス盤表示）
ChatGPT
ChatGPT

ワイヤーフレーム

  1. ホーム画面
    • メインメニューアイコンとナビゲーションバー
  2. オープニング選択画面
    • フィルター機能付きのオープニングリスト
  3. 学ぶモード
    • インタラクティブチェス盤と解説表示エリア
  4. テストモード
    • チェス盤と2択表示エリア
  5. 設定画面
    • 言語切替スイッチと通知設定オプション

プロジェクト管理

タスク

  1. フロントエンド開発
    • UI設計
    • チェス盤のインタラクティブ機能実装
  2. バックエンド開発
    • API設計と実装
    • データベース設計
  3. テスト
    • ユニットテスト
    • 統合テスト
    • ユーザーテスト

タイムライン

  • フェーズ1: ワイヤーフレームとプロトタイプの作成（2週間）
  • フェーズ2: フロントエンドおよびバックエンドの実装（4週間）
  • フェーズ3: テストとデバッグ（2週間）
  • フェーズ4: リリースとフィードバック収集（2週間）

ユーザーストリーマップを作る

ChatGPTの回答を元に、ユーザーの行動を時系列に、優先順位順に配置した「ユーザーストリーマップ」を作成します。

ユーザーストリーマップを作ることで、アプリの全体像がわかります。

またユーザーストリーマップは初期のリリースでどの機能まで作成するかの判断に用います。

きたたく
きたたく

あなたはプロのアプリエンジニアです。
上記の設計を元に、ユーザーストリーマップを作成してください。

ChatGPT
ChatGPT

1. ユーザーがアプリを起動

  • スタート: アプリのアイコンをタップして起動
  • 次へ: ホーム画面へ遷移

2. ホーム画面

  • ユーザーアクション: メインメニューから選択
    • オープニング選択: オープニングのリストが表示される画面に遷移
    • 学ぶモード: 選択したオープニングを学ぶモードへ遷移
    • テストモード: テストモード画面に遷移
    • 設定: 設定画面へ遷移

3. オープニング選択画面

  • ユーザーアクション: 学びたいオープニングをタップ
    • 次へ: 学ぶモード画面へ遷移

4. 学ぶモード

  • ユーザーアクション: オープニングの手順を一手ずつ進める
    • アクション: 次の手をタップ、解説を確認
    • 次へ: 各手の解説を表示し、全手順を完了
    • 戻る: ホーム画面またはオープニング選択画面に戻る

5. テストモード

  • ユーザーアクション: 2択問題に回答
    • アクション: 正しい手を選択
    • 次へ: 次の問題に進む
    • スコア表示: テスト終了後、結果とスコアを表示
    • 戻る: ホーム画面またはオープニング選択画面に戻る

6. 設定画面

  • ユーザーアクション: 各設定項目を調整
    • 言語設定: 日本語/英語の切り替え
    • 通知設定: 学習リマインダーのオン/オフ
    • プロフィール設定: ユーザー情報の管理
    • 戻る: ホーム画面に戻る

今回のユーザーストリーマップは、チェスのオープニング学習アプリとして最低限の機能になっているため、このすべての機能を実装することを目標とします。

技術選定

アプリを開発するための技術選定を行います。

ChatGPTの提案は以下でした。

ChatGPT
ChatGPT

技術要件

1. フロントエンド

  • フレームワーク: React Native
  • UIライブラリ: React Native Paper, React Navigation
  • 国際化: i18next

2. バックエンド

  • サーバー: Node.js + Express
  • データベース: MongoDB
  • API: RESTful API

3. チェスエンジン

  • ライブラリ: Chess.js（ゲームロジック）
  • UIライブラリ: Chessboard.js（チェス盤表示）

この提案では、アプリのフロントエンド（ユーザーが直接触る部分）をReactというツールで作り、バックエンド（裏側でデータを処理する部分）をNode.jsというツールで作ることを提案しています。

Reactは、ユーザーインターフェースを構築するためのJavaScriptのライブラリであり、ウェブアプリケーションの見た目や操作感を改善するのに役立ちます。

一方、Node.jsは、JavaScriptでサーバーサイドのプログラムを書くためのプラットフォームであり、ウェブサーバーやデータベースとのやり取りなどを担当します。

この提案では、JavaScriptを使って、アプリ全体を開発することで、開発プロセスを効率化し、スムーズに動作するアプリを作成することができると考えられています。

Webサービスを作るのであれば、この技術選定で問題ありません。

今回はオンライン対戦要素も無いバックエンドが不要なアプリのため、ゲームエンジンのUnityでサクッと作ってしまいましょう。

こちらでアプリの設計は完了です。

まとめ

ChatGPTで爆速でアプリ設計を実施する方法を解説しました。

ABOUT ME
きたたく
きたたく
学習工学博士
自由に生きる人を増やしたい大学教員・経営者。
生成AIで経済的自由を達成するための知識を発信中。
元不登校から飛び級で博士号(工学)を取得した連続起業家。
プログラミングを通じて「U-22 プログラミングコンテスト CSAJ 会長賞」「IoT Challenge Award 総務大臣賞」「人工知能学会研究会 優秀賞」など40件を超える賞を受賞。
スマホアプリ会社を創業(売却)し、プログラミングスクールの会社を創業(20店舗経営)

著書：知識ゼロからのプログラミング学習術(秀和システム) 他多数
Recommend
こちらの記事もどうぞ
記事URLをコピーしました