AI・Shiori 「ChatGPT」にHTML書いてもらった

2023年6月4日 23:42

前回、AIにHTMLを書いてもらった記事をアップしましたが、アクセスが非常に多かったので、今回は、「ChatGPT」にHTMLを書いてもらう方法を少し詳しく書きます。

テーマを決めて事前準備する

今回は、フォトギャラリーのページをChatGPTにお願いして書いてもらいました。AIは、作りたいページのイメージを具体的に提示すればするほど、正確にHTMLを書いてくれるので、事前準備が必要です。

まず、ページの全体像を下記のように決めました。

１．デザイン：レスポンシブデザイン
２．コンセプト：おしゃれなフォトギャラリー
３．画像とテキストの配置：
（１）左上にロゴ：logo.png/85px(H) 200(W)px
（２）メニューバー：６種類
（３）トップバナー：top.png/400px(H) 1200px(W)
４．キャッチコピー：「便利でおしゃれなフォトギャラリー」の英語翻訳５．画像配置：12枚を横向きに配置
６．フッター：適当な内容を英語で作成
７．フォルダ構成：HTMLファイルと同一階層に「images」フォルダを配置し、すべての画像ファイルはその中に配置する。

画像をつくる

ギャラリーに配置する写真は、詩織の写真がたくさんありますので、それ以外のロゴとトップ画像を新たに作る必要があります

１．ロゴをつくる
ロゴを作るのはBingAIが得意そうだったので、お願いしたらすぐできました。意味のないAI文字が逆になかなかいい感じです。

２．top画像をつくる
トップ画像は、Stable Diffusionの方が良いので、サイズを400px(H) 1200px(W)に指定して、僕の好きなポルシェとパリをプロンプトに入れて、更に文字列を適当に入れたら、ちょっと雰囲気のある画像が出てきたのでこれにしました。ここにも意味のないAI文字が入っていてなかなか良いです。
ちなみにどうして300という数字が入っているかというと、プロンプトに「車のサイズは300PXくらい」と入れたのが原因だと思われます。

HTML作成開始

以下は、僕とChatGPTのやり取りです。

＜依頼内容＞
以下のデザインのWebページを作りたいと思います。あなたはプロのWebデザイナーのテクニックを最大限駆使して、 HTMLとCSSを作成していただけますか？

１．デザイン：レスポンシブデザイン
２．コンセプト：おしゃれなフォトギャラリー
３．画像とテキストの配置：下記の（１）から順番にメニューや画像を下に向かって配置してください
（１）左上にロゴ：logo.png/85px(H) 200(W)px
（２）メニューバー：６種類、代表的なものを英語で考えてください
（３）トップバナー：top.png/400px(H) 1200px(W)
４．キャッチコピー：大きめのフォントで、下記の「コピー内容」を英語に翻訳して表示してください＜コピー内容＞便利でおしゃれなフォトギャラリー
５．画像配置：1.pngから12.pngまで12枚を横向きに配置し、バックグラウンドに薄い色をつけててください。写真には影をつけて浮かび上がるような効果を入れてください。
６．フッター：適当な内容を英語で作成して入れてください。
７．フォルダ構成：HTMLファイルと同一階層に「images」フォルダを配置し、すべての画像ファイルはその中に配置する。

＜注意点＞
１．もし、わからないことがあれば僕に聞いてください。
２．こうすればもっとおしゃれになるというアイディアがあれば、あなたの判断で追加して、僕に作業を依頼してください。

それでは良いページができるよう、協力して進めましょう。よろしくお願いします。

1回目の完成コード

上記を依頼すると、数秒でコードが書かれました。本当に早いです。
それをブラウザで表示すると以下のような感じになりました。

トップ画像の縦横比が維持されず、横長になっていました。

そこで、下記の修正依頼を投げました。

＜修正依頼内容＞

素晴らしいですね。ほぼ完璧です。下記の点を修正・追加してください。
＜修正内容＞
１．ウインドウサイズが変化してもtop.pngの縦のサイズが一定のままになっています。画像の縦横比率は変えないようにしてください。
２．写真の影をもう少し強調してください。
＜追加項目＞フォトギャラリーのコンテナの背景に薄い色をつけてください。

2回目の完成コード

完璧でした。試しにウインドウサイズをいろいろ変えるとレスポンシブに画面が動きます。

3回目の完成コード
デザイン的にはこれでOKなのですが、表示画像をリスト化するコードが長く、今後画像が増える場合にも簡単に処理できるよう、その部分をJavascriptで書いてもらうようにお願いしました。
そして、これが完成コードです。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stylish Photo Gallery</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header>
    <div class="logo">
      <img src="images/logo.png" alt="Logo" height="85" width="200">
    </div>
    <nav>
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section class="top-banner">
    <div class="banner-content">
      <img src="images/top.png" alt="Top Banner">
      <h1 class="catchphrase">Convenient and Stylish Photo Gallery</h1>
    </div>
  </section>

  <section class="photo-gallery">
    <div class="container">
      <div class="grid" id="photoGrid"></div>
    </div>
  </section>

  <footer>
    <p>&copy; 2023 Stylish Photo Gallery. All rights reserved.</p>
  </footer>

  <script>
    // フォトギャラリーの画像フォルダパス
    var photoFolderPath = "images/";

    // フォトギャラリーの画像数
    var photoCount = 12;

    // フォトギャラリーの画像ファイル名を動的に生成
    var photoList = [];
    for (var i = 1; i <= photoCount; i++) {
      photoList.push(i + ".png");
    }

    // フォトギャラリーのコンテナ要素を取得
    var photoGrid = document.getElementById("photoGrid");

    // 画像を動的に生成してコンテナに追加
    for (var i = 0; i < photoList.length; i++) {
      var photoItem = document.createElement("div");
      photoItem.className = "grid-item";

      var photoImg = document.createElement("img");
      photoImg.src = photoFolderPath + photoList[i];
      photoImg.alt = "Photo " + (i + 1);

      photoItem.appendChild(photoImg);
      photoGrid.appendChild(photoItem);
    }
  </script>
</body>

</html>

CSS

/* styles.css */

/* Reset some default styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

header {
  background-color: #333;
  padding: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  display: block;
}

.menu {
  list-style-type: none;
  display: flex;
}

.menu li:not(:last-child) {
  margin-right: 20px;
}

.menu a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}

.top-banner {
  position: relative;
  text-align: center;
  margin-top: 20px;
}

.top-banner .banner-content {
  position: relative;
  display: inline-block;
}

.top-banner img {
  max-width: 100%;
  height: auto;
  display: block;
}

.catchphrase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.photo-gallery {
  margin-top: 40px;
  background-color: #f9f9f9;
  padding: 20px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

.grid-item {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.grid-item img {
  display: block;
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}