夏休みにバイブコーディングデビューしました

知識がなくても大丈夫！バイブコーディングは超簡単！～増えすぎた推し活グッズの管理アプリを自分で作ってみよう【作成編】

［第1回］AIと相談しながら数分で最初の試作品を動かす

柳谷智宣

2026年8月12日 10:00

自慢のコレクションを管理する自分だけのアプリを作ってみよう

　趣味で集めているモノが増えてくると、自分が何を持っているのかわからなくなる。棚の奥から同じものが2つ出てきたり、買ったことを忘れて同じ品を注文してしまったり……。

　推し活のアクリルスタンドでも、積んだままのプラモデルでも、レコードでも万年筆でも、コレクターなら誰もが一度は経験しているはずだ。筆者の場合はウイスキーで、開封済みかどうか、何本あるのか、どこで買ったのかが、もはや把握できなくなっている。

　これらをアプリで管理できればよいのだが、コレクションは人によって記録したい項目がまるで異なる。ウイスキーなら蒸溜所と度数、推し活ならイベント名と使用回数、プラモデルならスケールや進捗など、市販のアプリでは対応できないことが多い。

　じゃあ、欲しいアプリがないなら作ってしまおう。

　いまはプログラミングの知識がなくても、AIと日本語でやり取りをするだけでアプリを作れるようになっている。意図を言葉で伝えてAIにコードを書かせる開発スタイルは「バイブコーディング」と呼ばれ、急速に広まっている。

　今回の集中連載では、プログラミングのできない筆者が、AIと相談しながら「コレクション管理アプリ」を完成させるまでの過程を全3回で紹介する。テーマは筆者が管理に困っているウイスキーだが、内容を読み替えれば他の趣味にも応用できるはずだ。手元のコレクション用に、自分専用のアプリを開発してみよう。

まずはチャットで作り方を相談する

　今回利用するツールは、Anthropicの生成AI「Claude」のデスクトップアプリに搭載されている「Cowork」という機能だ。

　「Cowork」は、指定したフォルダーを作業場所にして、ファイルの作成や編集といった作業をClaudeが自律的に進めてくれるものだ。黒い画面にコマンドを打ち込むような操作は一切不要なので、バイブコーディングデビューにはうってつけだ。ただし、Coworkは有料プラン向けの機能であり、無料プランでは利用できない点には注意したい。

　とはいえ、いきなり作り始めるのは無茶だ。そこでまず、普通のチャットで何ができるのかを相談してみよう。この段階ではファイルをまだ作らないので、フォルダーの準備も要らない。思っていることをそのまま書けばよい。

【プロンプト】

ウイスキーのコレクションが増えて、何を持っているか自分でもわからなくなってきました。Coworkを使って、パソコンで管理できるアプリを自分で作りたいです。パソコンはWindows 11で、プログラミングはまったくできません。

　するとClaudeはまず、Coworkを使えばプログラミングの知識がなくても十分に作成できると回答した。その上で、希望の形を確認する質問を返してきた。

　質問には選択肢がボタンで表示されるので、クリックするだけで答えられる。「Excel」でよいか「専用画面のアプリ」が欲しいかを尋ねられたので、もちろん後者を選択。記録する情報の密度も聞かれたので「詳しく記録したい」と回答した。もし選択肢の意味がわからなければ、「わからない」とそのまま聞き返せばよい。相手はAIなので、初歩的な質問を恥ずかしがる必要はない。

質問には選択肢が表示されるのでクリックするだけで回答できる

　回答を続けていくと、開発方針がまとまり、作業準備の指示が表示された。

　まずはアプリ専用のフォルダーを1つ作り、その中に写真用の「photos」フォルダーも用意しておくこと。その上で、Claudeのデスクトップアプリで、そのフォルダーを作業対象にして指示を出すこと。

　この手順で進めれば、Claudeがインストール不要でWebブラウザーから使えるアプリを開発してくれるという。しかも、Coworkに入力するプロンプトまで、そのままコピーして使える形で用意してくれた。段取りを丸ごと組んでくれるので、こちらは指示通りに手を動かすだけだ。

回答を踏まえて開発方針がまとまり、フォルダーの準備からコピペで使えるプロンプトまで提示された

Coworkで作業する準備を整える

　指示に従って作業用のフォルダーを用意する。

　筆者は「C:devcollection」というフォルダーを作り、その中に「photos」フォルダーも作った。もちろん、ドキュメントフォルダーの中などに作っても構わない。

　次に、Claudeのデスクトップアプリを起動する。入力欄の下に［チャット］と［Cowork］の切り替えがあるので、［Cowork］を選択する。続いて、作業対象のプロジェクトまたはフォルダーを指定する。今回は新規なので［新規プロジェクトを作成］を選ぶ。

入力欄の下で［チャット］から［Cowork］に切り替える

作業対象を指定する。今回は［新規プロジェクトを作成］を選択した

　プロジェクト名は「コレクション管理アプリ」とした。

　そして［フォルダーを使用する］というボタンをクリックし、先ほど作ったcollectionフォルダーを指定する。Claudeがフォルダー内のファイルを変更することを許可するかどうかの確認ダイアログが開く。接続されたツールを使って、Claudeがファイルの編集・削除・共有ができるようになるという。自分専用の作業フォルダーなので、内容を確認して［許可］しよう。

プロジェクト名を付けて［フォルダーを使用する］をクリックし、用意したフォルダーを指定する

Claudeがフォルダー内のファイルを変更することを許可するかどうかの確認画面

開発はCoworkが自動で進めてくれる

　これで準備は完了だ。チャットで用意してもらったプロンプトを、Coworkの入力欄に貼り付けて送信する。

【プロンプト】

このフォルダーの中に、ウイスキーコレクションを管理するためのアプリを作ってください。ブラウザーで開くだけで使える1つの画面にして、インストールは不要、index.htmlというファイルをダブルクリックすれば起動する形にしてください。記録したい項目は、銘柄名、蒸溜所、購入日、購入店、価格、残量（％で入力できるように）、テイスティングメモ、写真です。写真はこのフォルダーの中のphotosフォルダーに保存して、ボトルごとに紐づけてください。新しいボトルの登録、既存データの編集、削除もこの画面からできるようにしてください。入力したデータはアプリを閉じても消えないように、このフォルダーの中にファイルとして自動保存してください。操作は全て日本語で、パソコンの操作に詳しくない人でも迷わず使えるシンプルなデザインにしてください。

　送信するとすぐに、アプリを開くときに使うブラウザーはどれか、という質問が返ってきた。保存方式の選び方に関わるらしい。普段使っている［Chrome または Edge］を選んで先へ進める。技術的な事情はこちらがわかっていなくても、質問に答えるだけで最適な作りを選んでくれるわけだ。

プロンプトを送信すると、使用するブラウザーについての質問が返ってきた

　ここから先は、基本的には見ているだけでよい。

　指定したフォルダーの中にファイルが作成され、画面右側のパネルで進行状況も確認できる。しばらく待つと作業が完了し、保存の仕組みの説明とともに検証結果が報告された。登録、編集、削除、検索、並べ替え、自動保存、バックアップと復元、入力チェックを一通り実行し、すべて期待どおりに動作してエラーなしとのこと。作りっぱなしにせず、自分でテストまで済ませてくれるのは頼もしい。

検証結果の報告とともに「はじめにお読みください」というファイルも作成されていた

　ちなみに、Coworkは何でも黙って実行するわけではない。

　作業の途中、「ファイルの削除」といったクリティカルな操作をする場面では、保護機能としてユーザーに確認を求めてくる。一度許可すると新しいタスクを開始しない限り、権限を取り消せないことや、削除されたファイルは復元できないことまで、注意書きが添えられている。作業内容を把握した上で［許可］をクリックすれば続行される。少々手間はかかるが、AIが勝手にファイルを消してしまう心配がないのは、初心者には心強い。

「ファイルの削除」といったクリティカルな操作では保護機能として確認を求められる

完成したアプリに自分のコレクションを実際に登録してみる

　まずは、成果物と一緒に作られていた「はじめにお読みください.txt」を開いてみる。

　起動のしかたやできること、記録できる項目、写真の扱い、データの保存、バックアップと復元まで、取扱説明書としてきれいにまとまっていた。気になったのは、ブラウザーの［閲覧データを削除］を実行するとデータが消える場合があるので、ときどきバックアップを取っておくと安心だという注意書きだ。この一文の意味は、次回以降でじっくり確かめることになる。

「はじめにお読みください.txt」には使い方から注意点までまとめられていた

　さて、いよいよ起動してみよう。

　指示通りにindex.htmlをダブルクリックすると、ブラウザーでアプリが開いた。指定していないのに、ウイスキーを思わせる茶系の落ち着いた配色になっている。上部には登録本数、合計金額、平均価格、未開栓本数の集計欄が並び、検索欄と並べ替えメニュー、バックアップと復元のボタンまで揃っていた。

　バイブコーディングにデビューすると驚かされるのはここだ。指示して数分で、動くアプリができあがってしまうのだ。さっそく動作確認をしてみよう。

index.htmlをダブルクリックするとブラウザーでアプリが起動した

　［＋新しいボトルを登録］から、手元にあったウイスキーを登録してみる。銘柄名や蒸溜所、購入日、購入店、価格を入力し、残量はスライダーを動かすか数字を打ち込めばよい。ここで気づいたが、プロンプトでは頼んでいないアルコール度数や容量の欄が追加されていた。ウイスキーの管理なら必要になるだろうと、気を利かせてくれたらしい。