- 投稿日：2026/03/31
Claudeコード設定後の初めの一歩🔰ITが苦手な私でもできた！タスク管理アプリ爆速で作ってみよう
「ClaudeCodeなんて、頭の良い人やエンジニアさんが使うものでしょ？」 つい数日前まで、私は本気でそう思っていました💦
パソコン操作や家具の組み立ての説明書通りにやってもうまくいかない、私。(ベッドの組み立てが1人でできず、2週間くらいかけて作りました)
Claudeアプリは入れていたものの、チャット機能しか使っていませんでした。最近、学長のライブを聞いてこれは！と思い課金して実際にアプリを作ってみました。
「習うより慣れろ」 その言葉を信じて飛び込んでみた結果……プログラミングの知識ゼロのまま、「タスク管理アプリ」が爆速で完成してしまったんです。 今回は、ITに苦手意識がある私が、仕事の効率を劇的に変えたリアルな体験記とタスク管理アプリの作成方法をお届けします。
※アプリとgitインストール済前提です。まだの方は、先にインストールを！
1. 「進捗が見えない」をどうにかした
👨「上司に、部下が何の仕事をどこまで進めているのかわからない」
仕事場の打ち合わせで、言われました。上司は、私を含めた4人の部下をまとめていています。報告を忘れる同僚、この程度は報告しなくていいだろうと思っている私。
どうにかならないかなとは思っていたものの、アイディアがでず。。。
そんな悩みを解消するために「何かできないか」と考えていたタイミングで、学長ライブでClaudeを知り、えっなにそれ！と興味をもち実際に試してみることにしました。
そこで、Youtubeで調べてタスク管理アプリを作ってもらうことに挑戦しました。
2. 実際に完成したのがこちら
正直、自分でもびっくりしたのですが
こんな感じの「タスク管理アプリ」が完成しました✨
・やること一覧が見える
・進捗（未着手／作業中／完了）が分かる
・シンプルで誰でも使える
今まで、いらない紙に1日のやることをまとめていて1日終わったら捨てていたので上司に前日の作業の詳細を聞かれても曖昧な回答をすることがなくなりました！
逐一上司に報告しなくていい。打ち合わせでまとめて報告できて、自分の仕事に集中できる！「え、これ本当に自分で作ったの？」と何度も思いました😂
（名前は偽名です。イメージつきやすくため）
松本がタスクを追加すると、長山が上司で、部下4人のタスクを一覧で見れるようになっています。
作ったアプリは、自分のデスクトップに保存されるようにしてアプリのURLを上司に送りました。
上司が気に入ってくれたため、現在は社内で実際に使用しています:)
3. 実際の作り方
①クロードを開きます
②コードを選択します
③命令文（プロンプト）を打ち込む
（タスク管理のWebアプリを作ってください。タスクの追加・編集・削除、完了チェック、期限日の設定、優先度の色分け表示、期限でのフィルタリング機能をつけてください。デザインはシンプルでモダンに感じて。）←今回はこれでやってみましょう
④どこのファイルに保存をするのか指定する（おすすめはデスクトップ）
⑤オレンジのボタンをおします
⑥待ちます
⑦完成。
左のオレンジ部分が、こんな感じで作りましたよという、文字でのまとめ。
右の緑部分が、実際のアプリの画面です。
できましたね！✨
⑧確認
できたアプリは、作るときに指定したファイルに保存されています。（今回はデスクトップですね）
デスクトップから開いて確認しましょう。発見しました！
開きます。
しっかりできましたね！
ちゃんとボタンが押せるか、試してみたり触ったりしてみてください。
以上です！
ここまできたら、「なるほど～」「ふー～ん」と思ったんじゃないでしょうか。
ここで、少し休んでもよし◎ゆっくりやっていってもゴールができれば時間をかけても全然いいと思いますよ！
「面白い」「もっとこう変更したい」「このままもう少し」と
思った方は⑨に行きましょう。レベルアップしていきますよ💪
⑨修正
では、一緒に踏み込んでいきますね。
アプリの画面をみて、あれこれ一人用じゃなっておもった方！鋭いですね～
そうなんです。これ、自分は使えるけど上司がまとめて確認できないですよね。
修正していきましょう。
以下を指示していきます。（読まなくても、理解できなくて全然大丈夫です！）
あなたは優秀なアプリ開発アシスタントです。
以下の条件を満たす、シンプルで使いやすいタスク管理アプリを作成してください。
【目的】
上司1人が、部下4人のタスク進捗を一目で把握できるアプリ
【ユーザー構成】
・上司：1人（全体の進捗確認）・部下：4人（各自タスクを登録・更新）
【必要な機能】
① タスク管理機能
・部下ごとにタスクを登録できる・タスクには以下の情報を含める - タスク名 - 担当者（4人の中から選択） - 期限（任意）- ステータス（未完了 / 完了）
② 視覚的にわかるUI
・未完了タスク：通常表示・完了タスク：チェックを入れると色が薄くなる（グレーアウトなど）→ 上司が一目で「終わったタスク」を認識できるようにする
③ 一覧表示機能
・全員分のタスクを一覧で表示・担当者ごとにフィルタできる・ステータス（完了/未完了）で絞り込み可能
④ シンプルな操作性
・ITが苦手な人でも使えるUI・ボタン操作中心（直感的）
⑤ 上司用ダッシュボード
・全体の進捗が一目でわかる・「未完了タスク数」「完了タスク数」が見える・誰がどれだけタスクを抱えているか確認できる
【デザイン】
・シンプルで見やすい・余計な機能はつけない・スマホでも使いやすいUI
【補足】
・データは簡易的でOK（最初はローカル保存でも可）・できれば拡張しやすい構成にする
以上の条件で、具体的な画面構成・機能・コードまたはノーコード構成を提案してください。
終わったら確認しましょう。
もう一度、デスクトップからファイルを開いてみてみましょう！
いい感じに、できましたね。先ほどは、1人用でしたがこれで上司が一目でわかるようになりました！
⑩さらに修正
次は、さらに細かい修正方法です。
例えば、田中さんの名前の色は、青色になっています。その色を変えてみます。
田中さんのイメージカラーがピンクなので色を変えたいとしましょう。
文字だけで、伝えてもいいのですがピンポイントで指示を出すことによって的確に修正が可能になります。
まず、右上のプレビューを押します。少し時間がかかります💦
次に、右上に3つアイコンが並んでいる右の「要素を選択」を押します。
そのまま、右のプレビュー画面の上にカーソル（クリックボタンを）持ってきてください。
色々選択できるはずです。
そして、田中さんをクリックります。
そうすると、チャット欄に何か増えました。これが、今から変えたい部分です。と的確な指示を出す大切なポイントです。
便利機能なのでぜひ使ってみてください🤩
4. まとめ
ここまで、できましたでしょうか。初めの一歩ということできっかけになったらうれしいです。
ここまで読んでいただきありがとうございました😊
もし今、
「設定したけど何もしてない」「気になってるけど触れてない」
そんな状態なら、まずは1回、何か作ってみてください。
今回の私のように、「え、こんなのできるの？」という体験になると思います。人って小さな成功があると、またやりたいって気持ちになるもんなんですよね。
これは、AIに限った話ではないのですが
まずやってみる、できた！→わーい！→次はどんな事できるかな、これやってみよう→わーい！って感じで
「軽い目標設定→達成の繰り返し」これがあるからこそ、AIにはまっていくと思います。さらに、仕事が効率化されるっていいですよね。
皆さんが、AI活用して業務の効率化や稼げるようになって、嬉しい気持ちになったら幸いです。
