最近はChatGPTをはじめ、ClaudeやGeminiなど、さまざまな生成AIサービスが身近な存在になりました。
文章作成やプログラミング、画像生成、アイデア出しなど、AIを活用できる場面は日々増えています。
しかし、実際に使ってみると「思ったような回答が返ってこない」「何を入力すればいいのかわからない」と感じたことありますよね。
AIは非常に便利なツールですが、入力する内容（プロンプト）によって回答の質が大きく変わります。そのため、AIを上手に使いこなすには、適切なプロンプトを知ることが重要です！
そこで今回、実際に日常的に使用しているプロンプトだけをまとめた『AIプロンプト図鑑』を公開しました。
サイトはこちら👇
開発したきっかけ
私自身、仕事や個人開発で毎日のようにAIを活用しています。
ブログ記事の執筆、Webサイト制作、プログラミング、画像生成、SEO対策など、多くの作業をAIと一緒に進めています。
そんな中で気付いたのが、毎回ほとんど同じようなプロンプトを書いているということでした。
「以前使ったあのプロンプトを探したい」
「また一から入力するのが面倒」
「用途ごとに整理されていたら便利なのに」
このような場面が何度もありました。
そこで、自分が実際に使っているプロンプトをカテゴリごとに整理し、誰でもコピペするだけで使えるサイトとして公開することにしました！
AIプロンプト図鑑でできること
AIプロンプト図鑑では、用途別に整理された実践的なプロンプトを掲載しています。
現在は約30種類のプロンプトを公開しており、今後も実際に使用して効果があったものを中心に追加していく予定です。
対象AIに合わせてプロンプトを変えられるようにしました。
また、難易度も選択できるようにしています。
掲載しているジャンルの一例は以下のとおりです。
- ブログ・SEO対策
- Web制作
- SNS運用
- 動画制作
- 画像生成
- 仕事効率化
どれも実際の作業で使用している内容をベースにしているため、すぐに実務へ活用できます。
入力例・出力例も掲載
プロンプトだけが並んでいるサイトでは、「実際にどのような結果が返ってくるのか」がイメージしにくいことがあります。
そこでAIプロンプト図鑑では、プロンプトだけではなく、
- 入力例
- AIの出力例
- カスタマイズ方法
もあわせて掲載しています。
「この部分を書き換えれば自分用になる」というポイントも紹介しているため、初心者の方でも迷わず利用できます。
ワンクリックでコピーできる
掲載しているプロンプトは、ボタンひとつでコピーできるようになっています。
気になるプロンプトを見つけたら、そのままコピーしてChatGPTやClaude、Geminiなどへ貼り付けるだけです。
毎回ゼロから文章を考える必要がなく、作業時間を大幅に短縮できます。
特に日常的にAIを利用する方ほど、こうした小さな手間を減らすことで作業効率が大きく向上します。
お気に入り機能もあり
お気に入り機能も搭載しました。
それにより普段頻繁に使ったりするプロンプトを保存することができて、探す手間が省けるようになります。
こんな方におすすめ
AIプロンプト図鑑は、次のような方におすすめです。
- ChatGPTを使い始めたばかりの方
- ClaudeやGeminiを活用している方
- ブログを運営している方
- Web制作やプログラミングを行っている方
- SNS運用を担当している方
- AIで業務を効率化したい方
初心者だけでなく、日常的にAIを使う方にも役立つ内容を目指しています。
大変だったこと
私はReactを使ってやっと一つのサイトを作れるくらいのレベルです。
AIプロンプト図鑑を開発するにあたり、思い切ってNext.jsを採用しました。
Reactしか知らない私には少しハードルが高かった
Reactを十分に理解できているとは言えない状態でNext.jsを見ると、
- ディレクトリ構成が違う
- App Routerという考え方
- Server ComponentとClient Component
- ファイルベースルーティング
など・・・新しく覚えることが一気に増えました。
Next.jsはReactをベースにしていますが、Reactの知識に加えて独自の仕組みを理解する必要があります。
公式ドキュメントでも、Reactの基礎知識があることを前提に学習することが推奨されています。
最初は「これは無理…」というのが率直な感想でした。
でもReactと共通している部分も多かった
触ってみると、「意外にもReactでみたやつが多い！」という印象でした。
一緒なものの例は
- コンポーネントで画面を分ける考え方
- propsでデータを受け渡す
- stateを使った画面更新
- JSXでUIを書く
など。Reactとほとんど同じです。
Next.jsはReactをベースとしているため、Reactのコンポーネントという考え方をそのまま活かしながら開発できるとのこと。
「全部新しく覚え直す」というよりは、Reactを少しずつ発展させていくような感覚でした。
今はまだAI頼りな部分も多い
今回の開発ではClaude Codeの力をかなり借りました。
- エラーの原因を自力で特定する
- 追加機能を自分でつけてみる
など、まだ経験不足だと感じています。
AIがコードを書いてくれる時代とはいえ、エラーが出たときに「なぜそうなったのか」を理解できないと、修正にも時間がかかります。
そのため、現状はAIに助けてもらいながら少しずつ知識を増やしている段階です。
AIを使うからこそ基礎知識が大切
最近強く感じるのは、「AIがあるから勉強しなくていい」ではなく、「AIを使うからこそ勉強した方が効率が良い」ということです。
Reactを少し勉強していたおかげで、
- コンポーネントの役割
- データの流れ
といった部分は理解しやすくなりました。
逆に基礎知識がない部分は、AIが説明してくれても理解に時間がかかります。
AIは非常に優秀ですが、知識があるほど指示も的確になり、修正もしやすくなると実感しています。
AIはプロンプト次第で結果が変わる
同じAIであっても、入力するプロンプトが少し違うだけで、返ってくる回答の内容や品質は大きく変化します。
「AIの回答がイマイチ」と感じる場合でも、プロンプトを改善するだけで期待以上の結果が得られることも珍しくありません。
だからこそ、まずは実際に使われているプロンプトを参考にすることが、AIを使いこなす近道だと考えています。
ぜひ活用してください
AIプロンプト図鑑は、「すぐに使える実践的なプロンプト」をコンセプトに制作しました。
難しい知識は必要なく、気になったプロンプトをコピーしてAIへ貼り付けるだけで利用できます。
これからAIを使い始める方はもちろん、普段からAIを活用している方にも、新しい発見や作業効率化のヒントになるはずです。
ぜひ一度、AIプロンプト図鑑を活用して、自分に合ったプロンプトを見つけてみてください。
制作秘話は別ページで書いているので興味がある方は覗いてみてください！
この記事のカテゴリー
開発ブログ の記事をもっと見る →