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

※この記事はnoteから引用しています。


前回のnoteで、「発信のパーソナルトレーナー」として情報発信サポートを始めたことをお知らせしました。

HPにはまだサービスページがなかったので、Claudeが書いたコードをコピペしてページを作ってみました。

わたし自身はコードは1行も書けないけど、「こんなイメージで」「ここは修正して」とClaudeに日本語で指示するだけで簡単に作れちゃいました。

このnoteでは、自分でやったこと・Claudeに任せたこと・途中で修正したことをご紹介します。

目次

作ったページ「情報発信サポート」

Claudeと相談しながらできあがったのが、こちらのページです。

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

「情報発信サポート」ページのファーストビュー

経営者やご担当者の方が、オンラインで話すだけで記事ができて、最後は自分で書けるようになるまで伴走するサービスです。

もともとは、既存のお客様のHPコラムやnoteをお手伝いしたことから生まれたサービスです。

私がやったこと

私がやったのは、主にこの4つです。

①サービスの中身を伝える

  • 実際のお客様とのやりとり(Web会議で話す→トレーナーが下書きする→お客様が加筆・修正する)
  • 料金プラン(伴走型・おまかせ型・スポット相談)
サービスの流れの説明や画像もClaudeが補ってくれました

②素材を用意する

  • ヒアリングの録画
  • プロフィール写真
  • YouTubeへの動画アップ(限定公開)…動画の制作はClaudeがやってくれました。
YouTube動画も作ってくれました。サムネイルはCanvaで自作。

③できたものにダメ出しする

  • 「AIっぽいから英語の見出しを消して」
  • 「余白が少ないから文字をシンプルに載せて」
  • 「イラストの人物がハゲてるから直して」 など
左の人物、修正前のものはハゲて見えますよね?笑

➃WordPressに貼る

  • カスタムHTMLブロックにコピペ
  • ページ設定、メニューの追加
  • 最後の文章は自分で手直し
WordPressの編集画面。「コードエディター」にコードをコピペするだけでページが完成

自分でコードを書くことなく、完結しました。

Claudeがやったこと

Claudeには、ページづくりのほぼすべてをお願いしました。

①ワイヤーフレーム(ページの設計図)

「住宅展示場のモデルルームのように、受けるとどうなるかが見えるページにしたい」というお願いから、構成を提案してもらいました。

②文章

「なかなか始められない」「始めても、続かない」というお悩みから、サービス内容、料金までの流れの文面を作ってもらいました。
最終的に自分で文言を修正しました。

いちばん強調したい「続けるためのトレーナー」につながる流れを意識しました

③ヒアリング動画の編集

  • Zoomの文字起こしから、私の深掘り質問を探す
  • 5つの質問を約34秒のダイジェスト動画にする
  • お客様の声はできるだけカット
  • HPの色に合わせたデザインに調整

④ファーストビュー、画像の生成

  • 写真の見せ方を複数パターン提案
  • サービスの流れを説明する画像を生成
自分では描けないイラストもおまかせ

⑤WordPress用のコード

  • パソコンとスマホ、両方の表示を確認したうえでコードを提供
  • タイトルの消し方、余白の直し方、メニューへの追加も教えてくれる

特に、動画編集まで頼めるとは思っていなかったので、これには驚きました。

相談〜公開まで3日

サービスページを作りたいな、と思ってClaudeに相談したのが10月18日の夜。10月20日の朝にはページを限定公開しました。

そのあと、イラストや余白の修正をして、10月21日の夜に完成。

細かい修正まで含めて、相談から公開まで3日で完結しちゃいました。

発信のパーソナルトレーナー、受付中です

今回のページづくりは、私が話して、Claudeが形にしてくれました。

情報発信サポートでは、それと同じことを、お客様と私で行います。

「なかなか発信が続けられない」
「そもそも何を書いたらいいのかわからない」
「途中で挫折しちゃった」

そんな方に向けて、オンラインで話した内容を記事にし、最後はご自身で書けるようになるまで伴走します。

情報発信について相談してみたくなったら、ぜひお気軽にお問い合わせください!


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

目次