AIでLP制作はどこまで速くなる？デザインのルールを決めて運用してみた

こんにちは、デザイナーの飯野です。Webやグラフィックのデザインをしながら、企業のデザイン顧問もしています。

“AIでLPを作ってみたけれど、デザインのクオリティーが低くなってしまう…”
そんな悩みをお持ちの経営者やマーケティング担当の方に、特に読んでいただきたいnoteです。

結論から書くと、AIに任せる部分と人が作る部分を分け、先にデザインの決まりごとを1つのファイルにまとめておけば、品質をそろえたまま制作を速くできます。

私が関わる現場では、本noteでお伝えする制作フローを取り入れて3〜4か月運用した結果、LP1本あたりのデザインの工数が導入前より2〜3割減りました。コーディングまで含めると、全体の工数はおよそ半分です。

「AIを使えば工数がもっと減るのでは…？」と思われるかもしれませんが、クオリティーを担保しようとすると、現時点では上記数字が現実的です。

この記事では、実際に使っているLP制作フローを公開しながら、どこが速くなり、どこは変わらなかったのかを書いていきます。

速くなったのは、型にしやすい部分

デザイン制作の工数が大きく減ったのは、見出し、カード、フォームのように、型にしやすい部分です。

LPの中で何度も出てくるうえに作り方もほぼ決まっているので、AIに任せるとかなり速く仕上がります。

一方で、変わらなかった部分もあります。LPの一番上にあるファーストビューです。

ファーストビューはLPの顔なので、特に大事な部分です。そのうえ、レイアウトが複雑で載せる要素も多いことがよくあります。

この部分は、AIに作らせても完成度が低くなることが多かったため、人がデザインする運用にしています。複雑な図解や、そのLPにしかないような独自なセクションも、同じく人がデザインします。

工数の減り方はLPによっても違います。落ち着いたトーンでシンプルな構成のLPほど、AIに任せられる部分が多くなります。2〜3割という幅は、この差によるものです。

AIに任せる前に、デザインの決まりごとを1つのファイルにまとめた

AIにそのままLPを作らせると、それらしいものはすぐに出てきます。速さは十分です。

困るのは、毎回少しずつ違うことです。ボタンの形や色、余白の取り方が作るたびに変わり、同じサービスのLPなのに見た目がそろいません。

そこで、色、文字、余白、ボタン、カードといったデザインの決まりごとを、1つのファイルにまとめました。いわゆる「DESIGN.md」です。

ClaudeやChatGPTといったAIツールは、LPを作る前にこのファイルを読み、決まりごとに沿って作ります。毎回細かく指示しなくても、ブランドに沿ったものが出てくるようになります。

サービスが違えばデザインの決まりごとも違うので、サービスごとに1つずつ「DESIGN.md」を用意しています。

制作フロー：型の部分はAIが組み、LPの顔は人が作る

実際のLP制作は、ディレクター、デザイナー、エンジニアの3つの役割で、次の6つの手順で進めています。Xの以下の投稿でも、概要をお伝えしました。

1.構成と文章を用意する（ディレクター）

LPにどんな順番で何を載せるかを決め、実際に使う文章や数字を用意します。色やボタンの形といった見た目は、ここでは決めません。

2.AIが型の部分を組む（ディレクター）

DESIGN.mdを読み込ませたClaudeに、1で決めた構成を渡します。すると、フォームや比較表、よくある質問、お客様の声といった型の部分が、HTMLの形で出来上がります。

3.AIの癖を、決まりごとに書き足す（デザイナー）

2で出来上がったものに、ブランドから外れた癖がないかを確認します。癖があれば、その場で直して終わりにせず、DESIGN.mdの禁止リストに1行足してから次に進みます。

4.AIが作ったページをFigmaに取り込む（デザイナー）

ここで使っているのが、ブラウザで開いたWebページをデザインツールのFigmaで編集できるデータとして取り込める、Figma公式のChrome拡張機能です。2でAIが作ったHTMLを取り込めば、ゼロから描かずに、それを土台にデザインを進められます。ブラウザの表示をスマホの画面サイズに切り替えてから取り込むと、スマホ版も同じようにデザインのデータにできます。

5.ファーストビューなどを作り込む（デザイナー）

決まりごとだけでは表現しきれないファーストビューや独自のレイアウトを、Figmaで作り込みます。AIが組んだカードやフォームといった型の部分も、細かな余白や装飾をここで調整します。

6.デザインをWebページにする（エンジニア）

完成したFigmaのデザインを、ClaudeやCodexといったAIツールでコーディングします。FigmaのデータをAIが直接読み取れる仕組み（Figma MCPやDev Mode）を使い、2で作った型の部分とつなぎ合わせます。

人が担っていること

このフローの中で、人が担っているのは次の5つです。

伝える中身を決めること、LPの顔を作ること、最後に確かめること。AIが速くしてくれるのは、その間にある作業だと考えています。

AIの余計なひと手間は、その場で直さずDESIGN.mdに書き足す

決まりごとを読ませても、AIはときどき頼んでいない装飾を加えます。実際によくあったのは、次のようなものです。

• 強調しなくてよい数字を大きく目立たせる

• 必要のない英語を添える

• 余計なアイコンを入れる

どれも、AIがそれらしく見せようとして足してくる表現です。一つひとつは小さくても、積み重なるとLP全体が“AIっぽい”印象になります。

こうした癖は、先ほどの手順3でDESIGN.mdの禁止リストに1行ずつ書き足しています。次からは同じ癖が出にくくなり、使えば使うほどルールが育って、AIの出してくるものの精度も少しずつ上がっていきます。

AIで制作を始めるなら、先にデザインの決まりごとを言葉にしておく

AIを取り入れた制作フローを運用してみて、工数が減ったことは大きな変化でした。デザインで2〜3割、コーディングも含めると全体でおよそ半分です。

そして同じくらい大きかったのが、誰が作っても見た目がそろうようになったことです。

速さと品質を両立できたのは、AIを入れる前に、DESIGN.mdでデザインの決まりごとを言葉と数値にしておいたからです。

決まりごとがないままAIを入れると、速く作れても、ばらついた見た目を人が直し続けることになります。せっかく減った時間が、修正でまた増えてしまいます。

ただ、デザイナーではない方がDESIGN.mdを作るのは、現実的ではありません。

どのフォントがそのブランドらしいか、どれくらいの余白がいいか、どの色をどこに使うか。こうした判断には、デザインの知識と経験が要ります。

今回ご紹介したLP制作フローは、AIやツールの進化に合わせて変わっていくはずです。実際に運用しながら見直し、変わったところは今後もその都度発信していきます。

私がデザイン顧問として関わっているエレビスタ株式会社では現在、デザイナーを募集しています。AIを取り入れながら自社サービスを伸ばしていくことに興味がある方は、ぜひWantedlyページを見てみてください。

www.wantedly.com 普通に飽きたデザイナー募集｜3ヶ月で痺れる最高のクリエイティブチームを作る - エレビスタ株式会社のUI/UXデザイナーの採用 - Wantedly

募集要項をみる

デザイン顧問として私が普段どんな仕事をしているかは、以前の記事にまとめてあります。

DESIGN.mdのようなデザインの決まりごとづくりや、AIを使った制作の整備も、デザイン顧問としてお手伝いしています。XのDMやWebサイトのお問い合わせフォームから、お気軽にご相談ください。