レポート

2025.07.31(木) 公開

広告LPも生成できる！コーディング機能の実力

ChatGPTはコーディングも可能で、GPT-4oやGPT-4.5などの一部モデルには便利なcanvas機能が搭載されています。コードやテキストを専用のエディタ上で編集できるため、ランディングページを効率的に生成することも可能になりました。

プロンプト例

あなたは一流のフロントエンドエンジニア兼 UI/UX デザイナーです。
以下の要件をすべて満たす、単一HTMLファイルを生成してください。

# ブランド
TECH ENGLISH PRO  
製造業に特化したオンラインビジネス英語スクール

# デザイン指針
- トーン：シックで落ち着いたネイビーブルー基調。アクセントにやや明るいブルー。
- フォント：Google Fonts「Noto Sans JP」。

# 構成セクション
1. 固定ヘッダー
   - ロゴ “TECH ENGLISH PRO”  
   - メニュー：導入実績 | 料金プラン | よくある質問 | お問合せ | CTA ボタン「無料相談」
2. Hero
   - 背景に写真を設定
   - キャッチコピー  
   - サブコピー  
   - CTA ボタン（ヘッダーと同文言）
3. なぜ製造業には特化型の英語学習が必要なのか？
   - 専門用語が多い:一般的な英会話では学べない製造現場特有の専門用語や表現
   - 技術文書の理解:海外の技術マニュアルや仕様書を正確に理解するスキル
   - 国際会議での交渉力:グローバルミーティングで自社の意見を的確に伝えるスキル
   - 製造現場での実践力:工場見学、品質管理、トラブル対応など現場で即使える英語
4.TECH ENGLISH PROの特徴
   - 製造業特化カリキュラム
     製造業の現場経験と英語教育の専門知識を持つ講師陣が開発した独自カリキュラム。
   - 製造業経験のあるネイティブ講師
全ての講師は製造業での実務経験とTESOL資格を保有。
   - 業務シミュレーションレッスン
     実際の業務シーンを想定した実践的なトレーニング。
   - オンデマンド学習システム
     忙しい製造業のプロフェッショナルに最適な柔軟なシステム。
（中略）
5. フッター – 著作権表記

# 技術要件
- すべてインライン CSS（外部ファイル不要）。  
- 各セクションにidを付与してナビゲーションリンクを機能させる。  
- 生成結果は「コードのみ」を表示すること。

ChatGPT出力例（バイブコーディングによる複数回の修正含む出力HTMLの表示例）

架空の英会話スクールのLPを生成したもの

一発で理想のLPを生成するのはなかなか難しいものです。でも、うまく活用すれば、社内にデザイナーやエンジニアがいなくても、外注せずに広告LPを用意できるようになります。外注だと企画から納品まで1ヶ月程度かかることも珍しくありませんが、ChatGPTを使えば、わずか1日で準備可能。スピード感が違います！

多くの現場では、広告自体は日々改善と検証を重ねているのに、LPはいったん作ったらずっと同じものを使い続ける…なんてケースもめずらしくありません。ChatGPTを活用すれば、広告LPもスピード感をもってPDCAを回せるようになります。A/Bテストで効果検証しながら迅速に改善できる環境が整うわけです。これまで手が回らなかったLP改善にも、積極的に取り組めるようになるでしょう。

次のページへ

｢ChatGPT導入・活用支援｣はNOB DATAにご相談ください

ChatGPTの導入・活用に課題を感じていませんか？
NOB DATAでは、ChatGPT開発およびデータ分析・AI開発のプロフェッショナルが、多種多様な業界・課題解決に取り組んだ実績を踏まえ、ChatGPTの導入・活用を支援しています。社員向けのChatGPT研修も実施しており、お気軽にお問い合わせください。

ChatGPT導入・活用支援の詳細を見る