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分）
完成したらスクショを撮って発表しましょう！🎉
Hands-on
いよいよ、
自分の手で作る 🛠️
5つの実例で「作る感覚」を体に入れる
AIと一緒に生きていく | Session 04
準備
始める前に これだけ ✅
① アカウント
Claude（claude.ai）に無料登録。Googleアカウントで数秒
② PCとブラウザ
Chrome等で開く。スマホでも可だがPCが快適
③ 仕様書
前回のテンプレ（誰が・何を・どう）を手元に
コードの知識は一切いりません。日本語で頼むだけです。
AIと一緒に生きていく | Session 04
基本操作
Artifacts はこう動く 🖥️
左：チャット
ここで「〇〇を作って」と頼む・直す
右：プレビュー
作られたものがその場で動く。すぐ試せる
頼む → 右に出る → 試す → 「ここ直して」。この往復だけ。
AIと一緒に生きていく | Session 04
コツ
最初の一言の「型」 🎯
「【誰】が【何】するための【ツール名】を作って。
機能は【1つだけ】。スマホで見やすく、色は青基調で。」
最初から完璧を狙わない。ざっくり頼んで、出てきたものを直していく。
AIと一緒に生きていく | Session 04
実例①
カウントダウンタイマー ⏱️
「作業用のカウントダウンタイマーを作って。分数を入力してスタート、0で音が鳴る。大きく見やすく」
→ その場で動くタイマーが完成。「一時停止ボタンも足して」で進化。
ポイント：シンプルな道具ほど一発で動く。最初の成功体験に最適。
AIと一緒に生きていく | Session 04
実例②
かんたんアンケートフォーム 📝
「5問のアンケートフォームを作って。名前・満足度（星5つ）・自由記入。送信したら『ありがとう』と表示」
★ 星評価やラジオボタンも言葉で頼める
★「結果をコピーできるボタンも」で実用度UP
AIと一緒に生きていく | Session 04
実例③
単語帳・クイズアプリ 🃏
「英単語クイズを作って。問題は10問、4択、最後に点数表示。間違えた問題をもう一度出して」
「問題はこのリストを使って」と自分のデータを貼れば、自分専用の教材になる。
AIと一緒に生きていく | Session 04
実例④
見積・計算ツール 🧮
「料金見積もりツール。人数と日数を入れたら合計を計算。割引（10名以上で5%引き）も反映。税込表示」
仕事の「毎回エクセルでやってる計算」は、専用ツールにすると速くてミスが減る。
AIと一緒に生きていく | Session 04
実例⑤
ToDoリスト ✔️
「ToDoリストを作って。追加・チェック・削除ができる。完了したものは取り消し線。残り件数を上に表示」
★「優先度の色分けも」で実用的に
★「ブラウザを閉じても残るように」で保存対応
AIと一緒に生きていく | Session 04
直す技
「直して」のひと言集 🔧
「文字をもっと大きく」
「ボタンの色を緑に」
「スマホで崩れる、直して」
「〇〇の機能を足して」
「エラーが出た、原因は?」
「もっとシンプルにして」
AIと一緒に生きていく | Session 04
仕上げ①
見た目を整える指示 🎨
雰囲気を伝える
「やさしい印象で」「高級感のある黒基調で」「ポップでカラフルに」
具体的に伝える
「余白を広めに」「角を丸く」「影をつけて立体的に」
参考画像があれば貼って「こんな雰囲気で」もOK。
AIと一緒に生きていく | Session 04
仕上げ②
スマホで使えるようにする 📱
「スマホで見やすく、指でタップしやすいボタンサイズにして」と頼むだけ。
実機で開いて確認するのが確実。崩れたら「ここが重なってる」とスクショで指摘
「縦画面でも横画面でも崩れないように」も有効
AIと一緒に生きていく | Session 04
発展①
データを「残したい」とき 💾
かんたん保存
「ブラウザを閉じても入力が残るように」→ そのブラウザ内に保存される
注意
別の端末では共有されない。本格的な保存は次のステップ（開発）が必要
AIと一緒に生きていく | Session 04
発展②
作ったものを「共有」する 🔗
リンク共有
Artifactは共有リンクを発行できる
コピーして使う
HTMLとして書き出して自分で公開も
チームへ
便利な道具は同僚にも配って使ってもらう
AIと一緒に生きていく | Session 04
トラブル対処
うまくいかない時のチェック 🧭
動かない：
「エラーの内容を教えて、直して」とそのまま頼む
イメージと違う：
具体的にどう違うかを1つずつ指摘
こじれた：
新しい会話で、仕様を整理して作り直す
複雑すぎ：
機能を減らして、まず動く形に戻す
AIと一緒に生きていく | Session 04
注意
作るときの「お約束」⚠️
機密は入れない
顧客情報・パスワードを直接入れない
過信しない
計算結果は自分でも検算する
試作と本番は別
業務で本格運用するなら担当部署に相談
バックアップ
大事な内容はコピーを別途保存
AIと一緒に生きていく | Session 04
🔬 ワーク
自分の仕様書で作ってみる（30分）
① 前回の仕様書をそのままAIに渡す
② 出てきたものを試す → 「ここ直して」を3回
③ 見た目とスマホ表示を整える
④ 完成したら共有リンクを発行して隣の人に見せる
AIと一緒に生きていく | Session 04
「動くもの」が手の中にある —
それが今日の一番の収穫
最後に、今日のポイントをまとめます
AIと一緒に生きていく | Session 04
Session 04 まとめ
今日学んだこと 📚
① Claude Artifactsで動くアプリが作れる
コードの知識ゼロでも大丈夫
② 3つの要素でプロンプトを作る
「何を」「誰のために」「どんな機能」だけ伝える
③ 少しずつ修正して完成に近づける
10回直して作るのがプロのやり方
④ 詰まったらAIに全部聞いていい
エラーも指示の仕方もAIが教えてくれる
🎉
動くものを作った！
エンジニアじゃなくても
アイデアをカタチにできることがわかった。
これがAI時代の「作る力」です
📅 次回（Session 05 最終回）
これからのAIとの
付き合い方を考えよう
5回の振り返りと、これからの3ヶ月プラン 🗓️
AIと一緒に生きていく | Session 04