【生成AIプロンプト入門】 テキストで表現できる出力形式
2025.05.28こんにちは、リテールアプリ共創部の戸田駿太です。
今回はテキストだけで表すことのできる生成AIの出力形式の種類や選び方を解説します。
使い方
全ての形式で〇〇の部分を各形式の名前にするとその形式で出力してくれます。
この意味合いであれば、どんなプロンプトでも問題ありません。
プロンプトの例
〇〇で出力して
生成AIの形式の解説
1. マークダウン
生成AIの出力形式のデフォルト！
大体の生成AIは何も指定しなくてもマークダウンで出力します。
基本的な文章の出力にはマークダウンが最適です。
特徴
- 軽量で読みやすい記法
- 学習コストが低い
- プレーンテキストでも読める
使うタイミング
- 特に何も出力形式を指定しないとき
- 文章を出力したい時
マークダウンの出力例
# タイトル
## サブタイトル
- リスト項目 1
- リスト項目 2
**太字** や _斜体_ も使えます。
[リンク](https://example.com)
| 機能 | 説明 |
| -------- | ------------------------ |
| 見出し | `#` で表現 |
| リスト | `-` や `*` で表現 |
| 強調 | `**` や `_` で表現 |
| リンク | `[テキスト](URL)` で表現 |
| コード | ```で囲む |
| テーブル |`|`と`-` で表現 |
実際の表示（クリックで表示）
タイトル
サブタイトル
- リスト項目 1
- リスト項目 2
太字 や 斜体 も使えます。
| 機能 | 説明 |
|---|---|
| 見出し | # で表現 |
| リスト | - や * で表現 |
| 強調 | ** や _ で表現 |
| リンク | [テキスト](URL) で表現 |
| コード | ```で囲む |
| テーブル | ` |
記法の参考リンク
2. Mermaid（マーメイド）
生成AIで図を表現したかったら一番の候補！
マーメイドの中でも色々な形式があり柔軟に図を作成できます。
自動で図を生成できますが、自分でオブジェクトを移動させることはできません⚠️
→逆に見づらく表示されることは少ないので素早く図を作成できる！
特徴
- テキストベースで図を描ける
- フローチャート、シーケンス図、ガントチャートなど多様な図に対応
- GitHub、Notion、Zenn などで直接表示可能
- 複雑な図も簡潔に表現できる
使うタイミング
- 図を生成AIで出力したい時
- デザインをあまり気にせず図を使いたい時
テキストだけだと分かりづらいな〜という時に「マーメイドで出力して」とプロンプトに書けば大抵いい感じに出力してくれます。
生成AIのアプリでマーメイドが表示できない時
以下の公式ウェブアプリに生成AIの出力をコピペすると表示、PNGなどの画像出力ができます。
マーメイドの出力例
```mermaid
graph TD
A[開始] --> B{条件分岐}
B -->|Yes| C[処理A]
B -->|No| D[処理B]
C --> E[終了]
D --> E
```
実際の表示（クリックで表示）
マーメイドの他の形式
フローチャート
テキストでの表示
```mermaid
graph TD
A[開始] --> B{条件分岐}
B -->|Yes| C[処理A]
B -->|No| D[処理B]
C --> E[終了]
D --> E
```
シーケンス図
テキストでの表示
```mermaid
sequenceDiagram
participant A as ユーザー
participant B as システム
participant C as データベース
A->>B: ログイン要求
B->>C: ユーザー情報確認
C-->>B: 認証結果
B-->>A: ログイン完了
```
ガントチャート
テキストでの表示
```mermaid
gantt
title プロジェクトスケジュール
dateFormat YYYY-MM-DD
section 設計
要件定義 :done, des1, 2024-01-01, 2024-01-15
基本設計 :done, des2, after des1, 20d
section 開発
実装 :active, dev1, 2024-02-05, 30d
テスト :dev2, after dev1, 15d
```
円グラフ
テキストでの表示
```mermaid
pie title 売上構成比
"商品A" : 42.96
"商品B" : 50.05
"商品C" : 10.01
"その他" : 5
```
Gitグラフ
テキストでの表示
```mermaid
gitGraph
commit id: "Initial commit"
branch develop
checkout develop
commit id: "Add user model"
commit id: "Add authentication"
checkout main
merge develop
commit id: "Release v1.0"
branch feature/payment
checkout feature/payment
commit id: "Add payment API"
commit id: "Add payment UI"
checkout develop
merge feature/payment
checkout main
merge develop
commit id: "Release v1.1"
```
XY Chart（散布図）
テキストでの表示
```mermaid
xychart-beta
title "売上と広告費の関係"
x-axis [0, 10, 20, 30, 40, 50]
y-axis "売上（万円）" 0 --> 100
line [10, 25, 40, 55, 70, 85]
bar [5, 20, 35, 50, 65, 80]
```
ER図
テキストでの表示
```mermaid
erDiagram
USER {
int id PK
string name
string email
}
POST {
int id PK
int user_id FK
string title
string content
}
USER ||--o{ POST : "writes"
```
どのマーメイドの形式を使うか迷ったら
とりあえず「マーメイドで出力して」と生成AIに伝えれば用途にあった形式で出力してくれます。
意図したマーメイドの形式があるならその形式を指定しましょう。
記法の参考リンク
3. HTML
ちょっとリッチにカッコよく文章や図を出力したい時に便利！
細かいデザインや動きがあるものの表現がしやすいです。
特徴
- 自由度が高いレイアウト・デザイン
- JavaScript で動的な動作を追加できる
- ブラウザで直接表示可能
- ファイルサイズが大きくなりがち
使うタイミング
- リッチなデザインで表現したい時
- 細かいレイアウト調整が必要な時
- ブラウザで直接表示したい時
HTMLの出力例
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
<style>
.highlight {
background-color: yellow;
}
.container {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>見出し</h1>
<p>これは<span class="highlight">ハイライト</span>された文章です。</p>
<button onclick="alert('クリックされました!')">ボタン</button>
</div>
</body>
</html>
このブログをHTMLで出力した時の表示
4. CSV
Excel など表計算ソフトに読み込ませたいなら必須！
特徴
- 表形式データの標準的な形式
- Excel、Google スプレッドシート、データベースで読み込み可能
- データ分析ツールとの連携が容易
- 大量のデータを効率的に扱える
使うタイミング
- 表形式のデータを出力したい時
- Excel や Google スプレッドシートで編集したい時
- データ分析ツールに読み込ませたい時
- 大量のデータを効率的に扱いたい時
CSVの出力例
名前,年齢,職業
田中太郎,28,エンジニア
佐藤花子,32,デザイナー
鈴木次郎,25,営業
まとめ
生成AIの出力形式を知っておくと、生成の表現の幅が大幅に広がります。
このブログで生成AIを使った業務効率化ができると幸いです。
前回のブログ
![[アップデート] Amazon Bedrock で Claude Sonnet 4, Claude Opus 4 が利用可能になったため概要をまとめてみた](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-e3065182082062711612153bbdcf1d96/c04359de689df2f56eb066576ab63fb5/amazon-bedrock)
