2時間でLP完成！Claudeコーディングで自己紹介サイトを作ってみた話
先日、自分の自己紹介サイト naganoyoh.com を公開しました。
「へー、サイト作ったんだ。ノーコードツールとか？」
いいえ。Claudeと作りました。
所要時間は約2時間です。
今日は、AIとの「対話」だけでLPを完成させた過程を書いてみます。
こんにちは、永野ヨウです。
48歳で長期ブランクの主婦から再就職した、とあるJTC勤め。
CADオペ×社内デザイナー×Web担当で、
小規模ですがSNS企業アカの中の人やってます。
50代・氷河期世代の視点から、あなたの発信をラクにするヒントを発信しています。よろしくお願いします。
きっかけは「2つの軸」問題
私には発信の軸が2つあります。
ひとつは「AI×文章×デザイン」で50代の伝え方をサポートする軸。
そしてもうひとつは「ADHD×コーチング」で生きづらさに寄り添う軸。
欲張りすぎというご意見もあるでしょう。
ですが、両方あっての私なのです。
後々は別のサイトを作ることを考えるかもしれませんが、まずは総合サイトを作ってみようと思いました。
ただ、1つのLPで両方を見せようとすると、どうしても情報過多になる。
そんなとき、ふと思いました。
「Claudeに相談してみよう」
まずはGensparkで下調べ
最初に、GensparkというAIツールで自分のnote、X、Threadsを分析させ、LP構成の叩き台を作りました。
ストーリーの力を軸にした構成案が出てきた。悪くない。でも、どこか引っかかる。
そこでClaudeに
熟練のマーケターとして、この構成を確認してください。却下して、よりよい提案をすることも可能です。
と投げかけてみました。
すると、こんな指摘が返ってきました。
「ターゲットが曖昧です」
「逆境ストーリーを前面に出しすぎると、感動ポルノとして消費されるリスクがあります」
「行動喚起が弱い」
…手厳しい。
でも、言われてみれば確かにその通り。
AIが別のAIの提案を批判的に検討する。
この掛け合わせが面白かったですね。
壁打ちから構成へ
Claudeとの対話を続けるうち、ひとつのアイデアが生まれました。
「訪問者に最初に選ばせたらどうだろう？」
つまり、サイトを開いたら「あなたは、どちらですか？」と問いかける。
AI×伝え方に興味がある人と、
ADHD×生き方に興味がある人。
選んだ方のコンテンツだけが表示される仕組み。
2つの軸を1つのサイトに収めながら、訪問者には「自分向けのページだ」と感じてもらえる。
情報過多も防げる。
この発想はClaudeとの対話がなければ出てこなかったと思います。
コーディングはClaudeにお任せ
構成が決まったら、次はコーディング。
「JavaScriptで表示を切り替える仕組みにして」
「ヒーローセクションに薄く背景画像を入れたい」
「noteのカードにサムネを入れて」
「SEO対策のメタタグも追加して」
私が伝えるのは「こうしたい」というイメージだけ。具体的なコードはClaudeが書いてくれます。
出力されたHTMLをブラウザで開くと、ちゃんと動いている。分岐UIも機能している。感動しました。
細部の調整も対話で
サイトの骨格ができたら、細部を詰めていきます。
「画像のパスを ./img/ フォルダ配下に変えて」と伝えれば、該当箇所を修正したコードがすぐに返ってくる。「OGP画像も設定したい」と言えば、Open GraphとTwitter Cardのメタタグを追加してくれる。
まるで隣に優秀なエンジニアがいて、私の要望を即座にコードにしてくれるような感覚。
最終的に完成したサイトを見て、Claudeはこう言いました。
永野さんの『伝える力』がそのままLPになっている感じがします。良い仕事でした。
褒められると嬉しいものです。
たとえ相手がAIでも。
2時間で何ができたか
振り返ると、この2時間で実現したことは以下の通りです。
要件整理と壁打ちで構成を決定。
2軸構造の分岐UIを設計。
レスポンシブ対応のHTML/CSS/JavaScriptを作成。
SEO対策のメタタグを実装。
OGP画像の設定も完了。
従来の制作フローなら、企画に数日、デザインに1週間、コーディングに1週間、合計2〜3週間はかかっていたはず。それが約2時間。
もちろん、プロのデザイナーが作るクオリティには及ばないのでしょう。でも、「自分の想いを形にする」という目的は十分に達成できました。
実を言うと、Claudeの実力を試させてもらおうという気持ちで着手しました。
しかし、想定以上のサイトができて驚いています。
AIは道具。でも、使い方次第で
今回の経験で実感したのは、
AIは「正解をくれる機械」ではないということ。
むしろ、対話の相手です。
私が曖昧なイメージを投げる。AIが具体化する。私がフィードバックする。AIが修正する。その往復の中で、最初は見えていなかった形が少しずつ姿を現す。
自分でコーディングしなくても、サイトは作れる。でもそれは、AIに丸投げしたからではなく、AIと一緒に考えたからです。
最後に
naganoyoh.com、よかったら見てみてください。
「あなたは、どちらですか？」
この問いかけから始まる私のサイト。Claudeとの2時間の対話が詰まっています。
💡 最後までお読みいただき、ありがとうございました。コメント・スキ・フォローをいただけますと、大変励みになります。
今後も、AIとの協働についての発信を続けていきます。
▼ 次に読むなら
Nano Bananaで図解を作るnoteは、ありがたいことに多くの方にご好評いただいています。この記事では、そのnoteの読者の方による事例をご紹介しています。
