小学生でもわかる 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で

やることチェックリスト

0/6

記事を読みながら、できたものにチェックを付けていけます。チェックはこの端末に残ります。

くわしい手順と画面の図は、Xの記事にあります。

こんな人に

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

この話のTIPS

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