コミュデザ通信AI活用のリサーチノート

LP制作について

LPのルール・構成・原稿を分け、早い段階で見せ方を相談できるようにする実践です。

freee × LIGLP制作の実例 / 2021年

LPで伝える価値を、マーケと一緒に絞る。

freee開業のLPは、ユーザー調査で訴求を定め、コピーと画面の見せ方まで詰めた制作事例です。構成を受け取ってから迷い続けるときに、参考になる進め方があります。

記事に掲載されたLPの一部 / 当時の画面
出典:LIG「『freee開業』LP制作裏話」。記事掲載画像をキャプチャー。2021年の制作物で、現在のLP画面ではありません。
① 調査で、伝える価値を選ぶ

インタビューと約1,000人へのアンケートを通じて、手続きの簡単さと正確さを中心に据えています。

② 言葉の意味をすり合わせる

マーケ担当者とデザイナーが、使う言葉の定義まで議論。速さだけに寄せない表現を検討しました。

③ 画面で、仕組みを説明する

入力欄を大きく見せ、書類作成の流れを説明。抽象的な利点を、操作のイメージに落とし込んでいます。

AI制作の事例ではありません。記事ではCV率の向上が報告されていますが、詳細な数値・比較条件は非公開。特定の表現だけの効果とは断定できません。

HRMOS採用で取り入れるなら:構成の前提を、1枚にそろえる

マーケから構成をもらったら、「誰の、どの困りごとを解決するLPか」「一番伝える価値は何か」「何を見せれば納得できるか」を先に確認します。AIには、この3つと各セクションの対応を整理してもらいます。

たとえば「採用業務を効率化」だけでは、画面も挿絵も選びづらい。「どの作業が、どう変わるか」まで具体化できれば、使う画面や過去素材を絞れます。商品について未確認の内容は、マーケへの確認事項にします。

試す範囲:次のLPのFVと2セクション。レイアウトに入る前に、訴求と根拠の対応が決まるかを確認する。
会社のClaudeに渡す指示文を見る
以下のLP構成と、確認済みの商品情報・顧客の声を読んでください。
まず「対象者/一番伝える価値/その根拠/次に取ってほしい行動」を1枚に整理してください。
次に各セクションについて、伝えること、必要な画面や挿絵、前提が足りない点を表にしてください。
根拠のない効果や数字は補わず、マーケ担当者への確認事項にしてください。
最後に、同じ訴求を「実際の操作画面で説明する案」と「流れの図解で説明する案」で比較してください。
まだ完成デザインは作らず、何を見せるかを相談できる形にしてください。

制作の経緯と担当者の話を読む ↗

freeeホームページ公開LPの見せ方を観察

できあがるものと、使う手順を見せる。

AIがホームページを作るサービスの紹介LP。ファーストビューでは完成イメージを、途中では利用の3ステップを示しています。AIや複雑な機能を、利用者の目線で説明する参考です。

見るところ① ファーストビュー
出典:freeeホームページ公式LP。2026.09.15の表示。料金・所要時間は同社の掲載内容です。
誰向けかが先に分かる

対象者の表記を見出しの近くに置き、読む人が自分向けのサービスかを判断できる配置です。

完成イメージが見える

ページの見本があるので、サービスで何ができあがるかを想像しやすくしています。

試す入口が分かる

無料で試せる入口と、既存利用者向けの導線を分けています。

見るところ② 利用の3ステップ
同じ公式LPの利用手順をキャプチャー。画面と短い説明をセットにした構成に注目します。

利用の手順は、入力・調整・公開の順に整理。「AIが作る」の後に、人が確認・編集できる工程も見えます。

HRMOS採用で取り入れるなら:説明したい操作を、3つの場面で見せる

紹介したい機能を1つ選び、「何を入れる → 何を確認する → どう仕事が進む」を、確認済みの画面と短い見出しで並べます。実際に3段階で説明できる機能に絞り、都合よく工程を省かないことが前提です。

社内のLPラフ生成ツールにも応用できます。「構成を入れる → 過去の型からラフを選ぶ → マーケと修正する」と、利用者が何をするかを見せると、使い方を伝えやすくなりそうです。

このLP自体をAIで制作したか、freeeのデザインチームがどう制作したかは未確認です。デザインの効果測定データも確認していません。ここでは公開画面の構成を参考にしています。

実際のLPを開く ↗

02
公開登壇資料 / 太田賢一 / 2026.03.07

LPの「変えない部分」と「毎回変える部分」を分ける。

「自分たちでLPを作りたい」というマーケターの相談を起点にした実践資料。デザインのルール、LPの構造、今回の原稿を分けて管理する考え方が紹介されています。

公開スライド / LPを3つに分ける設計
出典:太田賢一「ClaudeCodeでマーケターの課題を解決する」11枚目。特定企業全体での導入実績とは扱いません。
見る① デザインのルール

色、文字、ボタン、余白など。毎回指示し直さずに参照できる土台を作る。

見る② LPの構造

どんなセクションを、どう組み合わせるか。原稿とは別に「型」を持つ。

見る③ 案件ごとの原稿

今回の見出しや本文は変えられる部分として渡す。ルールと内容を混ぜない。

HRMOS採用なら:過去のFigmaを、初稿の土台にする

構成をもらったら、過去の型でラフを出す。

既存LPから、色・余白のルールとセクションの型を整理。今回の構成に合う型やイラストを選び、マーケと相談できるラフへつなげます。

まずはFV+2セクション。実際のFigma書き込み可否は会社のMCPで確認し、編集できる出力を目指す。
HRMOS採用への応用図 / 編集部作成
自社のルール色・文字・余白・ロゴ
過去の型と素材セクション・イラスト
今回の構成見出し・本文・順番
相談できるLPラフ見せ方を選んで、その場で調整
会社のClaudeに渡す指示文を見る
指定した過去LPを参照し、デザインルール・再利用するセクション・今回の原稿を分けて整理してください。
まずは構成に合う過去セクションとイラストの候補を画像付きで提示し、選んだ候補でFVと2セクションのラフを作ってください。
会社の既存Figma MCPで可能な操作を確認し、元データを変更せず試作用ファイルに作成してください。本文や数値は勝手に補わないでください。

元資料:ClaudeCodeでマーケターの課題を解決する ↗

関連する実践:LayerXの記事では、LP内の金額シミュレーターをFigma Makeで試作し、依頼者との認識を合わせた例も紹介されています。MCPによるガイドライン照合レビューも掲載。記事内の事例8・10を読む ↗

Money ForwardAI活用の実践

構成を渡す前に、自社のルールを用意する。

記事掲載の生成フロー。計画の段階に、ルール・手順・参照資料が入っています。
出典:開発を速くする、ハーネスで支えるコードプロトのデザインプロセス ↗

要件をAI向けの指示に変換し、自社UI部品のMFUIと共通ルールを使って動くプロトタイプを生成。作る担当とレビュー担当を分け、複数メンバーでも同じ基準で作れる仕組みを整備しています。

要件+共通ルール部品を使って生成触って検証・修正
HRMOS採用で試すなら

過去LPのセクションを「見出し+本文+画像」などの型として整理。構成を渡すと型を選んでラフを作り、マーケと画面を見ながら直す流れへ。

成果・適用範囲と、試すときの指標

商談やインタビューで実際に触ってもらい、早期の検証に使用。対象はプロダクトUIで、LP制作の実績ではありません。

自分たちで測ること
ラフ初稿までの時間/構成合意までの日数

Money ForwardAI活用の実践

完成を待たず、動くものを一緒に触る。

企画・デザイン・開発同じ試作を見て、話す
伝えたいこと動くラフで、早めに確認
フィードバック → 共通の仕様へ
記事の進め方を編集部が図解。実際のツール画面ではありません。
出典:AI駆動開発が動かした、PdM・デザイナー・エンジニアの境界 ↗

PdM・デザイナー・エンジニアが、要件を固める前からAIで試作。セールスや経理部も参加するワークショップで、その場のフィードバックを得ています。共通知識はNotionに集約。

共通の背景を読む試作して一緒に触る合意を仕様へ戻す
HRMOS採用で試すなら

LPの初回相談でFVと2セクションを見せる。マーケが変更したい点をその場で確認し、合意したコピー・構成を同じ原稿へ反映する。

成果・適用範囲と、試すときの指標

量産した試作や仕様が散らかる問題も発生。最終仕様の集約先と共有リポジトリを決めて対応しています。このチームは試作コードを本番には引き継ぎません。

自分たちで測ること
認識のずれによる手戻り/合意までの往復

Goodpatchの記事を参考にした応用案

参考LPを、マーケと相談する1枚にまとめる。

取り入れたい出力 / 編集部による応用図

参考LPから、マーケと相談するための1枚へ。

この記事の実画面ではなく、HRMOS採用で試す場合の説明用ラフです。実案件の原稿・成果数値は含みません。

① 参考を見せる
参考LPの画像注目する範囲を
キャプチャーで掲載
元ページへのリンク

どの部分の話か、画像で共有。

② 工夫を読み解く

見る観点
誰に向けているか
何を約束しているか
何を根拠にしているか
次に何をしてほしいか

効果は画像だけで断定せず、仮説として記載。

③ 自社案を見せる
採用担当者の悩み導入による変化を
説明する領域
CTAの配置案

構成の例示。原稿は案件ごとに確認して作成。

④ 決めたいことを出す

今回の相談例
機能説明と導入効果、どちらを先に見せる?

決定・理由・追加で必要な情報を残し、次の制作へ。

最初の試し方:参考LPを1本選び、この1枚を作ってマーケの人と相談。読む時間と、次に決めることが明確になったかを確認します。

参考記事:GoodpatchのAIスキルづくり ↗

記事からの学びはチームでのAI活用についてにまとめています。このLP相談シートは編集部の提案です。

このテーマで試してみたいこと
LP制作

構成から、相談できるラフを作る

過去の型とイラストを生かし、マーケと見ながら修正できるラフを作る。

入れるもの
構成・確認済みの商品情報・素材
出てくるもの
FV+セクションのラフ
小さく始めるならFVと続く2セクションで、合意までの時間を見る。
参考になる事例へ ↑
LPの見せ方図鑑

伝えたい内容から、参考を探す

FV、導入事例、機能説明、比較、CTAを画像と解説で分類する。

入れるもの
公開LPの該当箇所・URL・確認日
出てくるもの
見せ方別の画像付きギャラリー
小さく始めるなら「複雑な機能の見せ方」だけ、3例を集める。
参考になる事例へ ↑
FV比較ボード

自社と競合を並べ、改善を考える

誰向けか・伝える効果・根拠・画像・CTAを同じ観点で比較する。

入れるもの
自社LPと比較先LP、流入の前提
出てくるもの
FVの比較画面+改善仮説+ラフ
小さく始めるなら自社と比較先2件。広告LP同士など条件を揃える。
参考になる事例へ ↑
← ほかのテーマを選ぶ