いつも記事を読んでいただきありがとうございます！
モブエンジニア（@mob-engineer)です！

個人的にChatGPTを活用しながら開発業務を行っていますが、その中で**ChatGPTにある程度条件を投げれば、いい感じのコーポレートページを生成してくれるんじゃ...**と思いましたので試してみました。

プロンプト内容

ChatGPT o3-mini-highを利用して以下プロンプトを投げてみたいと思います。

## 前提条件
あなたはベテランのフロントエンジニアです。そのうえで、Webマーケティングに関してもある程度知見を持っています。そんなあなたに、簡単なコーポレートページの生成をお願いしたいです。

## 要件
・ITソリューション企業向けのトップページ
・企業名は「株式会社通信ほげほげ」
・メッセージは「技術を通じたソリューションを」
・メンテナンス性を考慮して簡単にメンテナンスできる言語にしたい

推論内容

推論内容として次のような内容が出てきました。

このコーポレートページの要件に基づいて、メンテナンス性を重視した言語が求められています。要件としては、ITソリューション企業のトップページを作成すること。言語としてはHTMLが無難かもしれませんが、CSSのインライン方式や、シンプルな静的サイトジェネレーターも考えられます。特に「Webマーケティング」も少し関係するので、シンプルで効率的な構成が求められ、Reactやテンプレートエンジンは過剰かもしれません。

ITソリューション企業のトップページ作成において、メンテナンス性を重視すると、HTML＋CSSが最適かもしれません。静的なHTMLは簡単で扱いやすいので、「簡単にメンテナンスできる言語」という要求にぴったりです。CSSに関してはインラインか外部ファイルでリンクする形が良さそうですが、シンプルなHTML5を使ってセマンティックタグ（例：<header>, <nav>, <footer>）を使うと、より可読性と保守性が確保できるはずです。

意外といい提案かと思いつつ、Reactは学習コストが高いのでうーんといった印象を持ちました。

生成コード

以下のようなコードを生成してくれました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>株式会社通信ほげほげ</title>
  <style>
    /* ベーシックリセット */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
    }
    header, footer {
      background-color: #f4f4f4;
      padding: 20px;
      text-align: center;
    }
    /* ヒーローセクション */
    .hero {
      background: url('hero.jpg') no-repeat center center/cover;
      padding: 100px 20px;
      color: #fff;
      text-align: center;
    }
    .hero h2 {
      font-size: 2.5em;
    }
    /* コンテンツエリア */
    .content {
      padding: 40px 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <!-- ヘッダー: 企業名を表示 -->
  <header>
    <h1>株式会社通信ほげほげ</h1>
  </header>

  <!-- ヒーローセクション: メッセージを表示 -->
  <section class="hero">
    <h2>技術を通じたソリューションを</h2>
  </section>

  <!-- コンテンツエリア: サービス紹介など追加可能 -->
  <section class="content">
    <p>当社は最新のIT技術を活用し、企業の課題解決をサポートいたします。ここにサービス内容や特徴を記載してください。</p>
  </section>

  <!-- フッター: コピーライト等 -->
  <footer>
    <p>&copy; 2025 株式会社通信ほげほげ. All Rights Reserved.</p>
  </footer>
</body>
</html>

実際のページ

たたき台としてはいい感じのページができましたね。
（かなり手を入れる必要がありますが）

まとめ

中堅企業であればそのまま利用するというのは難しいかなぁと思いつつ、中小企業のホームページであれば、ChatGPTさんにコード生成を丸投げしても意外となんと中なるのではないかなぁと思いました。

正直、CoTやヒューショット学習などのテクニックを活用していないので、生成物としてはいまいちでしたが、繰り返し実行していけばいい感じのアウトプットが生まれるのではないかなぁと思いました。

かなりこすられたネタですが、最後までお読みいただきありがとうございました！！