Claude Codeで マーケターの課題を解決する 

自己紹介 SNSでAIやデザインの情報を発信中
 直近のAIデザインやプロンプトについての記事
 

きっかけ マーケターからの相談 「自分たちでLPをつくりたい」 

構想 誰もがLPデザインを 生成できる仕組みがほしい 社内のマーケターから「自分たちでLPをつくりた い」という相談を受けました。半年以内に成果を 出すためには、素早い制作と効果検証のサイクル が不可欠です。良いものをつくりたい、しかし時 間がない... その言葉がきっかけとなり、誰もがデザインでき る環境と仕組みを考え始めました。 

事業会社マーケターの課題 限られた時間で 複数のtoB LPを 早く量産したい 01 業種別LPなど、各業界に特化した 情報を、早く適切に届けたい場面 が多い。
 デザイナーの リソース不足により 内製が難しい 02 内製でクイックに実装することで、 コミュニケーションコストを最小限 に抑えたい。
 マーケでつくりたい しかしできるだけ 品質は担保したい 03 自分たちでつくりたいが、簡易的な LPだと、適切に価値が伝わらない 可能性がある。
 

自社課題とAI技術の接続 この相談を受ける前から AIによるLP構造化を進めていた私は 「この課題」と「自分の構想」が 完全に合致すると考えました 

マーケターと構想が合致した ・内容（コンテンツ）は変数
 ・LPの下地「型」が必要
 ・型がないと、適否が「個人の主観」になる
 ・レゴのようなパーツと、その組み合わせ方
 ・見た目がばらついてしまう
 ・型があればマーケもクリエイターになれる
 デザインがコントロール できないことが問題である ・デザイナー以外がデザインできるようにしたい
 ・デザインは3つの構造に分解できる
 ・toB LPも分解し「型」をつくりたい
 ・パズルのように組み替えれば完成する仕組み
 ・AI x 型で、品質・スピード・再現性を高める
 ・デザインできる人が増えれば、事業は加速する
 誰でもデザインができる 環境と仕組みをつくりたい マーケター 私（デザイナー） 

課題解決の手段：ツール選定 Claude Code notionLP Studio notionLPにプラグインを入れ ることで、誰でも簡単に情報 公開と目的達成が可能に。
 Antigravity・Framer・Gemin i Canvas・Google AI Studio などのAIツールで実装まで完 結。
 ノーコードデザインツールとし て、デザイナー以外でも制作 が可能。テンプレもある。
 

課題解決の手段：ツール選定 Claude Code notionLP Studio notionLPにプラグインを入れ ることで、誰でも簡単に情報 公開と目的達成が可能に。
 Antigravity・Framer・Gemin i Canvas・Google AI Studio などのAIツールで実装まで完 結。
 ノーコードデザインツールとし て、デザイナー以外でも制作 が可能。テンプレもある。
 

3つの構造について 

設計 3つのmdファイルで LPデザインを分解する デザイン要素を3つに分解する手法は、 NotebookLMにおけるスライドデザイン生成で 設計した構造と同様の考え方です。 ▶mdA：デザインシステム（固定） ▶mdB：toBLP構造（固定） ▶mdC：コンテンツ原稿（可変） Antigravity
 NotebookLM
 

3つのmdファイルについて lp-structure.md design-system.md content-source-template.md toB LP構造 デザインシステム コンテンツ原稿 企業のブランドを視覚的に再現するための ルールブック。カラーパレット6色・フォント・ ボタン・カード・余白・アニメーション・アクセ シビリティ・禁止事項まで、LPを構成するす べてのビジュアル要素の仕様を定義。 
 
 toB向けLPの骨組みを定義。ヘッダーから フッターまで全11セクションについて、レイア ウト型・CTA・レスポンシブ挙動・コンテンツ 参照先を構造化。セクションの順序と型を遵 守しtoB LPの勝ちパターンを再現。
 
 LPに表示する実際のテキスト・ビジュアル指 示をまとめた原稿ファイル。見出し・本文 ・CTA文言・FAQ・フォーム項目まで、AIがそ のまま使用するコンテンツマスターデータ。 ベストプラクティスを定義しておく。 
 
 

mdA：デザインシステム（固定） 

mdB：toBLP構造（固定） 

mdC：コンテンツ原稿（可変） 

SKILLの活用 

SKILLを活用する https://platform.claude.com/docs/ja/agents-and-tools/agent-skills/overview デザイン専門領域におけるスキル（Agent Skills）が 職種とツールを横断する汎用武器になる スキルは、再利用可能なファイルシステムベースのリ ソースであり、クロードにドメイン固有の専門知識を提供 します。ワークフロー・コンテキスト・ベストプラクティスに より、全般をスペシャリストに変えます。
 今回のプロジェクトでは、デザインシステム・LP構造・コン テンツ原稿の3ファイルを1つのスキルにパッケージ化し ました。
 ▶スキルを使う理由
 

SKILLがAIエージェントを横断する SKILL Antigravity Cursor Claude Code 

SKILLを取り入れ、SKILLを拡充する ▶指揮者の役割 SKILL.mdを追加 ▶デザインシステムにSKILLを付加 UI UX Pro Maxなどのデザイン関連SKILLを活用。SKILLから 「自社に適応すべき要素」を抽出し、デザインシステムに反映。 デザインシステムのみ変更する。
 3つのmdにとは別に「SKILL.md」を追加。思考順序・作業順序 は、画像生成にも非常に重要な観点。指揮者のような役割とし て、このmdを追加することを推奨。
 

No content

SKILLを育てるサイクル 

まとめ ・自社課題とAI技術の接続を図る ・AI活用と仕組みで事業を加速させる ・SKILLを育て、組織の資産とする 

Claude Codeでマーケターの課題を解決する