Claude→コピペで新しいサービスページを作りました|note記事を更新しました

※この記事はnoteから引用しています。
前回のnoteで、「発信のパーソナルトレーナー」として情報発信サポートを始めたことをお知らせしました。
HPにはまだサービスページがなかったので、Claudeが書いたコードをコピペしてページを作ってみました。
わたし自身はコードは1行も書けないけど、「こんなイメージで」「ここは修正して」とClaudeに日本語で指示するだけで簡単に作れちゃいました。
このnoteでは、自分でやったこと・Claudeに任せたこと・途中で修正したことをご紹介します。
作ったページ「情報発信サポート」
Claudeと相談しながらできあがったのが、こちらのページです。

キャッチコピーは「発信にも、パーソナルトレーナーを。」

経営者やご担当者の方が、オンラインで話すだけで記事ができて、最後は自分で書けるようになるまで伴走するサービスです。
もともとは、既存のお客様のHPコラムやnoteをお手伝いしたことから生まれたサービスです。
私がやったこと
私がやったのは、主にこの4つです。
①サービスの中身を伝える
- 実際のお客様とのやりとり(Web会議で話す→トレーナーが下書きする→お客様が加筆・修正する)
- 料金プラン(伴走型・おまかせ型・スポット相談)

②素材を用意する
- ヒアリングの録画
- プロフィール写真
- YouTubeへの動画アップ(限定公開)…動画の制作はClaudeがやってくれました。

③できたものにダメ出しする
- 「AIっぽいから英語の見出しを消して」
- 「余白が少ないから文字をシンプルに載せて」
- 「イラストの人物がハゲてるから直して」 など

➃WordPressに貼る
- カスタムHTMLブロックにコピペ
- ページ設定、メニューの追加
- 最後の文章は自分で手直し

自分でコードを書くことなく、完結しました。
Claudeがやったこと
Claudeには、ページづくりのほぼすべてをお願いしました。
①ワイヤーフレーム(ページの設計図)
「住宅展示場のモデルルームのように、受けるとどうなるかが見えるページにしたい」というお願いから、構成を提案してもらいました。
②文章
「なかなか始められない」「始めても、続かない」というお悩みから、サービス内容、料金までの流れの文面を作ってもらいました。
最終的に自分で文言を修正しました。

③ヒアリング動画の編集
- Zoomの文字起こしから、私の深掘り質問を探す
- 5つの質問を約34秒のダイジェスト動画にする
- お客様の声はできるだけカット
- HPの色に合わせたデザインに調整
④ファーストビュー、画像の生成
- 写真の見せ方を複数パターン提案
- サービスの流れを説明する画像を生成

⑤WordPress用のコード
- パソコンとスマホ、両方の表示を確認したうえでコードを提供
- タイトルの消し方、余白の直し方、メニューへの追加も教えてくれる
特に、動画編集まで頼めるとは思っていなかったので、これには驚きました。
相談〜公開まで3日
サービスページを作りたいな、と思ってClaudeに相談したのが10月18日の夜。10月20日の朝にはページを限定公開しました。
そのあと、イラストや余白の修正をして、10月21日の夜に完成。
細かい修正まで含めて、相談から公開まで3日で完結しちゃいました。
発信のパーソナルトレーナー、受付中です
今回のページづくりは、私が話して、Claudeが形にしてくれました。
情報発信サポートでは、それと同じことを、お客様と私で行います。
「なかなか発信が続けられない」
「そもそも何を書いたらいいのかわからない」
「途中で挫折しちゃった」
そんな方に向けて、オンラインで話した内容を記事にし、最後はご自身で書けるようになるまで伴走します。
情報発信について相談してみたくなったら、ぜひお気軽にお問い合わせください!

私のnoteでは、
中小企業診断士として
中小企業向けお役立ち情報・
診断士活動・コンサルのリアル
を発信しています。
興味のある方は以下のバナーから
ご覧ください。

