youware実例10選｜コピペで動くプロンプト付きチュートリアル

実例1：戦略的ToDoリスト

概要：基本中の基本。タスク管理アプリです。youwareのデータベース、UI生成、基本的なCRUD（作成・読込・更新・削除）操作を学びます。

# 概要
個人のタスクを管理するためのアプリケーション。

# データベース設計
– `tasks`テーブル
– `title` (テキスト型, 必須)
– `due_date` (日付型)
– `status` (選択式, “未着手”, “進行中”, “完了”, デフォルト:”未着手”)
– `priority` (選択式, “高”, “中”, “低”, デフォルト:”中”)

# 機能要件
1. タスク一覧表示：全タスクをテーブル形式で表示。優先度「高」のタスクは背景を赤くする。
2. タスク追加機能：モーダルウィンドウで新しいタスクを登録。
3. タスク編集機能：一覧のタスクをクリックすると編集可能にする。
4. タスク削除機能：各タスクに削除ボタンを設置。
5. 絞り込み機能：「完了」ステータスのタスクを非表示にするチェックボックスを設置。

# デザイン要件
– 全体的にミニマルでクリーンなデザイン。テーマカラーはネイビーブルー。

解説：このプロンプトは、データベースの型指定、条件付き書式（背景色）、基本的なフィルタリング機能など、多くのWebアプリで共通して使われる要素を網羅しています。まずはここから始めるのが最適です。

実例2：パーソナル・ポートフォリオサイト

概要：自身のスキルや実績を公開するポートフォリオサイト。静的なページと、動的な実績管理機能を組み合わせます。

# 概要
開発者向けのパーソナル・ポートフォリオサイト。

# データベース設計
– `projects`テーブル
– `title` (テキスト型, 必須)
– `description` (長文テキスト型)
– `image_url` (テキスト型, 画像URL)
– `project_url` (テキスト型, 制作物URL)
– `tags` (テキスト配列型, 例: “React”, “AI”, “youware”)

# 機能要件
1. トップページ：自己紹介、スキルセット、主要な実績3件を表示。
2. 実績一覧ページ：全実績をカード形式で表示。タグによる絞り込み機能を実装。
3. 実績管理機能（管理者のみ）：実績の追加・編集・削除ができる専用ページを作成。パスワードで保護する。
4. お問い合わせフォーム：名前、メールアドレス、メッセージを入力し、管理者にメール通知する機能。

# デザイン要件
– ダークモードを基調としたモダンなデザイン。アクセントカラーはエメラルドグリーン。

解説：管理者専用機能とユーザー向け機能を分離する、基本的なアクセス制御の考え方を学びます。

実例3：社内備品管理システム

概要：複数ユーザーで利用する業務アプリケーション。QRコードを使ったユニークな機能を実装します。

# 概要
オフィスの備品を管理するシステム。誰が何を使っているかを明確にする。

# データベース設計
– `items`テーブル: `name`, `category`, `status`(“在庫”, “使用中”), `current_user_id`
– `users`テーブル: `name`, `email`

# 機能要件
1. ユーザー認証機能：GoogleアカウントによるSSO（シングルサインオン）でログイン。
2. 備品一覧表示：全備品を一覧表示。現在使用中の場合は、使用者名も表示。
3. 貸出/返却機能：
– 備品詳細ページに「借りる」「返す」ボタンを設置。
– 「借りる」を押すと、ステータスが「使用中」になり、使用者IDが記録される。
4. QRコード連携：各備品にユニークなIDを割り振り、そのIDを含むURLのQRコードを生成する機能。スマホで読み取ると、その備品の詳細ページに直接アクセスできる。

# デザイン要件
– 機能性を重視したシンプルなテーブルベースのデザイン。

解説：ユーザー認証、テーブル間のリレーション（関連付け）、そしてQRコード生成という実用的な機能を組み合わせることで、業務改善に直結するツールが作成可能であることを示します。

実例4：シンプルブログ・CMS

概要：Markdownで記事が書けるブログシステム。コンテンツ管理システム（CMS）の基本を学びます。

# 概要
Markdown対応の個人ブログプラットフォーム。

# データベース設計
– `posts`テーブル: `title`, `content` (Markdown形式), `status`(“公開”, “下書き”), `published_at` (日付型)

# 機能要件
1. 記事一覧ページ：公開中の記事を新しい順に一覧表示。
2. 記事詳細ページ：Markdownで記述された本文をHTMLとして正しくレンダリングして表示。
3. 管理者向け機能：
– 記事の新規作成、編集、削除。
– 編集画面にはリアルタイムプレビュー付きのMarkdownエディタを実装。
– 「公開」「下書き」のステータスを切り替えられる。

# デザイン要件
– 可読性を最優先した、白ベースのクリーンなデザイン。

解説：Markdownのレンダリングという、テキストベースのコンテンツを扱う上で重要な機能を学びます。youwareは標準でMarkdown表示に対応しているため、容易に実装できます。

実例5：テキストアドベンチャーゲーム

概要：youwareのロジック機能を使って、簡単なゲームを作成します。状態管理の考え方を学びます。

# 概要
選択肢によって物語が分岐するテキストアドベンチャーゲーム。

# データベース設計
– `scenes`テーブル: `id` (数値, シーン番号), `text` (長文テキスト, 状況説明), `choices` (JSON型, 例: [{“text”: “右へ進む”, “next_scene_id”: 2}])
– `player_state`テーブル: `current_scene_id`, `inventory` (テキスト配列型, 所持品)

# 機能要件
1. ゲーム画面：現在のシーンのテキストと、選択肢ボタンを表示。
2. 選択肢クリック処理：
– 選択肢ボタンをクリックすると、`player_state`の`current_scene_id`が、その選択肢の`next_scene_id`に更新される。
– 画面が再描画され、新しいシーンのテキストと選択肢が表示される。
3. アイテム取得処理：特定のシーンで、`inventory`にアイテムを追加するロジックを実装。

# デザイン要件
– レトロなコンピューター端末のような、黒背景に緑文字のデザイン。

解説：一見複雑に見えますが、やっていることは「現在の状態（シーンID）に応じて表示を変え、ユーザーのアクションで状態を更新する」という、多くのアプリに応用可能な基本ロジックです。

実例6：AIチャットボット（GPT-4連携）

概要：youwareのキラー機能「MCP」を使って、外部のAIモデル（GPT-4）を組み込んだチャットボトを作成します。

# 概要
GPT-4と会話できるAIチャットインターフェース。

# 機能要件
1. UI：チャット形式の画面。ユーザーがメッセージを入力するテキストボックスと送信ボタンを配置。過去の会話履歴を表示するエリアも必要。
2. 送信処理：
– ユーザーがメッセージを送信すると、youwareのMCP機能を使ってOpenAIのGPT-4 APIを呼び出す。
– APIに渡すプロンプトには、過去の会話履歴をコンテキストとして含める。
– APIからの応答を受け取り、チャット履歴に追加して画面を更新する。
3. ストリーミング表示：AIの応答を、タイプライターのように一文字ずつ表示する演出を実装。

# ペルソナ
あなたは親しみやすい対話アシスタントです。

# デザイン要件
– LINEやMessengerのような、馴染みのあるチャットアプリ風のデザイン。

解説：youwareの真価を発揮するMCPの活用例です。APIキーを設定し、MCPのブロックを繋ぐだけで、高度なAI機能を自作アプリに統合できます。プロンプト一つでAIのキャラクター付けも可能です。

実例7：Webサイトクローラー＆通知

概要：指定したWebサイトを定期的に巡回し、特定のキーワードが出現したら通知するツール。バックグラウンド処理を学びます。

# 概要
競合サイトの価格更新や、特定のブログの更新を監視するクローラー。

# データベース設計
– `targets`テーブル: `url`, `keyword`, `last_checked_at`
– `notifications`テーブル: `target_url`, `found_keyword`, `created_at`

# 機能要件
1. 監視ターゲット登録機能：監視したいURLとキーワードを登録できる。
2. 定期実行クローリング機能：
– 1時間ごとに、登録された全ターゲットを巡回するバックグラウンド処理を実装。
– youwareのWebスクレイピング機能で対象URLのHTMLを取得。
– HTML内にキーワードが存在するかチェック。
3. 通知機能：
– キーワードが発見された場合、`notifications`テーブルに記録。
– 同時に、指定したメールアドレスに「キーワードを発見しました」という通知メールを送信する。

# デザイン要件
– 監視リストと通知履歴が確認できる、シンプルなダッシュボード形式。

解説：youwareの高度な機能である「バックグラウンドタスク」と「Webスクレイピング」を組み合わせた実用的なツール。手作業の定点観測を自動化できます。

実例8：YouTube動画 要約ジェネレーター

概要：YouTubeのURLを入力すると、動画の文字起こしを取得し、AIが要約を生成するツール。

# 概要
長時間の動画の内容を短時間で把握するための、AI要約ツール。

# 機能要件
1. 入力フォーム：YouTube動画のURLを入力するテキストボックスを設置。
2. 処理実行：
– 「要約を生成」ボタンを押すと、youwareのMCP機能（YouTube Transcript API）を使って動画の文字起こしデータを取得する。
– 取得した文字起こし全文を、別のMCP機能（GPT-4 API）に渡す。
– GPT-4へのプロンプトは「以下の文章を、重要なポイント3つにまとめてください。」とする。
3. 結果表示：GPT-4が生成した要約文を、画面に分かりやすく表示する。

# デザイン要件
– 入力、処理中、結果表示の3つのステップが分かりやすい、ウィザード形式のUI。

解説：複数のMCP（外部API）を連携させる、より高度なAIアプリケーションの例です。インプット（文字起こし）→プロセス（AI要約）→アウトプット（結果表示）という一連の流れを視覚的に構築できます。

実例9：有料コンテンツ販売サイト

概要：Stripeと連携し、記事や動画などのデジタルコンテンツを販売するサイト。決済機能の実装を学びます。

# 概要
noteやGumroadのような、デジタルコンテンツ販売プラットフォーム。

# データベース設計
– `products`テーブル: `title`, `description`, `price`, `file_url` (購入者のみアクセス可)
– `purchases`テーブル: `user_id`, `product_id`, `stripe_charge_id`

# 機能要件
1. 商品一覧/詳細ページ：販売するコンテンツの一覧と詳細を表示。
2. 決済機能：
– 「購入する」ボタンを押すと、youwareのStripe連携機能が起動。
– Stripeが提供する安全な決済ページに遷移し、カード情報を入力。
– 決済が成功すると、`purchases`テーブルに購入記録が作成される。
3. コンテンツ閲覧機能：購入済みのユーザーのみ、`file_url`にアクセスしてコンテンツをダウンロードまたは閲覧できる。

# デザイン要件
– 信頼感が重要なため、クリーンでプロフェッショナルなデザイン。

解説：ノーコードで収益化を目指す上で欠かせない、決済機能の実装例です。youwareはStripeと標準で連携しており、複雑な決済処理を安全に実装できます。

実例10：リアルタイム投票アプリ

概要：イベントやライブ配信で使える、リアルタイムで投票結果がグラフに反映されるアプリ。WebSocket通信の基礎を学びます。

# 概要
セミナーやイベントで、参加者の意見をリアルタイムに集計・可視化する投票アプリ。

# データベース設計
– `polls`テーブル: `question`, `options` (JSON型, 例: {“A”: 10, “B”: 25})

# 機能要件
1. 投票者画面：質問と選択肢ボタンを表示。ボタンを押すと、対応する選択肢のカウントが1増える。
2. 管理者/スクリーン画面：
– 投票結果をリアルタイムで棒グラフに反映して表示する。
– データベースの`options`が更新されると、自動的にグラフが再描画されるように、リアルタイム通信機能を有効にする。
3. 投票リセット機能（管理者のみ）：投票数をゼロにリセットするボタンを設置。

# デザイン要件
– 大画面での表示を想定し、文字やグラフが大きく見やすいデザイン。

解説：youwareのリアルタイムデータベース機能の活用例です。この機能を有効にすると、誰かがデータを更新した際に、ページをリロードすることなく、他の全ユーザーの画面が自動的に更新されます。