概要

この記事では、AI（ChatGPT）を用いて占いアプリの要件定義書を作成し、ノーコードツール「Rork」を使ってアプリ開発を行うプロセスを詳述します。以下の内容を含みます。

• AIを活用した具体的な要件定義の方法
• ノーコードツール「Rork」を使用した基本的なアプリ開発の流れ
• AIとノーコードを融合させた迅速なプロトタイピングの可能性

はじめに

「面白いアプリのアイデアを思いついたけど、開発する時間もスキルもない…」と感じたことはありませんか？

AIとノーコードツールを組み合わせれば、誰でも迅速にアイデアを形にできるかもしれません。この記事を通じて、実際にアプリ開発を行う過程をレポートします。

完成イメージと使用ツール

今回は、名前と生年月日を入力すると、その日の運勢を表示するシンプルなモバイルアプリを開発しました。使用したツールはChatGPTとRorkです。

STEP1: 要件定義書の作成

アプリ開発の最初のステップは、どのようなアプリを作るかを具体的に定める「要件定義」です。今回はこの工程をChatGPTに任せてみます。

プロンプトの工夫が鍵

ChatGPTから精度の高い回答を得るには、具体的で分かりやすい指示（プロンプト）を与えることが重要です。

補足となりますが、今回React Nativeを想定しているのは、Rorkから出力される言語がReact Nativeであるためです。

#命令書:
あなたは優秀なモバイルエンジニアです。
以下の制約条件と入力文をもとに、最高の「要件定義書」を出力してください。

#制約条件:
・モバイルを対象とする
・ユーザーが楽しめる、シンプルな占いアプリを想定する
・必要な画面や機能を網羅的にリストアップする
・各機能について、具体的な動作を記述する
・React Nativeで想定する

#入力文:
名前と生年月日を入力すると、その日の運勢が占えるモバイルアプリ

#出力文:

ChatGPTによる要件定義書

上記のプロンプトを実行した結果、ChatGPTは以下のような要件定義書を生成しました。

# 要件定義書：シンプル占いアプリ（React Native）

---

## 1. 概要

本アプリは、ユーザーが「名前」と「生年月日」を入力することで、その日の運勢を簡単に占えるモバイルアプリです。React Nativeを用いて開発し、iOS・Androidの両プラットフォームで動作します。

---

## 2. 目的

ユーザーが毎日気軽にその日の運勢をチェックし、楽しむことができる体験を提供する。アプリはシンプルで直感的に操作できる設計とし、占いの内容にちょっとしたエンタメ要素を加え、ユーザーの継続利用を促進する。

---

## 3. 対象プラットフォーム

* iOS（iOS 13以降）
* Android（Android 8.0以降）

---

## 4. 使用技術

* フレームワーク：React Native（Expoを使用）
* 言語：TypeScript（推奨） / JavaScript
* 状態管理：Redux または React Context
* データ保存：AsyncStorage（ローカル保存）

---

## 5. 機能一覧と画面設計

### 5.1 起動画面（Splash Screen）

* **目的**：アプリ起動時の初期画面表示
* **動作**：

  * アプリ起動時にロゴとアニメーションを数秒表示
  * 初回起動時はプロフィール入力画面へ遷移
  * 2回目以降は自動でホーム画面へ遷移

---

### 5.2 プロフィール入力画面

* **目的**：占いに必要な情報を入力する

* **UI項目**：

  * 名前（テキスト入力）
  * 生年月日（DatePicker）
  * 「保存して占い開始」ボタン

* **動作**：

  * 名前と生年月日をローカルに保存（AsyncStorage）
  * 入力後、ホーム画面へ遷移

---

### 5.3 ホーム画面（占い結果）

* **目的**：その日の占い結果を表示

* **UI項目**：

  * 今日の日付
  * 占い結果の見出し（例：「総合運：★★★☆☆」）
  * 各カテゴリ（総合運・恋愛運・仕事運・金運など）
  * ラッキーカラー、ラッキーアイテムの表示
  * 「もう一度占う」ボタン（その日の再占い不可）
  * 「プロフィール変更」ボタン

* **動作**：

  * アプリを開いた当日初回のみ占い結果を生成
  * 占いロジックは生年月日＋日付のシード値で毎日ユニークに生成
  * 占い結果はローカルに保存され、その日中は同じ結果を表示

---

### 5.4 設定・プロフィール編集画面

* **目的**：登録情報の編集

* **UI項目**：

  * 現在の名前と生年月日表示
  * 編集可能なフォーム
  * 「保存」ボタン

* **動作**：

  * 入力後、情報を更新してホーム画面へ戻る
  * 保存内容はAsyncStorageに反映

---

### 5.5 お知らせ／ヘルプ画面（任意）

* **目的**：アプリの使い方説明、開発者情報などを掲載
* **UI項目**：

  * FAQ、利用規約、プライバシーポリシー
  * バージョン情報

---

## 6. 占いロジック（基本設計）

* **入力**：

  * ユーザーの生年月日
  * 当日の日付（yyyy-mm-dd）

* **処理**：

  * 生年月日と日付を組み合わせてシード値を生成
  * シードに基づいて、ランダムな運勢（★1〜5）を各カテゴリに割り当て
  * ラッキーカラー、ラッキーアイテムをプリセットリストから抽出

* **出力**：

  * 総合運、恋愛運、仕事運、金運（★評価）
  * 一言アドバイス
  * ラッキーカラー
  * ラッキーアイテム

---

## 7. 非機能要件

* **レスポンシブデザイン**：各種スマートフォンサイズに対応
* **オフライン対応**：占いロジックはローカルで完結。ネットワーク不要
* **起動時間**：1秒以内
* **アクセシビリティ**：色覚に配慮したカラーパターン選択（将来的な拡張）

---

## 8. 今後の拡張候補（オプション）

* 毎日の通知リマインダー機能（Push通知）
* ソーシャル共有機能（LINE/Twitterなど）
* 占い履歴の閲覧機能
* UIカスタマイズ（テーマ・フォント変更）

---

## 9. モックアップ（画面構成例）

```
1. SplashScreen
     └→ ProfileInputScreen（初回のみ）
         └→ HomeScreen
             └→ SettingsScreen
```

---

## 10. まとめ

この占いアプリは、React Nativeを活用してクロスプラットフォームで実装可能な、軽量かつ直感的なユーザー体験を提供することを目的としています。名前と生年月日の入力というシンプルな導線で、占いの結果を毎日手軽に楽しめる設計です。将来的な機能追加にも柔軟に対応できる構造とします。

---

以上。

このように、AIを使うことで、開発の骨子となる要件定義がわずか数分で完成しました。人間が書くと抜け漏れがちな項目も、網羅的にリストアップしてくれる点が非常に有用です。

STEP2: Rorkでアプリを開発する

次に、作成した要件定義書に従って、ノーコードツール「Rork」でアプリを組み立てていきます。

ここでは、実際に指示を出してどんな感じで生成されるかを記載していきます。

最初の出力でエラーになりました！

なのでFix allで解決してもらいます！！

エラーは解決されたみたいですが、表記が英語になっているため日本語に実装の指示出します！

いい感じのデザインですが、生年月日を選択する欄がないので実装の指示出します！

いい感じになりました！生年月日は選択するとピッカーが表示されて選択できるようになりました。

一番重要な占い画面はこんな感じでした！

あれ？要件定義書にあったもう一度占うボタンがないぞ。。。

設定画面はこんな感じになっていました！設計書通り！

感想とまとめ

今回の体験を通じて、AIとノーコードツールを使ったアプリ開発にはいくつかの気づきがありました。

まず、うまくいかなかった点としては、作成した要件定義書に沿ってRorkにアプリを生成させた際、一部の機能が反映されていないなど、実装に漏れがあったことです。

必ずしも要件通りに動作するとは限らず、細かい部分まで意図を正しく伝えるためには、英語での記述やこまめな指示の出し直しなど、ある程度の試行錯誤が必要だと感じました。

一方で、Rorkが自動生成してくれたUIのデザインや配色、テキストの大きさといった見た目の部分はかなり完成度が高く、そのままではなくても部分的に取り入れて自分のプロジェクトに活かす、という使い方ができそうです。

特に個人開発においては、ゼロからすべて構築するよりも、このようなツールを活用することで、開発スピードと柔軟性の面で大きなメリットがあると実感しました。

今後も、ちょっとしたアイデアをすぐに形にする手段として、AIとノーコードツールの組み合わせを活かしていきたいと思います。