NEWS
Web Craft Notes

【ChatGPT】理想のWEBサイトを実現するためのテンプレ文紹介

希望のWEBサイトのデザインや機能を私に理解してもらうために以下の情報をできるだけ詳細に伝えると良いでしょう。

各項目の解説

1. 目的とターゲットオーディエンス

サイトの目的や主なターゲットとなるユーザー層を明確に伝えることでデザインや機能の方向性を決める上で役立ちます。

2. デザインのイメージ

好みのカラースキーム、フォント、レイアウトなど、デザインに関する具体的な要素を伝えることが重要です。
参考にしたいWEBサイトや画像、デザインのイメージがあればそれも共有してください。

3. 必要なページと機能

どのようなページが必要でそれぞれのページでどのような機能が必要かをリストアップしてください。
例えば、ホームページ、製品紹介ページ、お問い合わせフォームなどです。

4. ナビゲーション

サイト全体のナビゲーション構造を伝えることが重要です。
どのページからどのページへアクセスできるようにするかどのようなメニュー構造が望ましいかを考慮してください。

5. レスポンシブデザイン

サイトがデバイスに応じて適切に表示されることを希望する場合その旨を伝えてください。
これにより、スマートフォンやタブレットなど様々なデバイスでの表示を考慮したデザインを提案できます。

6. 予算とスケジュール

どの程度の予算と期間でサイトを作成したいかを伝えることで要件に応じた適切な提案ができます。これにより予算やスケジュールに沿った最適なソリューションを見つけられます。

ChatGPTに伝える時のテンプレート（HTML/CSS/Javascript出力）

このテンプレートを使用してご希望のWEBサイトに関する情報をまとめて伝えることができます。これによりあなたの要望に近いHTMLとCSSを出力できるよう努力いたします。

# ウェブサイト要件

## 1. 目的とターゲットオーディエンス
- 目的: [ここにサイトの目的を記入してください]
- ターゲットオーディエンス: [ここにターゲットユーザー層を記入してください]

## 2. デザインのイメージ
- カラースキーム: [好みのカラーを記入してください]
- フォント: [使用したいフォントを記入してください]
- レイアウト: [レイアウトの概要や特徴を記入してください]
- 参考サイトや画像: [参考にしたいWEBサイトや画像のリンクを記入してください]

## 3. 必要なページと機能
- ページ1: [ページ名] 
  - 機能1: [機能の説明]
  - 機能2: [機能の説明]
- ページ2: [ページ名] 
  - 機能1: [機能の説明]
  - 機能2: [機能の説明]
（必要なページと機能があれば、追加してください）

## 4. ナビゲーション
- メニュー構造: [メニューの階層や項目を記入してください]
- アクセス可能なページ: [ページ間のアクセス方法やリンクを記入してください]

## 5. レスポンシブデザイン
- デバイス対応: [対応したいデバイス（例：スマートフォン、タブレット）を記入してください]

## 6. 予算とスケジュール
- 予算: [プロジェクトの予算を記入してください]
- スケジュール: [プロジェクトの期間や締め切りを記入してください]

※「アクセス可能なページ」はログインしてから見れるページ・コンテンツを指示する時に使用するようです。

SAMPLE

実際に下記質問を投げかけてみました。

# ウェブサイト要件

## 1. 目的とターゲットオーディエンス
- 目的: [サイトからの問い合わせで受注する仕事を増やす]
- ターゲットオーディエンス: [主に広告代理店や、Web制作会社]

## 2. デザインのイメージ
- カラースキーム: [白を貴重とし、緑・赤・青をアクセントとして使用]
- フォント: [Googlefontのゴシック体、キャッチコピーは明朝でも良いかもしれないがデザインバランスを見てからの判断になる]
- レイアウト: [ブロークングリッドレイアウト、スタイリッシュ、明るい]
- 参考サイトや画像: [https://nicottolabo.info/]

## 3. 必要なページと機能
- ページ1: [HOME] 
  - 機能1: [ファーストビューのメインビジュアル内でキャッチコピーを表示]
  - 機能2: [制作実績を一部記載]
  - 機能3: [ニュースの表示]
  - 機能4: [ヘッダーにはロゴ表示、フッターの表示]
  - 機能5: [ABORT、PORTFOLIO、WORKS、SERVICE、PAERTNER、CONTACTは別ページで記載するためHOMEには内容の記載は必要なし]

## 4. ナビゲーション
- メニュー構造: [ABORT、PORTFOLIO、WORKS、SERVICE、PAERTNER、CONTACT]

## 5. レスポンシブデザイン
- デバイス対応: [PC、スマートフォン、タブレット]

## 6. 予算とスケジュール
- 予算: [20万円くらい]
- スケジュール: [1ヶ月ほど]

まずはHTMLソース

ソース出力を分けるため「まずはHTMLソース」を入れました。

出力されたHTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web制作サービス</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">


  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const links = document.querySelectorAll('a[href^="#"]');
      for (const link of links) {
        link.addEventListener("click", function(event) {
          event.preventDefault();
          const targetId = event.currentTarget.getAttribute("href");
          const targetElement = document.querySelector(targetId);
          const targetPosition = targetElement.getBoundingClientRect().top;
          const startPosition = window.pageYOffset;
          const distance = targetPosition - startPosition;
          const duration = 500;

          const startTime = performance.now();
          function loop(currentTime) {
            const timeFraction = (currentTime - startTime) / duration;
            const easing = timeFraction < 0.5
              ? 4 * timeFraction * timeFraction * timeFraction
              : (timeFraction - 1) * (2 * timeFraction - 2) * (2 * timeFraction - 2) + 1;

            window.scrollTo(0, startPosition + distance * easing);

            if (currentTime - startTime < duration) {
              requestAnimationFrame(loop);
            } else {
              window.scrollTo(0, startPosition + distance);
            }
          }

          requestAnimationFrame(loop);
        });
      }
    });
  </script>

</head>
<body>
  <header>
    <div class="logo">
      <a href="index.html">Web制作サービス</a>
    </div>
    <nav>
      <ul>
        <li><a href="about.html">ABORT</a></li>
        <li><a href="portfolio.html">PORTFOLIO</a></li>
        <li><a href="works.html">WORKS</a></li>
        <li><a href="service.html">SERVICE</a></li>
        <li><a href="partner.html">PARTNER</a></li>
        <li><a href="contact.html">CONTACT</a></li>
      </ul>
    </nav>
    <div class="hamburger-menu">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </header>
  <main>
    <section id="hero">
      <h1>キャッチコピー</h1>
      <p>サブキャッチコピー</p>
    </section>
    <section id="works">
      <h2>制作実績</h2>
      <!-- ここに制作実績の一部を記載 -->
    </section>
    <section id="news">
      <h2>ニュース</h2>
      <!-- ここにニュースを記載 -->
    </section>
  </main>
  <footer>
    <p>&copy; 2023 Web制作サービス. All rights reserved.</p>
  </footer>
</body>
</html>

出力されたCSS

※「次はCSS」と入れて出力

/* 全体のスタイル */
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
}

/* ヘッダー */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: white;
}

header .logo a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

nav ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin-right: 1.5rem;
}

nav a {
  text-decoration: none;
  color: #333;
}

.hamburger-menu {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16px;
}

.hamburger-menu span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #333;
}

/* レスポンシブデザイン */
@media (max-width: 640px) {
  nav ul {
    display: none;
  }

  .hamburger-menu {
    display: flex;
  }

  .menu-open nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 100;
    padding-top: 3rem;
  }

  .menu-open nav li {
    margin-bottom: 1rem;
  }

  .menu-open nav a {
    font-size: 1.2rem;
  }
}


/* メインビジュアル */
#hero {
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #eee;
  text-align: center;
}

#hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

#hero p {
  font-size: 1.5rem;
}

/* 制作実績 */
#works {
  padding: 2rem;
}

/* ニュース */
#news {
  padding: 2rem;
}

/* フッター */
footer {
  text-align: center;
  padding: 1rem;
  background-color: #eee;
}

/* メディアクエリ */
@media screen and (max-width: 640px) {
  nav {
    display: none;
  }

  header {
    position: relative;
  }

  .hamburger-menu {
    cursor: pointer;
    width: 30px;
    height: 22px;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .hamburger-menu span {
    display: block;
    background-color: #333;
    height: 3px;
    width: 100%;
    position: absolute;
    transition: all 0.3s;
  }

  .hamburger-menu span:nth-child(1) {
    top: 0;
  }

  .hamburger-menu span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }

  .hamburger-menu span:nth-child(3) {
    bottom: 0;
  }

  /* ハンバーガーメニューをクリックしたときの動作 */
  .menu-open .hamburger-menu span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .menu-open .hamburger-menu span:nth-child(2) {
    opacity: 0;
  }

  .menu-open .hamburger-menu span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  .menu-open nav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255, 255, 0.9);
z-index: 100;
padding-top: 3rem;
}

.menu-open nav ul {
display: flex;
flex-direction: column;
align-items: center;
}

.menu-open nav li {
margin-bottom: 1rem;
}

.menu-open nav a {
font-size: 1.2rem;
}
}

出力されたJavascript

※「Javascriptを使用している場合はソースを出力して」を入れ出力

    document.querySelector('.hamburger-menu').addEventListener('click', function () {
      document.body.classList.toggle('menu-open');
    });

上記のように出力されたので、使用する場合は最初に出力されたHTMLソースに追記する必要あり。

表示

実際に流し込んで動作を見ましたがハンバーガーメニューの動作がうまくいかなかったのでもっと指示文を考慮する必要があるかもしれませんが、うまく指示すれば手軽にワイヤーフレーム作成ができようになるかもしれませんね。

コメント

ContactWEB制作のお見積り・お問合せ

お見積りやご不明な点、ご質問等などお気軽にお尋ねください。

お問合せする
タイトルとURLをコピーしました