ChatGPTのプロンプトで使われる#などの記号の意味や活用方法を解説！
ChatGPTを活用しようと思っていても、チャットとしてしか使えていないという方は多くいらっしゃいます。
時々#や{}などの記号を見て「よくわからないけどこの人すごいことしてる」と思った経験のある方も多いのではないでしょうか。
今回は、ChatGPTに指示を促す「プロンプト」の記号について解説しますのでぜひ最後まで読んで参考になさってください。
記号を上手に使って、ChatGPTと何度も会話をすることなく1発で良い回答を得られるようになりましょう。
関連記事：プロンプト集「プロンプトパーク」とは？ChatGPTや他のサービスとも比較！
INDEX
プロンプトとは
本題ではないので軽い説明で流しますが、プロンプトとは、英語で「促す」という意味です。
心理学やIT分野でもプロンプトは、それこそ「促す」という意味で使われます。
そしてAIの分野でも、この「プロンプト」という言葉は、AIへの指示を「促す」という意味で使われています。
関連記事：ChatGPTのプロンプトとは？作成のコツや活用できる例文も紹介
基本はマークダウン記法
ChatGPTへのプロンプトの記号は、基本的に「マークダウン記法」と呼ばれるものとほぼ同じです。
「ほぼ」と言ったのは、多少間違えていてもChatGPTなどのLLM（大規模言語モデル）の性質上、それなりに補完して解釈してくれるためです。
関連記事：LLM（大規模言語モデル）入門〜生成AI時代に遅れないために〜
マークダウン記法の一例
ではマークダウン記法の一例をご紹介します。
#
最もよく見る「#」は「見出し」を意味します。
#、##、など連ねて使用することが可能で、6個まで入力できます。
#が少ないほど大きな見出しを意味しています。
#は大見出し
##は中見出し
###は小見出し
のように使います。
{{}}
{{}}は変数を意味します。
プロンプトを使い回す時に{{}}の中身だけ入れ替えれば良いので便利です。
-、*
-も*も、リストを表します。
「箇条書きで入力する」というのはプロンプトの基本の一つですが、-や*を使うことで箇条書きであることが伝わりやすくなります。
**、__
これらの記号は、強調に使われます。
見にくいですが、__はアンダーバー2個です。
太字で出力してほしい時などに、**太字**や、__太字__と出力するように指示してあげるとChatGPT側も理解しやすくなります。
“`
“`はコードブロックを意味します。
ChatGPTにコーディングをしてほしい時や、コードを元に指示を促す時に使用するとChatGPTも理解しやすくなります。
|
|は表を作る時の記号です。
単体で使うことはほぼなく、
| 列1 | 列2 | 列3 |
のような形で出力するように指示を出すことができます。
実践例
では、実践してみましょう。
説明文の生成
プロンプト
#命令
三角関数について#条件 に従って解説してください。
#条件
*回答はマークダウン記法を使用
*まず簡単にサインとコサインの説明を100字程度で行うこと
*サインとコサインの2乗の和は1になることをコードブロック内で記述すること
*最後に表形式で代表的な値を記述すること
|---|θ=0|θ=π/2|θ=π|
|sinθ|---|---|---|
|cosθ|---|---|---|
## 🗒️ Answer
サイン（sin）とコサイン（cos）は、三角関数の中で最も基本的な関数です。三角関数は、直角三角形の2つの辺の長さの比率または単位円上の点の座標を用いて角度の大きさを関連付ける関数です。具体的には、サインは直角三角形の対辺と斜辺の長さの比、コサインは隣辺と斜辺の長さの比を表します[[1](引用元URL)]。
サインとコサインの関係性は以下の式で表されます。
“`
sin^2(θ) + cos^2(θ) = 1
“`
そして、サインとコサインの代表的な値は以下の表に示されています。
|—|θ=0|θ=π/2|θ=π|
引用元：ChatGPT
|—|—|—|—|
|sinθ|0|1|0|
|cosθ|1|0|-1|
コピーペーストすると見た目の裏側でどのようになっているかがよくわかりますね。
コーディング
プロンプト
#命令
以下の#条件を満たすLPをHTMLの<body>タグ内だけ作成してください
#条件
*新商品「しょうひん」を訴求する目的
*「しょうひん」は子供から大人まで使える最強のマネジメントツール
*以下のタグで、内容は考えてください。
h1:魅力的なタイトル
h2:子供から大人まで使えることを訴求
ここに商品リンク（URLはなくて構いません）
*残りはうまいこと作ってください
こんないい加減な指示でも考えてくれます。
<body>
<div class="lp-container">
<!-- メインタイトル -->
<h1>新登場！「しょうひん」: あなたの生活を革命するマネジメントツール</h1>
<!-- サブタイトル -->
<h2>子供から大人まで、全ての世代に適した使いやすさ</h2>
<!-- 商品リンク -->
<a href="#" class="product-link">「しょうひん」の詳細を見る</a>
<!-- 特徴のリスト -->
<section class="features">
<h2>「しょうひん」の3大特徴</h2>
<ul>
<li>1. インターフェースがシンプルで直感的</li>
<li>2. 多機能ながらも軽快な動作</li>
<li>3. カスタマイズ可能な設定で、自分だけのマネジメント環境を構築</li>
</ul>
</section>
<!-- テストモニアル -->
<section class="testimonials">
<h2>ユーザーの声</h2>
<blockquote>
「しょうひん」を使ってから、仕事もプライベートもスムーズになった！子供も楽しみながら使っているので、家族みんなのおすすめツールです。
</blockquote>
<cite>- 山田太郎</cite>
</section>
<!-- CTA (コール・トゥ・アクション) -->
<section class="cta">
<h2>今すぐ「しょうひん」を体験しよう！</h2>
<a href="#" class="btn-get-started">今すぐ始める</a>
</section>
</div>
</body><body>
引用元：ChatGPT
<div class=”lp-container”>
<!– メインタイトル –>
<h1>新登場！「しょうひん」: あなたの生活を革命するマネジメントツール</h1>
<!– サブタイトル –>
<h2>子供から大人まで、全ての世代に適した使いやすさ</h2>
<!– 商品リンク –>
<a href=”#” class=”product-link”>「しょうひん」の詳細を見る</a>
<!– 特徴のリスト –>
<section class=”features”>
<h2>「しょうひん」の3大特徴</h2>
<ul>
<li>1. インターフェースがシンプルで直感的</li>
<li>2. 多機能ながらも軽快な動作</li>
<li>3. カスタマイズ可能な設定で、自分だけのマネジメント環境を構築</li>
</ul>
</section>
<!– テストモニアル –>
<section class=”testimonials”>
<h2>ユーザーの声</h2>
<blockquote>
「しょうひん」を使ってから、仕事もプライベートもスムーズになった！子供も楽しみながら使っているので、家族みんなのおすすめツールです。
</blockquote>
<cite>- 山田太郎</cite>
</section>
<!– CTA (コール・トゥ・アクション) –>
<section class=”cta”>
<h2>今すぐ「しょうひん」を体験しよう！</h2>
<a href=”#” class=”btn-get-started”>今すぐ始める</a>
</section>
</div>
</body>
表示するとこんな感じです。
せっかくなので装飾してみます。
プロンプト
楽しい感じでCSS追加してください
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>しょうひん紹介ページ</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #FFD1DC;
color: #333;
text-align: center;
padding: 40px 0;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
color: #FF4B82;
}
p {
font-size: 1.2em;
margin-bottom: 30px;
line-height: 1.5;
}
.container {
background-color: #FFF3F8;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 0 auto;
}
.button {
display: inline-block;
background-color: #FF4B82;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #FF3366;
}
</style>
</head>
<body>
<div class="container">
<h1>新商品「しょうひん」登場！</h1>
<p>「しょうひん」はあなたの日常をもっと楽しく、もっと便利にします。このチャンスをお見逃しなく！</p>
<a href="#" class="button">詳しく見る</a>
</div>
</body>
</html>ChatGPTの回答
<!DOCTYPE html>
引用元：ChatGPT
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>しょうひん紹介ページ</title>
<style>
body {
font-family: ‘Arial’, sans-serif;
background-color: #FFD1DC;
color: #333;
text-align: center;
padding: 40px 0;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
color: #FF4B82;
}
p {
font-size: 1.2em;
margin-bottom: 30px;
line-height: 1.5;
}
.container {
background-color: #FFF3F8;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 0 auto;
}
.button {
display: inline-block;
background-color: #FF4B82;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #FF3366;
}
</style>
</head>
<body>
<div class=”container”>
<h1>新商品「しょうひん」登場！</h1>
<p>「しょうひん」はあなたの日常をもっと楽しく、もっと便利にします。このチャンスをお見逃しなく！</p>
<a href=”#” class=”button”>詳しく見る</a>
</div>
</body>
</html>
で、表示すると以下のような感じになりました。
まとめ
マークダウン記法を使えば確かに出力精度は上がります。
ただ、GPTの仕組み上、多少ミスがあっても割といい出力はしてくれます。
ぜひプロンプトパークでプロンプトの練習をしてみてはいかがでしょうか。
関連記事：プロンプト文例集「プロンプトパーク」の使い方・おすすめの人を紹介！
