01 / 何度も改善した段階
- CASE STUDY
- Codex × Figma
- ManualClip
AIにLPデザイン、
どこまでできる？
マニュアルクリップ（ManualClip）のLPを題材に、CodexとFigmaを連携し、AIでどこまでデザインを作り込めるかを検証しました。「デザイン性を上げて」と繰り返しても変わらなかった段階から、伝え方を変えた再挑戦まで、実際の画面で比較します。
※制作事例です。未確認の制作時間・効果数値は掲載していません
THEME
今回のテーマは、
AIでどこまでLPをデザインできるか
必要な情報や機能を並べるだけでなく、文字の見せ方、背景、図形、セクションごとの装飾まで含めて、LPとして仕上げられるのか。最初から順調だったわけではなく、難航→別手段→伝え方を変えた再挑戦、という過程を残した事例研究です。
-
01
何度も改善した段階
青と白のシンプルなLP。情報は揃うが、装飾は伸び悩んだ。
-
02
生成MVを組み込んだ段階
MV全体を画像生成。第一印象は改善したが、下はまだ簡素。
-
03
伝え方を変えた現在版
参考と具体指示で再挑戦。文字・背景・図形の装飾が増えた。
STEP 01
「デザイン性を上げて」と繰り返しても、
思うように変わらない
最初のLPは、青と白を中心にサービス説明・機能・料金を整理したデザインでした。必要な情報は揃い、LPとしての形にはなっています。ただ、装飾や見せ方をもう少し工夫したく、「もっとデザイン性を上げてほしい」と何度も指示を出しました。期待したほどの変化はありませんでした。
「もっとデザイン性を上げて」という言葉だけでは、文字や背景の作り込みまでうまく伝わっていなかったのかもしれません。当時は、AIでFigmaのデザインを作るのはこのくらいが限界なのだろうかとも感じました。
STEP 02
いったん、MV全体を
1枚の画像として生成
Figma上での改善が思うように進まなかったため、まず目立つ部分だけでも印象を変えようと、メインビジュアル（MV）全体を画像生成で作り、LPにはめ込みました。最初から予定していた工程ではなく、見た目を改善するために取った別の手段です。
この方法でもデザイン性は上がり、第一印象は変わりました。十分と思える段階にはなりましたが、MVの下は装飾が少なく、LP全体としてはまだ簡素です。「画像生成でMVを作る方法は使える。でも、Figma上のデザインとして、もう少し作り込めないだろうか」。そこで再挑戦しました。
STEP 03
デザインについての伝え方を変えて、
再挑戦
変えたのは依頼の仕方です。「もっとデザイン性を上げて」という抽象指示から、参考サイトを見せ、文字のグラフィック表現や背景・図形の装飾も含めて考えてもらう依頼へ切り替えました。まずは別ページでMVと2セクションを試作し、伝え方を変えることでどこまで見た目が変わるかを確かめるテストです。
-
01
参考を見せる
参考サイトのように、文字や背景にも装飾を入れてほしい、と具体化する。
-
02
対象を分ける
配置・配色に加え、見出しの強調や図形の使い方も考えてほしい、と伝える。
-
03
試作から広げる
文字や装飾をFigma上で扱える形で一部を試作し、手応えを見て全体へ展開する。
※上記は制作時のやり取りの要約です。そのまま使用した単一のプロンプトではありません。
この再挑戦では、文字を強調するマーカーや吹き出し、斜めの背景、製品画面の重なり、紙片のようなカード、方眼模様や矢印などが加わりました。「デザイン性」という一言に含めていた期待を、文字・背景・装飾といった具体的な対象に分けて伝えることで、これまでとは違う出力が得られました。
STEP 04
試作で見えた変化を、
LP全体へ広げる
試作で手応えがあったため、その方向性をLP全体へ展開。実サイトに合わせた横幅・本文幅の調整、人物素材の差し替え、見出しの中央揃えなども修正しながら、現在のLPに仕上げています。
RESULT
検証結果：FigmaでAIは
どこまでデザインできたか
情報を並べたシンプルなLPから、文字・背景・図形の装飾を含み、個別に編集できるLPデザインまで進められました。
| 試したこと | 今回の結果 |
|---|---|
| 「デザイン性を上げて」と繰り返し依頼 | 求めていたほどの見た目の変化は得られなかった |
| MV全体を画像生成し、LPに組み込む | 第一印象は改善し、十分と思える段階になった。全体の装飾はまだ少なかった |
| 参考サイトと、作り込んでほしい対象を具体的に伝える | 文字・背景・カードなどの表現が増え、現在版につながった |
| Figma上で文字や装飾を個別に扱う | 全体を1枚画像にせず、編集できる形で作り込めた |
最初の段階だけを見ていたら、「AIでできるデザインはこのくらい」と判断していたかもしれません。しかし、伝え方を変える再挑戦によって、別の結果が得られました。
一方、ひとつの指示ですべて完成したわけでもありません。参考を示し、試作を見て、意図と違う部分を伝え、修正する。そのやり取りは必要でした。
今回の事例から得られたのは、AIによるデザインの出力を判断するときには、指示の伝え方も試す余地があるということです。これは一つのLPを通じた事例研究であり、AIの能力の上限を決めるものではありません。
FULL LP
3本のLP全体を並べて比較
各段階のLPをフルサイズで並べています。PCでは各列をスクロール、スマホではおよそ1画面分を表示し、必要なら全体を展開できます。
02 / 生成MV採用版
03 / 現在版
※フル画像はFigmaに保存された2026年9月8日時点の状態です。横幅が段階ごとに異なるため、同倍率の厳密比較ではありません。
PRODUCT
題材：ManualClip
（マニュアルクリップ）
ウェブサービスやアプリの操作をブラウザで記録するだけで、ヘルプ用のマニュアルサイトを作成・公開できるSaaSです。今回の検証で仕上げたLPは、サービスページで公開しています。