ChatGPTと一緒にホームページを開発した話 - コトゼニ～学習塾とボクと、時々プログラミング〜

【PR】この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

みなさん、こんにちは。早速ですが今回はホームページ制作のお話です。

先日、知人の紹介で「お好み焼き屋」さんのホームページを作らせてもらいました。

それがこちらです。

以前Webアプリケーションを作成する際に大いに活用したのがChatGPT。その様子は「ChatGPTと一緒に一問一答アプリを開発した話」記事で紹介しています。

2023年6月2日【ChatGPTと開発】高校「情報1」一問一答アプリ

今回も作業の効率化を図るために、ChatGPTを大いに活用しながら作成しました。

そこでこの記事では今回のホームページ制作において「どのような場面で活躍したのか」という点を中心に紹介したいと思います！

ぜひ最後までご覧ください！

1 ChatGPTは一発でどこまでコードを作成できるのか
2 今回特に役立ったところ
- 2.1 文章を書かせたら一級品
3 まとめ

ChatGPTは一発でどこまでコードを作成できるのか

そもそもプログラミングコードを書かせたら抜群のChatGPT。

そこで、「一発で狙い通りのホームページを作成（コードを組み立てることが）できるのか」を検証するために、以下のようなプロンプトを流しました。

コトゼニ

とりあえず思いつくがままに流し込んでみました

以下の要件を満たすよう、htmlでコードにしてください。お好み焼き屋のHP
店名:お好み焼き　いろは

各タグの中のテキストは宣伝効果が高まるような訴求力のある文章に変換してください。

配色:
ターゲット:40代を含めたファミリー

head
Bootstrap使用

header
・ハンバーガーメニューを付加
・メニュー項目は『・トップページ・food menu ・こだわり・店内の紹介 』
・『お好み焼きいろは』をクリックするとトップページに戻る
・背景色はコントラストが際立つ色

body
背景画像:和紙の画像

<h2> お好み焼きに関連する画像を貼り付け

<h3>お好み焼き　いろはのメニュー
テキスト:お好み焼き　いろはのメニューです。
お好み焼きが焼けるまでの間につまめる日替わり一品もご用意しております。
お好み焼き1枚は多いなぁ、という方はハーフサイズもご注文いただけます。

<h3>お好み焼き　いろはのこだわり
テキスト:

<h3>お好み焼き　いろはの店内
テキスト:綺麗な店内。ファミリーでもゆったり座れる広々なテーブル。



footer
以下のお店情報をテーブルで載せる
・お店情報1: 住所
大阪市生野区小路３丁目５−１６
・お店情報2:営業時間
17：00〜翌3：00（L.O. 翌2:00）
・お店情報3:アクセス
大阪メトロ千日前線「小路」下車　徒歩7分
大阪メトロ千日前線「北巽」下車　徒歩7分
・お店情報4:定休⽇
水曜日
・お店情報5:テイクアウト
可。お電話でご注文ください
tel:066756xxxx

・お店情報6:タバコ
喫煙可

・お店情報7:クレジットカード
ご利用いただけません

・お店情報8:QRコード決済
ご利用いただけません

サイトマップ
・トップページ
・メニュー
・こだわり
・店内紹介

各ページはそれぞれのページから全ページへのリンクあり(footer部分に設置)
urlはページの内容に即したものを付与する

読み返すと粗雑なプロンプトだなと反省が残りますが、親切にChatGPTは返答してくれました。

chatGPT

以下は、要件に基づいて作成したHTMLコードです。ただし、画像やリンクのURLは仮のものであり、実際のURLに置き換える必要があります。

<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    body {
      background-image: url('和紙の画像.jpg');
      background-size: cover;
    }

    header {
      background-color: #ff0000;
    }
  </style>
</head>

<body>
  <header>
    <nav>
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
            aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">お好み焼き いろは</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">トップページ</a></li>
            <li><a href="#">food menu</a></li>
            <li><a href="#">こだわり</a></li>
            <li><a href="#">店内の紹介</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <div class="container">
    <h1>お好み焼き いろは</h1>

    <h2><img src="related_image.jpg" alt="お好み焼きに関連する画像"></h2>

    <h3>お好み焼き いろはのメニュー</h3>
    <p>お好み焼き いろはのメニューです。お好み焼きが焼けるまでの間につまめる日替わり一品もご用意しております。お好み焼き1枚は多いなぁ、という方はハーフサイズもご注文いただけます。</p>

    <h3>お好み焼き いろはのこだわり</h3>
    <p>こだわりのテキストをここに入力してください。</p>

    <h3>お好み焼き いろはの店内</h3>
    <p>綺麗な店内。ファミリーでもゆったり座れる広々なテーブル。</p>
  </div>

  <footer>
    <div class="container">
      <table>
        <tr>
          <th>お店情報1</th>
          <td>住所<br>大阪市生野区小路３丁目５−１６</td>
        </tr>
        <tr>
          <th>お店情報2</th>
          <td>営業時間<br>17:00〜翌3:00（L.O. 翌2:00）</td>
        </tr>
        <tr>
          <th>お店情報3</th>
          <td>アクセス<br>大阪メトロ千日前線「小路」下車 徒歩7分<br>大阪メトロ千日前線「北巽」下車 徒歩7分</td>
        </tr>
        <tr>
          <th>お店情報4</th>
          <td>定休日<br>水曜日</td>
        </tr>
        <tr>
          <th>お店情報5</th>
          <td>テイクアウト<br>可。お電話でご注文ください<br>tel:066756xxxx</td>
        </tr>
        <tr>
          <th>お店情報6</th>
          <td>タバコ<br>喫煙可</td>
        </tr>
        <tr>
          <th>お店情報7</th>
          <td>クレジットカード<br>ご利用いただけません</td>
        </tr>
        <tr>
          <th>お店情報8</th>
          <td>QRコード決済<br>ご利用いただけません</td>
        </tr>
      </table>
    </div>
  </footer>

  <div class="container">
    <nav class="site-map">
      <ul>
        <li><a href="#">トップページ</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">こだわり</a></li>
        <li><a href="#">店内紹介</a></li>
      </ul>
    </nav>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>

</html>

見た感じは、しっかりとしてます。

これを実際にブラウザで見てみると…

うーん…思ってたのと違う。

CSSも適用していないので、当たり前と言えば当たり前。

ということでやはり、部分部分で助けを借りようということに方向転換しました。

今回特に役立ったところ

公開できるほどのクオリティのコードを一発で作成することはできませんでしたが、今回のホームページ制作でもChatGPTは大活躍してくれました。それが「文章」です。

文章を書かせたら一級品

ホームページはいくつか文章を載せています。その多くはChatGPTが作成した文章です！

たとえば、こちらのお店のこだわりは

秘伝のソース
キャベツを多く使っている
広島焼き風

という点です。

それを端的に伝えるために、ChatGPTに相談しました。

コトゼニ

お好み焼きのメニューを紹介するセクションにおいて、以下のポイントを踏まえつつ、文章を200字以内で作成してください。▼ポイント・オリジナルのソースにこだわりを持っていること・キャベツがたっぷり使われていること・広島焼き風であること

すると

chatGPT

当店のお好み焼きメニューは、オリジナルのソースにこだわり、独自の味を提供しています。キャベツはたっぷりと使用し、シャキシャキとした食感と甘みが特徴です。また、広島焼き風の調理方法を取り入れており、ふわっとした生地とボリューム感のある具材が絶妙に絡み合います。一度食べればやみつきになる美味しさをご堪能ください。

すごい…

コトゼニ

まさか、ChatGPTさん、こちらのお好み焼きを食べたことありますか？？？

思わず唸ってしまう文章が仕上がりました。グルメリポーターも顔負けです…

このように文章を作らせたら一級品。人間が書くには時間がかかってしまうような文章を一瞬で作成してくれました。

ホームページに載せている文章、その全てをChatGPTが作成したわけではありませんが、たたき台となる（しかも品質の高い）文章は大いに活用しました。

ぜひ、どの部分がChatGPTが作った文章なのかを探しながらご覧ください！