「GPTs」の「DesignerGPT」で、WordPress のブログサイトのデザインを生成してみました！

投稿日: 投稿者: 上拾石 弘（Hiroshi Kamijikkoku）

今日は、「GPTs」の「DesignerGPT」で、Wordpress のブログサイトのデザインを生成してみました。

投入したプロンプト①

株式会社光翼（みつば）の代表取締役のブログサイトである WordPress のテーマを生成して

回答①

株式会社光翼の代表取締役のブログサイト用のWordPressテーマをHTMLでデザインしましょう。こちらが基本構造になりますが、テーマの特色やご希望に合わせてカスタマイズすることが可能です。デザインの方向性や特に強調したい内容がありましたら、教えてください。

以下のHTMLはWordPressテーマの一部として使用できる基本的なブログページのデザインを提供します。WordPressテーマとして実装するためには、これをPHPファイルに組み込み、WordPressのテンプレートタグを適宜追加する必要がありますが、まずはデザインのイメージを確認していただければと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <title>株式会社光翼のブログ</title>
</head>
<body>
    <nav class="container-fluid">
        <ul>
            <li><strong>光翼ブログ</strong></li>
        </ul>
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">ブログ</a></li>
            <li><a href="#" role="button">コンタクト</a></li>
        </ul>
    </nav>
    <main class="container">
        <div class="grid">
            <section>
                <hgroup>
                    <h2>代表取締役からのメッセージ</h2>
                    <h3>私たちのビジョン</h3>
                </hgroup>
                <p>株式会社光翼は、テクノロジーを通じて人々の生活を豊かにすることを目指しています。</p>
                <figure>
                    <img src="https://unsplash.com/photos/1-aA2Fadydc" alt="ビジョンのイメージ">
                    <figcaption><a href="https://unsplash.com/photos/1-aA2Fadydc" target="_blank">Image Source</a></figcaption>
                </figure>
                <h3>私たちの使命</h3>
                <p>最先端の技術を駆使して、常に革新を追求します。</p>
                <h3>連絡先</h3>
                <p>お問い合わせはこちらから。</p>
            </section>
        </div>
    </main>
    <section aria-label="Subscribe example">
        <div class="container">
            <article>
                <hgroup>
                    <h2>ニュースレター登録</h2>
                    <h3>最新情報をお届けします</h3>
                </hgroup>
                <form class="grid">
                    <input type="text" id="firstname" name="firstname" placeholder="お名前" aria-label="お名前" required>
                    <input type="email" id="email" name="email" placeholder="メールアドレス" aria-label="メールアドレス" required>
                    <button type="submit" onclick="event.preventDefault()">登録</button>
                </form>
            </article>
        </div>
    </section>
    <footer class="container">
        <small>
            <a href="#">プライバシーポリシー</a> • <a href="#">利用規約</a>
        </small>
    </footer>
</body>
</html>

このHTMLテンプレートをもとに、実際のWebページを生成し、ホスティングする準備をします。生成完了後、ページのURLをお知らせしますので、ご確認ください。

生成を開始しますか？それともデザインについて何か変更を加えたい点はありますか？

投入したプロンプト②

生成を開始

回答②

株式会社光翼の代表取締役のブログサイトのデザインが完成しました。以下のリンクから実際のページをご覧いただけます：

株式会社光翼のブログサイト

blogダウンロード

もしリンクをクリックできない場合や、デザインに何か変更を加えたい点があれば、お気軽にお知らせください。私はここでお手伝いできます。

本内容に、ご興味を持たれた方は、お問い合わせフォーム より、お問い合わせください。

関連記事