未分類

Web制作で使えるプロンプト

プロンプトは文字だけ出してくるから会話は不可能。だから使えない。

と私は思っていましたが、実際会話以外の用途で使えばとても優秀なんです。

特定の形をHTMLで表現しないといけなくなった。そんな時

例えば、Web制作で二等辺三角形が必要になった場合、以下の通りにプロンプトで指示を行う。

HTMLのcanvasタグの中で二等辺三角形を作りだすコードを書いてください

そうすると以下の通りで出力してくれる

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 二等辺三角形</title>
</head>

<body>
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 三角形のサイズ
        const baseLength = 200;
        const height = Math.sqrt(baseLength ** 2 - (baseLength / 2) ** 2); // 三平方の定理に基づく高さの計算

        // 三角形の頂点を計算
        const pointA = { x: canvas.width / 2, y: (canvas.height - height) / 2 };
        const pointB = { x: pointA.x - baseLength / 2, y: pointA.y + height };
        const pointC = { x: pointA.x + baseLength / 2, y: pointA.y + height };

        // 二等辺三角形を描く
        ctx.beginPath();
        ctx.moveTo(pointA.x, pointA.y);
        ctx.lineTo(pointB.x, pointB.y);
        ctx.lineTo(pointC.x, pointC.y);
        ctx.closePath();
        ctx.stroke();
    </script>
</body>

</html>

ワイヤーフレームを作成するために、アウトラインだけサクッと作りたい、そんな時。

簡単なアウトラインを作成したい場合、以下のプロンプトで命令する。もっと具体的に指示をすれば、それなりのものが作れる。

ホームページを作りたい。
以下のホームページを参考にホームページのアウトラインを作成してください。
###
https://www.yahoo.co.jp/
- ２カラムレイアウト
- ヘッダーにメニューバーを置く
- フッターはコピーライトをつける
###

以下の通りで出力してくれる

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ホームページの例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: white;
            padding: 10px 0;
            text-align: center;
        }
        nav {
            display: flex;
            justify-content: center;
        }
        nav a {
            color: white;
            padding: 0 15px;
            text-decoration: none;
        }
        main {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
        .sidebar {
            width: 25%;
            background-color: #f4f4f4;
            padding: 15px;
        }
        .content {
            width: 70%;
            padding: 15px;
            background-color: #e6e6e6;
        }
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>ホームページのタイトル</h1>
        <nav>
            <a href="#">ホーム</a>
            <a href="#">サービス</a>
            <a href="#">コンタクト</a>
            <a href="#">アバウト</a>
        </nav>
    </header>

    <main>
        <div class="sidebar">
            <h2>サイドバー</h2>
            <p>サイドバーの内容。</p>
        </div>
        <div class="content">
            <h2>メインコンテンツ</h2>
            <p>メインの内容。</p>
        </div>
    </main>

    <footer>
        &copy; 2023 あなたの会社名。All Rights Reserved.
    </footer>
</body>
</html>