【冬休み企画】AIツールで1からWebサービスを作ってみる【第一弾】

【冬休み企画】AIツールで1からWebサービスを作ってみる【第一弾】

公開: 更新:
だーだい
フリーランスWebライター兼Web製作者。Webライターとしてガジェットメディアやプログラミングに関する記事を執筆する傍ら、LP制作とWordPressの改修案件もこなしつつ、活動しています。 profile

AIツールで1からWebサービスを作る本企画の第一弾では、生成AIを使って作りたいWebサービスに必要な環境やツール、技術などを選定してもらいます。

また、本企画の第一弾については作りたいWebサービスの条件を整理するために、生成AIとのチャット中心の内容になります。
だーだい
色々聞くからよろしくね!
ChatGPT
お任せください。

では本題に入りましょう。


目次

    Python基礎・実践(Django)

    企業・法人向けのPython研修では、基礎から応用まで体系的に学べます。

    Python研修の詳細

    DX社員研修

    企業・法人向けのDX研修では、実務に繋がるリスキリングでITレベルを向上させます。

    DX研修の詳細

    Javaエンジニア育成研修

    企業・法人向けのJavaエンジニア育成研修では、Javaの基礎から応用まで確実に習得できます。

    Java研修の詳細

    新卒・新入社員向け研修

    企業・法人に新入社員・新卒社員に向けたプログラミング研修を提供しています。

    新入社員研修の詳細

    コードキャンプのIT研修を全て見る

    AIに作りたいWebサービスを伝えて条件を洗い出してもらう

    まずはChatGPTやClaude、Geminiといったテキスト生成に優れている生成AIを活用し、自分が作りたいWebサービスの内容を伝えます。

    だーだい
    AIツールを駆使して、全国のフリーランスや日々勉強している人々が気軽につながれるサービスを作りたいです。 具体的な内容は下記のような感じです。
    ・トップ画面のUIは日本地図が中心にあり、その周辺を地方名で表示し、その中に都道府県が表示されている。任意の都道府県をクリックすると各画面が表示される。
    ・類似サービスにジモティーなどがあるが、お互い仕事仲間や勉強仲間を探すことがコンセプト。セミナーや一緒にカラオケ行きませんかみたいな募集は無し。
    ・ログイン機能が必要で、ユーザー同士一緒に勉強会や仕事などをしたら評価を付けられる。
    一旦ここまでとして、このサービスを作るのに必要な要件や機能を洗い出してください。
    ChatGPT-4o

    このサービスの要件や機能を洗い出すために、以下の項目に分けて整理します。基本的な構成から細かい機能まで、順を追って洗い出し、開発に必要な要素を特定します。

    1. トップ画面とインタラクション
    • 日本地図表示:
      • 日本地図を表示し、地域ごとに地方名(例えば、北海道、東北、関東など)を表示。
      • 地方名をクリックすると、その地方に含まれる都道府県が表示され、ユーザーが選択できる。
      • 都道府県選択後、該当エリアに関する画面が表示され、詳細情報が閲覧可能になる。
      • 地図がインタラクティブでズームイン/ズームアウト可能。
    2. ユーザー登録・ログイン機能
    • ユーザーアカウント作成:
      • メールアドレス、SNSアカウント(Google, Facebook, Twitterなど)での登録。
      • パスワード設定、ユーザー名、プロフィールの入力(スキル、興味、自己紹介など)。
      • ユーザー登録時に都道府県選択、自己紹介を入力してもらう。
    • ログイン機能:
      • メールアドレス・パスワード、SNSアカウントでのログイン。
      • ログイン後のダッシュボード(プロフィール表示、通知機能など)。
    3. ユーザー同士のマッチングと検索機能
    • 地域/スキルによる検索:
      • 地域(都道府県や地方)を選択して検索。
      • ユーザーが自分のスキルや興味に基づいてマッチングできる。
      • スキルタグを設定して、それを基にした検索機能(例:「ウェブ開発」「デザイン」「マーケティング」など)。
    • プロフィール検索:
      • ユーザー同士が他のユーザーを検索して、プロフィール(スキル・過去の活動・レビューなど)を見ることができる。
    4. 評価システム
    • ユーザー評価:
      • ユーザー同士が仕事や勉強の共同作業後に相互評価を行う。
      • 評価は星(1〜5つ星)やコメントで行う。
      • 良い評価をもらったユーザーは「評価スコア」が高くなる。
    • レビューシステム:
      • ユーザーがレビューを書くことができ、他のユーザーがそのレビューを閲覧可能。
    5. メッセージ機能
    • 個別チャット:
      • ユーザー同士が直接メッセージを送ることができる。
      • メッセージ履歴が保存され、簡単に過去のやり取りを確認できる。
    • 通知機能:
      • メッセージの受信や評価、マッチングに関する通知。
    6. プラットフォーム内での活動記録
    • 活動履歴の管理:
      • 共同作業や勉強会の履歴(参加したユーザー、評価など)を管理。
      • ユーザーが参加した活動(勉強会や仕事の共同作業)を記録として残す。
    7. 管理機能
    • 管理者用ダッシュボード:
      • ユーザー管理(不適切なコンテンツの報告、削除機能など)。
      • 不正行為の監視(悪質なユーザーやスパムの取り締まり)。
    8. セキュリティ・プライバシー
    • 認証システム:
      • 二段階認証(2FA)などのセキュリティ強化。
    • データ保護:
      • ユーザーの個人情報(名前、メールアドレス、活動履歴など)の保護。
      • ユーザーが設定できるプライバシー設定(公開/非公開のプロフィール、連絡先情報の公開範囲など)。
    9. ユーザーインターフェース(UI)とユーザーエクスペリエンス(UX)
    • レスポンシブデザイン:
      • スマホやタブレットでも利用しやすいデザイン。
    • インタラクティブな地図:
      • 地図上での都道府県選択を直感的に操作可能。
    • ダッシュボードの使いやすさ:
      • ユーザーが自分のプロフィールや評価を簡単に確認できる。
    10. 技術的要件

    候補のプログラミング言語やサーバーなど、必要な機能の候補が表示されました。いったんこれらの条件を基盤とし、必要な機能が出てきた場合は適時追加するようにします。

    利用する開発技術を選定する

    Webサービスを作る上で基盤となるのが、利用するフロントエンドバックエンド、サーバーになります。まずはこれらを決めるためにAIと相談してみましょう。

    だーだい
    フロントエンドやバックエンド、サーバーなど要件に最適な技術の候補を出してくれましたが、この中からさらに以下の条件を踏まえて最適な技術を絞ってください。
    ・ページの表示スピードを重視したい。
    ・トップページの地図に特別な機能はいらないので、画像の対応でいいかも。
    ・随時追加したい機能が出てくるかもなので、機能の追加に柔軟な言語やフレームワークを使えるプログラミング言語がいいかも。
    ・サーバーは費用の制限をかけやすかったり、管理しやすいのが望ましい。
    これでお願いします。
    ChatGPT-4o
    1. フロントエンド
    • ・推奨技術: Next.js (Reactベース)
      • ・理由: サーバーサイドレンダリング(SSR)と静的サイト生成(SSG)を活用できるため、ページ表示スピードが高速。
      • ・理由: トップページの地図を画像で対応する場合も、画像の読み込み最適化(Image Optimization)が可能。
      • ・理由: Reactベースで、機能追加や再利用可能なコンポーネント設計に強い。
      • ・理由: 大規模から小規模プロジェクトまで柔軟に対応できる。
    • ・代替技術: SvelteKit
      • ・理由: 軽量で非常に高速なフロントエンド。
      • ・理由: 学習コストがReactに比べて低めで、シンプルな設計が可能。
      • ・理由: 将来性もあり、Reactよりもさらに軽い仕上がりに。
    2. バックエンド
    • ・推奨技術: Node.js(Express.jsまたはNestJS)
      • ・理由: JavaScriptでフロントエンドと統一でき、開発効率が良い。
      • ・理由: 豊富なライブラリで柔軟に機能追加が可能。
      • ・理由: Express.jsは軽量で、シンプルなAPI構築に適している。
      • ・理由: NestJSは、規模が大きくなる場合に整理された構造で柔軟に対応できる。
    • ・代替技術: Django(Python)
      • ・理由: 管理画面が標準搭載されており、サーバー管理やデータベース操作がしやすい。
      • ・理由: 豊富なライブラリとシンプルな設計。
      • ・理由: 開発効率が高く、機能追加が容易。
    3. データベース
    • ・推奨技術: PostgreSQL
      • ・理由: 高速で信頼性が高いリレーショナルデータベース。
      • ・理由: JSONデータもサポートしており、柔軟なデータ構造に対応可能。
      • ・理由: スケーラブルで、大規模プロジェクトでも活用可能。
    • ・代替技術: MySQL
      • ・理由: PostgreSQLよりも軽量で、シンプルな運用に向いている。
      • ・理由: 小規模なプロジェクトでコストを抑えたい場合に適している。
    4. サーバー・ホスティング
    • ・推奨技術: 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にまとめてもらいます。

    だーだい
    私が作りたいWebサービスの要件や機能について理解できました。これらをまとめて第三者がわかりやすいように企画化してください。

    上記の質問によるAIの回答を参考に、AIツール「Gamma」でプレゼンを作っていきます。

    AIツール「Gamma」でわかりやすいプレゼンテーション資料を作る

    GammaとはAIを活用し、プレゼンテーション資料を自動作成できるツールです。ユーザーが短い説明やキーワードを入力すると、瞬時に洗練されたデザインのスライドが生成されます。

    Gammaの詳しい使い方は下記の記事で詳しく解説しています。

    AI搭載プレゼンツール「gamma(ガンマ)」の使い方や日本語、スライド作成などを解説
    AI搭載プレゼンツール「gamma(ガンマ)」の使い方や日本語、スライド作成などを解説

    今回はGammaを使い、ChatGPT-4oで整理してもらったテキスト情報をプレゼンテーションにしてもらいます。

    まずはGammaを開き、メイン画面から「Create New」ボタンをクリックし、表示内容から「Paste in Text」を選択してください。

    AIツール「Gamma」でわかりやすいプレゼン資料を作る

    Gammaより

    すると上記のように、プレゼンテーションで使いたいテキスト情報の入力画面が表示されます。こちらにChatGPT-4oで生成したまとめのテキストを入力してください。

    AIツール「Gamma」でわかりやすいプレゼン資料を作る

    Gammaより

    プレゼンテーションにおける言葉の表現や、画像を挿入する画面が表示されます。任意の内容に変更して「Continue」ボタンをクリックします。

    AIツール「Gamma」でわかりやすいプレゼン資料を作る

    Gammaより

    デザインの色調を編集して「Generate」をクリックして下さい。

    AIツール「Gamma」でわかりやすいプレゼン資料を作る

    Gammaより

    上記のプレゼンテーションが生成されました。見ての通り笑っちゃうくらい高精度のプレゼンテーションを作成できるのです。上記の画像は途中までなので、全ての内容を見たい方は下記のURLから確認してみて下さい。

    https://gamma.app/docs/Web-dgi9yxdm8hlc1ma

    このようにテキストだけでなく、デザインに落とし込むとより分かりやすくなりますね。今回はここまでとし、次回は利用する技術を使うための開発環境づくりを始めていきます。

    ※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

    ITやプログラミングに関するコラム


    ITやプログラミングに関するニュース

    ブログに戻る

    コメントを残す

    コメントは公開前に承認される必要があることにご注意ください。

    コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア 金融業界の業務効率化を加速するニッセイアセットマネジメントの生成AI×GAS活用研修事例 - IT・プログラミングを知って学べるコネクトメディア 【製造業のDX人材育成事例】デジタル人材の即戦力化を実現する、日本ガイシ株式会社の異動者向オンボーディング研修 - ITやプログラミングを知って学べるコネクトメディア フューチャーアーキテクト株式会社が実現した新入社員向けIT研修プログラムでタスクフォース制度が主体的な学びと成長を生み出す - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【IT新入社員研修】オンラインとオフラインの最適バランスを実現したFutureOneの導入事例 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【新入社員研修】柔軟なハイブリッド型Java研修で実現した新卒20名の成長と成果|サークレイス株式会社 - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修|株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩|株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア

    新着記事

    対象者別で探す

    子供(小学生・中学生・高校生)向け
    プログラミング教室検索する

    子供(小学生・中学生・高校生)がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

    子供(小学生・中学生・高校生)
    プログラミング教室検索する

    ITやプログラムなどの
    最新情報を検索する

    日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

    ITやプログラムなどの
    最新情報を検索する