できたものを人に見せる・次の一歩 | SkillhubAI(スキルハブエーアイ)

できたものを人に見せる・次の一歩

このレッスンでできること

作ったアプリを人に見せる方法を選べるようになり、次に学ぶことを決められます。

上から順に、かんたんです。まずは①から試してみましょう。

① 画面を撮って送る(いちばんかんたん)

スクショや、画面の録画を撮って、LINE や SNS で送ります。相手は触れませんが、動いている様子まで伝わるのは録画です。

完成したレシピ診断を、実際に操作して録画したものです。録画だと、動きまで伝わります。

  • Mac は ⌘ + Shift + 5 で、画面の録画ができます。
  • スマホには、多くの機種に画面の録画機能があります。
  • Windows の場合は、AIに「Windowsで画面を録画する方法を、初心者向けに教えて」と聞いてみましょう。

② ファイルを渡す

作った recipe.html をメールなどで送ります。相手がパソコンでダブルクリックすれば、同じように動きます。スマホだと開けないこともあるので、パソコンで開いてもらうのが確実です。

③ ネットに公開する(ひと手間)

ネットに置くと、URL(ページの住所)を送るだけで、だれでもスマホから触れるようになります。公開できるサービスはいくつかあり、やり方もサービスごとにちがうので、ここでは細かい手順は書きません。AIに聞きながら進めるのが近道です。

AIへの聞き方の例HTMLファイル1枚で動くアプリを作りました。これをネットに公開して、スマホから見られるようにしたいです。
プログラミングは初めてです。かんたんな方法を、手順を1つずつ教えてください。
費用がかかるかどうかも教えてください。

公開する前に、かならず確かめましょう。

  • 自分や家族の名前、住所、電話番号などが入っていないか
  • APIキー(サービスを使うための合言葉のような文字列)が入っていないか
  • 公開してよい写真や文章だけを使っているか

次の一歩

「伝える → 確かめる → 直してもらう」は、どの道具でも同じです。

ブラウザのAIチャットでは、HTMLファイル1枚の小さなものが得意です。ファイルがいくつもあるサイトや、何日もかけて育てるものを作りたくなったら、AIがパソコンの中でファイルを作って直してくれる道具に進みましょう。

講座 こんな人に
Claude Code入門 Claude をもっと使いこなしたい人。導入から、ふだんの使い方、Git(作ったものの記録)までを学べます
ChatGPT Codex入門 ChatGPT をふだん使っている人。同じ会社のAIで、制作を進める方法を学べます

次に作るものに迷ったら、レッスン3の表(割り勘の計算ツール、記念日カウントダウン、習慣チェック表)から1つ選んで、今日と同じ流れで作ってみましょう。2つ目は、1つ目よりずっと早く作れるはずです。

つまずきやすいところ

こうなったら:送ったファイルを、相手がスマホで開けなかった

こうする:画面の録画を送るか、③のネットへの公開を試します。

こうなったら:公開の手順の途中で、知らない言葉が出てきて止まった

こうする:その画面のスクショをAIに貼って、「いまこの画面です。次に何をすればいいですか?」と聞きます。レッスン5と同じやり方です。

まとめ
  • 人に見せるなら、まずは画面の録画がかんたん。ファイルを渡す、ネットに公開する方法もある
  • 公開する前に、個人情報や APIキー が入っていないかを確かめる
  • 次は Claude Code入門 か ChatGPT Codex入門 へ。進め方はこの講座と同じ

おつかれさまでした。作りたいものを言葉にして、AIといっしょに形にする。これで、バイブコーディングの最初の1周ができました。