BLOG

【動画】ChatGPTを使ってECサイトは作れるのか！？

2023-04-21

どうもロックシステムのユキです！
プログラミング作って実践をテーマにアプリ開発のレクチャー動画をお送りしているYoutube版ロックシステムアカデミー！
今回は実験企画です。
「ChatGPTを使ってECサイトは作れるのか試していきます！」
ChatGPTは現在知らない人も少ないんじゃないでしょうか。
知らない方のために簡単に説明しておくと、チャット形式で質問したことをAIが回答してくれる便利なサービスです！
以下のサイトから無料で使用することができます。
ChatGPT公式

使い方としては以下のように知りたいことを聞いてみたり。

プログラミングのコードだって書いてくれちゃうんです。

しかし注意しなければいけないのが、たまに嘘をつくことがあるので情報やコードの正確性はちょっと心配ですね。
質問の仕方にも左右されるので正しい情報が欲しい場合細かく指示しなければいけません。試しにロックシステムについて質問してみましたが、1991年設立で東京都千代田区に本社があると誤情報を教えてくれました。(正しくは2014年設立、本社は大阪福島区)

こんな良し悪しあるChatGPTですが便利なのは確か！！プログラミングのコードも書けるなら簡単なアプリも作ってくれるんじゃないかという算段です！
果たしてどんなアプリを作ってくれたのか。是非動画を見てみてください！

チャンネル登録もよろしくお願いします！

ChatGPTが生成してくれた設計とコードたち

★必要機能

★DB構成

★画面フロー

■トップページ(商品一覧)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>コーヒーショップ</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <header>
      <h1>コーヒーショップ</h1>
    </header>
    
    <main>
        <div class="product-box">
            <div class="product-img" style="background-image: url('coffee1.jpg')"></div>
            <div class="product-name">エチオピア Yirgacheffe</div>
            <div class="product-description">フルーティで爽やかな味わいのコーヒーです。</div>
            <div class="product-price">800円</div>
            <button class="add-to-cart-btn">カートに追加する</button>
        </div>
        
        <div class="product-box">
            <div class="product-img" style="background-image: url('coffee2.jpg')"></div>
            <div class="product-name">コロンビア Supremo</div>
            <div class="product-description">チョコレートのような風味のコーヒーです。</div>
            <div class="product-price">900円</div>
            <button class="add-to-cart-btn">カートに追加する</button>
        </div>
      
        <div class="product-box">
            <div class="product-img" style="background-image: url('coffee3.jpg')"></div>
            <div class="product-name">ブラジル Santos</div>
            <div class="product-description">まろやかで甘い味わいのコーヒーです。</div>
            <div class="product-price">700円</div>
            <button class="add-to-cart-btn">カートに追加する</button>
        </div>
        
        <div class="product-box">
            <div class="product-img" style="background-image: url('coffee4.jpg')"></div>
            <div class="product-name">ケニア AA</div>
            <div class="product-description">芳醇で華やかな香りのコーヒーです。</div>
            <div class="product-price">1000円</div>
            <button class="add-to-cart-btn">カートに追加する</button>
        </div>
        
        <div class="product-box">
            <div class="product-img" style="background-image: url('coffee5.jpg')"></div>
            <div class="product-name">ハワイ Kona</div>
            <div class="product-description">豊かなコクと風味が特徴のコーヒーです。</div>
            <div class="product-price">1200円</div>
            <button class="add-to-cart-btn">カートに追加する</button>
        </div>
    </main>
  </body>
</html>

■商品詳細ページ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>商品詳細</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      
      .product-img {
        height: 300px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }
      
      .product-details {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        padding: 20px;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
      }
      
      .product-name {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .product-description {
        font-size: 18px;
        margin-bottom: 10px;
      }
      
      .product-price {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .add-to-cart-btn {
        padding: 10px 20px;
        background-color: #333;
        color: #fff;
        border: none;
        font-size: 18px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="product-img" style="background-image: url('coffee1.jpg')"></div>
    <div class="product-details">
      <div class="product-name">エチオピア Yirgacheffe</div>
      <div class="product-description">フローラルな香りと甘いフルーティーな味わいが特徴のコーヒーです。</div>
      <div class="product-price">900円</div>
      <button class="add-to-cart-btn">カートに追加する</button>
    </div>
  </body>
</html>

■カートページ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>カート</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      
      .cart-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #ddd;
      }
      
      .cart-item-img {
        width: 100px;
        height: 100px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }
      
      .cart-item-details {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
      }
      
      .cart-item-name {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .cart-item-price {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .cart-item-quantity {
        margin-bottom: 10px;
      }
      
      .cart-item-quantity-label {
        font-size: 18px;
        font-weight: bold;
      }
      
      .cart-item-quantity-input {
        width: 50px;
        height: 30px;
        font-size: 18px;
        text-align: center;
        margin-left: 10px;
      }
      
      .cart-total {
        margin-top: 20px;
        padding: 20px;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .cart-total-label {
        font-size: 24px;
        font-weight: bold;
      }
      
      .cart-total-amount {
        font-size: 24px;
        font-weight: bold;
      }
      
      .checkout-btn {
        padding: 10px 20px;
        background-color: #333;
        color: #fff;
        border: none;
        font-size: 18px;
        cursor: pointer;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="cart-item">
      <div class="cart-item-img" style="background-image: url('coffee1.jpg')"></div>
      <div class="cart-item-details">
        <div class="cart-item-name">エチオピア Yirgacheffe</div>
        <div class="cart-item-price">900円</div>
        <div class="cart-item-quantity">
          <span class="cart-item-quantity-label">数量:</span>
          <input type="number" class="cart-item-quantity-input" value="1">
        </div>
      </div>
    </div>
    <div class="cart-total">
      <span class="cart-total-label">合計:</span>
      <span class="cart-total-amount">900円</span>
    </div>
    <button class="checkout-btn">注文する</button>
  </body>
</html>

■注文ページ

<!DOCTYPE html>
<html>
    <h2>お届け先情報</h2>
    <form>
    <div>
        <label for="name">お名前</label>
        <input type="text" id="name" name="name" required>
    </div>
    <div>
        <label for="address">お届け先住所</label>
        <input type="text" id="address" name="address" required>
    </div>
    <div>
        <label for="tel">電話番号</label>
        <input type="tel" id="tel" name="tel" required>
    </div>
    <div>
        <label for="email">メールアドレス</label>
        <input type="email" id="email" name="email" required>
    </div>
    </form>

    <h2>支払い方法</h2>
    <form>
    <div>
        <input type="radio" id="credit" name="payment" value="credit" required>
        <label for="credit">クレジットカード</label>
    </div>
    <div>
        <input type="radio" id="bank" name="payment" value="bank" required>
        <label for="bank">銀行振り込み</label>
    </div>
    <div>
        <input type="radio" id="cod" name="payment" value="cod" required>
        <label for="cod">代金引換</label>
    </div>
    </form>

    <button type="submit">注文を確定する</button>
</html>

<style>
form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 2rem;
}

label {
  font-weight: bold;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
  width: 100%;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 0.25rem;
  border: 1px solid #ccc;
}

input[type="radio"] {
  margin-right: 0.5rem;
}

button[type="submit"] {
  background-color: #0080ff;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

button[type="submit"]:hover {
  background-color: #0073e6;
}
</style>

■注文完了ページ

<pre><code><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="order-complete">
        <h2>注文が完了しました。</h2>
        <p>ご注文ありがとうございます。</p>
        <p>注文番号：12345</p>
        <p>配送予定日：YYYY年MM月DD日</p>
      </div>
</body>
</html>

<style>
.order-complete {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 2rem;
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.order-complete h2 {
  margin-bottom: 1rem;
}

.order-complete p {
  margin-bottom: 0.5rem;
}
</style>

■スタイル

/* 全体 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* ヘッダー */
header {
  background-color: #555;
  color: white;
  padding: 20px;
}

/* メイン */
main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
}

/* 商品ボックス */
.product-box {
  width: 300px;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* 商品画像 */
.product-img {
  width: 100%;
  height: 200px;
  background-color: #ddd;
  background-size: cover;
  background-position: center;
}

/* 商品名 */
.product-name {
  font-weight: bold;
  font-size: 1.2em;
  margin: 10px;
}

/* 商品説明 */
.product-description {
  margin: 10px;
}

/* 価格 */
.product-price {
  font-weight: bold;
  font-size: 1.2em;
  margin: 10px;
}

/* カートボタン */
.add-to-cart-btn {
  display: block;
  width: 100%;
  background-color: #f90;
  color: white;
  font-size: 1.2em;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

/* カートボタン - ホバー */
.add-to-cart-btn:hover {
  background-color: #d80;
}

株式会社ロックシステム

「ブラック企業をやっつけろ！！」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中！絶賛エンジニア募集中。

他の記事へ

2019.08.20

ロックシステム座談会　～未経験からの挑戦者たち～

2020.05.18

【React Native】Elementsを使ってみよう！

2023.12.18

笑いあり、豪華賞品あり！一年の締めくくりロックシステム忘年会2023

2023.08.17

半信半疑だった『ブラック企業をやっつけろ』

2023.08.21

【8月号】学びとビールの夏！『＃プログラミング女子β』とロックシステム会

2022.08.10

「この会社当たりだ」お手本になる先輩、ステップアップ、全部ある！

2022.02.25

HEROKUを使ったLINEチャットボットの作り方！

2021.11.05