AIによる自動小説執筆サービス「MUGEN Writer(無限ライター)」の公式サイトを作る

2025年2月6日 10:55

プログラミングを始める前に、まずは簡単な公式サイトを作ります。周りの人に知ってもらいたいですからね！

まずはドメイン。これはmugenwriter.comというのがすぐ取れました(ドメイン大事！)。

次にサーバー。とりあえず1ページ作るだけなので、既に借りているサーバーに置くことに。サービスとして動かす時は、VPSを借りるつもりです。

そしてhtmlコーディング。ここはAIにやってもらいましょう！
前回と同じ OpenAI o3-mini-highを使います。まぁ、こんな高機能なモデル使わなくても良いんですが、Plus会員で月3000円課金してるので、使わなきゃもったいない的な。

【AIによる自動小説執筆サービス「MUGEN Writer(無限ライター)」】のWebサイトを作って。
使用するフレームワークはBootstrap5。レスポンシブ対応。
次の要素を入れて。メニューもつけて。あとで拡張できるように。ソースには、日本語でコメントもつけて。
・ヘッダー画像
・タイトル
・キャッチコピー
・サービスの紹介文
・2025年2月23日に開催されるAIに関する総合展示即売会「技研AIマーケット」公開
・開発日誌をNOTEで連載
・問い合わせ

簡単な依頼なので、一発で正解を出力してくれました。
出力の詳細はこちらを見て下さい。

<!doctype html>
<html lang="ja">
  <head>
    <!-- 文字コードやビューポートの設定 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MUGEN Writer - 無限ライター</title>
    <!-- Bootstrap 5 のCSS CDNリンク -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 必要に応じてカスタムCSSもここに記述可能 -->
  </head>
  <body>
    <!-- ナビゲーションメニュー -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <!-- ブランド名 -->
        <a class="navbar-brand" href="#">MUGEN Writer</a>
        <!-- モバイル用のメニュートグルボタン -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- ナビゲーションリンク -->
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <!-- ホームへのリンク -->
            <li class="nav-item">
              <a class="nav-link" href="#header">ホーム</a>
            </li>
            <!-- サービス紹介へのリンク -->
            <li class="nav-item">
              <a class="nav-link" href="#service">サービス紹介</a>
            </li>
            <!-- 技研AIマーケットへのリンク -->
            <li class="nav-item">
              <a class="nav-link" href="#market">技研AIマーケット</a>
            </li>
            <!-- 開発日誌へのリンク -->
            <li class="nav-item">
              <a class="nav-link" href="#devlog">開発日誌</a>
            </li>
            <!-- 問い合わせへのリンク -->
            <li class="nav-item">
              <a class="nav-link" href="#contact">問い合わせ</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- ヘッダーセクション -->
    <header id="header" class="bg-dark text-white text-center py-5" style="background-image: url('path/to/header-image.jpg'); background-size: cover; background-position: center;">
      <div class="container">
        <!-- タイトル -->
        <h1 class="display-4">MUGEN Writer</h1>
        <!-- キャッチコピー -->
        <p class="lead">AIがあなたの小説執筆を自動でサポート！</p>
      </div>
    </header>

    <!-- サービス紹介セクション -->
    <section id="service" class="py-5">
      <div class="container">
        <h2 class="mb-4">サービス紹介</h2>
        <p>
          MUGEN Writerは、最新のAI技術を活用した自動小説執筆サービスです。ユーザーの入力したプロンプトに基づき、独自のストーリーを自動生成します。初心者からプロの作家まで、幅広いユーザーにご利用いただけます。
        </p>
      </div>
    </section>

    <!-- 展示即売会セクション -->
    <section id="market" class="py-5 bg-light">
      <div class="container">
        <h2 class="mb-4">技研AIマーケット</h2>
        <p>
          2025年2月23日に開催される、AIに関する総合展示即売会「技研AIマーケット」が公開されます。最新のAI技術とサービスを体験できるこのイベントに、ぜひご注目ください！
        </p>
      </div>
    </section>

    <!-- 開発日誌セクション -->
    <section id="devlog" class="py-5">
      <div class="container">
        <h2 class="mb-4">開発日誌</h2>
        <p>
          MUGEN Writerの開発状況や新機能の詳細については、NOTEで連載中です。最新記事は<a href="https://note.com/your_account" target="_blank">こちら</a>からご覧いただけます。
        </p>
      </div>
    </section>

    <!-- 問い合わせセクション -->
    <section id="contact" class="py-5 bg-light">
      <div class="container">
        <h2 class="mb-4">問い合わせ</h2>
        <p>
          ご意見やご質問がありましたら、以下のフォームからお気軽にお問い合わせください。
        </p>
        <!-- 問い合わせフォーム -->
        <form>
          <div class="mb-3">
            <label for="name" class="form-label">お名前</label>
            <input type="text" class="form-control" id="name" placeholder="お名前を入力">
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">メールアドレス</label>
            <input type="email" class="form-control" id="email" placeholder="メールアドレスを入力">
          </div>
          <div class="mb-3">
            <label for="message" class="form-label">メッセージ</label>
            <textarea class="form-control" id="message" rows="5" placeholder="メッセージを入力"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">送信</button>
        </form>
      </div>
    </section>

    <!-- フッター -->
    <footer class="py-4 bg-dark text-white text-center">
      <div class="container">
        <p>&copy; 2025 MUGEN Writer. All Rights Reserved.</p>
      </div>
    </footer>

    <!-- Bootstrap 5 のJavaScript（Popper.jsも含む） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>