Claudeでアプリを作るなら「1画面」で止める――旅行の持ち物チェックから始めるArtifacts

Windowsキーのあるキーボードのイメージ写真 生成AI
イメージ写真。記事で紹介する実機・画面ではありません。写真:Unsplash(配布ページ) / Unsplash License

この記事のポイント

  • 最初は入力・計算・表示が分かる小さな道具に絞る。
  • 画面を触って使うならミニアプリ、記録の蓄積なら表計算も候補だ。
  • 見た目より先に、空欄・上限・再読み込みを確かめる。

サムネイルはイメージ写真。写真の配布元:Unsplash利用許諾)。紹介するサービスの画面ではない。

作りたい機能:入力ひとつ・決まりひとつ。確かめる動作:空欄・上下限・やり直し。小さく作ると、間違いを見つけやすい
RyXeon作成の解説図。実際のサービス画面ではない。

生成AIに「便利なアプリを作って」と頼むとき、最初から家計簿や予約管理を目指すと、何を確かめれば完成なのか分からなくなりやすい。そこで提案したいのが、今日使う1画面の道具から始める方法だ。題材は、旅行の持ち物チェックでよい。

ClaudeのArtifactsは、文書や小さな対話型ツールなどを会話の横に表示し、修正を重ねられる機能だ。公式ヘルプにはHTMLや対話型コンポーネントも例示されている。記事確認時点では、利用には「Code execution and file creation」の有効化が必要と案内されている。表示されない場合は設定のCapabilitiesを確認したい。出典:Claude公式ヘルプ

最初の注文は「旅行アプリ」では広すぎる

以下は本誌が設計したプロンプト例であり、完成済みアプリのレビューではない。服の枚数のルールも練習用の仮定である。航空会社の手荷物制限など、外部の最新情報が必要な判断は含めない。

Claudeへの入力例

旅行の持ち物チェックをする、1画面の対話型Artifactを作ってください。宿泊数を1〜7泊から選ぶと、靴下と下着をそれぞれ「泊数+1」個表示します。充電器は泊数によらず1個です。項目にはチェック欄を付け、チェック済み数を表示してください。泊数を変更したらチェックをすべて解除してください。入力が範囲外なら計算せず、1〜7泊と表示してください。外部サービスへの接続、AIへの追加問い合わせ、データ保存は不要です。ページを閉じると状態が消えることを画面に示してください。

「おしゃれに」「便利に」より、数え方と変更時の動作を先に指定する。そうすれば、仕上がりを見たときに合否を判断できる。色や角の丸みは、その後で変えればよい。

表計算と比べて、どこに手間をかける価値があるか

次の比較は機能一覧ではなく、今回の用途に対する本誌の選び方だ。どちらでも実現できる部分は多い。

やりたいこと 出発点として選ぶもの 理由
家族がボタンを押して確認する 小さなアプリ 入力する場所と結果を絞れる
過去10回の旅行を見比べる 表計算 行を増やして履歴を並べやすい
思いついた持ち物をメモする 普通のメモ 作成・検証の手間がほぼ要らない

AIで作れることと、作る意味があることは別だ。メモで済んでいた作業が面倒になるなら、アプリ化をやめる判断も合理的である。

「動いた」ではなく、4つの場面を試す

  1. 1泊:靴下と下着が各2個、充電器が1個になるか。
  2. 7泊:靴下と下着が各8個になり、表示がはみ出さないか。
  3. 空欄・0・8:入力できる設計なら、範囲外を受け付けないか。選択式なら選べないことを確かめる。
  4. チェック後の変更:泊数を変えたらチェックが解除され、再読み込みでも指定どおり初期状態になるか。

修正依頼には、操作・期待・実際の3点を書く

「おかしい」ではなく、「1泊でチェックした後に2泊へ変えた。チェックは消えるはずだが残った」と伝える。問題の場所を絞ると、関係ない機能まで変わるのを避けやすい。

ここでの保存なしという指定は、練習の範囲を狭めるためのものだ。Artifacts全体が保存できないという意味ではない。また、入力文で外部接続を禁じただけで安全を保証できるわけではないため、まず架空の情報で動作を確認する。実名や旅行日程を入れずに作れる題材から始めれば、画面作りと動作確認に集中できるだろう。

情報確認日:2026年9月20日。機能・提供条件は変更される場合がある。プロンプト、架空例、比較の観点はRyXeon独自作成。

コメント

タイトルとURLをコピーしました