「AIがあれば、デザイナーもエンジニアも要らない」。一時期、Xでそんな言葉をよく見かけた。本当にそうなのか、自分でも試してみたくなった。
複数のAIツールを使い、架空のオンラインスクールLPを戦略設計からコード生成まで一通り試してみた。速くなったことも、そうでなかったことも、工程ごとに正直に書く。
今回作ったLP
対象は「SkillCollege」という架空のオンラインスクールのLP。プログラミングに興味はあるが自分にできるか不安な20〜30代の社会人をターゲットに設定した。
この実験は約2ヶ月前、ほとんどAIツールを触ったことがない状態で行ったもの。初めてAIを触り、その勢いでLPを作ってみようと手を動かした記録だ。振り返ると明らかに非効率な指示を出している工程もあり、正直恥ずかしいところもある。ただ、初心者だったからこそ体験できた失敗と学びもあった。
6工程の記録——何をAIに任せ、何を自分で決めたか
STEP 1｜戦略設計（ChatGPT × Gemini）
事前に作成したターゲット設計や導線設計をChatGPTに渡し、「不足している視点」や「追加したほうがいい要素」の提案をもらって精度を上げた。GeminiはChatGPTのフィードバックをさらに裏取りするために使った。
AIに渡したのは、すでに自分が設計した叩き台だった。何を明らかにしたいかを決めたのは自分。AIはゼロから戦略を考えてくれるわけではなく、「渡したもの」をより良くするために使えた。
STEP 2｜構成・コピー（Claude）
戦略設計をベースに組んだLP構成（ファーストビュー・悩み・共感→解決・不安解消・料金・CTAなど）をテキストでClaudeに渡し、ワイヤーフレームと各セクションのコピーたたき台を生成してもらった。
確認したのは「コピーがカスタマージャーニーの心理の流れに沿っているか」。AIは断定的な表現を使いがちで、不安を抱えたターゲットに対して上から言い切る書き方になることがあった。どこがずれているかを特定し、方向性を指示してリライトさせた。「刺さる言葉」よりも「伝わる流れ」を優先する——その判断をしていたのは自分だった。
STEP 3｜コーディング（Cursor）
ClaudeのWF.htmlをCursorに渡し、HTMLとしてコーディングしてもらった。実務なら1〜2日かかるたたき台が、1〜2時間以内に仕上がった。
ただ、当時はAIへの指示の出し方をよく知らず、「参考LPのようなテイストでコーディングして」とふんわり投げた。結果、デザイン性のないWFそのままの見た目でコードが返ってきた。
Heroには指定していない画像が入り、共感セクションはワイヤーフレームの箇条書きをそのまま枠で囲っただけ。情報設計の意図を理解できていないため、雰囲気を出すためだけの謎のグラデーションが入っていたり、セクションごとに似たようなカードデザインが並び、どこを強調したいページなのかも伝わりにくかった。
「ふんわりした指示ではAIもふんわりした答えを返す」——それを学んだステップだった。
STEP 4｜デザイン昇華（Figma AI）
最初はページ全体をFigma AIにデザインさせようとしたが、うまくいかなかった。構成データを渡すと構成に引っ張られてデザイン性が低くなる。感覚的なイメージ（「モダンな」「ダイナミックな」）を言葉で伝える必要があるが、頭の中のイメージを正確に言語化するのが難しかった。
方針を切り替え、Hero・課題解決など重要セクションに絞って作業した。セクション単位に絞ると結果がよくなり、やりとりもしやすくなった。
ここで気づいたのは、AIにデザインをさせるには「デザイン意図を言語化する力」が必要だということ。どんな印象を与えたいか、何を強調したいかを言葉にできないと、良い指示も出せないし出力の評価もできない。
STEP 5｜最終調整（Cursor × Claude）
FigmaのデザインをHTMLに反映し、ソースのクリーンアップと整合性チェックをCursor・Claudeで実施した。修正を積み重ねると不要な記述や重複したコードが増えていくため、AIにクリーンアップを指示しながら進めた。ただ、全体の整合性——意図した動きになっているか、デザインからずれていないか——は自分でチェックする必要があった。AIはコードの生成と部分修正は速いが、全体を俯瞰した最終確認は人間がやる工程だと感じた。
STEP 6｜ディレクターレビュー（自分）
全工程を通じて気づいたことがある。AIは「それっぽい回答を出してくるのがうまい」。速く、それなりに形になる。でも、「このターゲットにとって刺さるか」という判断はできない。ターゲットの心理に刺さるか、意図した流れで読まれるか——そこを判断したのは自分だった。
観察してわかったこと
速くなったこと
最初のLP叩き台の出力が圧倒的に速くなった。その速度差は実感として大きかった。ページを見ながらセクション単位でリアルタイムに細かい調整ができる点も大きく、従来の「修正箇所をまとめる→修正する→チェックする」という往復フローが短縮された。工数は少なくとも50%は減ったと実感している。
変わらなかったこと
AIが作成したものを確認し、修正し、採否を判断するためには、基礎的な知識が依然として必要だった。スキルが不要になったのではない——その使い方が変わった。
AIに任せても、人間が判断していたこと
振り返ると、結局やっていたことは3つだった。
- 入力を設計する力：何を問い、何を渡すかは自分が決める。AIはゼロから考えない
- 出力を評価する力：コピー・デザイン・コードの良し悪しを判断するには、それぞれの基礎が必要
- 指示を具体化する力：頭の中のイメージをAIが理解できる言葉に変換する。ここが曖昧だと出力も曖昧になる
まとめ
- 工数は大幅に減った。たたき台を作るスピードとリアルタイムの修正フローだけで、体感50%以上の短縮につながった
- AIは最大公約数の正解を出す。ターゲットへの最適解かどうかを判断したのは、毎回自分だった
- スキルが不要になったのではなく、使い方が変わった。問いを立て、できたものを確認し、指示を具体化する——その力が求められた