未ログイン状態で閲覧中
  • 投稿日:2026/04/07
  • 更新日:2026/04/08
超簡単!スマホで見られる持ち物リストを作ろう!【Claude Code/Cowork】

超簡単!スマホで見られる持ち物リストを作ろう!【Claude Code/Cowork】

Nao@あなたの夢を叶えるFP

Nao@あなたの夢を叶えるFP

この記事は約7分で読めます
要約
旅行やおでかけのたびに「忘れ物あるかな?」と不安になっていませんか? Claude Code/Coworkを使えば、 ✅️ 自分専用の持ち物チェックアプリが作れます! ✅️ スマホからも操作可能! クロコちゃんに指示するだけで完成しますよ😊

1. はじめに

こんにちは❗ Naoです。フリーランスのFPとITコンサルをやっています✨️

突然ですが、旅行やおでかけの準備でこんな経験はありませんか?


🌀 忘れ物が無いか不安

🌀 荷造りに時間がかかる

🌀 「全部入れた気がする…」で結局忘れ物をしてしまった


そんな方のために、今回はクロコちゃんを使って自分専用の持ち物チェックアプリを無料で作る方法をご紹介します✨️


✅️ 持ち物がリスト化されるので、「忘れた!」が無くなる

✅️ スマホで荷造りしながらチェックできるので「どこまで入れたっけ?」がなくなる

✅️ 旅行・おでかけ・スポーツなど、シーン別にリストを作成できる


今回使うのは、もちろんクロコちゃん(Claude Code・Coworkどちらでも大丈夫です)です。指示するだけでアプリが完成します。

指示すら面倒な場合は、この記事を読み込ませるとそのとおりにやってくれます👍️持ち物リスト.png持ち物アプリ以外にも活用できる「Webアプリの作り方」の記事になっていますから、ぜひお試し頂ければと思います😊


2. 事前準備|持ち物リストをテキストで用意する

まず、チェックしたい持ち物のリストをテキストで用意します。

メモ帳でも、手書きのメモをアップロードしても大丈夫です。思い浮かぶものを全部書き出してみましょう。

クロコちゃんと相談しながら作っても良いですね👍️Gemini_Generated_Image_pfo24npfo24npfo2.png私の場合は旅行用にこんなリストを用意しました。

##旅行(冬)
- 上着
- ズボン
- 靴下
- 下着
- タイツ
- パジャマ
- ハンカチ
- 手袋
- 財布
- スマホ
- スマホ充電器
- Apple Watch
- Apple Watch充電器
- AirPods
- PC
- PC充電器
- 歯ブラシ
- 歯磨き粉
- 日焼け止め
- 薬
…(以下続く)

💡ワンポイント💡

リストは完璧でなくてOKです!

あとからクロコちゃんに「○○を追加して」と指示するだけで簡単に修正できます。

まずは思いつくものを全部書き出してみましょう。


3. クロコちゃんにデータを整理してもらう

持ち物リストが用意できたら、クロコちゃんに渡して整理してもらいます。

クロコちゃんはバラバラなリストを見て、似ているもの同士を自動でグループ分けしてくれます。

✅️① クロコちゃんにこのように指示します

🧑🏻「持ち物チェック用のデータベースを作って。似ているものは構造化してね。(リストをそのまま貼り付ける)」

するとクロコちゃんが自動でカテゴリ分けしてくれます。

私の場合、38個のアイテムが6つのカテゴリに整理されました✨️Gemini_Generated_Image_uiikueuiikueuiik.pngカテゴリアイテム例

👕 上着・ズボン・靴下・手袋 など

💻 スマホ・PC・充電器類 など

👛 身分証・財布・名札 など

🪥 歯ブラシ・歯磨き粉・薬 など

✨ 化粧水・日焼け止め・ワックス など

🍱 お弁当・ナッツ・水筒 など


💡ワンポイント💡

シーン別に複数のリストを作ることもできます。

私は「旅行(冬)」「ジム」「オフ会」の3シーンを作成しました😊

クロコちゃんに渡すリストを複数用意すればOKです。

4. クロコちゃんにアプリを作ってもらう

データが整理できたら、次はアプリ本体を作ってもらいます。

✅️① クロコちゃんにこのように指示します

🧑🏻「このリストを使って、スマホで見られるチェックリストアプリを作って。カテゴリごとに表示して、チェックした状態を記憶できるようにして。」

するとクロコちゃんがアプリを作ってくれます!

私の場合は1回でこんなアプリができあがりました。

アプリ画面.png

✅️ できあがったアプリにはこんな機能が入っています

⭕️ 上部に進捗バーが表示される(例:0 / 38 完了)
⭕️ タブでシーンを切り替えられる(旅行・ジムなど)
⭕️ カテゴリごとに折りたたんで表示される
⭕️ チェックした状態がスマホに保存される
⭕️ 「リセット」「全てチェック」ボタンがある


💡ワンポイント💡

うまくいかないときはクロコちゃんに「こうなっています」と見たままを伝えるだけでOKです。

スクリーンショットを一緒に送るとさらに伝わりやすいです。
めげずにクロコちゃんに原因を聞きながら解決しましょう!

5. Netlifyで無料公開する

アプリが完成したら、スマホからアクセスできるようにURLを発行します。Netlifyという無料サービスを使います。

慣れないと戸惑いますが、難しくありません!もう一踏ん張りです👍️

以下の手順をクロコちゃんに任せることもできますが、自分でやる方法も書いておきますね🤔

5.1. Netlifyのアカウントを作成する

✅️① ブラウザで「Netlify」を検索し、公式サイトを開く

✅️② 「Sign up」ボタンをクリック1.png
✅️③ 「Continue with Google」を選択

✅️④ Googleアカウントを選択

✅️⑤「次へ」をクリック260407_Claudeで持ち物アプリを作成 (4).png
✅️⑥ 適当にアンケートに答えて、画面下部の「Continue to Deploy」をクリック
※名前と会社名を入れないと次に進めません。適当に入れておきましょう。3.pngこれでNetlifyアカウントの作成は完了です。


5.2. アプリをアップロードする

✅️① 「Upload your project files」内の「Choose a folder」をクリック260407_Claudeで持ち物アプリを作成.png✅️② アプリが入ったフォルダを選んで「アップロード」をクリック

✅️③Chrome上部に出る「アップロード」をクリック260407_Claudeで持ち物アプリを作成 (2).png💡ワンポイント💡
フォルダの場所が分からなくなったときは、クロコちゃんに「アプリが入ってるフォルダを教えて」といえば大丈夫です😊


✅️④ 緑色の字で "〇〇〇〇.netlify.app" というURLが発行されます。これが持ち物アプリのURLです!!
やりました👍️

260407_Claudeで持ち物アプリを作成 (3).png

6. スマホのホーム画面に追加する

発行されたURLをスマホで開けば、すぐに使えます。

さらに、ホーム画面に追加するとアプリのように使えて便利です。

※Safariを使っている場合で説明します。

✅️① 発行されたURLをメモ帳やGmailを使ってスマホに送ります

✅️② SafariでURLを開きます。持ち物アプリが開きます!

💡ワンポイント💡
アドレスバーには https:// は入力不要です。〇〇〇〇.netlify.app の部分だけを貼り付ければ自動で補完されます。

✅️③ 画面右下の…ボタンをタップ

✅️④「共有」をタップ7.png

✅️⑤下にスクロールして「ホーム画面に追加」をタップ

✅️⑥「Webアプリとして開く」をオンにして「追加」8.png
✅️⑦ホーム画面にアイコンが追加される!9.png
これで、いつでも1タップで持ち物チェックリストにアクセスできますね👍️


7. アイテムを追加・変更したいときは

「このアイテムも追加したい」「このカテゴリ名を変えたい」というときは、クロコちゃんに指示するだけで対応できます。

✅️① クロコちゃんにこのように指示します

🧑🏻「ジムのリストに『プロテイン』を追加して」

👩🏻「旅行の衣類カテゴリに『帽子』を追加して」

✅️② クロコちゃんがファイルを修正してくれます

✅️③ Netlifyの管理画面を開き、更新したフォルダをもう一度ドラッグ&ドロップするだけで完了です

URLは変わらず、スマホのアイコンも同じまま自動で更新されます✨️

💡ワンポイント💡

「スマホからアイテムを自分で追加・削除したい」という場合は、少し設定が複雑になります。詳しくは別記事で解説予定です🙏

8. おわりに

いかがでしたでしょうか?

今回はクロコちゃんを使って、自分専用の持ち物チェックアプリを無料で作る方法をご紹介しました。


✅️ 持ち物リストをテキストで渡すだけでアプリが完成

✅️ Netlifyで公開すればスマホでいつでも確認できる

✅️ 追加・変更もクロコちゃんへの一言で対応できる


この記事で、

⭕️ 旅行の準備が楽になった

⭕️ 忘れ物が減った

⭕️ Webアプリ開発のハードルが下がった


と感じていただければと思います😊

本記事が、皆様のAI活用の参考になれば嬉しいです!

他にも、以下の記事を投稿しています。宜しければご覧ください✨


参考記事

Claude Codeに複数のGoogleアカウントを連携する方法

超簡単!スマホで見られる持ち物リストを作ろう!【Claude Code】

【行き先だけでOK】乗り換えを自動検索してスケジュールに転送する方法

ブックマークに追加した記事は、ブックマーク一覧ページで確認することができます。
あとから読み返したい時に便利です。

Nao@あなたの夢を叶えるFP

投稿者情報

Nao@あなたの夢を叶えるFP

トラ会員

この記事に、いいねを送ろう! 参考になった記事に、
気軽にいいねを送れるようになりました!
この記事のレビュー(31
  • 会員ID:uj6UqFzO
    会員ID:uj6UqFzO
    2026/04/08

    NaoさんのOviceオフ会にも参加させていただいて、途中で挫折したものの・・・このノウハウ記事でなんとかアプリ導入までできました🥰 すぐに忘れるので、これから活用したいと思います🤩 ありがとうございました🙏

  • 会員ID:tKLOZtR1
    会員ID:tKLOZtR1
    2026/04/08

    3/8夜の部のoviceオフ会でお世話になりました。 オフ会開始時点で脳のメモリが2の状態だったので聴き専のつもりでしたがiphoneにURLを読み込むところまではすんなりできました。 ただiPhoneでURLが弾かれてしまうので挫折しかけたところで 『開けない』とcodeに聞き返したら 原因がわかりました!ファイル名が `checklist.html` なので、URLの末尾に `/checklist.html` が必要です。 と教えてくれました ほんと参加して良かったです。 ありがとうございました🫡

  • 会員ID:qajudpEX
    会員ID:qajudpEX
    2026/04/08

    教えていただき、無事に作ることができました。 自分ひとりではここまで進めなかったので、本当にありがたかったです。 感謝の気持ちでいっぱいです。 ありがとうございます