Claude CodeとCodexでLP制作スキルを作る方法

TL;DR

LPの構成とコピー、デザインガイドを先に決め、スマホ版とPC版の画像を生成してHTMLに並べると、統一感のあるLPを作成できる。制作中の修正点をスキルへ継続的に追加し、最後に商品固有の情報を抽象化すれば、別の商品やイベントにも同じ工程を再利用できる。

Transcript

はい、こんにちは。ケトです。この チャンネルは精成の最新情報や活用事例を 紹介してます。是非チャンネル登録などお 願いいたします。そして今回のテーマは GPTイメージ2を使うことで広告用の LPとかウェブサイトなどをたった1回の 指示だけで超効率よく作れるかと思ったの で今回はですね 作成用のクロードコード用のスキルを作成 するという流れをですね、0から完成する までをですね、この動画でお見せしたいと 思います。で、今回クロードコードとコ cデx、え、どちらも使っていくんです けど、どちらでやってもですね、全く問題 ありません。え、流れはほとんど同じに なりますので、え、皆さんが使っている ものに合わせて参考にしていただければと 思います。で、今回の動画LPを題材にし てスキルを作ってくって... Read More

Key Insights

• LPの構成とコピーは制作工程で最も重要であり、ターゲット、ベネフィット、特徴、実績、価格、CTAを固めてから画像生成へ進む必要がある。
• スタイルガイドは画像間の統一性を保つ基準であり、アスペクト比、デザインの世界観、トーン、色合いを生成前に明文化して共有する役割を持つ。
• 制作スキルは完成後に一度だけ保存するものではなく、制作中に見つけた注意点や改善策を随時追記し、繰り返すほど再現性を高める仕組みである。
• スマホ版とPC版の画像は同じ絵を基礎にしつつ、画面幅に合わせてレイアウトを変えることで、デザインの一貫性と端末ごとの見やすさを両立できる。
• LP画像はヒーロー、共感、ベネフィット、解決策、権威性、お客様の声、オファー、価格、CTAの順に作ると、最初に決めた構成を保ちやすい。
• 途中の生成結果に不要な商品画像が繰り返し登場した場合は、商品を出す箇所と利用シーンを描く箇所をルール化し、スキルと後続画像へ反映できる。
• 画像を縦に並べるLPは境界部分が不自然になりやすいが、画像間へぼかしたようなCSS表現を加えることで、セクション同士を自然につなげられる。
• 固有の商品情報やデザインを抽象化したスキルは、イベントの日時、会場、費用、定員、内容、写真などを渡すだけで、別用途のLP制作にも再利用できる。

Questions & Answers

Q: Claude CodeやCodexでLPを作る方法は？

最初に商品のターゲット、コンセプト、ベネフィット、特徴、実績、お客様の声、価格、CTAを整理し、LPの構成とコピーを作成します。次にデザインの世界観や色を定めたスタイルガイドを作り、各セクションのスマホ版とPC版画像を生成します。最後に画像をHTMLへ並べ、端末ごとに表示を切り替える設定を加えます。

Q: LP制作で最初に決めるべき内容は何ですか？

最初に決めるべきなのは、ターゲット層、LP全体のコンセプト、セクション構成、キャッチコピー、サブコピー、共感文、ベネフィット、解決策、特徴、実績、お客様の声、価格、CTAです。動画では構成作りが最も重要だとされ、実務ではAIへ任せきりにせず、商品のコンセプトを十分に考える必要があると説明されています。

Q: LP用のスタイルガイドを作る理由は何ですか？

複数のセクション画像を個別に生成すると、世界観や色合い、レイアウトの方向性がずれる可能性があるためです。アスペクト比、デザインの世界観、トーン、色合いなどを共通ルールとして保存し、毎回参照させることで、縦に画像を並べたときにもLP全体の統一性を維持しやすくなります。

Q: LP制作スキルの再現性を高める方法は？

構成、スタイルガイド、画像生成、HTML化という基本工程をスキルへ登録し、制作中に判明した修正点もその都度ルールへ追加します。動画では、スマホ版とPC版を同時に作ることや、商品画像を表示するセクションを限定すること、画像間の境界をCSSで自然につなぐことを追記し、スキルを育てています。

Q: スマホ版とPC版のLP画像はどう作り分けますか？

両方で別の内容を作るのではなく、同じ絵を使いながら画面幅に合わせてレイアウトを変更します。まずヒーローヘッダーでスマホ版とPC版を試し、その規則をスキルへ追加したうえで、共感、ベネフィット、解決策、権威性、お客様の声、価格、CTAなど、後続の全セクションにも適用します。

Q: 画像を並べたLPの境界を自然に見せる方法は？

縦に配置した画像同士の境界へ、ぼかしたようなCSSデザインを加えます。動画内の完成例では、この処理によって画像の境目が曖昧になり、別々に生成したセクションが自然につながって見えるようになりました。この注意点も制作スキルへ保存すれば、次回以降のLPでも同じ処理を再利用できます。

Q: 作成したLP制作スキルを汎用化する方法は？

完成したスキルから、特定の商品、デザイン、OpenAI向けの記述など、個別案件に依存する部分を抽象化します。動画ではCodexで作ったスキルを圧縮してClaude Codeへ渡し、Claude Code向けに書き換え、デザインスタイルを毎回変更できるようにしながら、統一性を守る共通ワークフローとして再登録しています。

Q: 汎用化したスキルでイベントLPには何を指定しましたか？

2026年7月24日15時開始、渋谷区のサンプル会議室、参加費1人2000円、最大150名という条件を指定しました。さらに、AIエージェント活用手法のワークショップ、ゲストによるAIセミナー2本、交流時間、書籍の参加者プレゼント、軽い食事と酒、立ち飲み形式という内容と、主催者の顔写真を渡してLPを作成しました。

Summary & Key Takeaways

• 最初にGPTへ商品の概要、ターゲット、ベネフィット、特徴、実績、お客様の声、価格、CTAなどを渡し、LPの構成とコピーを作成させる。動画では架空のスポーツドリンクを題材に、糖質0、味のレパートリー、価格120円、今すぐ注文という要素を設定した。ただし、構成はLP制作で最も重要であり、実務では商品コンセプトを人が十分に検討してから次の工程へ進む必要がある。

• 画像生成前に、アスペクト比、世界観、トーン、色合いなどをまとめたスタイルガイドを作り、LP制作の流れとともにスキルへ登録する。まずヒーローヘッダーを生成し、スマホ版とPC版で同じ絵を使いながらレイアウト幅を変える規則を追加する。その後、共感、ベネフィット、解決策、権威性、お客様の声、オファー、価格、CTAの各画像を順番に生成する。

• 生成結果を確認し、不要な商品画像を除く規則や、画像間の境界をCSSで自然につなぐ処理などをスキルへ反映する。完成画像はHTMLに並べ、端末に応じてスマホ版とPC版を切り替える。さらにスキルから特定商品やツールに依存する情報を抽象化し、Claude Codeへ移してイベントLPを作成した結果、顔写真、日時、場所、費用、定員、内容を伝える一度の指示で両端末向けLPを生成できた。