ChatGPTプロンプト集：Syllabus Hackを支える記事・アプリ開発プロンプト

「Syllabus Hack」は、AIをフル活用して構築されています。

1,000語を超えるシラバス用語の整理、数百問のクイズデータ作成、そして日々の記事執筆。これらを支えているのは、試行錯誤の末に辿り着いた 厳選プロンプト たちです。

本記事では、当サイトの裏側で実際に稼働している、汎用性の高いプロンプトをピックアップしてご紹介します。

1. 記事執筆：読者の心を掴む「アウトライン生成」

単に「記事を書いて」と言うだけでは、表面的な内容になりがちです。読者のペルソナと、解決したい課題を明確に定義することが重要です。

使用プロンプト

# Role
あなたは資格試験攻略メディア「Syllabus Hack」の編集長です。

# Context
ITパスポート試験の「生成AI」分野について、初心者が挫折しないための解説記事を書きたい。

# Steps
1. 読者が抱いている「難しそう」という不安を言語化する
2. シラバスの内容（用語定義）を現実のビジネスシーンに例える
3. 最後に「これだけ覚えればOK」というチェックリストを作る

# Output
H2, H3構成のアウトライン（日本語）

2. データ加工：シラバスPDFを「クイズ形式」に変換

当サイトのクイズアプリのデータは、シラバスの原文をAIに読み込ませて生成しています。

使用プロンプト

# System
あなたはJSONデータエンジニアです。

# Task
提供するシラバスのテキストから、以下のJSONフォーマットでクイズを生成してください。

# Format
{
  "id": "fe-001",
  "question": "問題文",
  "options": ["ア", "イ", "ウ", "エ"],
  "answer": "ア",
  "explanation": "解説文（なぜ正解か、なぜ他が間違いか）"
}

# Source
[シラバスのコピー＆ペースト]

3. コード生成：Astroコンポーネントのロジック構築

React（Preact）を使用したクイズアプリのロジックや、Tailwind CSSによるスタイリングも、AIとのペアプログラミングで作成されました。

使用プロンプト

# Role
あなたはAstroとTailwind CSSに精通したシニアフロントエンドエンジニアです。

# Goal
クイズの回答を選択した際、正解なら「ふわっと緑に光る」アニメーションをButtonコンポーネントに実装したい。

# Requirements
- framer-motionは使わず、Tailwindの標準クラスかCSSアニメーションで。
- ダークモードでも視認性が高い色を選ぶこと。
- ReactのState管理と組み合わせやすいコードにして。

━━というアプローチもありますが、Astroでウェブサイトを作成すると決めたけど、使うテーマがわからない時は、「Astroでウェブサイトを作成するなら、どんなテーマがおすすめ？」と聞いてみるのも良いでしょう。

ここではクイズアプリを公開する前提だったので、TypeScrptかReactかーと悩んでいました。 それをAIに質問しながら、現在のテーマとReactを組み合わせたビルドプランになったわけです。

4. プロンプト集活用のコツ：変数を活用する

プロンプト内を [ ] などで囲み、変数化しておくと使い回しが効きます。

• [ターゲット資格]：ITパスポート、基本情報など
• [解説レベル]：小学生でもわかる、現役エンジニア向けなど

AIは一度のプロンプトで100点を出そうとするよりも、 「役割を与える」→「ステップを分ける」→「修正を繰り返す」 というプロセスを経ることで、真のパフォーマンスを発揮します。

当サイトの「学習メソッド」カテゴリでは、これらのプロンプトをさらに試験対策用に特化させた例を多数紹介しています。ぜひ併せてご覧ください。