🔥AIでつくるLPに必要な「熱量」とは？

こんにちは。
ファインディのデザイナー、niccy（@niccy）です。

最近、AIを使ってLP制作を進める「🔥熱量ハーネス🔥」をつくっています。先日登壇した「デザインハーネス 2nd」でも、この取り組みを紹介しました。

なぜ「熱量」なのか。

AIで速くつくれるようになった今、LP制作で何を大事にしたいのか。
今回は、つくり始めたきっかけと、ハーネスの中でやっていることを紹介します。🔥

速くできた。で、これで伝わる？ 🤔

「AIでLPができた！ もう公開できそう！」

速い。すごい。もうLPできてる！ 👏

自分もAIを使って作ったことがあるので、このスピードのありがたさはめちゃくちゃ分かる。

でも、出来たLPを見てふと止まることがあります。

で、このサービスって、誰の何をよくするんだっけ？

見た目は整っている。
必要そうなセクションもある。
ボタンも押せる。
でも、読み終わっても「自分にどう関係するのか」が残らない。

そんな状況だから
デザイナーとしては「本当にこれでいいんだっけ？」と立ち止まりたいのに、「こんなに速くできたし、もうこれでよくない？😊」という空気になることありませんか？

この違和感が、熱量ハーネスをつくる出発点になりました。

やりたいのは、
「届けたい」という熱量を、AIの馬力で、相手に伝わる形にすること。🔥

AIの馬力を、届けたいほうへ 🐎

AIで、つくれる量も試せる量も一気に増えました。
コピーを書いて、構成をつくって、コードを書いて、画面にする。
馬力がすごい。🐎💨

ただ、画面ができると、伝える内容まで決まった気になってしまう。

「このサービスはいいんだ！」という思いを、
相手が知りたい説明にまでしていく。

自分が熱量を込めたいのは、そこです。
大きな文字で勢いよく訴えても、
見る人の疑問が残ったままなら届かない。

AIの馬力を使えば、伝え方もいくつも試せる。
その力を、相手に届く説明を探すために使いたい。💪

なぜ、いきなり画面をつくらないのか？

「届けたい」という熱量があっても、
何を載せるかも、どの順番で見せるかも決まりません。

まず、誰に何を伝えるのかをそろえる。
次に、その相手に伝わる順番を考える。
そして、その流れを画面の配置に落とし込む。

この判断を一度に済ませず、ひとつずつ確かめるために、制作を3つのステップに分けました。決めたことだけでなく、「なぜそうしたか」も次へ渡します。

1️⃣ 資料を整理して、足りないことを聞く 🔍

最初に整理するのは、「誰に、何を伝え、どんな行動につなげたいか」。もらった資料をAIに読み込ませ、LP制作の前提となるブリーフにまとめます。

普段のLP制作で確認していることを整理したら、72項目になりました🤯
「届ける相手」「訪れた理由」「伝える価値」「してほしい行動」。下の図は、その一部です。

72項目。めんどくさ！ って思いますよね。分かります。

でも、誰に何を届けるかが曖昧なままでは、きれいなLPができても、読んだ人は「自分にどう関係するの？」で止まってしまう。
だから、ここは確認する必要があります。

もちろん、72項目全部埋めてください！とは言いません。

まず、もらった資料をハーネスにかける。

AIが分かることと足りないことを整理するので、
それをキックオフに持っていきます。

・「資料からこう理解したんですが、合っていますか？」
・「ここだけ、もう少し教えてください」

ゼロから順番に聞くより、具体的な話に入りやすい。
その答えが、後の構成や画面を考える土台になります。
AIの馬力を、ここから使います。🐎

72項目のうち、構成に欠かせないのが次の9項目です。

この9項目が決まり、人がブリーフを確認したら、
ストーリー設計へ進みます。
72項目すべてが埋まるまで待つわけではありません。
それ以外は未確定として残し、必要に応じて確認します。

2️⃣ どの順番なら伝わる？ ストーリーを選ぶ 💬

伝える内容が決まったら、今度は順番。
同じ情報でも、最初に何を見せるかで読み進める理由が変わります。
確認したブリーフから、通常3つのストーリー案をつくって比べます。

判断するときは、サービスの価値が分かり、そのあとに浮かぶ疑問にも答えられるかを見ます。

ハーネスには、採用案と選んだ理由をセットで残します。AIは次のワイヤーフレームをつくるときに、その記録を参照する。人も、できた画面が選んだ理由に沿っているかを確かめる。

一度伝えて終わりにせず、次の工程でも使える形で残します。

3️⃣ 選んだ理由を、レイアウトまでつなぐ 🐎

ここから、ワイヤーフレームに進みます。選んだストーリーをもとに、配置の違う3案を比較。2️⃣で選ぶのは伝える順番。3️⃣で試すのは、その流れを画面でどう見せるか。

情報の並べ方や文字の強弱を変えながら、伝えたい情報が埋もれていないか、行動を促す前に必要な説明がそろっているかを確かめます。

「このレイアウトがよさそう！」に加えて、
「選んだストーリーの意図が、この画面で伝わる？」を見る。
選んだ理由が、画面を確かめる基準になります。

ハーネスに残した「選んだ理由」をもとに、AIがワイヤーフレームをつくり、人が確かめる。
画面を直したら、その理由も残す。

何を伝えるかを整理して、
案を選んで、
画面を見て確かめる。

こうして並べると、あれ、これって……？？

そう、オレがハーネスだ 🔥

つくったハーネスを見ていると、なんだか見覚えがある。

依頼者の話を聞く。
相手がどこで迷うかを考える。
足りないことを質問する。
伝え方を比べて選ぶ。
できた画面を見て、「これでいいか？」と確かめる。

あれ。普段、デザイナーとしてやってること？

そう

普段、自分が聞いていることや、案を選ぶ理由を、
AIや一緒につくる人も使える仕組みにしていく。
それが、「熱量ハーネス」です。

さいごに

次にAIでLPをつくるときは、
「このサービスを紹介して」に加えて、
「誰がどこで迷っていて、何が伝われば一歩進めそうか」
まで話してみてください。

案を選んだら、その理由も続けて渡す。

「速くできた！」はうれしいけれど、
そこからもう一歩！
「これなら、あの人に届きそう」まで持っていく。

届けたいという熱量を、AIの馬力で、相手に伝わる形にする。

そのための仕組みとして、
「熱量ハーネス」つくっています。🔥

「デザインハーネス 2nd」の登壇スライドはこちら。
記事とあわせてどうぞ！

参考記事

ファインディで、一緒につくりませんか？

AIの馬力を使いながら、届けたいものをちゃんと届ける。そんなデザインのやり方に興味がある方、ファインディで一緒に新しいスタイルを作っていきませんか？

✅デザインチーム ポートフォリオサイト

✅デザイナー向け会社紹介資料

✅求人情報
カジュアル面談希望者はこちらから👇

herp.careers ☆【オープンポジション】デザイナー職全般_カジュアル面談申し込みフォーム

ファインディ株式会社 東京都品川区 ほか0箇所 フルタイム

募集要項をみる