未来へようこそ

Techbridgeで最初のアプリを作成しよう

今日、あなたはクリエイターになる 🚀

第1章

アプリとは？

アプリは問題を解決し、人々がより速く物事を行うのを助けます。

👤

ユーザーのニーズ

→

📱

アプリを開く

→

👆

アクションを実行

→

✨

結果を得る ✨

電卓 • WhatsApp • YouTube • TikTok

第2章

Techbridgeとは？

アプリをより速く構築するためのスマートなAIツール。

アイデア 💡

プロンプト ⌨️

AIが作成 🤖

人間が改善 👨‍🎨

AIはクリエイターを助けるものであり、クリエイターに取って代わるものではありません。

第3章

TechbridgeをIDEとして使う

IDE（統合開発環境）は、開発者がアプリを構築するためのワークスペースです。

左：プロンプトエリア（AIに指示を出す）

Prompt

> Create a calculator app...

右：ライブプレビュー（アプリを即座に確認）

Preview

📱 Live App

コードセクション（AIが生成したもの）

第4章

最初のプロジェクト：計算機アプリ

美しく機能的な計算機アプリを作成します。

足し算、引き算
掛け算、割り算
光るインタラクティブボタン

0

第5章

良いプロンプトの書き方

指示が明確だと、AIはより良い結果を出します。

❌ 悪いプロンプト：

"計算機を作って"

✅ 良いプロンプト：

"Create a modern glassmorphism calculator app with smooth animations, glowing buttons, responsive design, dark mode, and interactive hover effects."

第6章

ステップバイステップのプロンプト作成

プロンプトをシンプルなステップに分解しましょう。

1. 何を作るのか？ → 計算機アプリ

2. どんなスタイル？ → モダンなグラスモーフィズム

3. どんな機能？ → 足し算、引き算、割り算、掛け算

4. どんなアニメーション？ → 発光、ホバー、バウンス

5. どんな色？ → 紫、青、ネオン

第7章

ライブアプリ生成

Techbridgeがあなたのプロンプトを実際のアプリに変える様子をご覧ください！

function init() { const btn = document.createElement('button'); btn.style.color = '#fff'; btn.onclick = calculate; } function calculate() { let x = 10; let y = 20; return x + y; } // generating UI...

0

第8章

AIが作成したものを理解する

コードを恐れる必要はありません！仕組みを見てみましょう。

              <button onclick="add()">+</button>
            
              <div id="screen">0</div>
            
              if (btn == '+') { add(); }

ボタン → アクションを実行

表示画面 → 回答を表示

ロジック → 判断を下す

Hover or click the code lines to see what they do!

第9章

アプリのカスタマイズ

自分好みにカスタマイズ！色やスタイルを変更してみましょう。

0

ボタンを押してみて！

第10章

よくあるプロンプトのミス

曖昧なプロンプトが失敗する理由

❌ 「かっこよくして」 → (AIにとって「かっこいい」とは？)

✅ 「シアン色の光で未来的にして」

❌ 「アプリを作って」 → (どんなアプリ？)

✅ 「チップ計算アプリを作成して」

細部が重要！創造性が重要！

第11章

クラスルームチャレンジ 🏆

プロンプトを書いて、アプリを生成し、カスタマイズしよう！

📝 1. プロンプトを書く

🤖 2. アプリを生成する

🎨 3. スタイルのカスタマイズ

残り時間:

05:00

🎉 おめでとうございます！

最初のアプリを作成しました！

偉大な開発者は皆、一つのプロジェクトから始まりました。

🏆

達成証明書

AIアプリクリエイター

AIを使って最初のアプリをエンジニアリングしました！