【おすすめGPTs紹介】Grimoireで簡単ホームページ作成！

2024年1月10日、カスタムGPTを公開することができるGPT Storeが始まりました。

GPT Storeには多くのGPTが公開されていますが、どれも説明が英語で書かれていてよくわからないですよね。

そこで当ブログでは、人気のカスタムGPTを実際に使ってレビューしていきます。

この記事では、Programmingカテゴリーで3位（2024/4/12現在）となっている「Grimoire」を紹介します！

Grimoireって何？
会社員Aのホームページを作ってみた
Grimoireを使ってみた感想

Grimoireって何？

まずは「Grimoire」というGPTsが、どんな機能をもっているのか確認してみます。

「Grimoire」の初期画面は、下記の画像のようになっています。

【説明文の日本語訳】

コードウィザード🧙‍♂️文章を含むウェブサイト (またはその他) を作成します。プロンプトグラムを学びましょう！コーディングフロー用の 20 以上のホットキー。 75 のスタータープロジェクト。 Prompt-1st コーディングとアートを学びます。または何か質問がありますか?何でも作ってみましょう！ README の場合は R、cmd メニュー v2.0.2 の場合は K と入力します✨📜

どうやら「Grimoire」は、ウェブサイトの作成を行ってくれるようです。

今回は、例として会社員Aのホームページを作成してみます。

会社員Aのホームページを作ってみた

まず、最初のやり取りをご覧ください。

会社員A

私のホームページが作りたい。

Grimoire

Greetings Traveler 🧙‍♂️ Grim-terface v2.0.2 🧙 Bug fixed

Let’s begin our coding quest!

To create your homepage, let’s start by outlining the requirements and features you’d like to include.

Could you please provide more details about the content and functionality you want on your homepage?

For instance, do you want sections like an About Me, Contact, Portfolio, or Blog?

Also, do you have any specific design preferences or features in mind?

Once I have these details, I will create a detailed plan and then proceed to write the full code for your homepage.

回答が英語で返ってきてしまいましたが、翻訳してみると「どんなホームページが作りたいのかを具体的に教えてください」と書いてありました。

Grimoireに言われた通り、具体的に設定したい要素を伝えました。

会社員A

下記の要素を取り入れてください。

##要素

私の名前: 会社員A

プロフィール: はじめまして、会社員Aです！ごく普通の会社員として働きながら、ChatGPTの力を借りて、ブログを運営しています。皆さんの役に立つ情報やChatGPTの素晴らしさ・可能性を発信していきます！

プロフィール画像: 添付した画像

ブログのリンク: https://chatgpt-million.com

背景色: 暖かい色合い

そうすると、私の指定した要素にあわせて、ホームページ作成計画を立ててくれました。(長いので適当にご覧ください…)

Grimoire

了解しました。会社員Aさんのホームページを作成する計画を立てましょう。

以下に、ご要望に基づいたホームページの構造と機能の概要を示します。

ホームページ構造

ヘッダー:
- ロゴまたは名前（会社員A）
- ナビゲーションバー（ホーム、ブログ、お問い合わせ）
メインセクション:
- プロフィールセクション:
  - 会社員Aの自己紹介文
  - プロフィール画像（添付された画像を使用）
- ブログセクション:
  - ChatGPTを使ったブログへのリンク（https://chatgpt-million.com）
フッター:
- 著作権表示
- お問い合わせリンク

デザイン要素

背景色: 暖かい色合いを基調とする
レスポンシブデザイン: スマートフォンやタブレットでも閲覧しやすいように調整
シンプルでモダンなスタイル

技術的要素

HTML: ページの構造
CSS (Tailwind CSSを使用): スタイリングとレイアウト
JavaScript（必要に応じて）: ダイナミックな要素の追加

次のステップ

ページのHTML構造を作成する。
Tailwind CSSを使用してスタイルを適用する。
必要に応じてJavaScriptで機能を追加する。

この計画に基づいてコードを作成します。

まずはHTML構造から始めましょうか？

それとも、他に追加したい機能や変更点がありますか？

とりあえず上記の計画通りにウェブサイトを作ってもらうことにしました。

作成を依頼すると、下記のHTML（ウェブサイトを作成するためのプログラミング言語）が生成されました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>会社員Aのホームページ</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-amber-100 font-sans leading-normal tracking-normal">

  <header class="text-center bg-amber-500 text-white p-6">
    <h1 class="text-4xl md:text-5xl font-bold my-4">会社員A</h1>
    <nav id="header" class="w-full">
      <ul class="flex items-center justify-center p-0">
        <li class="mr-3">
          <a class="inline-block py-2 px-4 text-white no-underline hover:text-gray-200" href="#profile">プロフィール</a>
        </li>
        <li class="mr-3">
          <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-4" href="https://chatgpt-million.com" target="_blank">ブログ</a>
        </li>
        <li class="mr-3">
          <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-4" href="#contact">お問い合わせ</a>
        </li>
      </ul>
    </nav>
  </header>

  <main class="container mx-auto mt-8 mb-16">
    <section id="profile" class="bg-white rounded-lg shadow p-6 text-gray-700 mb-6">
      <div class="text-center">
        <img src="path_to_your_profile_image.png" alt="会社員Aのプロフィール画像" class="w-40 h-40 rounded-full mx-auto mb-6">
        <h2 class="text-3xl font-semibold mb-4">はじめまして、会社員Aです！</h2>
        <p class="text-lg">ごく普通の会社員として働きながら、ChatGPTの力を借りて、ブログを運営しています。皆さんの役に立つ情報やChatGPTの素晴らしさ・可能性を発信していきます！</p>
      </div>
    </section>
  </main>

  <footer class="text-center p-6 bg-amber-500 text-white">
    <p>&copy; 2024 会社員A. All rights reserved.</p>
  </footer>

</body>
</html>

プロフィール画像のところが”path_to_your_profile_image.png”となっていますね。

上記に私のアイコン用画像を設定して、生成したHTMLを表示してみました。