ChatGPTにHTMLコーディングを頼んでみた【ヘッダー編】

ChatGPT HTMLコーディング プロンプトエンジニアリング
ChatGPTにHTMLコーディングを頼むイメージ

はじめに

前回は、WordPressの代わりにChatGPTを使ってブログを運用する方法について、その基本的な考え方やメリットを解説した。今回はその続編として、ChatGPTに精緻なHTMLを書いてもらうための具体的なプロンプトを紹介しよう。本稿では一般的なガイドラインと`<body>`要素より前のコードを生成するためのプロンプトに焦点を当てる。

プロフィール画像

HTMLコーディングをAIに任せることで、作業効率が大幅に向上しますよ！

なぜChatGPTにHTMLコーディングを頼むのか？

正直なところ、HTMLコーディングって地味に手間がかかる。特にブログの記事ページを更新する際、日付や記事の概要、キーワードなどの動的な要素を毎回手動で更新するのは大変だ。そこで思った。「これ、ChatGPTに任せたらどうだろうか？」

プロンプトの構成

ChatGPTにHTMLを生成してもらうためのプロンプトは、以下のような構成にしている。

  • 一般的なガイドライン
  • ブログの基本的な情報
  • 具体的な指示
    • <body>要素より前の部分
    • <html>要素の作成
    • <head>要素の作成
    • JSON-LDの作成

1. 一般的なガイドライン

HTMLコードを作成する際に守るべき基本的なルールを以下にまとめた。

  1. SEOに配慮したHTML構造を維持すること。
    • 検索エンジンでの表示順位を上げるため、適切なタグの使用や構造を意識する。
  2. アクセシビリティを考慮し、適切なARIAラベルを使用すること。
    • 視覚障害者の方でも内容を理解しやすいように、スクリーンリーダーに対応したラベルを使用する。
  3. レスポンシブデザインを意識し、モバイルフレンドリーな構造を保つこと。
    • スマホやタブレットでも快適に閲覧できるようにする。
  4. HTMLを<head>要素、<body>要素に分け、<body>要素の中身をさらに細分化すること。
    • <header>、<nav>、<div class="content-wrapper">などに分ける。
    • さらに<div class="content-wrapper">内を<main>と<aside class="sidebar">に分ける。
  5. HTML内のブログの名前や記事日付は動的に生成すること。
    • ブログ名やドメイン名は後述の情報を使用する。
    • 記事の日付はYYYY-MM-DD形式で当日の日付を自動的に生成する。

2. ブログの基本情報

ここでは、自分のブログの基本情報をChatGPTに伝える必要がある。例えば、

  • ブログの名前： 「わたしの素敵なブログ」
  • ブログのドメイン名： example.com

もちろん、これは自分のブログに合わせて書き換えてほしい。

3. 具体的な指示

ここからが本番だ。ChatGPTに具体的なコーディング指示を出す。

<body>要素より前の部分

1. <!DOCTYPE html>宣言から始め、<html>タグ、<head>タグ、そしてその中身を含めること。

  • HTML文書の基本構造を示す。

2. メタタグ、タイトル、OGPタグ、スタイルシートリンク、JSON-LDスクリプトなどをここに配置すること。

  • 検索エンジンやSNSでの表示、スタイルの適用に必要な情報を含める。

<html>要素の作成

以下のコードを使用する。

<html itemscope="" itemtype="https://schema.org/BlogPosting" lang="ja">
  • itemscopeとitemtype属性： 構造化データを検索エンジンに伝えるために使用する。
  • lang="ja"： 文書の言語を日本語に設定する。

<head>要素の作成

提供されたテンプレートを基に、各記事の内容に合わせて<head>要素を作成する。記事のタイトル、概要、日付、キーワードなどは、ChatGPTが記事内容に応じて自動的に推察して生成する。

<head>
    <!-- 文字コードとビューポートの設定 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- タイトルと説明 -->
    <title>記事タイトル | わたしの素敵なブログ</title>
    <meta name="description" content="記事の簡単な説明">

    <!-- スタイルシートのリンク -->
    <link rel="stylesheet" href="../styles.css">

    <!-- RSSフィード -->
    <link rel="alternate" type="application/rss+xml" title="わたしの素敵なブログ RSS Feed" href="https://example.com/feed.xml" />

    <!-- サイトマップ -->
    <link rel="sitemap" type="application/xml" title="Sitemap" href="https://example.com/sitemap.xml" />

    <!-- ファビコンと画像のプリロード -->
    <link rel="icon" type="image/x-icon" href="https://example.com/profile/favicon.ico">
    <link rel="preload" href="https://example.com/thumbnail-s/記事日付.webp" as="image" type="image/webp" />

    <!-- OGPタグ（SNSでの表示用） -->
    <meta property="og:title" content="記事タイトル">
    <meta property="og:description" content="記事の簡単な説明">
    <meta property="og:image" content="https://example.com/thumbnail-s/記事日付.webp">
    <meta property="og:url" content="https://example.com/article/記事日付.html">
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="わたしの素敵なブログ">

    <!-- Twitterカード -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="記事タイトル">
    <meta name="twitter:description" content="記事の簡単な説明">
    <meta name="twitter:image" content="https://example.com/thumbnail-s/記事日付.webp">

    <!-- JSON-LD（構造化データ） -->
    <!-- 詳細は後述します -->

    <!-- Googleタグ（アクセス解析） -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');
    </script>
</head>

ポイント：

  • タイトルや説明文、日付、画像URL： ChatGPTが記事内容から自動的に生成する。
  • ブログの名前： 自分のブログ名に置き換える。
  • トラッキングIDや画像のパス： ダミーの値なので、実際の値に置き換える必要がある。

JSON-LDの作成

JSON-LDは、検索エンジンにページの情報を伝えるための構造化データだ。<head>セクション内に以下のように追加する。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "記事タイトル",
  "image": "https://example.com/thumbnail/記事日付.png",
  "datePublished": "YYYY-MM-DD",
  "dateModified": "YYYY-MM-DD",
  "author": {
    "@type": "Person",
    "name": "著者名",
    "url": "著者のURL",
    "jobTitle": "ブロガー",
    "description": "著者の説明"
  },
  "publisher": {
    "@type": "Organization",
    "name": "わたしの素敵なブログ",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/img/index-hero.webp"
    }
  },
  "description": "記事の簡単な説明",
  "keywords": "キーワード1, キーワード2, キーワード3"
}
</script>

設定時のポイント：

  • descriptionやkeywords、datePublished、dateModifiedなどは、ChatGPTが記事内容から自動的に生成する。
  • imageやpublisher.logo.url： 実際の画像URLを使用する。
  • author情報： 著者の名前やプロフィールを入力する。
プロフィール画像

JSON-LDの記述は少し複雑に見えますが、これによって検索エンジンがコンテンツをより正確に理解できるようになります。慎重に設定していきましょう。

構文エラーを防ぐための注意点：

  • 不要な改行や空白を避ける： JSONはデリケートなので、余計なスペースや改行に注意する。
  • 文字列はダブルクォーテーションで囲む： すべての文字列は"で囲む。
  • カンマの位置： 最後の要素の後にカンマを付けないようにする。

ChatGPTでホームページ作成も？

最近、「chatgpt html生成」や「chatgpt html プラグイン」で検索してホームページを作成する人が増えている。ChatGPTを使えば、HTMLコーディングの手間を省き、効率的にウェブページを作成できる。

また、「chatgpt ホームページ作成 プロンプト」を工夫することで、より自分好みのページを生成することも可能だ。ChatGPT 画像からHTMLを生成する技術も注目されている。

まとめ

今回、ChatGPTにHTMLコーディングをしてもらうための具体的なプロンプトを紹介した。これを使えば、SEOやアクセシビリティに配慮したモバイルフレンドリーなHTMLコードを簡単に生成できる。

プロンプトを使用する際の注意点

  • 固有名詞の書き換え：プロンプト内のブログ名やドメインは、自分のブログ情報に置き換える
  • 日付やURL、記事の概要、キーワードの更新：ChatGPTが記事内容から自動的に生成
  • 画像や著者情報の更新：画像のURLや著者の情報も適切に変更する
プロフィール画像

ChatGPTとの協業で、ブログ運営がより効率的になりますよ！

ChatGPTでのHTML生成 ビジュアルまとめ

プロンプト 作成 ChatGPT 処理 HTML 生成 ガイドライン設定 HTML自動生成 最適化されたコード

ChatGPTでのHTMLコーディングに関するよくある質問

ChatGPTは複雑なHTMLコードも生成できますか？

はい、適切なプロンプトを与えることで、SEOやアクセシビリティに配慮した複雑なHTMLコードも生成できます。ただし、生成されたコードは必ず確認し、必要に応じて微調整することをお勧めします。

HTMLコーディングをChatGPTに任せるメリットは？

作業時間の大幅な短縮、人的ミスの削減、一貫性の維持が主なメリットです。特に、メタタグやJSON-LDなどの定型的な部分を自動生成できる点が大きな利点となります。

プロンプトの作成で気をつけることは？

具体的な要件を明確に示すこと、必要な要素（SEO対策、アクセシビリティ、レスポンシブデザインなど）を漏れなく指定すること、そして生成されたコードを必ず確認することが重要です。

関連記事