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

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

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

▶ 編集部注

本記事は2026年5月の方針転換前に「AI副業で稼げる」型で書かれた過去記事です。当メディアは現在「AI業界の現実を検証するウォッチドッグ」へ路線を変更し、有料商品はすべて販売停止しました。転換の経緯はこちら。本文は順次書き換え予定です。

このアプリを作った後、自分の商品をアプリで採点しました。結果：「再現条件が不明確」「収益の根拠が示されていない」「ターゲット設定が曖昧」——ほぼすべての項目で「不十分」と判定されました。自分のLPが、自分で作ったチェッカーの指摘する問題パターンそのものだったということです。アプリの実装は本物です。その後、私はそのアプリで自分の商品を検証し、全商品の販売を停止しました。

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

📂 Claude Code生活アプリ化ログ

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

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

結論サマリBOX

「noteで売れない原因は、記事の質より導線の設計ミスであることが多い。そのチェックをClaude Codeで自動化できた。」
自分の販売導線を10項目チェックして、スコアで点数化するアプリを30分で作成しました。
チェックリスト自体を無料特典として配布するという転用アイデアも実証しています。

項目	内容
作ったもの	note販売導線チェックアプリ（HTML/CSS/JS）
所要時間	約30分（修正2回含む）
公開方法	HTMLファイルをブラウザで開くだけ
副業転用	無料特典として配布 → LINE登録誘導
関連シリーズ	Claude Code生活アプリ化ログ

今日の面倒ごと

「noteで記事を公開しているのに全然売れない。SNSで告知もしている。でも何が悪いのかわからない。『導線設計が大事』と言われても、自分のnoteのどこが問題かチェックする方法がない。誰かにレビューしてもらうにもお金がかかる。まず自己診断できる何かが欲しい。」

Claude Codeで何を作るか

ゴール: note販売導線の自己診断チェックアプリ

チェック項目（10項目）:
1. noteのプロフィールに「何を売っているか」が書いてある
2. プロフィールにLINE登録リンクがある
3. 無料note記事が3本以上ある
4. 無料noteの末尾にLINE登録CTAがある
5. LINE登録後に「ありがとうメッセージ」が自動送信される
6. LINE登録後のステップ配信が3通以上ある
7. 低単価note（¥500〜980）が1本以上ある
8. 有料note記事の冒頭無料部分で「解決したい悩み」が明確になっている
9. 有料noteの末尾に「本命商品」への案内がある
10. SNS（X）のプロフィールにnoteまたはLINEのリンクがある

スコア: 10項目×10点 = 100点満点。スコアに応じて診断メッセージを表示。

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

note販売導線の自己チェックができるシンプルなWebアプリを作ってください。

仕様：
- チェックボックスが10個ある（各項目は後で書きます）
- チェックした数×10でスコアを自動計算する
- スコアに応じてメッセージが変わる：
  - 80〜100点：「導線設計は完成度が高い。あとは集客」
  - 60〜70点：「基本はある。CTAと後半の導線を強化しよう」
  - 40〜50点：「LINE導線が弱い可能性が高い。まずLINE設定を先にしよう」
  - 0〜30点：「まだ導線がほとんどない状態。noteを書く前に導線を作ろう」
- 1つのHTMLファイルに収める
- シンプルでスマホでも使えるデザイン
- 日本語UI

できた画面・機能

タイトル：「note販売導線チェックシート」
10項目のチェックボックスリスト（チェックするたびにスコアが動く）
スコアバー（緑→黄→赤のグラデーション）
診断メッセージエリア（スコアに応じて自動変化）
「チェックをリセット」ボタン

詰まった点①：「スコアバーが点数に連動しない」

チェックボックスを押してもスコアバーが変わらなかった。

修正プロンプト:

チェックボックスを押したとき、スコアバーの幅がリアルタイムで変わりません。
onchange イベントを使って、チェックの度に幅と色が自動更新されるようにしてください。

→ addEventListener('change', updateScore) の追加で解決

詰まった点②：「診断メッセージのスコア境界が合っていない」

80点を超えても「60〜70点」のメッセージが出ることがあった。

修正プロンプト:

診断メッセージのif分岐がおかしいです。
score >= 80 の条件を最初に判定するよう修正してください。

→ if-else if の順序を修正して解決

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>note販売導線チェックシート</title>
<style>
  body { font-family: sans-serif; max-width: 640px; margin: 0 auto; padding: 16px; }
  h1 { font-size: 1.3em; color: #1a1a2e; }
  .item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
  .item input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: #22c55e; flex-shrink: 0; }
  .item label { font-size: 0.95em; line-height: 1.6; }
  .score-area { background: #f9fafb; border-radius: 8px; padding: 16px; margin: 20px 0; text-align: center; }
  .score-num { font-size: 2.5em; font-weight: bold; color: #7c3aed; }
  .score-bar-bg { background: #e5e7eb; border-radius: 4px; height: 12px; margin: 8px 0; }
  .score-bar { height: 12px; border-radius: 4px; transition: width 0.3s, background 0.3s; }
  .message { margin-top: 12px; font-size: 0.95em; font-weight: bold; }
  .message.high { color: #15803d; }
  .message.mid { color: #b45309; }
  .message.low { color: #b91c1c; }
  .reset-btn { display: block; margin: 0 auto; padding: 8px 20px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; background: #fff; }
</style>
</head>
<body>
<h1>📋 note販売導線チェックシート</h1>
<p style="color:#666;font-size:0.9em;">当てはまるものにチェックを入れてください。10項目×10点 = 100点満点</p>

<div id="checklist"></div>

<div class="score-area">
  <div class="score-num"><span id="score">0</span><span style="font-size:0.5em;color:#888;">/100点</span></div>
  <div class="score-bar-bg"><div class="score-bar" id="bar" style="width:0%;background:#ef4444;"></div></div>
  <div class="message" id="msg"></div>
</div>

<button class="reset-btn" onclick="resetAll()">チェックをリセット</button>

<script>
const items = [
  'noteのプロフィールに「何を売っているか」が明確に書いてある',
  'プロフィールまたは固定記事にLINE登録リンクがある',
  '無料note記事が3本以上公開されている',
  '無料noteの末尾にLINE登録CTAがある',
  'LINE登録後に「ありがとうメッセージ」が自動で届く',
  'LINE登録後のステップ配信が3通以上設定されている',
  '低単価note（¥500〜980）が1本以上ある',
  '有料noteの冒頭無料部分で解決したい悩みが明確になっている',
  '有料noteの末尾に本命商品への案内がある',
  'SNS（X等）のプロフィールにnoteまたはLINEのリンクがある'
];

const cl = document.getElementById('checklist');
items.forEach((text, i) => {
  const div = document.createElement('div');
  div.className = 'item';
  div.innerHTML = `<input type="checkbox" id="c${i}" onchange="updateScore()">
    <label for="c${i}"><strong>${i+1}.</strong> ${text}</label>`;
  cl.appendChild(div);
});

function updateScore() {
  const checked = document.querySelectorAll('input[type=checkbox]:checked').length;
  const score = checked * 10;
  document.getElementById('score').textContent = score;
  const bar = document.getElementById('bar');
  bar.style.width = score + '%';
  bar.style.background = score >= 80 ? '#22c55e' : score >= 60 ? '#f59e0b' : '#ef4444';
  const msg = document.getElementById('msg');
  if (score >= 80) {
    msg.className = 'message high';
    msg.textContent = '✅ 導線設計は完成度が高い。あとは集客が最優先です。';
  } else if (score >= 60) {
    msg.className = 'message mid';
    msg.textContent = '⚠️ 基本はある。CTAと後半の導線を強化しましょう。';
  } else if (score >= 40) {
    msg.className = 'message low';
    msg.textContent = '❌ LINE導線が弱い可能性が高い。まずLINE設定から始めましょう。';
  } else {
    msg.className = 'message low';
    msg.textContent = '❌ まだ導線がほとんどない状態。noteを書く前に導線を作りましょう。';
  }
}

function resetAll() {
  document.querySelectorAll('input[type=checkbox]').forEach(cb => cb.checked = false);
  updateScore();
}

updateScore();
</script>
</body>
</html>

完成版の使い方

コードをコピーして note-funnel-check.html で保存
ブラウザで開く
当てはまる項目にチェック → スコアが自動計算
診断メッセージをもとに改善箇所を把握

使い終わったら: 低いスコアの項目を1つずつ改善していく。1項目改善したらまたチェック → スコアが上がる体験が習慣化のモチベーションになる。

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

チェック項目を変えるには: items 配列の文字列を書き換える。Claude Codeに「4番目の項目を〜に変えて」と言えばOK
診断メッセージを変えるには: updateScore() 内の msg.textContent の文字列を変更
点数単位を変えるには: const score = checked * 10; の 10 を変更（5項目なら * 20 にして100点満点を維持）
スマホアプリっぽくしたいなら: Claude Codeに「PWA対応にして、スマホのホーム画面に追加できるようにして」と指示する

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

転用パターン	内容
無料特典として配布	このHTMLを「note販売導線チェックシート（無料）」としてLINE登録特典にする。登録したらHTMLファイルが受け取れる仕組み
低単価noteで拡張版を販売	チェック後の「改善手順ガイド」を低単価note（¥500〜980）で販売。チェックシートは無料、解決策は有料
診断コンテンツ化	チェックシート結果をX投稿ネタにする。「私のnote導線スコア: 60点でした。低かったのは〜」
本命商品への橋渡し	スコアが低い人を本命商品（AI副業0→1導線パック¥4,980）に誘導する