Session 04
動くものを
今日持って帰る 🚀
AIとアプリを作る体験！コードが書けなくても大丈夫
AIと一緒に生きていく
|
全5回 ✦ 第4回
Session 04
今日やること 📋
1
Claude Artifactsとは？
なぜArtifactsを使うのか理解する
2
最初のプロンプトを送る
「呪文」の書き方を覚える
3
修正してブラッシュアップ
「ここを変えて」の繰り返しが楽しい
4
詰まったときの対処法
エラーもAIに聞けば解決できる
🎉
今日の目標
動くものを作る！
コードの知識ゼロでも
アプリのプロトタイプが作れます
所要時間: 約90分（ほとんどが実習！）
基礎知識
Claude Artifactsって何？ 🤔
Claudeには「Artifacts（アーティファクツ）」という機能があります。チャットの横に「動くもの」を表示してくれます。
💬
普通のチャット
テキストで返事が来る
→
📱
Artifacts機能
動くアプリが表示される！
✨ Artifactsで作れるもの
Webアプリ
計算ツール
ゲーム
フォーム
チェックリスト
タイマー
グラフ
メモ帳
🎯 このコースでこれを使います
前回作った「仕様書」を使って、今日実際に動くアプリを作ります！
🖥️ 画面のイメージ
📱
左：チャット ／ 右：動くアプリ
🌟
コードの知識は一切不要！
「作って」と言うだけで動きます
作り方 STEP 1
最初の「呪文」を送ろう 🪄
最初に送るプロンプト（指示）は、この3つを入れるだけでOKです。
①
「何を作るか」
例：「家計簿アプリ」「献立管理ツール」
②
「誰が使うか」
例：「30代の主婦が使う」「スマホで使いやすく」
③
「最初に入れる機能」
例：「支出を入力して一覧で見られる機能だけ」
📋 プロンプトテンプレート
「
〇〇アプリ
を作ってください。
使う人：
〇〇な人
必要な機能：
〇〇だけ
シンプルで使いやすいデザインにしてください。」
👆 この枠に当てはめるだけ！
✅ 実際の例
「かんたん家計簿アプリを作ってください。
使う人：忙しい30代の主婦
必要な機能：支出の金額とメモを入力して、リストで見られる機能だけ
シンプルで使いやすいデザインにしてください。」
作り方 STEP 2
「ここを変えて」で磨いていこう 🔧
最初から完璧なものは作れません。気になったところを少しずつ直していくのが正解です。
🎨 見た目を変えたいとき
「ボタンの色を青にして」
「フォントをもっと大きくして」
「もっとシンプルなデザインにして」
⚙️ 機能を追加したいとき
「日付も入力できるようにして」
「入力したデータを削除できるようにして」
「合計金額を表示して」
🔄 こんな感じで繰り返す
1
作ってもらう
2
動かして確認する
3
気になったら「〇〇変えて」と頼む
4
満足したら完成！
💪
1回で完璧を目指さない！
10回直して作るのが正解
プロのエンジニアも同じやり方です
困ったとき
「うまくいかない」はAIに聞けばいい 🆘
アプリ作りで詰まっても大丈夫。全部AIに聞きましょう。
😱 困りごと①：エラーが出た
「さっき動いていたのに動かなくなった」
→ エラーメッセージをそのままAIに貼り付けて「なぜエラーになってる？直して」と聞く
😔 困りごと②：思ったのと違う
「ボタンの場所が違う」「文字が小さい」
→ 具体的に「〇〇を△△にして」と指示する
🤷 困りごと③：どう言えばいいかわからない
「うまく伝えられない…」
→「〇〇を改善したいけど、どう指示すればいい？」とAIに聞く
🗣️ 困ったときの魔法の言葉
🔧
「これを修正して：[エラー文]」
❓
「なぜこうなった？わかりやすく教えて」
🔄
「最初からやり直して」
💡
「改善案を3つ提案して」
⭐
「詰まること」は失敗じゃない！
全員が通る道です。AIに聞けばOK
デモ
実際にやってみよう！今から作ります 🎬
1
Claudeを開く
claude.ai にアクセス
2
テンプレートを貼り付ける
前のスライドのプロンプトをそのまま使う
3
Artifactsが表示される
右側に動くアプリが出てくる
4
動かして確認する
実際にボタンを押したり入力してみる
5
気になる箇所を修正
「〇〇を変えて」と何度でも頼む
6
完成！シェアする
スクショ or リンクで見せ合おう
👀 まず講師のデモを見て、その後に自分で試してみましょう！
🚀
ワーク: アプリを作ろう！
やること（40分）
1
前回の仕様書を使ってプロンプトを作る（10分）
2
Claudeに作ってもらう（5分）
3
動かして確認・修正を繰り返す（25分）
完成したらスクショを撮って発表しましょう！🎉
Session 04 まとめ
今日学んだこと 📚
① Claude Artifactsで動くアプリが作れる
コードの知識ゼロでも大丈夫
② 3つの要素でプロンプトを作る
「何を」「誰のために」「どんな機能」だけ伝える
③ 少しずつ修正して完成に近づける
10回直して作るのがプロのやり方
④ 詰まったらAIに全部聞いていい
エラーも指示の仕方もAIが教えてくれる
🎉
動くものを作った！
エンジニアじゃなくても
アイデアをカタチにできることがわかった。
これがAI時代の「作る力」です
📅 次回（Session 05 最終回）
これからのAIとの
付き合い方を考えよう
5回の振り返りと、これからの3ヶ月プラン 🗓️
AIと一緒に生きていく | Session 04