気になる場合は、価格と販売条件を公式ページで確認してください。

このページは公開情報ベースの事前チェックです。購入前に、価格・紹介条件・向いていない人をもう一度確認してください。

[PR] 一部リンクにはアフィリエイトを含みます。未購入・公開情報ベースの事前チェックです。

本記事は2026年5月の方針転換前に書かれた過去記事です。当メディアは現在「AI副業の現実を数字で検証するウォッチドッグ」へ路線を変更し、有料商品はすべて販売停止しました。技術的な実装ログとして残しつつ、収益化の再現条件は順次追記します。転換の経緯はこちら。

🔬 Claude Code研究所📱 生活アプリ化

📂 Claude Code生活アプリ化ログ

📂 この記事のシリーズ: Claude Code研究所 — 記事一覧

Claude Codeで何が作れて、収益化の前にどこで詰まるかを検証する実装ログ。

結論サマリBOX

「Claude Codeに要件を伝えたら、30分でブログ記事ネタ管理アプリが完成しました。」
記事タイトル・カテゴリ・状態（下書き/公開済/ネタのみ）・メモを管理できる。
技術知識ゼロでも動くものが作れる実証ログです。

項目	内容
作ったもの	ブログ記事ネタ管理アプリ（HTML/CSS/JS）
所要時間	約30分（修正3回含む）
必要なもの	Claude.ai Proアカウント / ブラウザ
使用言語	HTML + JavaScript（Claude Codeが全部書いた）
副業転用	コンテンツ管理→量産体制→商品化の流れに使える

今日の面倒ごと

「記事のネタがどこに書いてあるか毎回忘れる。XのDM、メモ帳、Notionに散らばっている。一元管理したい。でもNotionの設定が面倒。Excelも起動が重い。ブラウザで開くだけで使えるシンプルなものが欲しい。」

Claude Codeで何を作るか

ゴール: ブラウザで開くだけで使えるシンプルなネタ管理ツール
機能:
– 記事タイトルを追加できる
– カテゴリを選べる（Claude Code研究所 / 地雷解析 / 比較記事 / その他）
– 状態を管理できる（ネタのみ / 下書き中 / 公開済み）
– メモ（キーワード・参考URL）を書ける
– 一覧で並べて見られる
– データはブラウザのlocalStorageに保存（外部サーバー不要）

最初の要件定義プロンプト

ブラウザで動くシンプルなブログ記事ネタ管理ツールを作ってください。

機能：
1. 記事タイトルを入力して追加できる
2. カテゴリを「Claude Code研究所 / 地雷解析 / 比較記事 / その他」から選べる
3. 状態を「ネタのみ / 下書き中 / 公開済み」から選べる
4. メモを自由テキストで書ける
5. 追加した記事を一覧表示できる
6. ブラウザを閉じても消えない（localStorageで保存）
7. 1つのHTMLファイルに全部収める

デザイン：
- シンプルでモバイルでも見やすい
- 日本語UI
- 状態によって背景色を変える（ネタのみ：グレー / 下書き中：黄色 / 公開済み：緑）

できた画面・機能

Claude Codeが出力したHTMLをブラウザで開いたら、こんな画面が表示されました。

完成した機能:
– タイトル入力フォーム（テキストボックス）
– カテゴリドロップダウン
– 状態ドロップダウン
– メモテキストエリア
– 「追加」ボタン
– 記事一覧テーブル（状態ごとに色分け）
– 「削除」ボタン（各行）
– localStorageへの自動保存

ページリロード後もデータが残ることを確認: ✅

詰まった点①：「削除したら一覧が更新されない」

削除ボタンを押しても、画面上の一覧からすぐに消えなかった。

修正プロンプト:

削除ボタンを押したとき、localStorageからは削除できているようですが、
画面上の一覧がリロードしないと更新されません。
ボタンを押した瞬間に画面の一覧も更新されるように修正してください。

→ Claude Codeが renderList() 関数を修正して解決

詰まった点②：「スマホで入力フォームが画面からはみ出る」

iPhoneで開いたら、入力フォームが右にはみ出てスクロールが必要だった。

修正プロンプト:

iPhoneで開いたとき、入力フォームが横にはみ出ます。
レスポンシブ対応にして、スマホでも使いやすいレイアウトにしてください。

→ max-width: 100%; box-sizing: border-box; の追加で解決

詰まった点③：「カテゴリでフィルターをかけたい」

追加後に記事が増えてきたら、「Claude Code研究所の記事だけ見たい」という場面が出てきた。

修正プロンプト:

カテゴリでフィルターをかける機能を追加してください。
「全表示 / Claude Code研究所 / 地雷解析 / 比較記事 / その他」のボタンを一覧上部に追加してください。

→ 追加完了。ボタンクリックで一覧が絞り込まれるようになった

完成版のコード（Claude Codeが出力したもの）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ブログ記事ネタ管理</title>
<style>
  body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 16px; }
  .form-group { margin-bottom: 12px; }
  label { display: block; font-size: 0.9em; margin-bottom: 4px; }
  input, select, textarea { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
  button.add-btn { background: #7c3aed; color: #fff; border: none; padding: 10px 24px; border-radius: 6px; cursor: pointer; }
  .filters { margin: 16px 0; display: flex; gap: 8px; flex-wrap: wrap; }
  .filters button { padding: 6px 14px; border: 1px solid #ddd; border-radius: 20px; cursor: pointer; background: #fff; }
  .filters button.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }
  table { width: 100%; border-collapse: collapse; }
  th, td { padding: 10px; text-align: left; border-bottom: 1px solid #eee; font-size: 0.9em; }
  .status-idea { background: #f3f4f6; }
  .status-draft { background: #fef9c3; }
  .status-published { background: #f0fdf4; }
  .del-btn { background: #ef4444; color: #fff; border: none; padding: 4px 10px; border-radius: 4px; cursor: pointer; }
</style>
</head>
<body>
<h1 style="font-size:1.4em;">📝 ブログ記事ネタ管理</h1>

<div class="form-group"><label>記事タイトル</label><input type="text" id="title" placeholder="記事タイトルを入力"></div>
<div class="form-group"><label>カテゴリ</label>
  <select id="cat">
    <option>Claude Code研究所</option><option>地雷解析</option><option>比較記事</option><option>その他</option>
  </select>
</div>
<div class="form-group"><label>状態</label>
  <select id="status">
    <option value="idea">ネタのみ</option><option value="draft">下書き中</option><option value="published">公開済み</option>
  </select>
</div>
<div class="form-group"><label>メモ（キーワード・URL等）</label><textarea id="memo" rows="2"></textarea></div>
<button class="add-btn" onclick="addItem()">追加</button>

<div class="filters" id="filters">
  <button class="active" onclick="filterBy(this,'all')">全表示</button>
  <button onclick="filterBy(this,'Claude Code研究所')">Claude Code研究所</button>
  <button onclick="filterBy(this,'地雷解析')">地雷解析</button>
  <button onclick="filterBy(this,'比較記事')">比較記事</button>
  <button onclick="filterBy(this,'その他')">その他</button>
</div>

<table><thead><tr><th>タイトル</th><th>カテゴリ</th><th>状態</th><th>メモ</th><th></th></tr></thead>
<tbody id="list"></tbody></table>

<script>
let items = JSON.parse(localStorage.getItem('blogItems') || '[]');
let currentFilter = 'all';

function save() { localStorage.setItem('blogItems', JSON.stringify(items)); }
function addItem() {
  const t = document.getElementById('title').value.trim();
  if (!t) return alert('タイトルを入力してください');
  items.unshift({id: Date.now(), title: t, cat: document.getElementById('cat').value, status: document.getElementById('status').value, memo: document.getElementById('memo').value});
  save(); renderList();
  document.getElementById('title').value = ''; document.getElementById('memo').value = '';
}
function deleteItem(id) { items = items.filter(i => i.id !== id); save(); renderList(); }
function filterBy(btn, cat) {
  currentFilter = cat;
  document.querySelectorAll('.filters button').forEach(b => b.classList.remove('active'));
  btn.classList.add('active'); renderList();
}
function statusLabel(s) { return {idea:'ネタのみ', draft:'下書き中', published:'公開済み'}[s] || s; }
function renderList() {
  const filtered = currentFilter === 'all' ? items : items.filter(i => i.cat === currentFilter);
  document.getElementById('list').innerHTML = filtered.map(i =>
    `<tr class="status-${i.status}"><td>${i.title}</td><td>${i.cat}</td><td>${statusLabel(i.status)}</td><td style="font-size:0.8em;color:#666;">${i.memo}</td>
     <td><button class="del-btn" onclick="deleteItem(${i.id})">削除</button></td></tr>`
  ).join('');
}
renderList();
</script>
</body>
</html>

使い方: このHTMLをコピーして「neta-kanri.html」という名前で保存 → ブラウザで開く → 完成

完成版の使い方

コードをテキストエディタ（メモ帳でもOK）に貼り付けて neta-kanri.html で保存
保存したファイルをダブルクリックしてブラウザで開く
タイトルを入力して「追加」ボタンをクリック
カテゴリボタンで絞り込み
ブラウザを閉じてもデータは残る

非エンジニアが真似するときの注意点

カテゴリ名を変えるには: <option>Claude Code研究所</option> の部分を自分のカテゴリ名に書き換えてClaude Codeに「このカテゴリを追加して」と言えばOK
色を変えるには: .status-draft { background: #fef9c3; } の部分の色コードを変更。「下書き中の色を青にして」とClaude Codeに伝えれば変えてくれる
スマホで使いたいなら: Google Driveに保存して、スマホブラウザで開く（localStorageはデバイスごとに別々になる点に注意）
データのバックアップ: localStorageは同じブラウザ・デバイスでのみ保存される。ChromeとSafariは別々。定期的にCSV出力機能を追加するとよい

これを副業導線に転用するなら？

このアプリで「記事ネタを管理できる」状態を作ったとして、次のステップです。

転用パターン	内容
コンテンツ量産のPDCA化	「下書き中」ステータスを毎週消化する習慣 → 月8本以上の記事量産体制
記事ネタの商品化	管理しているネタリストをまとめて「記事ネタ100本リスト（¥980）」として低単価noteで販売
アプリ自体を商品化	このHTMLを「ブログ記事ネタ管理ツール（無料配布）」として無料特典に使いLINE登録誘導
Claude Code研究所の記事ネタ化	このアプリ制作ログ自体が記事になる（まさに本記事）