また会いましたね。2024年入社の中島です。僕は学生の頃、主にフロントエンドの開発を行ってきました。
たまに、開発をしていて思っていたのが、TypeScriptの開発楽しいのに、CSSでスタイリングするのが億劫になり「おーん。投げ出したいわ。はっきり言うて。」と思うところがあります。そんな中弊社、生成AIのプラットフォーム使えるじゃんというわけでやりたいと思います。

【検証】GaiXer君を使ってどこまでLP作れるのか！

技術スタック

    "node": "^20.12.2^",
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.3"
    "tailwindcss": "^3.4.1"

こんな感じでやってみます。

環境構築

まずは環境構築です。

今回はNext.js×TailwindCSSの開発設計をします。




このコマンドを実際に打ってみますか・・・
なんかできたっぽいですね。



 

プログラミングの一番の難所、環境構築ができてしまいました。
お赤飯炊きましょう！！！
 

そうとなればデザインを組み立てるだけということになります！

コンセプト

さてさて、GaiXer君にLPを作ってもらうにはどうすればいいのでしょうか?まずは、LPのコンセプトやターゲット層、伝えたいメッセージを明確にする必要がありますね。
それが決まれば、あとは質問攻めにGaiXer君に指示を出すだけ!見出しの文言から本文、CTAボタンのデザインまで、全て作り上げられるんです。

自分が想像しているコーヒー屋さんは「オフィスワーカー向けの手軽で美味しいコーヒーを売りにするカフェ」なので・・・

オフィスワーカー向けの手軽で美味しいコーヒーを売りにするカフェの文言を考えて

LPの文言を考えてもらいました。

【タイトル】
ビジネスパーソン必見!オフィスで手軽に美味しいコーヒーを

【主な訴求ポイント】
・オフィスに設置可能なコーヒーマシンでいつでも新鮮なコーヒーを
・厳選された高級コーヒー豆を使用した本格的な味わい
・短時間でスピーディーに抽出できる最新マシン
・カプチーノ、カフェラテなどのメニューを多数ご用意
・コーヒー通の味覚を満足させるプレミアムなフレーバー

【商品・サービスの説明】
弊社のオフィスコーヒーサービスなら、オフィスにコーヒーマシンを設置できます。
高級コーヒー豆を使用し、本格的な味わいを実現しています。最新マシンでは1杯30秒という驚きのスピード抽出が可能です。
定番のブラックコーヒーに加え、カプチーノ、カフェラテなど多彩なメニューをご用意しております。業界最多クラスのフレーバーバリエーションで、上質なコーヒーをお楽しみいただけます。

【価格案内】
マシンレンタル料金:月額5,000円(36カ月契約の場合)
コーヒー豆:1箱(100杯分)4,500円

【サポート体制】
マシンの故障や消耗品交換は無料で対応。コーヒーマシン専門の営業スタッフが随時訪問し、メンテナンスを実施します。

【お問い合わせ】
詳細やお見積りは随時受け付けております。フリーダイヤル: XXXX-XXXX (平日9:00-17:00)からお気軽にお問い合わせください。

生成が早すぎます！GaiXer君たまげたなあ～

次に構成を考えてもらいましょう。

メインビジュアル

大きなキャッチコピー「オフィスで本格コーヒーを。ビジネスパーソン御用達のカフェ」
オフィスでコーヒーを飲む写真
訴求ポイント3つ

1つずつ簡潔に説明したセクション ①高品質な本格コーヒー ②スピーディーで手軽な注文・提供 ③多彩なメニューバリエーション
価格プランの紹介

マシンレンタル料金
コーヒー豆料金
オプションメニューの価格
お客様の声

従業員満足度が上がった
仕事のパフォーマンスが向上した
等の体験レビューを掲載
FAQ(よくあるご質問)

マシンの手入れは?
故障した時の対応は?
等の質問に回答
問い合わせ/資料請求フォーム

会社名、担当者名、連絡先を入力
CTAボタン「お問い合わせ/資料請求する」
会社概要

会社の強みや実績

この構成でLPを組んでもらいましょう。

結果

この調子で組んでもらった結果こうなりました。
某どこかのCSSフレームワークみたいになりましたね・・・


個人的にもう少しCSSをどうにかできそうなのでリベンジマッチ組みたいと思います。

まとめ

ただし、GaiXer君はあくまでもAIです。人間の経験値が物を言うので、そこは注意が必要かもしれません。

でも、コストをかけずにある程度のLPが作れるのは事実。
ご参考までに～～～ほなまた～～～～