AIツールで1からWebサービスを作る本企画の第一弾では、生成AIを使って作りたいWebサービスに必要な環境やツール、技術などを選定してもらいます。
また、本企画の第一弾については作りたいWebサービスの条件を整理するために、生成AIとのチャット中心の内容になります。では本題に入りましょう。
AIに作りたいWebサービスを伝えて条件を洗い出してもらう
まずはChatGPTやClaude、Geminiといったテキスト生成に優れている生成AIを活用し、自分が作りたいWebサービスの内容を伝えます。
・トップ画面のUIは日本地図が中心にあり、その周辺を地方名で表示し、その中に都道府県が表示されている。任意の都道府県をクリックすると各画面が表示される。
・類似サービスにジモティーなどがあるが、お互い仕事仲間や勉強仲間を探すことがコンセプト。セミナーや一緒にカラオケ行きませんかみたいな募集は無し。
・ログイン機能が必要で、ユーザー同士一緒に勉強会や仕事などをしたら評価を付けられる。
一旦ここまでとして、このサービスを作るのに必要な要件や機能を洗い出してください。
このサービスの要件や機能を洗い出すために、以下の項目に分けて整理します。基本的な構成から細かい機能まで、順を追って洗い出し、開発に必要な要素を特定します。
1. トップ画面とインタラクション- 日本地図表示:
- 日本地図を表示し、地域ごとに地方名(例えば、北海道、東北、関東など)を表示。
- 地方名をクリックすると、その地方に含まれる都道府県が表示され、ユーザーが選択できる。
- 都道府県選択後、該当エリアに関する画面が表示され、詳細情報が閲覧可能になる。
- 地図がインタラクティブでズームイン/ズームアウト可能。
- ユーザーアカウント作成:
- メールアドレス、SNSアカウント(Google, Facebook, Twitterなど)での登録。
- パスワード設定、ユーザー名、プロフィールの入力(スキル、興味、自己紹介など)。
- ユーザー登録時に都道府県選択、自己紹介を入力してもらう。
- ログイン機能:
- メールアドレス・パスワード、SNSアカウントでのログイン。
- ログイン後のダッシュボード(プロフィール表示、通知機能など)。
- 地域/スキルによる検索:
- 地域(都道府県や地方)を選択して検索。
- ユーザーが自分のスキルや興味に基づいてマッチングできる。
- スキルタグを設定して、それを基にした検索機能(例:「ウェブ開発」「デザイン」「マーケティング」など)。
- プロフィール検索:
- ユーザー同士が他のユーザーを検索して、プロフィール(スキル・過去の活動・レビューなど)を見ることができる。
- ユーザー評価:
- ユーザー同士が仕事や勉強の共同作業後に相互評価を行う。
- 評価は星(1〜5つ星)やコメントで行う。
- 良い評価をもらったユーザーは「評価スコア」が高くなる。
- レビューシステム:
- ユーザーがレビューを書くことができ、他のユーザーがそのレビューを閲覧可能。
- 個別チャット:
- ユーザー同士が直接メッセージを送ることができる。
- メッセージ履歴が保存され、簡単に過去のやり取りを確認できる。
- 通知機能:
- メッセージの受信や評価、マッチングに関する通知。
- 活動履歴の管理:
- 共同作業や勉強会の履歴(参加したユーザー、評価など)を管理。
- ユーザーが参加した活動(勉強会や仕事の共同作業)を記録として残す。
- 管理者用ダッシュボード:
- ユーザー管理(不適切なコンテンツの報告、削除機能など)。
- 不正行為の監視(悪質なユーザーやスパムの取り締まり)。
- 認証システム:
- 二段階認証(2FA)などのセキュリティ強化。
- データ保護:
- ユーザーの個人情報(名前、メールアドレス、活動履歴など)の保護。
- ユーザーが設定できるプライバシー設定(公開/非公開のプロフィール、連絡先情報の公開範囲など)。
- レスポンシブデザイン:
- スマホやタブレットでも利用しやすいデザイン。
- インタラクティブな地図:
- 地図上での都道府県選択を直感的に操作可能。
- ダッシュボードの使いやすさ:
- ユーザーが自分のプロフィールや評価を簡単に確認できる。
- フロントエンド:
- インタラクティブな地図の表示(例えば、LeafletやMapboxを利用)。
- ユーザーインターフェースはReact、Vue.js、またはAngularなどを使用。
- バックエンド:
- ユーザー認証、データ保存のためのサーバーサイド(Node.js, Ruby on Rails, Djangoなど)。
- データベース(MySQL, PostgreSQLなど)でユーザー情報や評価、活動履歴を管理。
- ホスティングとデプロイメント:
- クラウドサービス(AWS, Azure, GCPなど)を利用してスケーラブルなインフラを構築。
候補のプログラミング言語やサーバーなど、必要な機能の候補が表示されました。いったんこれらの条件を基盤とし、必要な機能が出てきた場合は適時追加するようにします。
利用する開発技術を選定する
Webサービスを作る上で基盤となるのが、利用するフロントエンドとバックエンド、サーバーになります。まずはこれらを決めるためにAIと相談してみましょう。
・ページの表示スピードを重視したい。
・トップページの地図に特別な機能はいらないので、画像の対応でいいかも。
・随時追加したい機能が出てくるかもなので、機能の追加に柔軟な言語やフレームワークを使えるプログラミング言語がいいかも。
・サーバーは費用の制限をかけやすかったり、管理しやすいのが望ましい。
これでお願いします。
- ・推奨技術: Next.js (Reactベース)
- ・理由: サーバーサイドレンダリング(SSR)と静的サイト生成(SSG)を活用できるため、ページ表示スピードが高速。
- ・理由: トップページの地図を画像で対応する場合も、画像の読み込み最適化(Image Optimization)が可能。
- ・理由: Reactベースで、機能追加や再利用可能なコンポーネント設計に強い。
- ・理由: 大規模から小規模プロジェクトまで柔軟に対応できる。
- ・代替技術: SvelteKit
- ・理由: 軽量で非常に高速なフロントエンド。
- ・理由: 学習コストがReactに比べて低めで、シンプルな設計が可能。
- ・理由: 将来性もあり、Reactよりもさらに軽い仕上がりに。
- ・推奨技術: Node.js(Express.jsまたはNestJS)
- ・理由: JavaScriptでフロントエンドと統一でき、開発効率が良い。
- ・理由: 豊富なライブラリで柔軟に機能追加が可能。
- ・理由: Express.jsは軽量で、シンプルなAPI構築に適している。
- ・理由: NestJSは、規模が大きくなる場合に整理された構造で柔軟に対応できる。
- ・代替技術: Django(Python)
- ・理由: 管理画面が標準搭載されており、サーバー管理やデータベース操作がしやすい。
- ・理由: 豊富なライブラリとシンプルな設計。
- ・理由: 開発効率が高く、機能追加が容易。
- ・推奨技術: PostgreSQL
- ・理由: 高速で信頼性が高いリレーショナルデータベース。
- ・理由: JSONデータもサポートしており、柔軟なデータ構造に対応可能。
- ・理由: スケーラブルで、大規模プロジェクトでも活用可能。
- ・代替技術: MySQL
- ・理由: PostgreSQLよりも軽量で、シンプルな運用に向いている。
- ・理由: 小規模なプロジェクトでコストを抑えたい場合に適している。
- ・推奨技術: Vercel(フロントエンド) + AWS(バックエンド)
- ・理由: VercelはNext.jsと親和性が高く、デプロイが非常に簡単。CDNも自動で提供されるため、表示速度が高速。
- ・理由: AWSは費用を柔軟にコントロールしやすく、小規模から大規模までスケーラブル。
- ・代替技術: Render(フルスタック対応)
- ・理由: フロントエンド・バックエンドの両方を一元管理でき、手軽に運用可能。
- ・理由: 無料プランが充実しており、初期コストを抑えられる。
- ・フロントエンド: Next.js
- ・バックエンド: Node.js(Express.jsまたはNestJS)
- ・データベース: PostgreSQL
- ・ホスティング: Vercel(フロントエンド) + AWS(バックエンド)
- ・表示スピード: Next.jsとVercelの組み合わせで、表示スピードを最大限に引き出す。
- ・地図画像対応: Next.jsの画像最適化機能を活用。
- ・機能追加の柔軟性: Node.jsやExpress.jsでJavaScriptベースの柔軟な開発。
- ・コスト管理: Vercelの無料枠やAWSのオンデマンドプランで運用コストを抑える。
さらに要件を絞ったこともあり、一定のプログラミング言語とデータベース、サーバーに落ち着きましたね。筆者はサーバー知識に乏しいので、VercelとAWSが鬼門になりそうです。
最後にこれまでのやり取りでおおよそ決まった要件内容や利用する技術について、AIにまとめてもらいます。
上記の質問によるAIの回答を参考に、AIツール「Gamma」でプレゼンを作っていきます。
AIツール「Gamma」でわかりやすいプレゼンテーション資料を作る
GammaとはAIを活用し、プレゼンテーション資料を自動作成できるツールです。ユーザーが短い説明やキーワードを入力すると、瞬時に洗練されたデザインのスライドが生成されます。
Gammaの詳しい使い方は下記の記事で詳しく解説しています。
今回はGammaを使い、ChatGPT-4oで整理してもらったテキスト情報をプレゼンテーションにしてもらいます。
まずはGammaを開き、メイン画面から「Create New」ボタンをクリックし、表示内容から「Paste in Text」を選択してください。
Gammaより
すると上記のように、プレゼンテーションで使いたいテキスト情報の入力画面が表示されます。こちらにChatGPT-4oで生成したまとめのテキストを入力してください。
Gammaより
プレゼンテーションにおける言葉の表現や、画像を挿入する画面が表示されます。任意の内容に変更して「Continue」ボタンをクリックします。
Gammaより
デザインの色調を編集して「Generate」をクリックして下さい。
Gammaより
上記のプレゼンテーションが生成されました。見ての通り笑っちゃうくらい高精度のプレゼンテーションを作成できるのです。上記の画像は途中までなので、全ての内容を見たい方は下記のURLから確認してみて下さい。
https://gamma.app/docs/Web-dgi9yxdm8hlc1ma
このようにテキストだけでなく、デザインに落とし込むとより分かりやすくなりますね。今回はここまでとし、次回は利用する技術を使うための開発環境づくりを始めていきます。