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

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

前回までで HPで使用する画像を一通り生成しました。
今回は Google社 の生成AI（以降 Gemini）を使用してTHMLを生成し、HPのTOPページを作っていきます。

◆ Gemini の使い方について

Gemini の使い方は簡単で下の２Stepだけです。

1. Gemini にアクセス

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

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

2. テキストで質問を投げる

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

Gemini に質問を送信


Gemini から回答

◆必要な設定情報の確認

Gemini を使ってアニメ制作会社のHPを作るのに何を設定する必要があるのか確認を行います。
今回はシンプルに下記内容で質問してみます。

「アニメ制作会社のホームページのTOPページを作って貰うのに必要となる構成要素を教えてください。」

Gemini からの回答は下記となります。

アニメ制作会社のホームページTOPページは、会社の顔となる重要なページです。ユーザーに会社の概要や制作実績を伝え、作品に興味を持ってもらうための第一歩となるため、しっかりと構成を考えましょう。

必須構成要素

ヘッダー：会社名ロゴ、メニュー
メインコンテンツ：
メインビジュアル：作品画像やアニメーション
キャッチコピー：会社や作品のコンセプトを簡潔に表現
サービス紹介：どのようなアニメ制作サービスを提供しているのかをわかりやすく説明
作品紹介：代表的な作品や最新作を紹介
ニュース・ブログ：最新情報や制作秘話を発信
フッター：
会社情報：住所、電話番号、メールアドレス、アクセス方法など
著作権表記
SNSリンク
その他

実績紹介：過去の制作実績を画像や動画付きで紹介することで、会社の信頼性を高めることができます。
スタッフ紹介：アニメ制作に携わるスタッフを紹介することで、会社の制作体制や人材の厚みをアピールすることができます。
お問い合わせフォーム：ユーザーから簡単に問い合わせできるようにしておきましょう。

ブログ：アニメ制作に関する情報や作品の裏話などを発信することで、ユーザーとのエンゲージメントを高めることができます。

デザイン
アニメ制作会社のホームページは、作品のイメージに合ったデザインにすることが重要です。
ターゲット層に合わせたデザインにすることも重要です。
レスポンシブデザインにすることで、様々なデバイスで閲覧できるようにしましょう。

SEO対策
検索エンジンで上位表示されるように、SEO対策を施しましょう。
キーワード選定、タイトルタグ、メタディスクリプションなどの対策が重要です。

その他
アニメーションや音声などの要素を追加することで、より魅力的なTOPページを作成することができます。
ホームページ制作には専門的な知識が必要となります。ご自身で作成するのが難しい場合は、ホームページ制作会社に依頼することを検討しましょう。
これらの構成要素を参考に、アニメ制作会社の魅力を存分に伝えられるTOPページを作成してください。
 

パっと見ただけでも分かりますが、かなり詳細な回答が返ってきます。
素人が内容を見た感じでは、まるで専門家が答えたかのような回答です。

ここで意識しておいて欲しい事があります。
生成AIの回答は概ね正しいのですが、尤もらしくサラッっと嘘や間違いを入れてくるケースが多々あります。
この辺りは、AIの学習元となるネット情報に嘘が溢れているからかもしれません。
そのため、参考にはしても全てを鵜呑みにせず疑って掛かる位の心構えでいた方がいいと思います。

また、同じ質問をしても、毎回回答が微妙に変わります。
この辺りは画像生成AIと同じようにランダム性があるようです。
更にリアルタイムで学習し続けているからだと思いますが、時間を置いて再質問しても回答が変わります。
この辺りは人を相手にチャットでやり取りしているような感じだと言えば解りやすいかもしれません。
人は間違いもするし、嘘もつきますから。

◆HPのTOPページの作成

Gemini の回答を元にHPのTOPページを構成する下記の3ファイルを作成します。

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

１．ファイルの配置

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

・aska_hp（フォルダ）
　├ index.html
　├ style.css
　├ script.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, style.css, script.js）は一旦空で作成して配置してください。

2．作成する構成要素の確定

Gemini が回答した構成要素より、アニメ会社のＨＰで良くある項目を絞り込みます。
今回は下記の構成要素を作成します。

・ヘッダー
　・会社ロゴ（ヘッダー左端に配置）
　・メニュー（ヘッダー右端に配置）
・メインビジュアル（メインコンテンツの画像）
　ページ中央に表示、3作品程、カルーセルで3秒毎にスライド表示
・ニュース
・作品紹介
・フッター
　・会社情報

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

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

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

構成要素の詳細と、作りたいページのイメージをテキスト化し、Gemini に HPのTOPページの作成を依頼します。
具体的には下記内容で Gemini に質問（依頼）しました。
※このテキスト完成までに、生成AIを使ってそれなりの試行回数を行っています。
　この辺りは画像生成時の Prompt 作成と似たような感じだと思います。

アニメ制作会社「株式会社あすか」の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 入れて表示
　　下部に固定しない

5. Gemini からの回答について

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

style.css

script.js

HTMLを少しでも触った事のある人なら解ると思いますが、まともなソースになっていません。
当然Webブラウザでアクセスしてもまともな表示はされません。
なんとか Gemini でWebページを作成しようと相応の試行を行いました。
しかし結果に大差なく、現時点（2024/8/28）の Gemini でHPのTOPページを作るのを断念しました。

そのため以降は Open AI 社の生成AI（ChatGPT）を使用して、再度HPのTOPページの作成を試みます。
引き続き、よろしくお願いします。

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