- 投稿日：2026/04/12
はじめに
1ヶ月前、自分がLPを作れるなんて思ってもいませんでした。
HTMLって何？CSSって何？
そんなレベルの人間が、Claude Codeと対話するだけでLPを作り、納品して、データ分析して、改善して、気づいたらGoogle検索にも載っていた。
これは、その全記録です。
「プログラミングなんて自分には無理」と思っている方にこそ、読んでほしい。
スキル0だった自分の話
まず、私のスペックを正直に書きます。
・プログラミング経験→ゼロ
・HTMLやCSS→聞いたことはあるけど書いたことはない
・デザインツール → Canvaで簡単な画像を作る程度
・Web制作の知識 → 「サーバーって何？」のレベル
つまり、LP制作に必要なスキルは「何ひとつ」持っていませんでした。
それでも「やってみたい」と思ったのは、リベシティで知り合った方のお店を見て、「このお店の良さ、もっと伝わるページがあったらいいのに」と素直に感じたから。
技術がないなら、技術を持っている「相棒」を見つければいい。
それがClaude Codeでした。
Claude Codeを使い始めた日
Claude Codeの存在自体は、以前から知っていました。
ただ、「エンジニア向けのツールでしょ？」と思って、ずっと手を出せずにいた。
踏み出せたきっかけは、技術的な自信がついたからじゃありません。
「この人のお店、もっと伝わるページがあったらいいのに」
その気持ちが、「自分には無理」を超えた。
ただ、それだけです。
実際に触り始めたのは、ほんの1ヶ月ほど前のこと。
試しに「こんな感じのページを作りたい」と日本語で伝えてみたら、コードが出てくる。
しかもそのコードを実行すると、本当にページが表示される。
「これ、もしかして自分でもLP作れるんじゃないか？」
その瞬間の感覚は、今でもはっきりと覚えています。
LP制作の流れ（5ステップ）
実際にやったことを5ステップで整理します。
ステップ1：ヒアリング
まずはお店のオーナーさんに話を聞きました。
・どんなお客さんに来てほしいか
・お店の強みは何か
・今の集客の悩みは何か
ここはAIじゃなくて、人と人の会話です。
「何を伝えたいか」が決まらないと、どんなに技術があってもいいページは作れない。
ここが一番大事だったと、今振り返っても思います。
ステップ2：構成を考える
ヒアリングの内容をClaude Codeに伝えて、ページの構成を一緒に考えました。
「40〜60代の女性が安心できるデザインで」
「最初に悩みへの共感を入れて」
「最後はLINE登録に誘導したい」
こんな感じで、日本語で伝えるだけ。
Claude Codeが「こういう構成はどうですか？」と提案してくれて、それを見ながら「ここはもう少し○○な感じで」とキャッチボールしていく。
設計図を一緒に描いている感覚でした。
ステップ3：実装
ここが一番「AIってすごい」と思った部分です。
構成が決まったら、Claude Codeがコードを書いてくれる。
私がやったのは「実行する」ボタンを押すことと、画面を見て「ここの色をもう少し柔らかく」「この文字が大きすぎる」とフィードバックを返すこと。
コードは1行も自分で書いていません。
でも、出来上がったページを見た時は、自分で作った実感がちゃんとありました。
不思議な感覚ですよね。
ステップ4：修正・ブラッシュアップ
最初のバージョンで完成、とはいきません。
・スマホで見たらレイアウトが崩れている
・ボタンの文言がしっくりこない
・お客様の声のセクションをもっと目立たせたい
こういう細かい修正を何度も繰り返しました。
「ここ、スマホだとボタンが小さすぎる」と伝えれば、Claude Codeが直してくれる。
この「伝える→直す→確認する」のサイクルが、思った以上にスムーズで楽しかったです。
ステップ5：公開・納品
完成したLPを「Vercel」というサービスで公開しました。
これも「Vercelで公開して」とClaude Codeに伝えたら、手順を教えてくれて、ほぼ自動で完了。
URLをオーナーさんに共有して、納品完了。
「すごい！本当にプロが作ったみたい！」
その言葉をもらった時の嬉しさは、何にも代えがたいものでした。
非エンジニアがハマったポイント
順調そうに書きましたが、実は何度もつまずいています。
正直に書きます。
Gitがわからない
「コミットって何？」
「プッシュって何？」
最初は本当にチンプンカンプンでした。
でもClaude Codeに「Gitって何ですか？小学生にもわかるように教えて」と聞いたら、丁寧に説明してくれた。
「セーブポイントを作る仕組みですよ」と言われた時、一気に腑に落ちました。
デプロイで何度もエラー
公開する時にエラーが出て、何が起きているのかさっぱりわからない。
でも、エラーメッセージをそのままClaude Codeに貼り付けると、「ここが原因です。こう直しましょう」と教えてくれる。
自分で原因を特定する必要がない。
これは非エンジニアにとって革命的でした。
スマホ表示の調整
PCでは綺麗に見えるのに、スマホだと崩れる。
これが地味に一番手間がかかりました。
「スマホで見たらこうなっている」とスクリーンショットを見せながら修正を繰り返す。
ここは根気が必要でしたが、Claude Codeが嫌な顔ひとつせず（当たり前ですが）付き合ってくれるのは心強かった。
納品して終わりじゃなかった
ここからが、自分でも予想していなかった展開です。
LPを納品した後、「このページ、ちゃんと見られてるのかな？」と気になりました。
そこでClaude Codeに相談したら、「Clarityというツールを入れると、ユーザーの行動が見えますよ」と教えてくれた。
導入してみたら、驚きの連続でした。
・ページのどこまでスクロールされているか
・どこでユーザーが離脱しているか
・どのボタンがクリックされているか
全部、数字で見える。
データを見ながらClaude Codeと一緒に改善案を考えて、実際に修正を入れてみたら、数値がはっきり変わりました。
・スクロール奥行き：36%→51%（「ここまで読まれている」が増えた）
・デッドクリック：33%→21%（「押せると思ったのに反応しない」ストレスが減った）
・セッション数：3→19（アクセス自体が増えた）
「作って終わりじゃない。届いているか、読まれているか、全部見える」
この感覚は、Clarityを入れるまで知らなかったものでした。
さらに驚いたのは、Google検索からの流入が発生していたこと。
「作る」だけじゃなくて「届ける→見える化する→育てる」までできた。
これは正直、自分でも想像していなかった世界でした。
副業スキルとしてのLP制作
ここで少しだけ、「稼ぐ力」の話をさせて下さい。
リベシティには、素敵なお店やサービスを持っているのに、Web上の見せ方で損をしている方がたくさんいます。
「LPがあればもっと伝わるのに」
そう感じる場面、ありませんか？
今、LP制作の需要は確実にあります。
でも、プロのWeb制作会社に頼むと数十万円。
個人で受けられる人は、まだまだ少ない。
「プログラミングができなくても、AIを使えばLPが作れる」
この事実を知っているだけで、見える景色が変わってきます。
私もスキルマーケットに出品しています。
「非エンジニアがAIで作ったLP」に、興味を持って下さる方がいる。
それだけで、「やってよかった」と心から思えます。
今できるようになったこと
振り返ると、自分でも驚きます。
1ヶ月前
・コードは1行も書けない
・Webページの仕組みがわからない
・「LP」の意味すら曖昧
・データ分析なんて別世界の話
今
・LPをゼロから作って納品できる
・Clarityでユーザー行動を分析できる
・データに基づいた改善提案ができる
・Google検索に載るための施策がわかる
・Vercelでのデプロイが自分でできる
・Gitでバージョン管理ができる
・構造化データ（JSON-LD）の概念がわかる
・次のクライアントに具体的なデザインを提案できる
1ヶ月前は「0個」だったものが、今は「8個」になっている。
全部、Claude Codeと対話しながら身についたものです。
これから始める人へ
必要なものは、たった4つです。
・パソコン（WindowsでもMacでも）
・Claude Code（Proプラン以上）
・VS Code（無料のエディタ）があったらやりやすい
・「やってみよう」の気持ち
技術的なスキルは、本当にいりません。
大事なのは「誰のために、何を伝えたいか」を考えられること。
それさえあれば、技術はClaude Codeが補ってくれます。
最初の一歩は怖いかもしれません。
でも、その一歩が新たな世界へと踏み出すきっかけとなります。
まとめ
ここまで読んで下さった方に、最後に伝えたいことがあります。
AIは魔法じゃありません。
指示を出すのは自分だし、判断するのも自分。
ヒアリングも、デザインの方向性を決めるのも、人間にしかできない。
でも、AIは「やりたい」を「できた」に変えてくれるパートナーになれる。
スキル0だった自分が、今こうして誰かの役に立てている。
それが何よりの証拠です。
「自分には無理」と思っている人へ。
1ヶ月前の私も、まったく同じことを思っていました。
でも今、こうして記事を書いている自分がいる。
変わったのはスキルじゃなくて、「やってみよう」と思えたこと。
たったそれだけで、見える景色は変わります。
ぜひ一緒に、Claude Codeで「やりたい」を形にしていきましょう！
それでは、よいAI活用ライフを！
「No AI No Life！」
記事一覧（AI系）
・【AIでもっとラクしよう】今日からあなたが「一人社長」になる方法
・【プロンプトを捨てて鍋を持て】新人でも「師匠の味」が出せるAI活用術
・【クロコの節約法を伝授】Claude Code、すぐ制限がくる人とこない人の違い
・【クロコ活用術】Claude Codeに"伝わる人"と"伝わらない人"の決定的な違い《GPTs付き》⇦＜まずはこちらをおススメ♪＞
記事一覧（健康系）
・【食費カット・健康資産アップ】健康オタクが語る「もやし」のすゝめ
