ChatGPTだけでHPを作りたい！（ChatGPTでデザイン編）

ChatGPT部 Produced by NOB DATA

2024年8月1日 09:15

はじめに

こんにちは！ChatGPT部の原田です！ChatGPTだけでHPを作りたいシリーズ！デザイン編です！

ただ、デザインって、大変ですよね！
どうせならChatGPT先生のつくるデザイン見てみたいなと！
ということで今回はChatGPTにデザインしてもらいます！

1. デザイン作成

早速ChatGPTへおうかがいを

そして結果は、、、

個人ブログ用のWebサイトをデザインするための基本的なHTML、CSS、JavaScriptコードと、必要な画像の作成指示を以下に示します。シンプルでスタイリッシュ、かつくすみ系のカラーを基調としたデザインにします。

HTML

<!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="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js" defer></script>
</head>
<body>
    <header>
        <h1>個人ブログ</h1>
        <nav>
            <ul>
                <li><a href="index.html"><img src="images/home_icon.png" alt="ホームアイコン">ホーム</a></li>
                <li><a href="about.html"><img src="images/about_icon.png" alt="自己紹介アイコン">私について</a></li>
                <li><a href="index.html#blog"><img src="images/blog_icon.png" alt="ブログアイコン">ブログ</a></li>
                <li><a href="contact.html"><img src="images/contact_icon.png" alt="お問い合わせアイコン">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    <section id="home">
        <h2>ようこそ</h2>
        <p>私の個人ブログへようこそ！</p>
    </section>
    <section id="about">
        <h2>私について</h2>
        <p>ここに自己紹介が入ります。</p>
    </section>
    <section id="blog">
        <h2>ブログ</h2>
        <div class="blog-post">
            <h3>ブログタイトル</h3>
            <p>ブログの内容がここに入ります。</p>
        </div>
    </section>
    <footer>
        <p>&copy; 2024 個人ブログ</p>
    </footer>
</body>
</html>

CSS (styles.css)

body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
}

header {
    background-color: #4b4b4b;
    color: #fff;
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

section {
    padding: 60px 20px;
    text-align: center;
}

section h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #4b4b4b;
}

.blog-post {
    background-color: #e0e0e0;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

form label {
    margin: 10px 0 5px;
}

form input, form textarea {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    background-color: #4b4b4b;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #333;
}

footer {
    background-color: #4b4b4b;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

JavaScript (scripts.js)

document.addEventListener("DOMContentLoaded", function() {
    // ナビゲーションリンクのクリックイベント
    document.querySelectorAll('nav a').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
});

画像の作成

画像については以下の詳細を元に作成します。イメージを生成するために以下の情報を指定してください：

サイトの背景画像：落ち着いたくすみ系の色合いでシンプルなパターン。
各セクションのアイコン：例えば、ホーム、自己紹介、ブログ、お問い合わせ用のアイコン。
フォント：Noto Sans JPを使用しますが、他に特定のスタイルやサイズの要望があれば教えてください。

これらの画像は詳細に基づいて生成します。詳細が決まり次第、画像生成に進みます。

おお！すごい！画像の生成もしてもらいましょう！

背景画像が生成されました。次に、各セクションのアイコンを生成します。

アイコンの生成

ホーム
自己紹介
ブログ
お問い合わせ

これらのアイコンをくすみ系のカラーで生成します。

ホームアイコン

{
  "prompt": "A home icon for a personal blog website. The design should be simple and stylish with muted, pastel tones, reflecting a calm and welcoming atmosphere. The icon should be easily recognizable and elegant.",
  "size": "1024x1024",
  "n": 1
}

自己紹介アイコン

{
  "prompt": "An 'about me' icon for a personal blog website. The design should be simple and stylish with muted, pastel tones, reflecting a calm and personal atmosphere. The icon should feature a silhouette or abstract representation of a person.",
  "size": "1024x1024",
  "n": 1
}

ブログアイコン

{
  "prompt": "A blog icon for a personal blog website. The design should be simple and stylish with muted, pastel tones, reflecting a calm and creative atmosphere. The icon should feature a pen, paper, or an open book to symbolize writing and content creation.",
  "size": "1024x1024",
  "n": 1
}

お問い合わせアイコン

{
  "prompt": "A contact icon for a personal blog website. The design should be simple and stylish with muted, pastel tones, reflecting a calm and inviting atmosphere. The icon should feature an envelope or a communication symbol to represent contact and messages.",
  "size": "1024x1024",
  "n": 1
}

これらのアイコンの生成が完了次第、各アイコンを表示します。

と、最終的に出てきた画像一覧がこちら！

↑背景、

↑ホーム

↑ブログアイコン

↑コンタクト

文字までしっかり画像になってる、、いつの間にここまで進化したんだろう、、

そしてなんやかんやできたのがこちら！

背景画像が仕事してませんが、

なかなかいい色合いです、僕は好き笑

こっちのアイコンはしっかり仕事してる！

まとめ

いかがでしたか？プロンプトさえもっとしっかりしたものにすれば本当にChatGPTだけでHPが作れそうです！このシリーズ、完全壁打ちで作ってみようかな、、、割と本気でそう思っている今この頃、、、次回、お楽しみに！
今回は以上です！

この記事が気に入ったらサポートをしてみませんか？