Claude aiとFigmaで参考LPをベースにオリジナルLPを作る方法｜SEO無料相談LPを実例で解説

自社で集客用のLP(ランディングページ)を新しく作りたいと考えたとき、多くの中小企業のマーケティング担当者がまず直面するのは「ゼロから設計するのが難しい」という壁です。配置、配色、コピー、CTAの位置といった検討項目があまりにも多く、本業と並行して進めるには負荷が高すぎる、と感じる場面が少なくありません。

そこで現実的な選択肢になるのが、すでにうまく機能している既存LPを参考(リファレンス)にしながら、自社の商品・サービス用に作り替えていく進め方です。さらに、ここにClaude aiとFigma MCPを組み合わせることで、構造の言語化や差し替え原稿の生成、Figma上の配置まで、「人がやらなくてよい部分」をかなりの範囲でAIに任せられるようになっています。

本記事では、SEO無料相談の導線LPを作成するという具体的なシナリオを通じて、Claude aiとFigmaを使った参考LPベースの制作手順を整理していきます。

なぜ「参考LPベース」がLP制作の最短ルートなのか

LP制作で「型」を借りることは、品質を落とす行為ではなく、むしろ成果に近づくための合理的な判断と考えられます。中小企業がリソース配分を間違えないためにも、最初に意識しておきたい考え方を整理します。

ゼロから作る vs 参考LPベースゼロから作る・構成検討に時間がかかる・配色やレイアウトで迷う・初版完成までに数週間・改善前にリソース枯渇中小企業には負荷が大きい参考LPベース・構成は参考LPから流用・配色やトーンも先に決まる・初版完成は1〜2日・改善に時間を回せる本業と並行しても続けられる

ゼロから作るより参考にしたほうが早い理由

LPの構成要素は、業種を問わずある程度パターン化されています。ファーストビュー、課題提起、解決の提示、機能や特徴、お客様の声、料金、よくある質問、CTAといった構造は、多くの良質なLPに共通しています。これは、利用者が情報を判断する際の認知の流れに沿った設計であるためであり、構成自体に独自性を持たせる必要はほとんどありません。

実際に今回つくったLPの画像がこちらです。

この作成にかかった時間はわずか30分程度。さらに細かい修正などを加えると正味３時間程度でしあがってしまいます。

つまり、構成をゼロから発明することに時間を使うよりも、すでに一定の成果を出していると思われる参考LPの構造を借りて、その上で自社らしい情報をのせていくほうが、結果として伝わるLPに近づきます。リソースが限られている中小企業ほど、この発想は重要になると考えられます。

参考にすることと模倣(コピー)の違い

誤解されやすい点として、参考LPベースのLP制作はビジュアルやテキストをそのまま流用することではありません。参考にするのは「構造」と「情報設計の意図」であり、画像・コピー・配色・ロゴ・写真といった具体物は必ず自社のブランドに置き換えます。著作権や意匠の観点からも、見た目をそのまま転写する作り方は避ける必要があります。

参考LPから抽出するのは、「どのセクションを、どの順で、どの粒度で見せているか」という構造の情報です。これは骨組みであり、最終的にどんな表情を持つLPになるかは、肉付けする原稿と画像によって決まっていきます。

中小企業のLP制作で多い失敗パターン

LP制作でつまずく中小企業の典型的なパターンとして、「凝りすぎて公開が遅れる」「自社の良さを盛り込みすぎて読者の動線を見失う」「テキスト中心になりCTAが弱い」の三つがよく挙げられます。これらはいずれも、構造設計の段階で型を借りていれば回避できる問題です。

その他は、イメージが抽象的すぎる場合です。なんとなくLPを作る時に置きがちでかっこいい、今どきのサイトなどと会社の上司から言われ作成するケースなどもあるかと思いますが社内担当者の方はしっかりとこの社内決済者の以降を形にすることが大切です。

また、最初から完璧を目指して動かないより、参考LPベースで「8割の完成度の初版」を素早く出して、効果を見ながら磨いていくほうが、最終的な成果は大きくなる傾向があります。改善できる余地を残しておくことも、戦略の一部と考えられます。

セクションのまとめ：LP制作はゼロから発明するものではなく、優れた参考LPの構造を借りて自社用に作り替えるアプローチが、中小企業にとっては現実的かつ成果に近い選択と言えるでしょう。

Claude ai × Figma 連携でできること

ここから、本記事の主役であるClaude aiとFigmaの連携について整理していきます。役割分担を理解すると、何を人がやり、何をAIに任せるかが明確になります。

Claude aiの位置づけ

Claude aiは、マーケティング担当者の側から見ると、テキスト生成だけのチャットツールではなく、「自分のPCで作業を一緒に進めてくれる相棒」として位置づけると理解しやすくなります。

LP制作の文脈においては、参考LPの構造を読み解くこと、原稿の差し替え案を作ること、Figma側のデザイントークンや構成と連動した指示を出すことなど、頭を使う部分の下書きを引き受けてくれる役割を担います。

Figma MCPの役割

Figma側にもMCP(Model Context Protocol)経由でClaudeと連携する仕組みが用意されています。これにより、Figmaのファイル内容(レイヤー構造・コンポーネント・スタイル)をClaudeが「読める」状態になり、逆にClaudeから指示を出してFigma上にオブジェクトを配置することも可能になります。Figmaは引き続きデザインの最終アウトプットを置く場所であり、AIはその上に乗る指示役、という関係です。

非デザイナーにとってのメリットは大きく、Figmaの操作習熟に長い時間をかけなくても、Claude側で構造を言葉で指示することで、レイアウトや配置の素案がFigma上に立ち上がる、という体験になります。これによりデザインの「とっかかり」のハードルが下がります。

連携で得られる効率化

両者を組み合わせると、以下のような工程で「半自動化」が実現します。参考LPのスクリーンショットや構造情報をClaude aiに読み込ませ、構造を箇条書きで言語化させ、それをFigma MCP経由でフレームとセクションの素案として落とし込む、という流れです。

もちろん、最終的なビジュアル調整や写真選定、ブランドの細やかな雰囲気作りは人間の判断が必要になります。しかし、構成検討や原稿の初稿づくりといった「時間がかかるが本質的に難しくない」工程に費やす時間は、従来比で半分以下に圧縮されることが期待できます。

セクションのまとめ：Claude aiは「構造の言語化と原稿の下書き」、Figma MCPは「Figma上への実装指示」を担当し、両者を連携させることでLP制作の負担を大きく下げられます。

参考LPの構造を読み解く

本記事では、清潔感のあるレイアウトと、若年層に向けた直感的な訴求設計が特徴的なLPを題材として扱います。実際にどのように構造を読み解くか、その手順を整理していきます。

参考LPを読み解く3ステップ1観察FVを見る誰に何を約束しているか最初の3秒で判断2分解セクション分け役割ごとに区切る課題・解決・証拠3抽象化構造を抽出自社用に置換骨格だけ流用

ファーストビューを観察する

最初に注目するのは、ページ最上部のファーストビュー(FV)です。どんなターゲットに向けて、どんなベネフィットを、どの粒度の言葉で約束しているか、をまず読み取ります。CTAボタンが何個置かれているか、その文言が何か、視線がどこへ誘導されているか、なども丁寧に観察します。

FVは、訪問者がページを離れるか読み進めるかを決める部分であり、参考LPの設計意図がもっとも凝縮されているエリアでもあります。Claude aiにスクリーンショットを共有して構造を箇条書きで列挙させると、自分が見落としていた要素も浮かび上がってきます。

セクションの役割を分解する

FVの次は、セクションごとに役割を分解していきます。ページ全体を上から順に「課題提起」「解決提示」「機能・特徴」「ユーザーの声」「料金・プラン」「よくある質問」「最終CTA」のように、役割でラベル付けしながら整理します。すべてのLPがこの順番である必要はありませんが、共通する構造のパターンが見えてきます。

このとき、各セクションが「何を読者に納得させようとしているのか」「次のセクションへとどうつなげているか」を意識すると、単なる見た目の真似ではなく、情報設計の意図を理解した形で参考にできます。

訴求のレイヤーを把握する

もう一段深く読み解く視点として、訴求のレイヤーがあります。具体的には、感情的な共感を狙うセクション、機能的な納得を狙うセクション、信頼を担保するセクション、最後に行動を促すセクション、というように、目的別にレイヤーが重なっていることが多いです。

このレイヤー構造を抽出できると、自社のLPに置き換えるとき、「この場所には信頼担保の要素を置こう」「ここには感情訴求のキャッチを置こう」と、置き換えの指針が明確になります。Claude aiに「このLPの各セクションを、感情・機能・信頼・行動のいずれに分類して」と頼むだけでも、初稿としての整理が出てきます。

セクションのまとめ：参考LPは「観察→分解→抽象化」の3ステップで構造を抽出することで、自社のLPへ流用可能な骨格として活用できるようになります。

SEO無料相談LPの設計：何を変えて何を残すか

参考LPの構造を抽出したら、次は自社の目的に合わせて差し替える作業に入ります。本記事ではSEO無料相談の導線LPを作るシナリオで、何を変えて何を残すかを整理します。

ターゲットに合わせて文言を差し替える

参考LPと自社LPでは、当然ながらターゲットが異なります。教育向けLPは大学生・新生活層が中心であるのに対し、SEO無料相談LPの主な訪問者は、ホームページの集客に悩む中小企業の経営者や、Web担当を任された兼任の方々です。コピーやキャッチは、この読者の悩みに合わせて全面的に書き換えます。

具体的には、「検索順位が上がらない」「アクセスが伸びない」「外注費が見合っていない気がする」など、想定読者が日々感じている課題語をFV周辺に並べていきます。Claude aiに「想定読者は中小企業経営者で、課題は〇〇」と前提を渡すと、差し替え原稿の初稿が出てきます。

CTA設計をSEO相談用に最適化

SEO無料相談LPで重要になるのが、CTA(行動を促すボタン)の設計です。「資料請求」「無料相談を申し込む」「現状診断を依頼する」など、何をクリックすると何が起きるかを、具体的に短くまとめます。CTAは1ページ内で複数箇所に配置するのが基本ですが、文言は3〜4種類にとどめ、ばらけすぎないようにします。

無料相談の場合、「相談すると何がもらえるのか」「所要時間はどれくらいか」「強引なセールスはないか」という訪問者の不安を、CTAの近くで先回りして解消する設計が効果的と言えるでしょう。安心材料を文章とアイコンで表現することで、クリック率は明確に変わってきます。

信頼担保のための情報設計

SEO相談という商材は、目に見えない知見が中心になるため、信頼担保の情報を厚くする必要があります。具体的には、実績件数、対応してきた業種、相談対応の流れ、担当者の経歴、過去の改善事例(数字付き)、よくある質問への回答などです。参考LPではこの種の情報がどのセクションに配置されているか、必ず確認します。

セクションのまとめ：参考LPの構造はそのまま使いつつ、コピーとCTAは自社のターゲットに合わせて全面的に差し替え、信頼担保の情報設計を厚くする方針が有効です。

Claude ai × Figmaで実装する具体7ステップ

ここからは、実際の作業手順を時系列に沿って整理します。本業の合間に進める前提で、各ステップを切り分けて進められる粒度にしています。

ステップ1：参考LPのスクリーンショットを撮る

最初に、参考LPの全体スクリーンショットを取得します。スマートフォン版とPC版の両方を撮影しておくと、レスポンシブの参考にもなります。長尺のページは、ブラウザの「ページ全体の画像保存」機能か、専用のキャプチャツールを使うと一枚にまとまります。

ステップ2：Claudeaiに構造を抽出させる

取得したスクリーンショットをClaude aiに渡し、「このLPの全セクションを上から順に列挙し、それぞれの役割と訴求レイヤーを書き出してほしい」と依頼します。出力は箇条書きで返ってくるため、Figmaのフレームに対応するセクションのリストとして使えます。

ステップ3：差し替え原稿の初稿を作る

抽出したセクション構造に対し、SEO無料相談LP用の原稿初稿をClaudeに作らせます。このときは、想定読者像、提供サービスの内容、強み、CTA文言などを必ず先に伝えます。前提情報を渡すほど、初稿の質は上がっていく傾向があります。

この時への質問の回答に悩んだ時や、準備ができていない場合はChatGPTやGeminiなど他のAIツールを活用して文章の作成などをしていきます。

ステップ4：Figmaファイルを準備する

Figmaに新規ファイルを作成し、フレーム幅を決めます(PC版1200px・SP版375pxが一般的)。フォント・基本カラー・ボタンスタイル・余白ルールといった「デザイントークン」を最初に決めておくと、後続のセクションが揃いやすくなります。Figma MCPを有効化しておくと、以後Claudeから操作可能になります。

この時、CoworkではなくClaudeAiでFigmaと連携（コネクト）したチャットで対応します。事前にファイルを準備しておくとスムーズです。

ステップ5：セクションごとに配置する

Figma上にセクションごとのフレームを配置していきます。「FVを上に作って、見出し・サブ見出し・CTAボタンを配置して」というように、自然言語で指示を出します。参考LPで観察した余白量や階層感も、文章で伝えると反映されます。

一気に仕上がる時もあるので、その際はFigmaファイルで仕上がった後に文言等をFigmaで修正することをおすすめします。

ステップ6：原稿を流し込み、整える

ステップ3で作った初稿原稿を流し込みます。流し込んだ後は、人の目で必ず読み返し、誤字や事実関係のずれ、読みづらいリズムなどを修正します。AIが作る初稿は文体が均一になりがちなので、自社らしいトーンに寄せていく工程は人が担います。

ここでの注意点としては制作スピードを重視するはずが以外とはまってしまい私の場合は時間がかかってしまいました。

ステップ7：レビューと改善ループに入る

初版が組み上がったら、社内の関係者やターゲットに近い数名にFigmaリンクを共有し、フィードバックをもらいます。コメント機能を使えばFigma上で意見が集約できるため、ドキュメントを別途作る必要はありません。フィードバックは一度ですべて反映するのではなく、優先度をつけて反映していくと、停滞しません。

一人で対応している場合は、スクリーンショットなどをとって別のAIに内容の確認などをしてもらうのもおすすめかもしれません。

セクションのまとめ：「キャプチャ→構造抽出→原稿→Figma準備→配置→流し込み→レビュー」の7ステップで、SEO無料相談LPの初版が組み上がります。

AIを使えば、LP制作の作業時間は半分にできます

ここでは、Claude aiで「半自動化」しやすい作業と、AIに任せきりにしないほうがよい領域を整理します。役割分担を間違えなければ、AIは強力な相棒になります。

活用1：参考LPの構造抽出と要約

スクリーンショットや画面録画をClaudeに渡すだけで、セクション分解・役割ラベル付け・訴求レイヤーの抽出までが数分で出てきます。これを人がやると半日かかる作業ですので、もっとも効率化メリットが大きい領域と言えるでしょう。プロンプトには「目的(自社のSEO相談LPに転用したい)」と「読者像」を必ず付け加えると精度が上がります。

活用2：差し替え原稿の初稿生成

各セクションのコピー、見出し、サブ見出し、ボタンの文言、お客様の声の文体例などを、まとめて初稿として作ってもらえます。完成形ではなく、たたき台として扱う前提なら、十分な精度で素材が揃います。一括生成のあとに、人が読み直して自社らしさを乗せていく工程に進みます。

活用3：Figma上のレイアウト指示

Figma MCPに対応したClaude aiでは、「FVに見出しを置いて、サブ見出しは下に、CTAは右下にオレンジで」のような指示を文章で出せば、Figma上にレイアウトが作られます。デザインソフトの細かい操作を覚えなくても、配置が前進します。これは特に非デザイナーにとって、心理的なハードルを下げる効果が大きいと考えられます。

AIに任せきりにしないほうがよい領域

一方で、AIに任せきりにすると問題が起きやすい領域もあります。これらは必ず人が判断する役割を残します。

• ブランドの世界観・トーンの最終調整(自社らしさは経営者・担当者にしか分からない)
• 事実関係(実績の数字、料金、納期など)の検証
• 権利関係の確認(参考LPの画像やコピーの意匠を踏まないか)
• 個人情報やお客様データを含むデータをAIに入力すること(プライバシー配慮)
• 法律・医療・税務など、誤情報がリスクになる領域の文言

AIは強力な相棒ですが、最終判断は人間が責任を持つ役割分担が安全です。中小企業ほど、この線引きを最初に決めておくことが、後々の運用負荷を下げると言えるでしょう。

セクションのまとめ：構造抽出・初稿生成・Figma配置はAIに任せ、ブランドトーン・事実関係・権利関係は人が必ず確認する。これがLP制作の半自動化の基本線になります。

参考LPベースのLP制作で「やってはいけない」5つのこと

参考LPベースの作り方は強力ですが、進め方を誤ると逆効果になる落とし穴もあります。中小企業のLP制作で実際に起きやすい失敗パターンを5つ整理します。

やってはいけない1：見た目をそのまま転写してしまう

もっとも避けるべきなのが、参考LPのビジュアル・コピー・配色をそのまま転写する作り方です。著作権や意匠の問題に発展する可能性があるだけでなく、自社のブランド構築にもまったく寄与しません。参考にするのは構造であり、見た目ではない、という線引きを最初に共有しておきます。

やってはいけない2：構成を完全に変えてしまう

逆に、せっかく参考LPを使うのに、構成をすべて自社流に作り変えてしまうのも避けたほうがよいでしょう。参考LPはおおむね、訪問者の認知の流れに沿うように設計されています。それを根拠なく入れ替えると、せっかくの構造のメリットを失うことになります。

やってはいけない3：CTAを増やしすぎる

「とにかくクリックしてほしい」と考えてCTAを増やしすぎると、訪問者の判断負荷が上がり、結果としてどこも押されなくなります。CTAは目的1つに絞り、ページ内で繰り返し配置するという作り方が、一般的には成果が出やすい傾向があります。

やってはいけない4：AIの出力を読まずに使う

Claude aiが出した原稿や構造を、内容を確認せずにそのままLPに流し込むのは危険です。事実関係のずれや、自社の状況と合わないコピーが混じっていることは珍しくありません。生成した素材は必ず人が読み直し、自社らしさを乗せていく前提で扱います。

やってはいけない5：完成度100%を目指して公開を遅らせる

もっとも惜しいのが、細部にこだわり続けて公開が遅れるパターンです。LPは公開した後の改善が本番であり、初版の完成度は8割でも問題ありません。むしろ早く出して反応を見たほうが、最終的な成果に近づくと考えられます。

セクションのまとめ：転写・大幅改変・CTA過多・AI丸投げ・公開遅延の5つはいずれも避けるべき進め方であり、参考LPベースの良さを損ねる典型的な失敗パターンと言えます。

あわせて読みたい関連記事

本記事と合わせて読むことで、LP制作からその後のSEO・運用までの理解が立体的になる関連記事を3本紹介します。

• 中小企業のためのSEOキーワード選定の進め方｜2026年版 — LPに流入を集めるための上流工程として、キーワード選定の考え方を整理しています。
• 月1時間でできるホームページ運用｜中小企業向け最小限管理 — LP公開後に必要になる改善・運用の最小単位を、現場目線で解説しています。
• 中小企業のAIコンテンツマーケティング入門｜半自動化の現実解 — Claude Coworkを含むAIツールを、本業の傍らで活用する考え方をまとめています。

よくある質問

Claude aiとFigmaを連携した参考LPベースのLP制作について、寄せられることの多い質問をまとめます。

まとめ：参考LP×AIで、LP制作は「考える時間」に集中できる

本記事では、Claude aiとFigmaを連携させ、参考LPをベースにオリジナルのSEO無料相談LPを作る進め方を整理しました。要点を改めて整理すると、以下の通りになります。

• LP制作はゼロから作るのではなく、参考LPの構造を借りるのが現実的な選択肢である
• Claude aiは構造分析と原稿の下書き、Figma MCPは実装の指示を担当する役割分担が有効
• 参考LPは「観察→分解→抽象化」の3ステップで、骨格として再利用できる
• SEO無料相談LPでは、コピーとCTAを自社ターゲットに合わせて全面的に差し替える
• 制作工程は7ステップに分解でき、本業と並行して進められる粒度に収まる
• AIには構造抽出・初稿生成・Figma配置を任せ、ブランドトーンと事実関係は人が確認する
• 「見た目の転写」「CTA過多」「AI丸投げ」「公開遅延」など、避けるべき失敗パターンを意識する

大切なのは、参考LPは「答え」ではなく「型」として扱い、その上に自社の言葉と価値を乗せていく姿勢です。完璧を目指して動かないより、初版を早く出して改善を重ねる進め方のほうが、結果として成果にたどり着きやすくなります。