Figma Makeを使って半日でサービスLP作ってみた！

Alまじ強い..Figmaすごい..

添付のニュースを見た時、これはもうLP作るのにデザイン力もコーディング力も必要ない時代が来るのではと、マジで思った..そして、その根幹になる「Figma Make」こいつの実力をいつ測ろうか、迷っていてようやく先日着手！

なので、今回の記事では「Figma Make」というFigma公式が2024年にリリースした自然言語でUIを作成・編集できる生成AIツールを使って、僕が最近作りたいと思っていた自分がやろうとしているサービスのLPをAlに任せて完成させてみようチャレンジから得た気づき、学びを共有していきます！

▼実際に出来上がったLPのURL▼

https://cocoa-volume-42207666.figma.site/

記事の観点

今回の記事は、マーケティング領域を仕事にしているやつ目線の記事になります！なので、「Web広告で使えるかな？」「改善をすぐ回せるかな？」「伝わりやすいページになるかな？」「ワイヤーとして使えるかな？」といった部分を気にして、Figma Makeを使っているので、ぜひ同じような領域で仕事されている方の参考になればと思っています🙇‍♂️

結論：ほぼ出来たんじゃないか？😳

僕なりの必須のLP機能としては下記があります。

今回、作成したページはほぼこれを満たしているんじゃないかと..（強い..）
もちろん、よりクオリティやページに機能を持たせる場合は、これでは不十分という意見もあるとは思いますが、最低限、誰かにサービスを紹介するためのページとしては機能すると考えています。

Figma Makeを使って分かったメリット・デメリット

メリット

• 叩き台のページが一瞬で完成する
  ざっくりとしたプロンプトでも全体像を作成してくれるのすごい..

• 基本的なデザイン性が担保されている
  内容の変わり目がわかりやすかったり、ホバーなどの基本的なアニメーションの設定、レスポンシブ対応を指示なしで対応してくれるの、助かる..

• 細かいリンク先の設定も指示できる
  ボタンの遷移先なども1つ1つ指示できるので、理想的なサイト設計ができる

• データの反映速度が異常に早い
  大きなデザインやコード変更をプロンプトを指示しても、ものすごいスピードで処理してくれてる（2〜3分）。絶対に人間には出せないスピード..

デメリット

• デザイン性を高めるの難しい
  統一したいトンマナ、デザインの温度感などを再現するのは難しい印象。良くも悪くもシンプルなものが出来上がる感覚。

• ページ構成の整理は別ツールを使用した方がいい
  Figma Make自体は、思考の整理を一緒にやってくれる感じはない。あくまで、こっちが発注した内容をデザインにしてくれる感じ。そのため、ページ構成は自分の頭、もしくはChatGPTと会話して決めてから、Figma Makeに依頼する流れが良さそう。

• 直接、編集できないのが歯痒い
  細かい文言修正もFigma Make上だと、プロンプトでやるしかないのが歯痒い..仕事での使用を考えると、HTMLに落としてしっかり確認しながら、修正することにはなりそう

じゃあ、このLP本当に運用できるんかい？

今までのAlデザインツールの微妙さは、結局運用できない。つまり、実際のマーケティング活動でそのまま使うには、デザイン性やUIの部分で、若干難しい部分ががあったかなと思いますが、今回のFigma Makeは本格的に運用できるクオリティに仕上げられるなと考えています。

ただ、細部へのこだわり、オリジナリティのある世界観を表現するには、まだ難しくて、そこは人の手が必要だなと思います。

また、Webマーケティングの観点で言うと、計測系のタグ設置などの実運用をする際に必要になる部分は別途HTML内での調整が必要だったり、顧客情報を取得するフォームは、使用する方の状況によって、別途構築の余地があると考えています。

ただ、総じてシンプルなデザインでサービスを紹介するという用途だけで言えば、今までのどのAIツールよりも素晴らしいクオリティが出せるのでは？と思いました。

マーケター、ディレクターはぜひ使った方が良き🙌

ようやく本当の意味で「これ参考に良い感じで作って欲しい！」という依頼をデザイナーさん、コーダーさんにできる時代が来たのではないかなと！

理由は、ワイヤーをFigmaで書いたり、スプシやエクセルで書く手間は、ほぼ削減できるし、デザインの大きな方向性も実際のページで伝えることができる..

伝えるのが難しかったものを一瞬でビジュアルにできる強さを改めて感じてます！

実際の作業の様子

終わりに：参考にさせて皆様への感謝

今回、Figma Makeを使う、その体験noteを書く上でも参考にさせていただいた記事を下記に添付します。どちらの記事も、制作者さんの仕事内容に応じたFigma Makeの使い方をされていて、とても参考になりました！ありがとうございます！