小学生でもわかる AI図鑑
  1. ホーム
  2. 小学生でもわかるClaude Design
  3. 第3話

Claude Design 第3話

【小学生でもわかる】Claude DesignでLPと試作品!アイデアを「押せる形」にする

左が、あなたのアイデア。「散歩の写真を家族で共有するアプリがほしい」。右が、机の上に生えてきたもの。縦長の紹介ページ(LP)が1枚と、ボタンを押すと画面が切り替わる試作品が3画面。口で説明しても伝わらなかったアイデアを、さわれる見本にします。

  • 有料(Claude Pro 月$20〜に込み。Design単体の追加料金なし)
Xで記事を読む シェア
LPと試作品のカバー

どんな話?

「LPと試作品の机」で、Webページの案と、タップで画面が切り替わる試作品を作る回。試作品は「動きの見本」で、保存・ログイン・決済といった裏側はありません。LPは「成果物として公開」でリンクを知っている人に見せられ、いつでも非公開に戻せます。

この記事でわかること

  • 試作品は「動くフリ」。押すと画面が変わるまでが範囲で、本物にする道は第8話(Claude Code)
  • LPは「成果物として公開」でそのまま公開できる(実機で公開→非公開に戻すまで確認)。自分のドメインで出すならHTML書き出し→Vercel・Netlify
  • スマホで見せたいなら注文票に「スマホの縦画面で」。最後は実際のスマホで開いて確認
  • AIが埋めた「利用者1万人」のような実績はうそ。LPに載せない
  • 共有リンクは公式ヘルプ上「組織内で共有」する機能。組織の外の人には公開リンクかHTMLで

こんな人に

  • アプリやサービスのアイデアはあるのに「絵」が作れない人
  • 口で説明して何度も失敗してきた人
  • お店・サークルの紹介ページを1枚ほしい人

この話のTIPS

  • 注意Claude Designの試作品は「動くフリ」の見本。ボタンで画面は切り替わりますが、保存・ログイン・決済といった裏側はありません。人に見せるときは「見本です」と一言そえて、本物にする道はClaude Codeやv0で。
  • コツClaude DesignのLPは、共有の中の「成果物として公開」でリンクを知っている人ならだれでも開けるページにできます。押す前に確認画面が1枚はさまり、公開後もいつでも非公開に戻せます(実機確認済み)。
  • 注意スマホで見せたい試作品は、注文票に「スマホの縦画面で」と書く。スマホ向けの表示は最初から自動で完璧にはならないので、ブラウザの幅を細くして確認し、最後は本番で見せるスマホで実際に開く。
すべてのTIPS

次の一歩

試作品を本物のアプリにする道ならv0準備中
書き出したLPを自分のドメインで出すならVercel準備中
スライドにナレーションを付けるならElevenLabs9話公開中写真やイラストそのものを描くならfal1話公開中
作ったデザインを手で仕上げるならMiriCanvas準備中