生成AI素人のプログラマが、生成AIを使ってHPのTOPページを作ってみた ⑨

◆生成AI（ChatGPT）を使ってのHTML生成

前回は Google社 の生成AI（Gemini）を使用してTHMLを生成しようとしましたが、上手く行きませんでした。
なので今回は Open AI社 の生成AI（以降 ChatGPT）を使用してTHMLを生成し、HPのTOPページを作っていきます。

◆ ChatGPTの使い方について

ChatGPT の使い方は Gemini と同じで下記の２Stepだけです。

1. ChatGPT にアクセス

ブラウザを使って ChatGPT（下記URL）にアクセスします。
url：https://chatgpt.com

※注意
　ChatGPT にアクセスするには Open AI アカウント、または Google アカウント等でのログインが必要となります。
　ここではアカウントの取得、ログインについては省略しています。

2. テキストで質問を投げて、回答してもらう

聞きたい内容をプロンプトに張り付けて、送信ボタン を押下します。
基本はこれだけです。
後は生成AIが送信した質問内容を解析して、回答してくれます。
実際に使ってみると下のような感じです。

ChatGPT に質問を送信


ChatGPT から回答


見ての通りで、結構な無茶振りしてみてもちゃんと答えてくれます。
こうして見ると使い方次第では仕事でも活用できる部分もあるのではないでしょうか。

◆ HPのTOPページの生成

ChatGPT を使用して、HPのTOPページを生成していきます。

1．生成するファイルについて

生成するファイルは、HPのTOPページを構成する下記3ファイルとなります。

・index.html　※HTMLファイル：ページの本体
・styles.css　※CSSファイル：HTML内で使用する文字の色、大きさ等のデザイン情報を定義
・scripts.js　 ※Scriptファイル：HTNL内で使用するカルーセル等の動作するPGを定義

CSSファイルが Gemini の時は「style.css」でしたが、ChatGPT の時は「styles.css」となっている点に注意してください。
Scriptファイルが Gemini の時は「script.js」でしたが、「scripts.js」なっていることも同様です。
理由は ChatGPT で CSSファイルとScriptファイルを生成すると、何故か「styles.css」と「scripts.js」いうファイル名で出力するからです。
Gemini の時と同じ名前にしていると、名前違いで上手く表示されないので気を付けて下さい。

2．生成するファイルを配置

ファイルを下のような構成になるように配置します。

・aska_hp（フォルダ）
　├ index.html
　├ styles.css
　├ scripts.js
　└ image（フォルダ）
　　├ company_logo.png　※会社のロゴ（自社のHPから拝借）
　　├ top_01.png　 ※1枚目に生成した画像
　　├ top_02.png　 ※2枚目に生成した画像
　　├ top_03.png　 ※3枚目に生成した画像
　　├ work_01.png　※4枚目に生成した画像
　　├ work_02.png　※5枚目に生成した画像
　　├ work_03.png　※6枚目に生成した画像
　　└ work_04.png　※7枚目に生成した画像

生成する3ファイル（index.html, styles.css, scripts.js）は空で作成して配置してください。
※生成ファイル名が異なりますが、基本的には前回記載した内容と同じです。

3．完成したHPのイメージの想定

構成要素を使用した概ねの完成イメージを想定します。
ここでは下のようなページをイメージとして想定しています。

※前回記載した内容と同じです。

4．HPのTOPページの作成依頼

構成要素の詳細と、作りたいページのイメージをテキスト化し、ChatGPT に HPのTOPページの作成を依頼します。
具体的には下記内容で ChatGPT に質問（依頼）しました。

アニメ制作会社「株式会社あすか」のHPのTOPページの Html, CSS, script を作成お願いいたします。

ページの構成要素と画面構成は下記となります。

構成要素：

　ヘッダー：
　　会社ロゴ：
　　　./image/company_logo.png
　　メニュー：
　　　ホーム、サービス、私達について、ブログ、求人募集、お問い合わせ

　メインビジュアル：
　　・あすか時代、到来しません！
　　　./image/top_01.png (size 1024 * 512)
　　・Daメジャー！
　　　./image/top_02.png (size 1024 * 512)
　　・決戦！バトルお爺ちゃん！
　　　./image/top_03.png (size 1024 * 512)

　News 最新情報：
　　・2024/06/19
　　　総裁キシダくん、増税王に俺はなる！脱税版！
　　　待望の改正政治資金規正法が成立！合法マネロンやり放題！
　　・2024/04/08
　　　匂うぞ、マシニクさん！映画化イベント
　　　2024年10月より、備前、大安寺、備前山門、岡山、吉備津の5地方で開催決定！
　　・2023/08/22
　　　ラーメン食いすぎ、コイズミくん
　　　ヤサイマシマシ、アブラマシマシ、カラメマシマシ、ニンニクマシマシ！実物ラーメン、本日発売！

　作品リスト：
　　・どっかで見たような軽音学部
　　　./image/work_01.png (size 1024 * 512)
　　・世にも奇妙な生き物語
　　　./image/work_02.png (size 1024 * 512)
　　・銀河バリバリ逃走伝説
　　　./image/work_03.png (size 1024 * 512)
　　・ラーメン食いすぎ、コイズミくん
　　　./image/work_04.png (size 1024 * 512)

　フッター：
　　Copyright(C) 2024 Aska Co.,Ltd. All Rights Resered.

画面構成：

　背景：
　　黒基調

　ヘッダー：
　　上部に固定で表示
　　白を基調としたメニューバー調
　　画面を上下にスクロールしても常に手前に表示
　　会社ロゴは左詰めに表示
　　メニューは右詰めで横並びに表示
　　メニューの右端に 50px の余白を設定

　メインビジュアル：
　　中央寄せで1枚、幅80%で表示
　　カルーセルを使用し、3秒毎に切り替えて3枚表示
　　各メインビジュアルの画像の中央下にタイトルのテキストを表示
　　タイトルのテキストの背景色はなし（透明）
　　タイトルのテキストは特大フォントにする
　　カルーセルにインジケーターを設定

　News (最新情報)：

　　区切り線を中央に幅60%で表示
　　区切り線の左上に幅30％でタブを表示
　　タブの一番下と区切り線が重なるよう位置調整
　　タブ内のテキストに「News 最新情報」を表示
　　テキストはタブ内の中央に表示
　　タブは深い青で表示
　　区切り線の少し下に News の詳細を表示
　　News の詳細はテーブルで表示
　　News の詳細は区切り線と同じ幅で表示
　　News の詳細の背景色は青みがかった濃いグレーで表示
　　News の詳細の外枠は白で表示
　　1つのニュースは日付と内容で表示
　　日付と内容の間に区切り線は不要
　　日付はセンタリング、内容は左詰め
　　内容の改行は適用
　　ニュース間は細い点線で区切って表示

　作品リスト：
　　区切り線を中央に幅60%で表示
　　区切り線の左上に幅30％でタブを表示
　　タブの一番下と区切り線が重なるよう位置調整
　　タブ内のテキストに「作品リスト」を表示
　　作品リストは中央に表示
　　作品リストの画像は1つ幅25%で4つ横並びで表示
　　作品リストの画像の合計幅が全体幅の60%になるようにスライダーを適用
　　各作品リストの画像の中央下にタイトルのテキストを表示
　　タイトルのテキストの背景色はなし（透明）

　フッター：
　　灰色を基調としたデザイン
　　Copyright は右寄せで、右端に余白 20px 入れて表示
　　下部に固定しない

※前回記載した内容と同じです。

下に ChatGPT が回答した3ファイル（index.html, style.css, scripts.js）の内容を記載します。

index.html

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
    ＜meta charset="UTF-8"＞
    ＜meta name="viewport" content="width=device-width, initial-scale=1.0"＞
    ＜title＞株式会社あすか＜/title＞
    ＜link rel="stylesheet" href="styles.css"＞
＜/head＞
＜body＞
    ＜header＞
        ＜div class="logo"＞
            ＜img src="./image/company_logo.png" alt="株式会社あすか ロゴ"＞
        ＜/div＞
        ＜nav class="menu"＞
            ＜ul＞
                ＜li＞＜a href="#"＞ホーム＜/a＞＜/li＞
                ＜li＞＜a href="#"＞サービス＜/a＞＜/li＞
                ＜li＞＜a href="#"＞私達について＜/a＞＜/li＞
                ＜li＞＜a href="#"＞ブログ＜/a＞＜/li＞
                ＜li＞＜a href="#"＞求人募集＜/a＞＜/li＞
                ＜li＞＜a href="#"＞お問い合わせ＜/a＞＜/li＞
            ＜/ul＞
        ＜/nav＞
    ＜/header＞

    ＜main＞
        ＜section class="main-visual"＞
            ＜div class="carousel"＞
                ＜div class="carousel-item"＞
                    ＜img src="./image/top_01.png" alt="あすか時代、到来しません！"＞
                    ＜p class="carousel-caption"＞あすか時代、到来しません！＜/p＞
                ＜/div＞
                ＜div class="carousel-item"＞
                    ＜img src="./image/top_02.png" alt="Daメジャー！"＞
                    ＜p class="carousel-caption"＞Daメジャー！＜/p＞
                ＜/div＞
                ＜div class="carousel-item"＞
                    ＜img src="./image/top_03.png" alt="決戦！バトルお爺ちゃん！"＞
                    ＜p class="carousel-caption"＞決戦！バトルお爺ちゃん！＜/p＞
                ＜/div＞
            ＜/div＞
        ＜/section＞

        ＜section class="news"＞
            ＜div class="section-header"＞
                ＜h2＞News 最新情報＜/h2＞
                ＜hr＞
            ＜/div＞
            ＜div class="news-details"＞
                ＜div class="news-item"＞
                    ＜p class="news-date"＞2024/06/19＜/p＞
                    ＜p class="news-content"＞総裁キシダくん、増税王に俺はなる！脱税版！＜br＞待望の改正政治資金規正法が成立！合法マネロンやり放題！＜/p＞
                ＜/div＞
                ＜div class="news-item"＞
                    ＜p class="news-date"＞2024/04/08＜/p＞
                    ＜p class="news-content"＞匂うぞ、マシニクさん！映画化イベント＜br＞2024年10月より、備前、大安寺、備前山門、岡山、吉備津の5地方で開催決定！＜/p＞
                ＜/div＞
                ＜div class="news-item"＞
                    ＜p class="news-date"＞2023/08/22＜/p＞
                    ＜p class="news-content"＞ラーメン食いすぎ、コイズミくん＜br＞ヤサイマシマシ、アブラマシマシ、カラメマシマシ、ニンニクマシマシ！実物ラーメン、本日発売！＜/p＞
                ＜/div＞
            ＜/div＞
        ＜/section＞

        ＜section class="works"＞
            ＜div class="section-header"＞
                ＜h2＞作品リスト＜/h2＞
                ＜hr＞
            ＜/div＞
            ＜div class="works-list"＞
                ＜div class="work-item"＞
                    ＜img src="./image/work_01.png" alt="どっかで見たような軽音学部"＞
                    ＜p class="work-caption"＞どっかで見たような軽音学部＜/p＞
                ＜/div＞
                ＜div class="work-item"＞
                    ＜img src="./image/work_02.png" alt="世にも奇妙な生き物語"＞
                    ＜p class="work-caption"＞世にも奇妙な生き物語＜/p＞
                ＜/div＞
                ＜div class="work-item"＞
                    ＜img src="./image/work_03.png" alt="銀河バリバリ逃走伝説"＞
                    ＜p class="work-caption"＞銀河バリバリ逃走伝説＜/p＞
                ＜/div＞
                ＜div class="work-item"＞
                    ＜img src="./image/work_04.png" alt="ラーメン食いすぎ、コイズミくん"＞
                    ＜p class="work-caption"＞ラーメン食いすぎ、コイズミくん＜/p＞
                ＜/div＞
            ＜/div＞
        ＜/section＞
    ＜/main＞

    ＜footer＞
        ＜p＞Copyright(C) 2024 Aska Co.,Ltd. All Rights Reserved.＜/p＞
    ＜/footer＞

    ＜script src="scripts.js"＞＜/script＞
＜/body＞
＜/html＞

※ 記載内容の「＜」と「＞」は本来半角です。ここのブログでは化けるので、しぶしぶ全角で記載しています。 styles.css

body {
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #fff;
    color: #000;
    display: flex;
    justify-content: space-between;
    padding: 10px 50px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.logo img {
    height: 50px;
}

.menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    margin: 0 10px;
}

.menu a {
    color: #000;
    text-decoration: none;
}

.main-visual {
    margin-top: 80px;
    text-align: center;
}

.carousel {
    width: 80%;
    margin: 0 auto;
    position: relative;
}

.carousel-item {
    display: none;
    position: absolute;
    width: 100%;
}

.carousel-item img {
    width: 100%;
    height: auto;
}

.carousel-caption {
    bottom: 10px;
    color: #fff;
    font-size: 2em;
    position: absolute;
    text-align: center;
    width: 100%;
}

.news, .works {
    margin: 50px auto;
    text-align: center;
    width: 60%;
}

.section-header {
    position: relative;
}

.section-header h2 {
    background-color: #004080;
    display: inline-block;
    padding: 10px 20px;
    position: absolute;
    top: -20px;
}

hr {
    border: 1px solid #004080;
    margin: 20px 0;
    width: 100%;
}

.news-details, .works-list {
    background-color: #333;
    border: 1px solid #fff;
    padding: 20px;
}

.news-item, .work-item {
    margin-bottom: 20px;
}

.news-date {
    text-align: center;
}

.news-content, .work-caption {
    text-align: left;
}

.news-item:not(:last-child) {
    border-bottom: 1px dotted #fff;
    padding-bottom: 10px;
}

.works-list {
    display: flex;
    justify-content: space-between;
}

.work-item {
    width: 24%;
}

.work-item img {
    width: 100%;
    height: auto;
}

footer {
    background-color: #444;
    color: #fff;
    padding: 10px 20px;
    text-align: right;
}

scripts.js

document.addEventListener('DOMContentLoaded', () => {
    const items = document.querySelectorAll('.carousel-item');
    let currentItem = 0;

    function showNextItem() {
        items[currentItem].style.display = 'none';
        currentItem = (currentItem + 1) % items.length;
        items[currentItem].style.display = 'block';
    }

    items[currentItem].style.display = 'block';
    setInterval(showNextItem, 3000);
});

5．生成した内容の確認

ChatGPT が生成した3ファイルの内容を各ファイルに張り付け、ブラウザで index.html を表示して生成した内容の確認をします。

下が生成した inde.html をブラウザで表示した内容となります。

比較すると一目で解りますが、完成したHPのイメージの想定にならず、色々と崩れてしまっています。
メインビジュアルに至っては表示すらされていません。

6．生成した内容への修正依頼

以前記載しましたが生成AIの回答はバラツキがあり、同じ依頼をしてもガチャのように毎回回答が変わります。
１発で上手くいく回答を得れる可能性もありますが、複雑な依頼になる程上手くいく確率は下がります。
ChatGPT の回数制限もあるため、そんな奇跡に頼っていたらキリがありません。
そのため、ある程度出来が良い回答が出たら、そこからはおかしい部分について個別に修正依頼を出して直していきます。

修正依頼を作るために、生成した内容と想定した内容を比較します。
左：生成した内容、右：想定した内容

比較して見た目上が違う部分を直すよう修正依頼を出します。
現状の生成内容に対しての修正依頼を行うには、生成したチャットに追加で指示を出すだけです。
具体的には下記内容で ChatGPT に修正依頼を出しました。

修正依頼１回目

内容を確認しましたが、想定と違う形で表示されています。

そのため下記について修正をお願いいたします。

・「メインビジュアル」が表示されていないので、表示するように修正
・「News」のタブが、区切り線の中央に配置されていているので、左寄せに修正
・「News」のタブが、区切り線の下側に配置されているので、上側に配置するように修正
・「News」の日付と内容は改行しないよう修正
・「作品リスト」のタブが、区切り線の中央に配置されていているので、左寄せに修正
・「作品リスト」のタブが、区切り線の下側に配置されているので、上側に配置するように修正
・「作品リスト」の画像の幅を1つ 512 px で表示
・「作品リスト」の合計幅が全体幅の60%になるようにスライダーを適用

上記を依頼すると ChatGPT が修正した3ファイル（index.html, styles.css, scripts.js）を提示してきます。
後は、初回依頼時と同様に修正した内容を各ファイルに張り付け、ブラウザで index.html を表示して修正した内容の確認をします。
確認すると分かりますが、１度の修正依頼では想定する形にはならないケースが殆どです。

7．完成するまで

「5．生成した内容の確認」と「6．生成した内容への修正依頼」を繰り返して、想定した内容になるまで繰り返し修正依頼を出し続けます。
具体的には下記内容で ChatGPT に修正依頼を出しました。

修正依頼2回目

内容を確認しましたが、まだ想定と違う形で表示されています。

そのため下記について修正してください。

・「ヘッダー」のメニューの右端に 50px の余白を入れるよう修正
・「メインビジュアル」を表示するように修正
・「News」のタブが、区切り線の上に配置するように修正
・「News」の日付と内容は改行しないよう修正
・「作品リスト」のタブが、区切り線の上に配置するように修正
・「作品リスト」の画像はそれぞれ幅 512 px で表示
・「作品リスト」の合計幅が全体幅の60%になるようにスライダーを適用

修正依頼3回目

内容を確認しましたが、まだ想定と違う形で表示されています。

そのため下記について修正してください。

・「ヘッダー」のメニューの右端に 50px の余白を入れるよう修正
・「メインビジュアル」を表示するように修正
・「News」のタブの一番下と区切り線が重なるよう位置調整
・「News」の日付と内容は違うセルになるように修正
・「作品リスト」のタブの一番下と区切り線が重なるよう位置調整

修正依頼4回目

内容を確認しましたが、まだ想定と違う形で表示されています。

そのため下記について修正してください。

・「メインビジュアル」を表示するように修正
・「News」のタブの下側に区切り線が重なるよう位置調整
・「News」の内容に改行を適用するように修正
・「作品リスト」のタブの下側に区切り線が重なるよう位置調整

修正依頼5回目

内容を確認しましたが、まだ想定と違う形で表示されています。

そのため下記について修正してください。

・「メインビジュアル」にカルーセルを適用して3枚の画像を3秒毎に切り替えて表示するように修正
・「メインビジュアル」の画像の中央下にタイトルのテキストを表示するように修正
・「メインビジュアル」のタイトルのテキストの背景色はなし（透明）
・「メインビジュアル」のタイトルのテキストは特大フォントで表示
・「メインビジュアル」のカルーセルにインジケーターを表示
・「News」のタブと区切り線の間に隙間がないように位置調整
・「作品リスト」のタブと区切り線の間に隙間がないように位置調整

修正依頼6回目

内容を確認しましたが、まだ想定と違う形で表示されています。

そのため下記について修正してください。

・「メインビジュアル」にカルーセルを適用して3枚の画像を3秒毎に切り替えて表示するように修正
・「News」のタブと区切り線が重なってしまっています。タブの位置を少し上にして、タブの下と区切り線が丁度重なるように位置調整
・「作品リスト」のタブと区切り線が重なってしまっています。タブの位置を少し上にして、タブの下と区切り線が丁度重なるように位置調整

修正依頼7回目

内容を確認しましたが、まだ想定と違う形で表示されています。

そのため下記について修正してください。

・「ヘッダー」のメニューの位置を 15px 下に修正
・「メインビジュアル」の3枚の画像を、カルーセルで3秒毎に切り替わるよう修正
・「News」のタブの位置を 10px 下に調整
・「News」の一番下の区切り線は不要
・「News」の枠内の上下の padding を小さくなるよう修正
・「作品リスト」のタブの位置を 10px 下に調整

修正依頼8回目

内容を確認しましたが、まだ想定と違う形で表示されています。

そのため下記について修正してください。

・「News」のニュースとニュースの間の区切り線が消えているので表示してください。

お気付きになったでしょうか？
よく見るとメインビジュアルのカルーセルの表示等、同じような修正依頼を何度も出している事に･･･
これは修正したら、今度は別の場所が壊れる･･･というような事が頻発して起こったためです。
まるで出来の悪い新人プログラマに指示を出しているような気分になります（汗）

また、指示内容を見ると分かりますが、それなりに専門用語が出てきます。
筆者はPGなので問題ありませんが、この辺りの用語を知らないと、そもそもで生成AIに依頼をする事が難しくなると思われます。
そのため現時点では生成AIにWebページを生成させるには、指示する側にも相応の知識が必要となります。
この辺りは今後生成AIがバージョンアップに期待したいところです。

8．完成したHPのTOPページ

下が修正依頼を終え、ほぼ想定通りとなった内容となります。

index.html

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
    ＜meta charset="UTF-8"＞
    ＜meta name="viewport" content="width=device-width, initial-scale=1.0"＞
    ＜title＞株式会社あすか＜/title＞
    ＜link rel="stylesheet" href="styles.css"＞
＜/head＞
＜body＞
    ＜header＞
        ＜div class="logo"＞
            ＜img src="./image/company_logo.png" alt="株式会社あすか ロゴ"＞
        ＜/div＞
        ＜nav class="menu"＞
            ＜ul＞
                ＜li＞＜a href="#"＞ホーム＜/a＞＜/li＞
                ＜li＞＜a href="#"＞サービス＜/a＞＜/li＞
                ＜li＞＜a href="#"＞私達について＜/a＞＜/li＞
                ＜li＞＜a href="#"＞ブログ＜/a＞＜/li＞
                ＜li＞＜a href="#"＞求人募集＜/a＞＜/li＞
                ＜li＞＜a href="#"＞お問い合わせ＜/a＞＜/li＞
            ＜/ul＞
        ＜/nav＞
    ＜/header＞

    ＜main＞
        ＜section class="main-visual"＞
            ＜div class="carousel"＞
                ＜div class="carousel-item"＞
                    ＜img src="./image/top_01.png" alt="あすか時代、到来しません！"＞
                    ＜p class="carousel-caption"＞あすか時代、到来しません！＜/p＞
                ＜/div＞
                ＜div class="carousel-item"＞
                    ＜img src="./image/top_02.png" alt="Daメジャー！"＞
                    ＜p class="carousel-caption"＞Daメジャー！＜/p＞
                ＜/div＞
                ＜div class="carousel-item"＞
                    ＜img src="./image/top_03.png" alt="決戦！バトルお爺ちゃん！"＞
                    ＜p class="carousel-caption"＞決戦！バトルお爺ちゃん！＜/p＞
                ＜/div＞
            ＜/div＞
            ＜div class="carousel-indicators"＞
                ＜span class="indicator active"＞＜/span＞
                ＜span class="indicator"＞＜/span＞
                ＜span class="indicator"＞＜/span＞
            ＜/div＞
        ＜/section＞

        ＜section class="news"＞
            ＜div class="section-header"＞
                ＜h2＞News 最新情報＜/h2＞
                ＜hr class="section-divider"＞
            ＜/div＞
            ＜div class="news-details"＞
                ＜table class="news-table"＞
                    ＜tr＞
                        ＜td class="news-date"＞2024/06/19＜/td＞
                        ＜td class="news-content"＞総裁キシダくん、増税王に俺はなる！脱税版！＜br＞待望の改正政治資金規正法が成立！合法マネロンやり放題！＜/td＞
                    ＜/tr＞
                    ＜tr class="news-divider"＞
                        ＜td colspan="2"＞＜hr＞＜/td＞
                    ＜/tr＞
                    ＜tr＞
                        ＜td class="news-date"＞2024/04/08＜/td＞
                        ＜td class="news-content"＞匂うぞ、マシニクさん！映画化イベント＜br＞2024年10月より、備前、大安寺、備前山門、岡山、吉備津の5地方で開催決定！＜/td＞
                    ＜/tr＞
                    ＜tr class="news-divider"＞
                        ＜td colspan="2"＞＜hr＞＜/td＞
                    ＜/tr＞
                    ＜tr＞
                        ＜td class="news-date"＞2023/08/22＜/td＞
                        ＜td class="news-content"＞ラーメン食いすぎ、コイズミくん＜br＞ヤサイマシマシ、アブラマシマシ、カラメマシマシ、ニンニクマシマシ！実物ラーメン、本日発売！＜/td＞
                    ＜/tr＞
                ＜/table＞
            ＜/div＞
        ＜/section＞

        ＜section class="works"＞
            ＜div class="section-header"＞
                ＜h2＞作品リスト＜/h2＞
                ＜hr class="section-divider"＞
            ＜/div＞
            ＜div class="works-list"＞
                ＜div class="work-item"＞
                    ＜img src="./image/work_01.png" alt="どっかで見たような軽音学部"＞
                    ＜p class="work-caption"＞どっかで見たような軽音学部＜/p＞
                ＜/div＞
                ＜div class="work-item"＞
                    ＜img src="./image/work_02.png" alt="世にも奇妙な生き物語"＞
                    ＜p class="work-caption"＞世にも奇妙な生き物語＜/p＞
                ＜/div＞
                ＜div class="work-item"＞
                    ＜img src="./image/work_03.png" alt="銀河バリバリ逃走伝説"＞
                    ＜p class="work-caption"＞銀河バリバリ逃走伝説＜/p＞
                ＜/div＞
                ＜div class="work-item"＞
                    ＜img src="./image/work_04.png" alt="ラーメン食いすぎ、コイズミくん"＞
                    ＜p class="work-caption"＞ラーメン食いすぎ、コイズミくん＜/p＞
                ＜/div＞
            ＜/div＞
        ＜/section＞
    ＜/main＞

    ＜footer＞
        ＜p＞Copyright(C) 2024 Aska Co.,Ltd. All Rights Reserved.＜/p＞
    ＜/footer＞

    ＜script src="scripts.js"＞＜/script＞
＜/body＞
＜/html＞

※ 記載内容の「＜」と「＞」は本来半角です。ここのブログでは化けるので、しぶしぶ全角で記載しています。 styles.css

body {
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #fff;
    color: #000;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.logo img {
    height: 50px;
}

.menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-right: 50px; /* Right margin added */
}

.menu li {
    margin: 0 10px;
}

.menu a {
    color: #000;
    text-decoration: none;
}

header .menu {
    margin-top: 15px; /* Adjusted to position the menu correctly */
}

.main-visual {
    margin-top: 80px;
    text-align: center;
    position: relative;
}

.carousel {
    width: 80%;
    margin: 0 auto;
    position: relative;
    overflow: hidden; /* Added to ensure only one image is displayed */
    height: 512px; /* Ensure height of the carousel */
}

.carousel-item {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image covers the area without distortion */
}

.carousel-item:first-child {
    display: block; /* Show the first image initially */
}

.carousel-caption {
    bottom: 10px;
    color: #fff;
    font-size: 2em;
    position: absolute;
    text-align: center;
    width: 100%;
    background: none; /* Transparent background */
}

.carousel-indicators {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

.carousel-indicators .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #ddd;
    border-radius: 50%;
    cursor: pointer;
}

.carousel-indicators .indicator.active {
    background-color: #555;
}

.news, .works {
    margin: 50px auto;
    text-align: center;
    width: 60%;
}

.section-header {
    position: relative;
    text-align: left;
    padding-top: 20px;
}

.section-header h2 {
    background-color: #004080;
    display: inline-block;
    padding: 10px 20px;
    position: relative;
    z-index: 10;
    margin: 0;
    top: -20px; /* Adjusted to position the tab correctly */
}

.section-divider {
    border: 1px solid #004080;
    margin: 0;
    position: relative;
    top: -20px; /* Adjusted to overlap the section header */
    z-index: 1;
}

.news-details, .works-list {
    background-color: #333;
    border: 1px solid #fff;
    padding: 10px 20px; /* Adjusted padding */
}

.news-table {
    width: 100%;
}

.news-table td {
    padding: 10px;
}

.news-table .news-date {
    width: 20%;
    text-align: center;
}

.news-table .news-content {
    width: 80%;
    text-align: left;
}

.news-divider hr {
    border: 1px dotted #fff;
    margin: 0;
}

.works-list {
    display: flex;
    justify-content: space-between;
    overflow-x: auto;
}

.work-item {
    flex: 0 0 512px;
    margin-right: 10px;
}

.work-item img {
    width: 100%;
    height: auto;
}

footer {
    background-color: #444;
    color: #fff;
    padding: 10px 20px;
    text-align: right;
}

scripts.js

document.addEventListener('DOMContentLoaded', () => {
    const items = document.querySelectorAll('.carousel-item');
    const indicators = document.querySelectorAll('.indicator');
    let currentItem = 0;

    function showItem(index) {
        items[currentItem].style.display = 'none';
        indicators[currentItem].classList.remove('active');
        currentItem = index;
        items[currentItem].style.display = 'block';
        indicators[currentItem].classList.add('active');
    }

    function showNextItem() {
        let nextItem = (currentItem + 1) % items.length;
        showItem(nextItem);
    }

    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            showItem(index);
        });
    });

    setInterval(showNextItem, 3000);
});

下がブラウザで表示した内容


細かい所に所作ありますが、概ね想定した通りの形となりました。
これにて、「アニメ制作会社 あすか」のHPのTOPページは一旦完成となります。

デザイナー無しで作ったにしてはなかなかのクオリティではないでしょうか。
仮にモックとして、このクオリティでプログラマーがデザイナーに持って行ったら･･･
デザイナー側からすれば、更に高品質にする必要があるので、なかなか大変な作業になるのではないでしょうか（笑）

◆ あとがき

いかがだったでしょうか。
今回は生成AIを使ってHPのTOPページを、画像も含めて一通り作成する事に挑戦してみました。
50前のおっさんにしては思ったより頑張ったなと、個人的には満足しています。

今回、初めて画像生成AIに触ってみたのですが、思っていたより凄くて、驚きの連発でした。
それと同時にこんな簡単にハイクオリティな画像が生成できてしまっていいのだろうか･･･と空恐ろしくもあります。
今後ますますデザイン分野で生成AIは増えていくだろうな･･･との予感はします。

プログラムでも同様に、初めて生成AIの Gemini と ChatGPT を使ってコードを生成させてみました。
ただ、この分野は自分が専門な事もありますが、まだまだ荒い部分があるように感じました。
とくに Gemini については、割かし Google 信者だっただけにガッカリしたというのが本音です。

実は当初 ChatGPT を使うつもりはなく、Gemini だけでHPのTOPページを完成させる予定でした。
理由は ChatGPT の仕様の問題で、1日10回使うと回答の精度が一気に悪化するという問題があるからです。
正直10回では大した試行回数は試せないので、調査するにも向かないと判断していました。
勿論、この仕様は課金する事で回避できますが、調査LVでそこまでする気はなかったからです。
しかし思った以上に Gemini がポンコツだったため、仕方なく方針を切り替えたというのが実情です。

Gemini と ChatGPT を両方使った感想ですが、現時点（2024/08/29）では ChatGPT の方が圧倒的に上です。
今後この差は縮まっていくと思いますが、そうなると Gemini も色々と制約が入って使いにくくなっていくのかな…と思わなくもないです。
個人的には回数ではなく、最初の1週間使い放題とかにしてくれたら検証しやすいのになと思います。

ちなみに ChatGPT は想定通り1日10回の制限のため、数日に渡って調査するハメになり結構な時間が掛かってしまいました。
今回は検証もあったので生成AIで頑張りましたが、Webページは手で書いてしまった方が速いというのが本音です。
この辺りもいずれ生成AIの進化で変わるのか、それとも部分部分で共存するのか、注目していきたいところです。

総括となりますが、生成AIの分野は想像以上で、世間が騒ぐのも納得する結果となりました。
少し考えれば、業務に使える部分も幾つか思いつくLVでした。
触らず嫌いをせずに、少しでも触ってみれば考え方の幅が広るので、興味を持って頂ければと思います。

これにて「生成AI素人のプログラマが、生成AIを使ってHPのTOPページを作ってみた」は終了となります。
最後まで読んでいただき、ありがとうございました。

初回：生成AI素人のプログラマが、生成AIを使ってHPのTOPページを作ってみた ①
前回：生成AI素人のプログラマが、生成AIを使ってHPのTOPページを作ってみた ⑧